elastic · snide · Jan 19, 2018 · Jan 19, 2018 · Jan 19, 2018
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `0.0.14`.
+- `EuiCodeBlock` now only shows fullscreen icons if `overflowHeight` prop is set. Also forces large fonts and padding while expanded. [(#325)](https://github.com/elastic/eui/pull/325)
 
 # [`0.0.14`](https://github.com/elastic/eui/tree/v0.0.14)
 

diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js
@@ -53,7 +53,10 @@ export const CodeExample = {
         </p>
         <ul>
           <li><EuiCode>language</EuiCode> sets the syntax highlighting for a specific language.</li>
-          <li><EuiCode>paddingSize</EuiCode> accepts &ldquo;s&rdquo; / &ldquo;m&rdquo; / &ldquo;l&rdquo; (default).</li>
+          <li>
+            <EuiCode>paddingSize</EuiCode> accepts &ldquo;none&rdquo; / &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>
           <li><EuiCode>transparentBackground</EuiCode> set to <EuiCode>false</EuiCode> will remove the background.</li>

diff --git a/src/components/code/__snapshots__/_code_block.test.js.snap b/src/components/code/__snapshots__/_code_block.test.js.snap
@@ -11,25 +11,6 @@ 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"
-      viewBox="0 0 16 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>
 `;
 
@@ -49,25 +30,6 @@ exports[`EuiCodeBlockImpl block renders a pre block tag 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"
-      viewBox="0 0 16 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>
 `;
 
@@ -82,25 +44,6 @@ 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"
-      viewBox="0 0 16 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>
 `;
 

diff --git a/src/components/code/__snapshots__/code_block.test.js.snap b/src/components/code/__snapshots__/code_block.test.js.snap
@@ -16,24 +16,5 @@ 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"
-      viewBox="0 0 16 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>
 `;
diff --git a/src/components/code/_code_block.js b/src/components/code/_code_block.js
@@ -25,6 +25,7 @@ const fontSizeToClassNameMap = {
 export const FONT_SIZES = Object.keys(fontSizeToClassNameMap);
 
 const paddingSizeToClassNameMap = {
+  none: '',
   s: 'euiCodeBlock--paddingSmall',
   m: 'euiCodeBlock--paddingMedium',
   l: 'euiCodeBlock--paddingLarge',
@@ -139,13 +140,14 @@ export class EuiCodeBlockImpl extends Component {
 
     let fullScreenButton;
 
-    if (!inline) {
+    if (!inline && overflowHeight) {
       fullScreenButton = (
         <EuiButtonIcon
           className="euiCodeBlock__fullScreenButton"
           size="s"
           onClick={this.toggleFullScreen}
-          iconType={this.state.isFullScreen ? 'cross' : 'expand'}
+          iconType={this.state.isFullScreen ? 'cross' : 'fullScreen'}
+          color="text"
           aria-label={this.state.isFullScreen ? 'Collapse' : 'Expand'}
         />
       );
@@ -154,7 +156,15 @@ export class EuiCodeBlockImpl extends Component {
     let fullScreenDisplay;
 
     if (this.state.isFullScreen) {
-      const fullScreenClasses = classNames(classes, 'euiCodeBlock-isFullScreen');
+      {/*
+        Force fullscreen to use large font and padding.
+      */}
+      const fullScreenClasses = classNames(
+        'euiCodeBlock',
+        'euiCodeBlock--fontLarge',
+        'euiCodeBlock-paddingLarge',
+        'euiCodeBlock-isFullScreen',
+      );
 
       fullScreenDisplay = (
         <FocusTrap