Fix virtualized code blocks broken line wrapping

- because react-window virtualization sets the same height for each line, we need to enforce a white-space of `pre` for virtaulization

- Fix incorrect type union not actually enforcing `overflowHeight` (isVirtualized needs to be set to `false`), and add unit tests with ts-expect-error for incorrect props

- Improve prop docs dev experience slightly, move default comment blocks to to main props interface and have the ExclusiveUnion only handle prop differences

CHANGELOG.md

@@ -8,6 +8,7 @@
 - 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**
 

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

@@ -253,12 +253,23 @@ export const CodeExample = {
         },
       ],
       text: (
-        <p>
-          For large blocks of code, add <EuiCode>isVirtualized</EuiCode> to
-          reduce the number of rendered rows and improve load times. Note that{' '}
-          <EuiCode>overflowHeight</EuiCode> is required when using this
-          configuration.
-        </p>
+        <>
+          <p>
+            For large blocks of code, add <EuiCode>isVirtualized</EuiCode> to
+            reduce the number of rendered rows and improve load times. Note that
+            when using virtualization:
+          </p>
+          <ul>
+            <li>
+              <EuiCode>overflowHeight</EuiCode> is required
+            </li>
+            <li>
+              <EuiCode>whiteSpace</EuiCode> is enforced as{' '}
+              <EuiCode>pre</EuiCode>, and cannot be set to{' '}
+              <EuiCode>pre-wrap</EuiCode>
+            </li>
+          </ul>
+        </>
       ),
       props: { EuiCodeBlock },
       snippet: codeBlockVirtualizedSnippet,

src/components/code/__snapshots__/code_block.test.tsx.snap

@@ -769,7 +769,7 @@ exports[`EuiCodeBlock virtualization renders a virtualized code block 1`] = `
     data-eui="EuiAutoSizer"
   >
     <pre
-      class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap euiCodeBlock__pre--isVirtualized"
+      class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePre euiCodeBlock__pre--isVirtualized"
       style="position:relative;height:600px;width:600px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
       tabindex="0"
     >

src/components/code/code_block.test.tsx

@@ -8,7 +8,7 @@
 
 import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
-import { mount, render } from 'enzyme';
+import { mount, render, shallow } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { requiredProps } from '../../test/required_props';
 
@@ -199,6 +199,28 @@ describe('EuiCodeBlock', () => {
       );
       expect(component).toMatchSnapshot();
     });
+
+    describe('type checks', () => {
+      it('requires overflowHeight', () => {
+        // @ts-expect-error should expect overflowHeight
+        shallow(<EuiCodeBlock isVirtualized overflowHeight={undefined} />);
+      });
+
+      it('only allows whiteSpace of pre', () => {
+        shallow(
+          // @ts-expect-error should only accept "pre"
+          <EuiCodeBlock
+            isVirtualized
+            overflowHeight={50}
+            whiteSpace="pre-wrap"
+          />
+        );
+        // OK
+        shallow(
+          <EuiCodeBlock isVirtualized overflowHeight={50} whiteSpace="pre" />
+        );
+      });
+    });
   });
 
   describe('line numbers', () => {

src/components/code/code_block.tsx

@@ -68,25 +68,17 @@ const paddingSizeToClassNameMap: { [paddingSize in PaddingSize]: string } = {
 
 export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
 
-// overflowHeight is required when using virtualization
+// This exclusive union enforces specific props based on isVirtualized
 type VirtualizedOptionProps = ExclusiveUnion<
   {
-    /**
-     * Renders code block lines virtually.
-     * Useful for improving load times of large code blocks.
-     * `overflowHeight` is required when using this configuration.
-     */
     isVirtualized: true;
-    /**
-     * Sets the maximum container height.
-     * Accepts a pixel value (`300`) or a percentage (`'100%'`)
-     * Ensure the container has calcuable height when using a percentage
-     */
     overflowHeight: number | string;
+    whiteSpace?: 'pre';
   },
   {
-    isVirtualized?: boolean;
+    isVirtualized?: false;
     overflowHeight?: number | string;
+    whiteSpace?: 'pre' | 'pre-wrap';
   }
 >;
 
@@ -117,6 +109,22 @@ export type EuiCodeBlockProps = EuiCodeSharedProps & {
    * `{ start: 100, highlight: '1, 5-10, 20-30, 40' }`
    */
   lineNumbers?: boolean | LineNumbersConfig;
+
+  /**
+   * Sets the maximum container height.
+   * Accepts a pixel value (`300`) or a percentage (`'100%'`)
+   * Ensure the container has calcuable height when using a percentage
+   */
+  overflowHeight?: number | string;
+
+  /**
+   * Renders code block lines virtually.
+   * Useful for improving load times of large code blocks.
+   *
+   * When using this configuration, `overflowHeight` is required and
+   * `whiteSpace` can only be `pre`.
+   */
+  isVirtualized?: boolean;
 } & VirtualizedOptionProps;
 
 export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
@@ -209,8 +217,9 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
   );
 
   const preClasses = classNames('euiCodeBlock__pre', {
-    'euiCodeBlock__pre--whiteSpacePre': whiteSpace === 'pre',
-    'euiCodeBlock__pre--whiteSpacePreWrap': whiteSpace === 'pre-wrap',
+    'euiCodeBlock__pre--whiteSpacePre': whiteSpace === 'pre' || isVirtualized,
+    'euiCodeBlock__pre--whiteSpacePreWrap':
+      whiteSpace === 'pre-wrap' && !isVirtualized,
     'euiCodeBlock__pre--isVirtualized': isVirtualized,
   });
   const preFullscreenProps = useMemo(