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;
+    }
   }
 
   /**