code cleanup, more padding for controls

elastic · Feb 13, 2019 · 802db77 · 802db77
1 parent 033b531
commit 802db77
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 21 deletions.
diff --git a/src-docs/src/components/guide_section/guide_section.js b/src-docs/src/components/guide_section/guide_section.js
@@ -86,7 +86,7 @@ export class GuideSection extends Component {
     super(props);
 
     this.componentNames = Object.keys(props.props);
-    this.hasSnippet = 'snippet' in props;
+    const hasSnippet = 'snippet' in props;
 
     this.tabs = [{
       name: 'demo',
@@ -101,7 +101,7 @@ export class GuideSection extends Component {
       isCode: true,
     }];
 
-    if (this.hasSnippet) {
+    if (hasSnippet) {
       this.tabs.push({
         name: 'snippet',
         displayName: 'Snippet',

diff --git a/src/components/code/_code_block.js b/src/components/code/_code_block.js
@@ -152,17 +152,21 @@ export class EuiCodeBlockImpl extends Component {
       copyButton = (
         // TODO add i18n
         <div className="euiCodeBlock__copyButton">
-          <EuiCopy textToCopy={children}>
-            {(copy) => (
-              <EuiButtonIcon
-                size="s"
-                onClick={copy}
-                iconType="copy"
-                color="text"
-                aria-label="Copy"
-              />
+          <EuiI18n token="euiCodeBlock.copyButton" default="Copy">
+            {copyButton => (
+              <EuiCopy textToCopy={children}>
+                {(copy) => (
+                  <EuiButtonIcon
+                    size="s"
+                    onClick={copy}
+                    iconType="copy"
+                    color="text"
+                    aria-label={copyButton}
+                  />
+                )}
+              </EuiCopy>
             )}
-          </EuiCopy>
+          </EuiI18n>
         </div>
       );
     }
@@ -194,8 +198,8 @@ export class EuiCodeBlockImpl extends Component {
     if (copyButton || fullScreenButton) {
       codeBlockControls = (
         <div className="euiCodeBlock__controls">
-          {copyButton}
           {fullScreenButton}
+          {copyButton}
         </div>
       );
     }
@@ -277,7 +281,7 @@ EuiCodeBlockImpl.propTypes = {
   inline: PropTypes.bool,
 
   /**
-   * Displays an icon button that copies the code snippet to your clipboard.
+   * Displays an icon button to copy the code snippet to the clipboard.
    */
   isCopyable: PropTypes.bool,
 };

diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss
@@ -5,10 +5,13 @@
   color: $euiCodeBlockColor;
 
   .euiCodeBlock__pre {
+    @include euiScrollBar;
     height: 100%;
     overflow: auto;
     display: block;
     white-space: pre-wrap;
+    // sass-lint:disable-block no-important
+    padding-right: $euiSizeXXL !important; // Space for controls
   }
 
   .euiCodeBlock__code {
@@ -18,19 +21,19 @@
     font-weight: $euiFontWeightRegular;
   }
 
+  .euiCodeBlock__fullScreenButton + .euiCodeBlock__copyButton {
+    margin-top: $euiSizeXS;
+  }
+
   .euiCodeBlock__copyButton {
     background-color: $euiColorLightestShade;
   }
 
   .euiCodeBlock__controls {
     position: absolute;
     top: $euiSizeM;
-    right: $euiSize;
-  }
-
-  .euiCodeBlock__copyButton,
-  .euiCodeBlock__fullScreenButton {
-    display: inline-block;
+    right: $euiSizeM;
+    width: $euiSizeL;
   }
 
   &.euiCodeBlock-isFullScreen {
@@ -41,7 +44,8 @@
     bottom: 0;
 
     .euiCodeBlock__pre {
-      padding: $euiSizeXL !important; // sass-lint:disable-line no-important
+      // sass-lint:disable-block no-important
+      padding: $euiSizeXL !important;
     }
   }
 

diff --git a/src/components/code/index.d.ts b/src/components/code/index.d.ts
@@ -24,6 +24,7 @@ declare module '@elastic/eui' {
     overflowHeight?: number;
     fontSize?: FontSize;
     transparentBackground?: boolean;
+    isCopyable?: boolean;
   }