[EuiCode][EuiCodeBlock] Various cleanups and bug fixes

CHANGELOG.md

@@ -5,6 +5,14 @@
 **Bug fixes**
 
 - Fixed an `EuiDataGrid` row height bug for grids that set a default `lineCount` and also used `rowHeights` to set row-specific `lineCount`s ([#5376](https://github.com/elastic/eui/pull/5376))
+- Fixed `EuiCode` line-wrapping ([#5379](https://github.com/elastic/eui/pull/5379))
+- Fixed `EuiCodeBlock` not passing `data-test-subj` or `aria-label` to virtualized & full-screen code blocks ([#5379](https://github.com/elastic/eui/pull/5379))
+- Fixed `EuiCodeBlock` not closing full-screen mode when the Escape key is pressed ([#5379](https://github.com/elastic/eui/pull/5379))
+- Fixed `EuiCodeBlock`'s full-screen mode to use a large font and padding size & added several missing wrapper classes ([#5379](https://github.com/elastic/eui/pull/5379))
+
+**Theme: Amsterdam**
+
+- Fixed `EuiCodeBlock` not properly increasing large font sizes on Amsterdam ([#5379](https://github.com/elastic/eui/pull/5379))
 
 ## [`41.1.0`](https://github.com/elastic/eui/tree/v41.1.0)
 

src-docs/src/views/code/code_block.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { EuiCodeBlock, EuiSpacer } from '../../../../src/components';
+
+const jsCode = `/* I'm an example of JS */
+import React from 'react';`;
+
+export default () => (
+  <>
+    <EuiCodeBlock language="jsx" fontSize="m" paddingSize="m">
+      {jsCode}
+    </EuiCodeBlock>
+
+    <EuiSpacer />
+
+    <EuiCodeBlock language="jsx" paddingSize="none" transparentBackground>
+      {jsCode}
+    </EuiCodeBlock>
+  </>
+);

src-docs/src/views/code/code_block_copy.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { EuiCodeBlock } from '../../../../src/components';
+
+const htmlCode = `<!-- I'm an example of HTML -->
+<h1>Hello world!</h1>
+<p>Lorem ipsum dolor sit amet.</p>`;
+
+export default () => (
+  <EuiCodeBlock language="html" isCopyable>
+    {htmlCode}
+  </EuiCodeBlock>
+);

src-docs/src/views/code/code_block_overflow.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { EuiCodeBlock } from '../../../../src/components';
+
+const sqlCode = `-- I'm an example of SQL
+CREATE TABLE "topic" (
+  "id" serial NOT NULL PRIMARY KEY,
+  "forum_id" integer NOT NULL,
+  "subject" varchar(255) NOT NULL
+);
+ALTER TABLE "topic"
+ADD CONSTRAINT forum_id FOREIGN KEY ("forum_id")
+REFERENCES "forum" ("id");
+
+insert into "topic" ("forum_id", "subject")
+values (2, 'D''artagnian');`;
+
+export default () => (
+  <EuiCodeBlock language="sql" overflowHeight={150}>
+    {sqlCode}
+  </EuiCodeBlock>
+);

src-docs/src/views/code/code_block_pre.js → src-docs/src/views/code/code_block_pre.tsx

@@ -3,19 +3,16 @@ import React from 'react';
 import { EuiCodeBlock } from '../../../../src/components';
 
 export default () => (
-  <div>
-    <EuiCodeBlock
-      language="jsx"
-      fontSize="m"
-      paddingSize="m"
-      color="dark"
-      overflowHeight={300}
-      whiteSpace="pre"
-      isCopyable
-    >
-      {`export default () => (
+  <EuiCodeBlock
+    language="jsx"
+    fontSize="m"
+    paddingSize="m"
+    overflowHeight={300}
+    isCopyable
+    whiteSpace="pre"
+  >
+    {`export default () => (
   <div>In this example, the whiteSpace property is set to pre. All the whitespaces will be kept as is and the text only wraps when line breaks are in the content.</div>
 );`}
-    </EuiCodeBlock>
-  </div>
+  </EuiCodeBlock>
 );

src-docs/src/views/code/code_example.js

@@ -19,7 +19,29 @@ const codeSnippet = '<EuiCode>Text to be formatted</EuiCode>';
 
 import CodeBlock from './code_block';
 const codeBlockSource = require('!!raw-loader!./code_block');
-const codeBlockSnippet = `<EuiCodeBlock language="html" paddingSize="s" isCopyable>
+const codeBlockSnippet = `<EuiCodeBlock language="jsx" fontSize="m" paddingSize="m">
+  { \`/* I'm an example of JS */
+  import React from 'react';\` }
+</EuiCodeBlock>
+`;
+
+import CodeBlockCopy from './code_block_copy';
+const codeBlockCopySource = require('!!raw-loader!./code_block_copy');
+const codeBlockCopySnippet = `<EuiCodeBlock language="html" isCopyable>
+{ \`<h1>Title</h1>\` }
+</EuiCodeBlock>
+`;
+
+import CodeBlockOverflow from './code_block_overflow';
+const codeBlockOverflowSource = require('!!raw-loader!./code_block_overflow');
+const codeBlockOverflowSnippet = `<EuiCodeBlock language="html" overflowHeight={300}>
+{ \`<h1>Title</h1>\` }
+</EuiCodeBlock>
+`;
+
+import CodeBlockPre from './code_block_pre';
+const codeBlockPreSource = require('!!raw-loader!./code_block_pre');
+const codeBlockPreSnippet = `<EuiCodeBlock language="html" whiteSpace="pre">
 { \`<h1>Title</h1>\` }
 </EuiCodeBlock>
 `;
@@ -30,6 +52,12 @@ const codeBlockLinesSnippet = `<EuiCodeBlock language="json" lineNumbers>
 {}
 </EuiCodeBlock>
 `;
+import CodeBlockLinesHighlight from './line_numbers_highlight';
+const codeBlockLinesHighlightSource = require('!!raw-loader!./line_numbers_highlight');
+const codeBlockLinesHighlightSnippet = `<EuiCodeBlock language="json" lineNumbers={{ start: 32, highlight: '32, 34-37, 40' }}>
+{}
+</EuiCodeBlock>
+`;
 
 import CodeBlockVirtualized from './virtualized';
 const codeBlockVirtualizedSource = require('!!raw-loader!./virtualized');
@@ -41,9 +69,6 @@ const codeBlockVirtualizedSnippet = `<EuiCodeBlock language="json" isVirtualized
 import CodeBlockVirtualizedFlyout from './virtualized_flyout';
 const codeBlockVirtualizedFlyoutSource = require('!!raw-loader!./virtualized_flyout');
 
-import CodeBlockPre from './code_block_pre';
-const codeBlockPreSource = require('!!raw-loader!./code_block_pre');
-
 export const CodeExample = {
   title: 'Code',
   intro: (
@@ -70,8 +95,7 @@ export const CodeExample = {
           <EuiLink external href="https://prismjs.com/#supported-languages">
             all language syntaxes
           </EuiLink>{' '}
-          supported by the
-          <EuiCode>prism</EuiCode>{' '}
+          supported by the <EuiCode>prism</EuiCode>{' '}
           <EuiLink external href="https://prismjs.com/">
             library
           </EuiLink>
@@ -81,8 +105,8 @@ export const CodeExample = {
         <p>
           JSX code (often React) has distinct language syntaxes from the base
           JavaScript and TypeScript languages. For these instances, use{' '}
-          <EuiCode>language=&quot;jsx&quot;</EuiCode> or{' '}
-          <EuiCode>language=&quot;tsx&quot;</EuiCode>.
+          <EuiCode language="jsx">language=&quot;jsx&quot;</EuiCode> or{' '}
+          <EuiCode language="tsx">language=&quot;tsx&quot;</EuiCode>.
         </p>
       </EuiText>
     </>
@@ -118,16 +142,69 @@ export const CodeExample = {
       text: (
         <p>
           <strong>EuiCodeBlock</strong> can be used to create multi-line code
-          blocks. Copy and fullscreen buttons can be enabled via the
-          <EuiCode>isCopyable</EuiCode> and <EuiCode>overflowHeight</EuiCode>
-          props, respectively.
+          blocks with configurable font and padding sizes.
         </p>
       ),
       snippet: codeBlockSnippet,
       props: { EuiCodeBlock },
       demo: <CodeBlock />,
       playground: codeBlockConfig,
     },
+    {
+      text: (
+        <p>
+          Adding the <EuiCode>isCopyable</EuiCode> prop allows users to copy the
+          text content of the code block.
+        </p>
+      ),
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: codeBlockCopySource,
+        },
+      ],
+      snippet: codeBlockCopySnippet,
+      props: { EuiCodeBlock },
+      demo: <CodeBlockCopy />,
+    },
+    {
+      text: (
+        <p>
+          For long content, you can set an <EuiCode>overflowHeight</EuiCode>{' '}
+          which will scroll if the text exceeds that height, and allows users to
+          view the code in full-screen mode.
+        </p>
+      ),
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: codeBlockOverflowSource,
+        },
+      ],
+      snippet: codeBlockOverflowSnippet,
+      props: { EuiCodeBlock },
+      demo: <CodeBlockOverflow />,
+    },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: codeBlockPreSource,
+        },
+      ],
+      text: (
+        <p>
+          By default, the <EuiCode>whiteSpace</EuiCode> property is set to{' '}
+          <EuiCode>pre-wrap</EuiCode>. This makes the text wrap when needed. You
+          can, however, pass <EuiCode>pre</EuiCode> to the{' '}
+          <EuiCode>whiteSpace</EuiCode> prop and the text won&apos;t wrap unless
+          line breaks are in the content.
+        </p>
+      ),
+      props: { EuiCodeBlock },
+      snippet: codeBlockPreSnippet,
+      demo: <CodeBlockPre />,
+    },
     {
       title: 'Line numbers',
       source: [
@@ -138,17 +215,34 @@ export const CodeExample = {
       ],
       text: (
         <p>
-          To render line numbers, add <EuiCode>lineNumbers</EuiCode>, and
-          optionally change the starting number and/or visually highlight
-          certain lines by passing a configuration object:{' '}
+          To render line numbers, you can add <EuiCode>lineNumbers</EuiCode> as
+          boolean flag.
+        </p>
+      ),
+      props: { EuiCodeBlock },
+      snippet: codeBlockLinesSnippet,
+      demo: <CodeBlockLines />,
+    },
+    {
+      text: (
+        <p>
+          You can also optionally change the starting number and/or visually
+          highlight certain lines by passing a configuration object:{' '}
           <EuiCode>
             {'lineNumbers={{ start: 32, highlight: "32, 34-37, 40" }}'}
           </EuiCode>
+          .
         </p>
       ),
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: codeBlockLinesHighlightSource,
+        },
+      ],
       props: { EuiCodeBlock },
-      snippet: codeBlockLinesSnippet,
-      demo: <CodeBlockLines />,
+      snippet: codeBlockLinesHighlightSnippet,
+      demo: <CodeBlockLinesHighlight />,
     },
     {
       title: 'Code block virtualization',
@@ -187,25 +281,5 @@ export const CodeExample = {
       ),
       demo: <CodeBlockVirtualizedFlyout />,
     },
-    {
-      title: 'Code block and white-space',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: codeBlockPreSource,
-        },
-      ],
-      text: (
-        <p>
-          By default, the <EuiCode>whiteSpace</EuiCode> property is set to{' '}
-          <EuiCode>pre-wrap</EuiCode>. This makes the text wrap when needed. You
-          can, however, pass <EuiCode>pre</EuiCode> to the{' '}
-          <EuiCode>whiteSpace</EuiCode> prop and the text won&apos;t wrap unless
-          line breaks are in the content.
-        </p>
-      ),
-      props: { EuiCodeBlock },
-      demo: <CodeBlockPre />,
-    },
   ],
 };