Added option to wrap lines in EuiCodeBlock

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `whiteSpace ` prop to `EuiCodeBlock` ([#3103](https://github.com/elastic/eui/pull/3103))
 - Added `sortMatchesBy` prop for `EuiComboBox` ([#3089](https://github.com/elastic/eui/pull/3089))
 - Added `prepend` and `append` ability to `EuiFieldPassword` ([#3122](https://github.com/elastic/eui/pull/3122))
 - Added `Enter` key press functionality to `EuiSuperDatePicker` ([#3048](https://github.com/elastic/eui/pull/3048))

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

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { EuiCodeBlock, EuiSpacer } from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiCodeBlock
+      language="js"
+      fontSize="m"
+      paddingSize="m"
+      color="dark"
+      overflowHeight={300}
+      whiteSpace="pre"
+      isCopyable>
+      {`export default () => (
+        <div>
+          <EuiCodeBlock
+            language="js"
+            fontSize="m"
+            paddingSize="m"
+            color="dark"
+            overflowHeight={300}
+            whiteSpace="pre"
+            isCopyable>
+              <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>
+
+            <EuiSpacer />
+          </div>
+        );`}
+    </EuiCodeBlock>
+
+    <EuiSpacer />
+  </div>
+);

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

@@ -15,10 +15,14 @@ import CodeBlock from './code_block';
 const codeBlockSource = require('!!raw-loader!./code_block');
 const codeBlockHtml = renderToHtml(CodeBlock);
 const codeBlockSnippet = `<EuiCodeBlock language="html" paddingSize="s" isCopyable>
-  { \`<h1>Title</h1>\` }
+{ \`<h1>Title</h1>\` }
 </EuiCodeBlock>
 `;
 
+import CodeBlockPre from './code_block_pre';
+const codeBlockPreSource = require('!!raw-loader!./code_block_pre');
+const codeBlockPreHtml = renderToHtml(CodeBlockPre);
+
 export const CodeExample = {
   title: 'Code',
   sections: [
@@ -67,5 +71,29 @@ export const CodeExample = {
       props: { EuiCodeBlockImpl },
       demo: <CodeBlock />,
     },
+    {
+      title: 'CodeBlock and white-space',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: codeBlockPreSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: codeBlockPreHtml,
+        },
+      ],
+      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: { EuiCodeBlockImpl },
+      demo: <CodeBlockPre />,
+    },
   ],
 };

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

@@ -5,7 +5,7 @@ exports[`EuiCodeBlockImpl block highlights javascript code, adding "js" class 1`
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge"
 >
   <pre
-    class="euiCodeBlock__pre"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code js hljs javascript"
@@ -19,7 +19,26 @@ exports[`EuiCodeBlockImpl block renders a pre block tag 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge testClass1 testClass2"
 >
   <pre
-    class="euiCodeBlock__pre"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
+  >
+    <code
+      aria-label="aria-label"
+      class="euiCodeBlock__code"
+      data-test-subj="test subject string"
+    >
+      var some = 'code';
+console.log(some);
+    </code>
+  </pre>
+</div>
+`;
+
+exports[`EuiCodeBlockImpl block renders a pre block tag with a css class modifier 1`] = `
+<div
+  class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge testClass1 testClass2"
+>
+  <pre
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePre"
   >
     <code
       aria-label="aria-label"
@@ -38,7 +57,7 @@ exports[`EuiCodeBlockImpl block renders with transparent background 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--transparentBackground"
 >
   <pre
-    class="euiCodeBlock__pre"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code"

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

@@ -3,7 +3,7 @@
 exports[`EuiCodeBlock dynamic content updates DOM when input changes 1`] = `
 "<div>
   <div class=\\"euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge\\">
-    <pre class=\\"euiCodeBlock__pre\\">
+    <pre class=\\"euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap\\">
       <code class=\\"euiCodeBlock__code javascript hljs\\">
         <span class=\\"hljs-keyword\\">const</span>value =
         <span class=\\"hljs-string\\">'State 1'</span>
@@ -16,7 +16,7 @@ exports[`EuiCodeBlock dynamic content updates DOM when input changes 1`] = `
 exports[`EuiCodeBlock dynamic content updates DOM when input changes 2`] = `
 "<div>
   <div class=\\"euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge\\">
-    <pre class=\\"euiCodeBlock__pre\\">
+    <pre class=\\"euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap\\">
       <code class=\\"euiCodeBlock__code javascript hljs\\">
         <span class=\\"hljs-keyword\\">const</span>value =
         <span class=\\"hljs-string\\">'State 2'</span>
@@ -31,7 +31,7 @@ exports[`EuiCodeBlock props fontSize l is rendered 1`] = `
   class="euiCodeBlock euiCodeBlock--fontLarge euiCodeBlock--paddingLarge"
 >
   <pre
-    class="euiCodeBlock__pre"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code"
@@ -48,7 +48,7 @@ exports[`EuiCodeBlock props fontSize m is rendered 1`] = `
   class="euiCodeBlock euiCodeBlock--fontMedium euiCodeBlock--paddingLarge"
 >
   <pre
-    class="euiCodeBlock__pre"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code"
@@ -65,7 +65,7 @@ exports[`EuiCodeBlock props fontSize s is rendered 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge"
 >
   <pre
-    class="euiCodeBlock__pre"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code"
@@ -82,7 +82,7 @@ exports[`EuiCodeBlock props isCopyable is rendered 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--hasControls"
 >
   <pre
-    class="euiCodeBlock__pre"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code"
@@ -122,7 +122,7 @@ exports[`EuiCodeBlock props language is rendered 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge"
 >
   <pre
-    class="euiCodeBlock__pre"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code html hljs xml"
@@ -140,7 +140,7 @@ exports[`EuiCodeBlock props overflowHeight is rendered 1`] = `
   style="max-height: 200px;"
 >
   <pre
-    class="euiCodeBlock__pre"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
     style="max-height: 200px;"
   >
     <code
@@ -173,7 +173,7 @@ exports[`EuiCodeBlock props paddingSize l is rendered 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge"
 >
   <pre
-    class="euiCodeBlock__pre"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code"
@@ -190,7 +190,7 @@ exports[`EuiCodeBlock props paddingSize m is rendered 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingMedium"
 >
   <pre
-    class="euiCodeBlock__pre"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code"
@@ -207,7 +207,7 @@ exports[`EuiCodeBlock props paddingSize none is rendered 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall"
 >
   <pre
-    class="euiCodeBlock__pre"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code"
@@ -224,7 +224,7 @@ exports[`EuiCodeBlock props paddingSize s is rendered 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingSmall"
 >
   <pre
-    class="euiCodeBlock__pre"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code"
@@ -241,7 +241,7 @@ exports[`EuiCodeBlock props transparentBackground is rendered 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--transparentBackground"
 >
   <pre
-    class="euiCodeBlock__pre"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code"
@@ -258,7 +258,7 @@ exports[`EuiCodeBlock renders a code block 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge testClass1 testClass2"
 >
   <pre
-    class="euiCodeBlock__pre"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       aria-label="aria-label"

src/components/code/_code_block.scss

@@ -9,6 +9,13 @@
     height: 100%;
     overflow: auto;
     display: block;
+  }
+
+  .euiCodeBlock__pre--whiteSpacePre {
+    white-space: pre;
+  }
+
+  .euiCodeBlock__pre--whiteSpacePreWrap {
     white-space: pre-wrap;
   }
 

src/components/code/_code_block.test.tsx

@@ -68,5 +68,14 @@ describe('EuiCodeBlockImpl', () => {
 
       expect(snapshotCodeBlock(component)).toMatchSnapshot();
     });
+
+    test('renders a pre block tag with a css class modifier', () => {
+      const component = mount(
+        <EuiCodeBlockImpl inline={false} whiteSpace="pre" {...requiredProps}>
+          {code}
+        </EuiCodeBlockImpl>
+      );
+      expect(snapshotCodeBlock(component)).toMatchSnapshot();
+    });
   });
 });

src/components/code/_code_block.tsx

@@ -55,6 +55,12 @@ interface Props {
   overflowHeight?: number;
   paddingSize: PaddingSize;
   transparentBackground: boolean;
+  /**
+   * Specify how `white-space` inside the element is handled.
+   * `pre` respects line breaks/white space but doesn't force them to wrap the line
+   * `pre-wrap` respects line breaks/white space but does force them to wrap the line when necessary.
+   */
+  whiteSpace?: 'pre' | 'pre-wrap';
 }
 
 interface State {
@@ -71,6 +77,7 @@ export class EuiCodeBlockImpl extends Component<Props, State> {
     paddingSize: 'l',
     fontSize: 's',
     isCopyable: false,
+    whiteSpace: 'pre-wrap',
   };
 
   constructor(props: Props) {
@@ -152,6 +159,7 @@ export class EuiCodeBlockImpl extends Component<Props, State> {
       paddingSize,
       transparentBackground,
       isCopyable,
+      whiteSpace,
       ...otherProps
     } = this.props;
 
@@ -169,6 +177,11 @@ export class EuiCodeBlockImpl extends Component<Props, State> {
 
     const codeClasses = classNames('euiCodeBlock__code', language);
 
+    const preClasses = classNames('euiCodeBlock__pre', {
+      'euiCodeBlock__pre--whiteSpacePre': whiteSpace === 'pre',
+      'euiCodeBlock__pre--whiteSpacePreWrap': whiteSpace === 'pre-wrap',
+    });
+
     const optionalStyles: CSSProperties = {};
 
     if (overflowHeight) {
@@ -286,7 +299,7 @@ export class EuiCodeBlockImpl extends Component<Props, State> {
           <EuiOverlayMask>
             <EuiFocusTrap clickOutsideDisables={true}>
               <div className={fullScreenClasses}>
-                <pre className="euiCodeBlock__pre">
+                <pre className={preClasses}>
                   <code
                     ref={ref => {
                       this.codeFullScreen = ref;
@@ -318,7 +331,7 @@ export class EuiCodeBlockImpl extends Component<Props, State> {
                 <pre
                   ref={innerTextRef}
                   style={optionalStyles}
-                  className="euiCodeBlock__pre">
+                  className={preClasses}>
                   {codeSnippet}
                 </pre>