[EuiCodeBlock] Add line numbers

CHANGELOG.md

@@ -10,6 +10,7 @@
 - Refactored styles of `EuiTabs` ([#5135](https:/elastic/eui/pull/5135))
 - Removed Sass variables for `EuiTabs` font size (`$euiTabFontSize, $euiTabFontSizeS, $euiTabFontSizeL`) ([#5135](https:/elastic/eui/pull/5135))
 - Extended all `EuiTabProps` for each `EuiTabbedContentTab` ([#5135](https:/elastic/eui/pull/5135))
+- Added optional line numbers to `EuiCodeBlock` ([#4993](https:/elastic/eui/pull/4993))
 
 **Theme: Amsterdam**
 

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

@@ -12,6 +12,7 @@ export default () => (
  overflowHeight={300}
  whiteSpace="pre"
  isCopyable
+ lineNumbers
  >
  {`export default () => (
  <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>

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 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__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 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__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,44 @@
 
  // Necessary for virtualized code blocks to have appropriate padding
  .euiCodeBlock__pre--isVirtualized {
- position: relative;
+ .euiCodeBlock__code {
+ position: relative;
+ }
+ }
+
+ .euiCodeBlock__line {
+ display: block;
+ }
+
+ &--hasLineNumbers {
+ .euiCodeBlock__line {
+ position: relative;
+ 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 +80,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();
+ });
  });
 });