[EuiCode][EuiCodeBlock] Various cleanups and bug fixes

CHANGELOG.md

@@ -3,6 +3,16 @@
 **Bug fixes**
 
 - Fixed an `EuiDataGrid` bug where paginated overflowing data grids could become unscrollable when `rowCount` changed ([#5400](https://github.com/elastic/eui/pull/5400))
+- 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 virtualized `EuiCodeBlock`s blanking out when entering & exiting full-screen mode ([#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))
+- Fixed `EuiCodeBlock` broken line wrapping when using virtualization ([#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.2.1`](https://github.com/elastic/eui/tree/v41.2.1)
 

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>
 );