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,36 @@
+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}
+            isCopyable>
+              <div>
+              Phasellus posuere quam neque, ac tristique ipsum pulvinar non. Sed ultricies enim nibh, vel ullamcorper tortor commodo sed. Nam ut egestas enim. Pellentesque commodo tempus sapien nec lobortis. Suspendisse suscipit quis lacus quis tincidunt. Aenean pulvinar eros vel felis maximus tristique. Sed rutrum enim quis vestibulum dapibus. Aenean rhoncus iaculis justo, et dapibus magna ultricies non. Etiam non lacus condimentum, commodo erat ut, ultrices ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+              </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,26 @@ export const CodeExample = {
       props: { EuiCodeBlockImpl },
       demo: <CodeBlock />,
     },
+    {
+      title: 'CodeBlock with pre white space',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: codeBlockPreSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: codeBlockPreHtml,
+        },
+      ],
+      text: (
+        <p>
+          <EuiCode>EuiCodeBlock</EuiCode> allows whiteSpace property to be set
+          allowing user to breaks/white space forcefuly or not.
+        </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,7 @@ 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"
@@ -38,7 +38,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"
@@ -81,3 +81,22 @@ exports[`EuiCodeBlockImpl inline renders with transparent background 1`] = `
   />
 </span>
 `;
+
+exports[`EuiCodeBlockImpl props whiteSpace 1`] = `
+<div
+  class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge testClass1 testClass2"
+>
+  <pre
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePre"
+  >
+    <code
+      aria-label="aria-label"
+      class="euiCodeBlock__code"
+      data-test-subj="test subject string"
+    >
+      var some = 'code';
+console.log(some);
+    </code>
+  </pre>
+</div>
+`;

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

@@ -69,4 +69,16 @@ describe('EuiCodeBlockImpl', () => {
       expect(snapshotCodeBlock(component)).toMatchSnapshot();
     });
   });
+
+  describe('props', () => {
+    test('whiteSpace', () => {
+      const component = mount(
+        <EuiCodeBlockImpl 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>