[EuiCodeBlock] Add line numbers

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added optional line numbers to `EuiCodeBlock` ([#4993](https://github.com/elastic/eui/pull/4993))
+
 **Bug fixes**
 
 - Fixed `EuiSuperSelect`'s focus keyboard behavior when no initial value is passed, and focus label behavior ([#5097](https://github.com/elastic/eui/pull/5097))

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

@@ -24,6 +24,13 @@ const codeBlockSnippet = `<EuiCodeBlock language="html" paddingSize="s" isCopyab
 </EuiCodeBlock>
 `;
 
+import CodeBlockLines from './line_numbers';
+const codeBlockLinesSource = require('!!raw-loader!./line_numbers');
+const codeBlockLinesSnippet = `<EuiCodeBlock language="json" lineNumbers>
+{ \`{}\` }
+</EuiCodeBlock>
+`;
+
 import CodeBlockVirtualized from './virtualized';
 const codeBlockVirtualizedSource = require('!!raw-loader!./virtualized');
 const codeBlockVirtualizedSnippet = `<EuiCodeBlock language="json" isVirtualized overflowHeight={300}>
@@ -121,6 +128,25 @@ export const CodeExample = {
       demo: <CodeBlock />,
       playground: codeBlockConfig,
     },
+    {
+      title: 'Line numbers',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: codeBlockLinesSource,
+        },
+      ],
+      text: (
+        <p>
+          To render line numbers, add <EuiCode>lineNumbers</EuiCode>, and
+          optionally change the starting number by passing a configuration
+          object: <EuiCode>{'lineNumbers={{ start: 32 }}'}</EuiCode>
+        </p>
+      ),
+      props: { EuiCodeBlock },
+      snippet: codeBlockLinesSnippet,
+      demo: <CodeBlockLines />,
+    },
     {
       title: 'Code block virtualization',
       source: [

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

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { EuiCodeBlock, EuiSpacer } from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiCodeBlock language="json" fontSize="m" paddingSize="m" lineNumbers>
+      {`{
+"id": "1",
+"rawResponse": {
+  "took": 19,
+  "timed_out": false and a longer sentence so the line will break,
+  "_shards": {
+    "total": 1,
+    "successful": 1,
+    "skipped": 0,
+    "failed": 0
+  }
+}`}
+    </EuiCodeBlock>
+
+    <EuiSpacer />
+
+    <EuiCodeBlock
+      language="json"
+      fontSize="m"
+      paddingSize="m"
+      overflowHeight={300}
+      isCopyable
+      lineNumbers={{ start: 32 }}
+    >
+      {`"OriginLocation": [
+  {
+    "coordinates": [
+      -97.43309784,
+      37.64989853
+    ],
+    "type": "Point"
+  }
+],`}
+    </EuiCodeBlock>
+  </div>
+);

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

@@ -4,7 +4,13 @@ import { EuiCodeBlock } from '../../../../src/components';
 
 export default () => (
   <div>
-    <EuiCodeBlock language="json" overflowHeight={300} isCopyable isVirtualized>
+    <EuiCodeBlock
+      language="json"
+      overflowHeight={300}
+      isCopyable
+      isVirtualized
+      lineNumbers
+    >
       {`{
   "id": "1",
   "rawResponse": {

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

@@ -100,6 +100,144 @@ exports[`EuiCodeBlockImpl block renders a virtualized code block 1`] = `
 </div>
 `;
 
+exports[`EuiCodeBlockImpl block renders line numbers 1`] = `
+<div
+  class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--hasControl prismjs language-text testClass1 testClass2"
+  style="max-height:300px"
+>
+  <pre
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
+    style="max-height:300px"
+    tabindex="-1"
+  >
+    <code
+      aria-label="aria-label"
+      class="euiCodeBlock__code text"
+      data-test-subj="test subject string"
+    >
+      <span
+        class="euiCodeBlock__line"
+      >
+        <span
+          aria-hidden="true"
+          class="euiCodeBlock__line__number"
+          data-line-number="1"
+          style="width:8px"
+        />
+        <span
+          class="euiCodeBlock__line__text"
+          style="margin-left:16px"
+        >
+          var some = 'code';
+
+        </span>
+      </span>
+      <span
+        class="euiCodeBlock__line"
+      >
+        <span
+          aria-hidden="true"
+          class="euiCodeBlock__line__number"
+          data-line-number="2"
+          style="width:8px"
+        />
+        <span
+          class="euiCodeBlock__line__text"
+          style="margin-left:16px"
+        >
+          console.log(some);
+        </span>
+      </span>
+    </code>
+  </pre>
+  <div
+    class="euiCodeBlock__controls"
+  >
+    <button
+      aria-label="Expand"
+      class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiCodeBlock__fullScreenButton"
+      type="button"
+    >
+      <span
+        aria-hidden="true"
+        class="euiButtonIcon__icon"
+        color="inherit"
+        data-euiicon-type="fullScreen"
+      />
+    </button>
+  </div>
+</div>
+`;
+
+exports[`EuiCodeBlockImpl block renders line numbers with a start value 1`] = `
+<div
+  class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--hasControl prismjs language-text testClass1 testClass2"
+  style="max-height:300px"
+>
+  <pre
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
+    style="max-height:300px"
+    tabindex="-1"
+  >
+    <code
+      aria-label="aria-label"
+      class="euiCodeBlock__code text"
+      data-test-subj="test subject string"
+    >
+      <span
+        class="euiCodeBlock__line"
+      >
+        <span
+          aria-hidden="true"
+          class="euiCodeBlock__line__number"
+          data-line-number="10"
+          style="width:16px"
+        />
+        <span
+          class="euiCodeBlock__line__text"
+          style="margin-left:24px"
+        >
+          var some = 'code';
+
+        </span>
+      </span>
+      <span
+        class="euiCodeBlock__line"
+      >
+        <span
+          aria-hidden="true"
+          class="euiCodeBlock__line__number"
+          data-line-number="11"
+          style="width:16px"
+        />
+        <span
+          class="euiCodeBlock__line__text"
+          style="margin-left:24px"
+        >
+          console.log(some);
+        </span>
+      </span>
+    </code>
+  </pre>
+  <div
+    class="euiCodeBlock__controls"
+  >
+    <button
+      aria-label="Expand"
+      class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiCodeBlock__fullScreenButton"
+      type="button"
+    >
+      <span
+        aria-hidden="true"
+        class="euiButtonIcon__icon"
+        color="inherit"
+        data-euiicon-type="fullScreen"
+      />
+    </button>
+  </div>
+</div>
+`;
+
 exports[`EuiCodeBlockImpl block renders with transparent background 1`] = `
 <div
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--transparentBackground prismjs language-text"

src/components/code/_code_block.scss

@@ -22,7 +22,38 @@
 
   // Necessary for virtualized code blocks to have appropriate padding
   .euiCodeBlock__pre--isVirtualized {
-    position: relative;
+    .euiCodeBlock__code {
+      position: relative;
+    }
+  }
+
+  .euiCodeBlock__line {
+    display: block;
+    user-select: none;
+  }
+
+  .euiCodeBlock__line__text,
+  .euiCodeBlock__line__number {
+    display: inline-block;
+  }
+
+  .euiCodeBlock__line__text {
+    padding-left: $euiSizeS;
+    margin-left: $euiSizeS;
+    border-left: $euiBorderThin;
+    user-select: text;
+  }
+
+  .euiCodeBlock__line__number {
+    position: absolute;
+    user-select: none;
+
+    &:before {
+      content: attr(data-line-number);
+      color: $euiTextSubduedColor;
+      text-align: right;
+      display: block;
+    }
   }
 
   .euiCodeBlock__code {
@@ -43,10 +74,6 @@
     margin-top: $euiSizeXS;
   }
 
-  .euiCodeBlock__line {
-    display: block;
-  }
-
   &.euiCodeBlock-isFullScreen {
     position: fixed;
     top: 0;

src/components/code/_code_block.test.tsx

@@ -101,5 +101,33 @@ describe('EuiCodeBlockImpl', () => {
       );
       expect(component).toMatchSnapshot();
     });
+
+    test('renders line numbers', () => {
+      const component = render(
+        <EuiCodeBlockImpl
+          inline={false}
+          lineNumbers
+          overflowHeight={300}
+          {...requiredProps}
+        >
+          {code}
+        </EuiCodeBlockImpl>
+      );
+      expect(component).toMatchSnapshot();
+    });
+
+    test('renders line numbers with a start value', () => {
+      const component = render(
+        <EuiCodeBlockImpl
+          inline={false}
+          lineNumbers={{ start: 10 }}
+          overflowHeight={300}
+          {...requiredProps}
+        >
+          {code}
+        </EuiCodeBlockImpl>
+      );
+      expect(component).toMatchSnapshot();
+    });
   });
 });