From cf6a6aebf2da7e8d384fb0b01a8e5b807cc06902 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 19 Jan 2018 09:59:24 -0800
Subject: [PATCH 1/2] Codeblock fullscreen adjustments

---
 src-docs/src/views/code/code_example.js       |  5 +-
 .../__snapshots__/_code_block.test.js.snap    | 57 -------------------
 .../__snapshots__/code_block.test.js.snap     | 19 -------
 src/components/code/_code_block.js            | 13 ++++-
 4 files changed, 14 insertions(+), 80 deletions(-)

diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js
index 3f6404175e8..1f4a8fcf383 100644
--- 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
index 97d3b97b850..b8a20d13d4e 100644
--- 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
index dbfa7a3b826..93accaa3b7c 100644
--- 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
index 9fcbf67f758..2c0da134a3a 100644
--- 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,12 @@ export class EuiCodeBlockImpl extends Component {
     let fullScreenDisplay;
 
     if (this.state.isFullScreen) {
-      const fullScreenClasses = classNames(classes, 'euiCodeBlock-isFullScreen');
+      const fullScreenClasses = classNames(
+        'euiCodeBlock',
+        'euiCodeBlock--fontLarge',
+        'euiCodeBlock-paddingLarge',
+        'euiCodeBlock-isFullScreen',
+      );
 
       fullScreenDisplay = (
         <FocusTrap

From 261e1bd8883a93488fb3b408fd4447b86c311847 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 19 Jan 2018 10:05:24 -0800
Subject: [PATCH 2/2] changelog / docs

---
 CHANGELOG.md                       | 2 +-
 src/components/code/_code_block.js | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 24b596e4952..3bba489a897 100644
--- 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/components/code/_code_block.js b/src/components/code/_code_block.js
index 2c0da134a3a..62d7d5e3cb5 100644
--- a/src/components/code/_code_block.js
+++ b/src/components/code/_code_block.js
@@ -156,6 +156,9 @@ export class EuiCodeBlockImpl extends Component {
     let fullScreenDisplay;
 
     if (this.state.isFullScreen) {
+      {/*
+        Force fullscreen to use large font and padding.
+      */}
       const fullScreenClasses = classNames(
         'euiCodeBlock',
         'euiCodeBlock--fontLarge',