Fixed position of EuiCodeBlock controls (#2459)

* Adjusted control icon placement based on overall padding * Beefed up tests for EuiCodeBlock
elastic · Oct 25, 2019 · 54436b2 · 54436b2
1 parent c1221e3
commit 54436b2
Show file tree

Hide file tree

Showing 5 changed files with 334 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 - Normalized button `moz-focus-inner` ([#2445](https://github.com/elastic/eui/pull/2445))
 - Fixed typo to correct `aria-modal` attribute in`EuiPopover` ([#2488](https://github.com/elastic/eui/pull/2488))
+- Fixed position of `EuiCodeBlock` controls and added more tests ([#2459](https://github.com/elastic/eui/pull/2459))
 
 ## [`14.8.0`](https://github.com/elastic/eui/tree/v14.8.0)
 

diff --git a/src/components/code/__snapshots__/code_block.test.js.snap b/src/components/code/__snapshots__/code_block.test.js.snap
@@ -1,5 +1,239 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiCodeBlock props fontSize l is rendered 1`] = `
+<div
+ class="euiCodeBlock euiCodeBlock--fontLarge euiCodeBlock--paddingLarge"
+>
+ <pre
+ class="euiCodeBlock__pre"
+ >
+ <code
+ class="euiCodeBlock__code"
+ >
+ var some = 'code';
+console.log(some);
+ </code>
+ </pre>
+</div>
+`;
+
+exports[`EuiCodeBlock props fontSize m is rendered 1`] = `
+<div
+ class="euiCodeBlock euiCodeBlock--fontMedium euiCodeBlock--paddingLarge"
+>
+ <pre
+ class="euiCodeBlock__pre"
+ >
+ <code
+ class="euiCodeBlock__code"
+ >
+ var some = 'code';
+console.log(some);
+ </code>
+ </pre>
+</div>
+`;
+
+exports[`EuiCodeBlock props fontSize s is rendered 1`] = `
+<div
+ class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge"
+>
+ <pre
+ class="euiCodeBlock__pre"
+ >
+ <code
+ class="euiCodeBlock__code"
+ >
+ var some = 'code';
+console.log(some);
+ </code>
+ </pre>
+</div>
+`;
+
+exports[`EuiCodeBlock props isCopyable is rendered 1`] = `
+<div
+ class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--hasControls"
+>
+ <pre
+ class="euiCodeBlock__pre"
+ >
+ <code
+ class="euiCodeBlock__code"
+ >
+ var some = 'code';
+console.log(some);
+ </code>
+ </pre>
+ <div
+ class="euiCodeBlock__controls"
+ >
+ <div
+ class="euiCodeBlock__copyButton"
+ >
+ <span
+ class="euiToolTipAnchor"
+ >
+ <button
+ aria-label="Copy"
+ class="euiButtonIcon euiButtonIcon--text"
+ type="button"
+ >
+ <svg
+ aria-hidden="true"
+ class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+ focusable="false"
+ height="16"
+ viewBox="0 0 16 16"
+ width="16"
+ xmlns="http://www.w3.org/2000/svg"
+ />
+ </button>
+ </span>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`EuiCodeBlock props language is rendered 1`] = `
+<div
+ class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge"
+>
+ <pre
+ class="euiCodeBlock__pre"
+ >
+ <code
+ class="euiCodeBlock__code html"
+ >
+ var some = 'code';
+console.log(some);
+ </code>
+ </pre>
+</div>
+`;
+
+exports[`EuiCodeBlock props overflowHeight is rendered 1`] = `
+<div
+ class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--hasControls"
+ style="height:200px"
+>
+ <pre
+ class="euiCodeBlock__pre"
+ >
+ <code
+ class="euiCodeBlock__code"
+ >
+ var some = 'code';
+console.log(some);
+ </code>
+ </pre>
+ <div
+ class="euiCodeBlock__controls"
+ >
+ <button
+ aria-label="Expand"
+ class="euiButtonIcon euiButtonIcon--text euiCodeBlock__fullScreenButton"
+ type="button"
+ >
+ <svg
+ aria-hidden="true"
+ class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+ focusable="false"
+ height="16"
+ viewBox="0 0 16 16"
+ width="16"
+ xmlns="http://www.w3.org/2000/svg"
+ />
+ </button>
+ </div>
+</div>
+`;
+
+exports[`EuiCodeBlock props paddingSize l is rendered 1`] = `
+<div
+ class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge"
+>
+ <pre
+ class="euiCodeBlock__pre"
+ >
+ <code
+ class="euiCodeBlock__code"
+ >
+ var some = 'code';
+console.log(some);
+ </code>
+ </pre>
+</div>
+`;
+
+exports[`EuiCodeBlock props paddingSize m is rendered 1`] = `
+<div
+ class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingMedium"
+>
+ <pre
+ class="euiCodeBlock__pre"
+ >
+ <code
+ class="euiCodeBlock__code"
+ >
+ var some = 'code';
+console.log(some);
+ </code>
+ </pre>
+</div>
+`;
+
+exports[`EuiCodeBlock props paddingSize none is rendered 1`] = `
+<div
+ class="euiCodeBlock euiCodeBlock--fontSmall"
+>
+ <pre
+ class="euiCodeBlock__pre"
+ >
+ <code
+ class="euiCodeBlock__code"
+ >
+ var some = 'code';
+console.log(some);
+ </code>
+ </pre>
+</div>
+`;
+
+exports[`EuiCodeBlock props paddingSize s is rendered 1`] = `
+<div
+ class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingSmall"
+>
+ <pre
+ class="euiCodeBlock__pre"
+ >
+ <code
+ class="euiCodeBlock__code"
+ >
+ var some = 'code';
+console.log(some);
+ </code>
+ </pre>
+</div>
+`;
+
+exports[`EuiCodeBlock props transparentBackground is rendered 1`] = `
+<div
+ class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--transparentBackground"
+>
+ <pre
+ class="euiCodeBlock__pre"
+ >
+ <code
+ class="euiCodeBlock__code"
+ >
+ var some = 'code';
+console.log(some);
+ </code>
+ </pre>
+</div>
+`;
+
 exports[`EuiCodeBlock renders a code block 1`] = `
 <div
  class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge testClass1 testClass2"

diff --git a/src/components/code/_code_block.js b/src/components/code/_code_block.js
@@ -120,7 +120,7 @@ export class EuiCodeBlockImpl extends Component {
  {
  'euiCodeBlock--transparentBackground': transparentBackground,
  'euiCodeBlock--inline': inline,
- 'euiCodeBlock-isCopyable': isCopyable,
+ 'euiCodeBlock--hasControls': isCopyable || overflowHeight,
  },
  className
  );

diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss
@@ -10,8 +10,6 @@
  overflow: auto;
  display: block;
  white-space: pre-wrap;
- // sass-lint:disable-block no-important
- padding-right: $euiSizeXXL !important; // Space for controls
  }
 
  .euiCodeBlock__code {
@@ -22,14 +20,18 @@
  font-size: inherit;
  }
 
- .euiCodeBlock__fullScreenButton + .euiCodeBlock__copyButton {
- margin-top: $euiSizeXS;
+ &.euiCodeBlock--hasControls {
+ padding-right: $euiSizeL + $euiSizeXS;
  }
 
  .euiCodeBlock__controls {
  position: absolute;
- top: $euiSizeM;
- right: $euiSize;
+ top: 0;
+ right: 0;
+ }
+
+ .euiCodeBlock__fullScreenButton + .euiCodeBlock__copyButton {
+ margin-top: $euiSizeXS;
  }
 
  &.euiCodeBlock-isFullScreen {
@@ -43,6 +45,11 @@
  // sass-lint:disable-block no-important
  padding: $euiSizeXL !important;
  }
+
+ .euiCodeBlock__controls {
+ top: $euiSizeXS;
+ right: $euiSizeXS;
+ }
  }
 
  &.euiCodeBlock--fontSmall {
@@ -57,22 +64,40 @@
  font-size: $euiFontSize;
  }
 
+ // Small padding
  &.euiCodeBlock--paddingSmall {
  .euiCodeBlock__pre {
  padding: $euiSizeS;
  }
+
+ .euiCodeBlock__controls {
+ top: $euiSizeS;
+ right: $euiSizeS;
+ }
  }
 
+ // Medium padding
  &.euiCodeBlock--paddingMedium {
  .euiCodeBlock__pre {
  padding: $euiSize;
  }
+
+ .euiCodeBlock__controls {
+ top: $euiSize;
+ right: $euiSize;
+ }
  }
 
+ // Large padding
  &.euiCodeBlock--paddingLarge {
  .euiCodeBlock__pre {
  padding: $euiSizeL;
  }
+
+ .euiCodeBlock__controls {
+ top: $euiSizeL;
+ right: $euiSizeL;
+ }
  }
 
  /**