Add full-screen code functionality to and remove custom theming from …

…EuiCodeBlock (#259) * Remove color prop from EuiCodeBlock. Match whichever theme is currently active. * Slight tweaks to EuiImage. * Add full-screen functionality to EuiCodeBlock.
elastic · Jan 9, 2018 · 165fb28 · 165fb28
1 parent 8c538ad
commit 165fb28
Show file tree

Hide file tree

Showing 16 changed files with 443 additions and 296 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,16 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added Apache, Nginx, MySQL logos [(#270)](https://github.com/elastic/eui/pull/270)
-- Fixed `<EuiContextMenu>` to pass the `event` argument to a `<EuiContextMenuItem>`'s `onClick` handler even when a panel is defined. [(#265)](https://github.com/elastic/eui/pull/265)
 - Added small version of `EuiCallOut` [(#269)](https://github.com/elastic/eui/pull/269)
 
+**Bug fixes**
+
+- Fixed `<EuiContextMenu>` to pass the `event` argument to a `<EuiContextMenuItem>`'s `onClick` handler even when a panel is defined. [(#265)](https://github.com/elastic/eui/pull/265)
+
+**Breaking changes**
+
+- Removed `color` prop from `<EuiCodeBlock>`. This component's highlighting now matches whichever theme is currently active. [(#259)](https://github.com/elastic/eui/pull/259)
+
 # [`0.0.11`](https://github.com/elastic/eui/tree/v0.0.11)
 
 - Added `<EuiImage>` component to allow for image sizing and zooms. [(#262)](https://github.com/elastic/eui/pull/262)

diff --git a/src-docs/src/components/guide_section/guide_section.js b/src-docs/src/components/guide_section/guide_section.js
@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 import {
  GuideSandboxChrome,
@@ -119,7 +119,6 @@ export class GuideSection extends Component {
  <div key={name} ref={name}>
  <EuiCodeBlock
  language={codeClass}
- color="dark"
  overflowHeight={400}
  >
  {source.code}
@@ -144,9 +143,11 @@ export class GuideSection extends Component {
  }
 
  render() {
+ const chrome = this.renderChrome();
+
  return (
  <div className="guideSection" id={this.props.id}>
- {this.renderChrome()}
+ {chrome}
  {this.renderContent()}
  </div>
  );

diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js
@@ -53,7 +53,6 @@ export const CodeExample = {
  </p>
  <ul>
  <li><EuiCode>language</EuiCode> sets the syntax highlighting for a specific language.</li>
- <li><EuiCode>color</EuiCode> accepts dark (default) or light.</li>
  <li><EuiCode>paddingSize</EuiCode> accepts &ldquo;s&rdquo; / &ldquo;m&rdquo; / &ldquo;l&rdquo; (default).</li>
  <li><EuiCode>fontSize</EuiCode> accepts &ldquo;s&rdquo; (default) / &ldquo;m&rdquo; / &ldquo;l&rdquo;.</li>
  <li><EuiCode>overflowHeight</EuiCode> accepts a number. By default it is not set.</li>

diff --git a/src/components/code/__snapshots__/_code_block.test.js.snap b/src/components/code/__snapshots__/_code_block.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`EuiCodeBlockImpl block highlights javascript code, adding "js" class 1`] = `
 <div
- class="euiCodeBlock euiCodeBlock--light euiCodeBlock--fontSmall euiCodeBlock--paddingLarge"
+ class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge"
 >
  <pre
  class="euiCodeBlock__pre"
@@ -11,12 +11,30 @@ exports[`EuiCodeBlockImpl block highlights javascript code, adding "js" class 1`
  class="euiCodeBlock__code js"
  />
  </pre>
+ <button
+ aria-label="Expand"
+ class="euiButtonIcon euiButtonIcon--primary euiCodeBlock__fullScreenButton"
+ type="button"
+ >
+ <svg
+ aria-hidden="true"
+ class="euiIcon euiButtonIcon__icon euiIcon--medium"
+ height="16"
+ width="16"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M2.014 10.777l-.043 2.8a.52.52 0 0 0 .544.544l2.8-.043a.526.526 0 0 1 .546.546.598.598 0 0 1-.575.575l-2.802.044A1.571 1.571 0 0 1 .85 13.609l.044-2.802a.598.598 0 0 1 .575-.575.526.526 0 0 1 .545.545zm12.064-5.461l.043-2.801a.52.52 0 0 0-.543-.544l-2.801.043a.526.526 0 0 1-.545-.545.598.598 0 0 1 .575-.575L13.609.85a1.571 1.571 0 0 1 1.634 1.634l-.044 2.802a.598.598 0 0 1-.575.575.526.526 0 0 1-.546-.545zm-9.724 7.038a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708.708l-8 8z"
+ fill-rule="evenodd"
+ />
+ </svg>
+ </button>
 </div>
 `;
 
 exports[`EuiCodeBlockImpl block renders a pre block tag 1`] = `
 <div
- class="euiCodeBlock euiCodeBlock--light euiCodeBlock--fontSmall euiCodeBlock--paddingLarge testClass1 testClass2"
+ class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge testClass1 testClass2"
 >
  <pre
  class="euiCodeBlock__pre"
@@ -30,26 +48,30 @@ exports[`EuiCodeBlockImpl block renders a pre block tag 1`] = `
 console.log(some);
  </code>
  </pre>
-</div>
-`;
-
-exports[`EuiCodeBlockImpl block renders with dark theme 1`] = `
-<div
- class="euiCodeBlock euiCodeBlock--dark euiCodeBlock--fontSmall euiCodeBlock--paddingLarge"
->
- <pre
- class="euiCodeBlock__pre"
+ <button
+ aria-label="Expand"
+ class="euiButtonIcon euiButtonIcon--primary euiCodeBlock__fullScreenButton"
+ type="button"
  >
- <code
- class="euiCodeBlock__code"
- />
- </pre>
+ <svg
+ aria-hidden="true"
+ class="euiIcon euiButtonIcon__icon euiIcon--medium"
+ height="16"
+ width="16"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M2.014 10.777l-.043 2.8a.52.52 0 0 0 .544.544l2.8-.043a.526.526 0 0 1 .546.546.598.598 0 0 1-.575.575l-2.802.044A1.571 1.571 0 0 1 .85 13.609l.044-2.802a.598.598 0 0 1 .575-.575.526.526 0 0 1 .545.545zm12.064-5.461l.043-2.801a.52.52 0 0 0-.543-.544l-2.801.043a.526.526 0 0 1-.545-.545.598.598 0 0 1 .575-.575L13.609.85a1.571 1.571 0 0 1 1.634 1.634l-.044 2.802a.598.598 0 0 1-.575.575.526.526 0 0 1-.546-.545zm-9.724 7.038a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708.708l-8 8z"
+ fill-rule="evenodd"
+ />
+ </svg>
+ </button>
 </div>
 `;
 
 exports[`EuiCodeBlockImpl block renders with transparent background 1`] = `
 <div
- class="euiCodeBlock euiCodeBlock--light euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--transparentBackground"
+ class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--transparentBackground"
 >
  <pre
  class="euiCodeBlock__pre"
@@ -58,12 +80,30 @@ exports[`EuiCodeBlockImpl block renders with transparent background 1`] = `
  class="euiCodeBlock__code"
  />
  </pre>
+ <button
+ aria-label="Expand"
+ class="euiButtonIcon euiButtonIcon--primary euiCodeBlock__fullScreenButton"
+ type="button"
+ >
+ <svg
+ aria-hidden="true"
+ class="euiIcon euiButtonIcon__icon euiIcon--medium"
+ height="16"
+ width="16"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M2.014 10.777l-.043 2.8a.52.52 0 0 0 .544.544l2.8-.043a.526.526 0 0 1 .546.546.598.598 0 0 1-.575.575l-2.802.044A1.571 1.571 0 0 1 .85 13.609l.044-2.802a.598.598 0 0 1 .575-.575.526.526 0 0 1 .545.545zm12.064-5.461l.043-2.801a.52.52 0 0 0-.543-.544l-2.801.043a.526.526 0 0 1-.545-.545.598.598 0 0 1 .575-.575L13.609.85a1.571 1.571 0 0 1 1.634 1.634l-.044 2.802a.598.598 0 0 1-.575.575.526.526 0 0 1-.546-.545zm-9.724 7.038a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708.708l-8 8z"
+ fill-rule="evenodd"
+ />
+ </svg>
+ </button>
 </div>
 `;
 
 exports[`EuiCodeBlockImpl inline highlights javascript code, adding "js" class 1`] = `
 <span
- class="euiCodeBlock euiCodeBlock--light euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+ class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
 >
  <code
  class="euiCodeBlock__code js"
@@ -73,7 +113,7 @@ exports[`EuiCodeBlockImpl inline highlights javascript code, adding "js" class 1
 
 exports[`EuiCodeBlockImpl inline renders an inline code tag 1`] = `
 <span
- class="euiCodeBlock euiCodeBlock--light euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline testClass1 testClass2"
+ class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline testClass1 testClass2"
 >
  <code
  aria-label="aria-label"
@@ -86,19 +126,9 @@ console.log(some);
 </span>
 `;
 
-exports[`EuiCodeBlockImpl inline renders with dark theme 1`] = `
-<span
- class="euiCodeBlock euiCodeBlock--dark euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
->
- <code
- class="euiCodeBlock__code"
- />
-</span>
-`;
-
 exports[`EuiCodeBlockImpl inline renders with transparent background 1`] = `
 <span
- class="euiCodeBlock euiCodeBlock--light euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--transparentBackground euiCodeBlock--inline"
+ class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--transparentBackground euiCodeBlock--inline"
 >
  <code
  class="euiCodeBlock__code"

diff --git a/src/components/code/__snapshots__/code.test.js.snap b/src/components/code/__snapshots__/code.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`EuiCode renders a code snippet 1`] = `
 <span
- class="euiCodeBlock euiCodeBlock--light euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline testClass1 testClass2"
+ class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline testClass1 testClass2"
 >
  <code
  aria-label="aria-label"

diff --git a/src/components/code/__snapshots__/code_block.test.js.snap b/src/components/code/__snapshots__/code_block.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`EuiCodeBlock renders a code block 1`] = `
 <div
- class="euiCodeBlock euiCodeBlock--light euiCodeBlock--fontSmall euiCodeBlock--paddingLarge testClass1 testClass2"
+ class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge testClass1 testClass2"
 >
  <pre
  class="euiCodeBlock__pre"
@@ -16,5 +16,23 @@ exports[`EuiCodeBlock renders a code block 1`] = `
 console.log(some);
  </code>
  </pre>
+ <button
+ aria-label="Expand"
+ class="euiButtonIcon euiButtonIcon--primary euiCodeBlock__fullScreenButton"
+ type="button"
+ >
+ <svg
+ aria-hidden="true"
+ class="euiIcon euiButtonIcon__icon euiIcon--medium"
+ height="16"
+ width="16"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M2.014 10.777l-.043 2.8a.52.52 0 0 0 .544.544l2.8-.043a.526.526 0 0 1 .546.546.598.598 0 0 1-.575.575l-2.802.044A1.571 1.571 0 0 1 .85 13.609l.044-2.802a.598.598 0 0 1 .575-.575.526.526 0 0 1 .545.545zm12.064-5.461l.043-2.801a.52.52 0 0 0-.543-.544l-2.801.043a.526.526 0 0 1-.545-.545.598.598 0 0 1 .575-.575L13.609.85a1.571 1.571 0 0 1 1.634 1.634l-.044 2.802a.598.598 0 0 1-.575.575.526.526 0 0 1-.546-.545zm-9.724 7.038a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708.708l-8 8z"
+ fill-rule="evenodd"
+ />
+ </svg>
+ </button>
 </div>
 `;