[EuiCodeBlock] Add line numbers (#4993)

* add line numbers * tests * docs * clean up * CL * text selection in safari * line separator * fix line wrapping * revert me * relative positioning; select * undo docs change * docs updates * docs updates * review; clean up * utils test * update tests
elastic · Sep 13, 2021 · 4a4fe51 · 4a4fe51
1 parent 6d38358
commit 4a4fe51
Show file tree

Hide file tree

Showing 10 changed files with 1,147 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `37.7.0`.
+- Added optional line numbers to `EuiCodeBlock` ([#4993](https://github.com/elastic/eui/pull/4993))
 
 ## [`37.7.0`](https://github.com/elastic/eui/tree/v37.7.0)
 

diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js
@@ -24,10 +24,17 @@ 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}>
-{ \`{}\` }
+{}
 </EuiCodeBlock>
 `;
 
@@ -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: [

diff --git a/src-docs/src/views/code/line_numbers.js b/src-docs/src/views/code/line_numbers.js
@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { EuiCodeBlock, EuiSpacer } from '../../../../src/components';
+
+export default () => (
+  <>
+    <EuiCodeBlock language="json" fontSize="m" paddingSize="m" lineNumbers>
+      {`{
+  "id": "1",
+  "rawResponse": {
+    "took": 19,
+    "timed_out": false,
+    "_shards": {
+      "total": 1,
+      "successful": 1,
+      "skipped": 0,
+      "failed": 0
+    }
+  }
+}`}
+    </EuiCodeBlock>
+
+    <EuiSpacer />
+
+    <EuiCodeBlock
+      language="json"
+      fontSize="m"
+      paddingSize="m"
+      lineNumbers={{ start: 32 }}
+    >
+      {`"OriginLocation": [
+  {
+    "coordinates": [
+      -97.43309784,
+      37.64989853
+    ],
+    "type": "Point"
+  }
+],`}
+    </EuiCodeBlock>
+  </>
+);
diff --git a/src/components/code/__snapshots__/_code_block.test.tsx.snap b/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 euiCodeBlock--hasLineNumbers 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__lineNumber"
+          data-line-number="1"
+          style="width:8px"
+        />
+        <span
+          class="euiCodeBlock__lineText"
+          style="margin-left:16px"
+        >
+          var some = 'code';
+
+        </span>
+      </span>
+      <span
+        class="euiCodeBlock__line"
+      >
+        <span
+          aria-hidden="true"
+          class="euiCodeBlock__lineNumber"
+          data-line-number="2"
+          style="width:8px"
+        />
+        <span
+          class="euiCodeBlock__lineText"
+          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 euiCodeBlock--hasLineNumbers 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__lineNumber"
+          data-line-number="10"
+          style="width:16px"
+        />
+        <span
+          class="euiCodeBlock__lineText"
+          style="margin-left:24px"
+        >
+          var some = 'code';
+
+        </span>
+      </span>
+      <span
+        class="euiCodeBlock__line"
+      >
+        <span
+          aria-hidden="true"
+          class="euiCodeBlock__lineNumber"
+          data-line-number="11"
+          style="width:16px"
+        />
+        <span
+          class="euiCodeBlock__lineText"
+          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"