From 649c90008a4805119ac3c61e41f6b35bcf3c8131 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 27 Aug 2018 12:18:16 -0400
Subject: [PATCH 1/4] Fixing buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Don’t let icon or spinner shrink
- Allow empty buttons to truncate
- #848 - Allow icon sizes to be passed to EuiButtonIcon
---
 src-docs/src/views/button/button_example.js   |  4 +-
 src-docs/src/views/button/button_icon.js      |  1 -
 .../collapsed_item_actions.test.js.snap       |  1 +
 .../default_item_action.test.js.snap          |  1 +
 .../in_memory_table.test.js.snap              | 14 +++-
 src/components/button/_mixins.scss            |  5 ++
 .../__snapshots__/button_empty.test.js.snap   | 68 ++++++++++++++-----
 .../button/button_empty/_button_empty.scss    |  6 +-
 .../button/button_empty/button_empty.js       |  4 +-
 .../button/button_icon/_button_icon.scss      | 15 ++--
 .../button/button_icon/button_icon.js         |  6 +-
 .../__snapshots__/filter_button.test.js.snap  |  4 +-
 .../__snapshots__/header_link.test.js.snap    |  4 +-
 src/components/icon/index.js                  |  1 +
 .../__snapshots__/confirm_modal.test.js.snap  |  4 +-
 .../pagination_button.test.js.snap            |  4 +-
 .../table_sort_mobile.test.js.snap            |  4 +-
 .../table_pagination.test.js.snap             | 44 +++++++++---
 18 files changed, 137 insertions(+), 53 deletions(-)

diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js
index 33792aaeb97..cf470e48f4a 100644
--- a/src-docs/src/views/button/button_example.js
+++ b/src-docs/src/views/button/button_example.js
@@ -165,9 +165,7 @@ export const ButtonExample = {
     text: (
       <p>
         Button icons are buttons that only contain an icon
-        (no text). <strong>Note:</strong> the
-        the dark background on the <EuiCode>ghost</EuiCode> example is used
-        only for illustrative purposes.
+        (no text).
       </p>
     ),
     props: { EuiButtonIcon },
diff --git a/src-docs/src/views/button/button_icon.js b/src-docs/src/views/button/button_icon.js
index 8fb87a60d00..c15fa0d81a8 100644
--- a/src-docs/src/views/button/button_icon.js
+++ b/src-docs/src/views/button/button_icon.js
@@ -22,7 +22,6 @@ export default () => (
       colors.map((color) => (
         <EuiFlexItem key={color} grow={false}>
           <EuiButtonIcon
-            size="s"
             color={color}
             onClick={() => window.alert('Button clicked')}
             iconType="arrowRight"
diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap
index 7f2c460a91f..e2ab243b688 100644
--- a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap
+++ b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap
@@ -8,6 +8,7 @@ exports[`CollapsedItemActions render 1`] = `
       aria-label="actions"
       className={undefined}
       color="text"
+      iconSize="m"
       iconType="gear"
       isDisabled={false}
       onClick={[Function]}
diff --git a/src/components/basic_table/__snapshots__/default_item_action.test.js.snap b/src/components/basic_table/__snapshots__/default_item_action.test.js.snap
index 2bc22651bf9..dee76650464 100644
--- a/src/components/basic_table/__snapshots__/default_item_action.test.js.snap
+++ b/src/components/basic_table/__snapshots__/default_item_action.test.js.snap
@@ -19,6 +19,7 @@ exports[`DefaultItemAction render - icon 1`] = `
 <EuiButtonIcon
   aria-label="action1"
   color="primary"
+  iconSize="m"
   iconType="trash"
   isDisabled={false}
   onClick={[Function]}
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
index 908974747a6..87301526302 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
@@ -357,7 +357,9 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                       </svg>
                                     </arrowDown>
                                   </EuiIcon>
-                                  <span>
+                                  <span
+                                    className="euiButtonEmpty__text"
+                                  >
                                     Rows per page: 2
                                   </span>
                                 </span>
@@ -389,6 +391,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                           aria-label="Previous page"
                           color="text"
                           disabled={false}
+                          iconSize="m"
                           iconType="arrowLeft"
                           onClick={[Function]}
                           type="button"
@@ -480,7 +483,9 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                               <span
                                 className="euiButtonEmpty__content"
                               >
-                                <span>
+                                <span
+                                  className="euiButtonEmpty__text"
+                                >
                                   1
                                 </span>
                               </span>
@@ -515,7 +520,9 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                               <span
                                 className="euiButtonEmpty__content"
                               >
-                                <span>
+                                <span
+                                  className="euiButtonEmpty__text"
+                                >
                                   2
                                 </span>
                               </span>
@@ -526,6 +533,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                           aria-label="Next page"
                           color="text"
                           disabled={true}
+                          iconSize="m"
                           iconType="arrowRight"
                           onClick={[Function]}
                           type="button"
diff --git a/src/components/button/_mixins.scss b/src/components/button/_mixins.scss
index 794b81f8a9a..a8b4fd559f1 100644
--- a/src/components/button/_mixins.scss
+++ b/src/components/button/_mixins.scss
@@ -40,6 +40,11 @@
   width: 100%;
   vertical-align: middle;
 
+  .euiButton__icon,
+  .euiButton__spinner {
+    flex-shrink: 0; // Ensures the icons/spinner don't scale down below their intended size
+  }
+
   @if ($isReverse) {
     flex-direction: row-reverse;
 
diff --git a/src/components/button/button_empty/__snapshots__/button_empty.test.js.snap b/src/components/button/button_empty/__snapshots__/button_empty.test.js.snap
index 63c8430286e..cb829362ba3 100644
--- a/src/components/button/button_empty/__snapshots__/button_empty.test.js.snap
+++ b/src/components/button/button_empty/__snapshots__/button_empty.test.js.snap
@@ -10,7 +10,9 @@ exports[`EuiButtonEmpty is rendered 1`] = `
   <span
     class="euiButtonEmpty__content"
   >
-    <span>
+    <span
+      class="euiButtonEmpty__text"
+    >
       Content
     </span>
   </span>
@@ -25,7 +27,9 @@ exports[`EuiButtonEmpty props color danger is rendered 1`] = `
   <span
     class="euiButtonEmpty__content"
   >
-    <span />
+    <span
+      class="euiButtonEmpty__text"
+    />
   </span>
 </button>
 `;
@@ -38,7 +42,9 @@ exports[`EuiButtonEmpty props color disabled is rendered 1`] = `
   <span
     class="euiButtonEmpty__content"
   >
-    <span />
+    <span
+      class="euiButtonEmpty__text"
+    />
   </span>
 </button>
 `;
@@ -51,7 +57,9 @@ exports[`EuiButtonEmpty props color ghost is rendered 1`] = `
   <span
     class="euiButtonEmpty__content"
   >
-    <span />
+    <span
+      class="euiButtonEmpty__text"
+    />
   </span>
 </button>
 `;
@@ -64,7 +72,9 @@ exports[`EuiButtonEmpty props color primary is rendered 1`] = `
   <span
     class="euiButtonEmpty__content"
   >
-    <span />
+    <span
+      class="euiButtonEmpty__text"
+    />
   </span>
 </button>
 `;
@@ -77,7 +87,9 @@ exports[`EuiButtonEmpty props color text is rendered 1`] = `
   <span
     class="euiButtonEmpty__content"
   >
-    <span />
+    <span
+      class="euiButtonEmpty__text"
+    />
   </span>
 </button>
 `;
@@ -90,7 +102,9 @@ exports[`EuiButtonEmpty props flush left is rendered 1`] = `
   <span
     class="euiButtonEmpty__content"
   >
-    <span />
+    <span
+      class="euiButtonEmpty__text"
+    />
   </span>
 </button>
 `;
@@ -103,7 +117,9 @@ exports[`EuiButtonEmpty props flush right is rendered 1`] = `
   <span
     class="euiButtonEmpty__content"
   >
-    <span />
+    <span
+      class="euiButtonEmpty__text"
+    />
   </span>
 </button>
 `;
@@ -118,7 +134,9 @@ exports[`EuiButtonEmpty props href secures the rel attribute when the target is
   <span
     class="euiButtonEmpty__content"
   >
-    <span />
+    <span
+      class="euiButtonEmpty__text"
+    />
   </span>
 </a>
 `;
@@ -151,7 +169,9 @@ exports[`EuiButtonEmpty props iconSide left is rendered 1`] = `
         />
       </g>
     </svg>
-    <span>
+    <span
+      class="euiButtonEmpty__text"
+    >
       Content
     </span>
   </span>
@@ -186,7 +206,9 @@ exports[`EuiButtonEmpty props iconSide right is rendered 1`] = `
         />
       </g>
     </svg>
-    <span>
+    <span
+      class="euiButtonEmpty__text"
+    >
       Content
     </span>
   </span>
@@ -221,7 +243,9 @@ exports[`EuiButtonEmpty props iconType is rendered 1`] = `
         />
       </g>
     </svg>
-    <span />
+    <span
+      class="euiButtonEmpty__text"
+    />
   </span>
 </button>
 `;
@@ -235,7 +259,9 @@ exports[`EuiButtonEmpty props isDisabled is rendered 1`] = `
   <span
     class="euiButtonEmpty__content"
   >
-    <span />
+    <span
+      class="euiButtonEmpty__text"
+    />
   </span>
 </button>
 `;
@@ -249,7 +275,9 @@ exports[`EuiButtonEmpty props isDisabled renders a button even when href is defi
   <span
     class="euiButtonEmpty__content"
   >
-    <span />
+    <span
+      class="euiButtonEmpty__text"
+    />
   </span>
 </button>
 `;
@@ -262,7 +290,9 @@ exports[`EuiButtonEmpty props size l is rendered 1`] = `
   <span
     class="euiButtonEmpty__content"
   >
-    <span />
+    <span
+      class="euiButtonEmpty__text"
+    />
   </span>
 </button>
 `;
@@ -275,7 +305,9 @@ exports[`EuiButtonEmpty props size s is rendered 1`] = `
   <span
     class="euiButtonEmpty__content"
   >
-    <span />
+    <span
+      class="euiButtonEmpty__text"
+    />
   </span>
 </button>
 `;
@@ -288,7 +320,9 @@ exports[`EuiButtonEmpty props size xs is rendered 1`] = `
   <span
     class="euiButtonEmpty__content"
   >
-    <span />
+    <span
+      class="euiButtonEmpty__text"
+    />
   </span>
 </button>
 `;
diff --git a/src/components/button/button_empty/_button_empty.scss b/src/components/button/button_empty/_button_empty.scss
index 1e6eab90fcd..a594c820c1f 100644
--- a/src/components/button/button_empty/_button_empty.scss
+++ b/src/components/button/button_empty/_button_empty.scss
@@ -16,10 +16,14 @@
 
   .euiButtonEmpty__content {
     @include euiButtonContent;
-
     padding: 0 $euiSizeS;
   }
 
+  .euiButtonEmpty__text {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
   &.euiButtonEmpty--small {
     height: $euiButtonHeightSmall;
   }
diff --git a/src/components/button/button_empty/button_empty.js b/src/components/button/button_empty/button_empty.js
index 3ed06daf3fc..799db99bf2a 100644
--- a/src/components/button/button_empty/button_empty.js
+++ b/src/components/button/button_empty/button_empty.js
@@ -112,7 +112,7 @@ export const EuiButtonEmpty = ({
       >
         <span className="euiButtonEmpty__content">
           {buttonIcon}
-          <span>{children}</span>
+          <span className="euiButtonEmpty__text">{children}</span>
         </span>
       </a>
     );
@@ -127,7 +127,7 @@ export const EuiButtonEmpty = ({
       >
         <span className="euiButtonEmpty__content">
           {buttonIcon}
-          <span>{children}</span>
+          <span className="euiButtonEmpty__text">{children}</span>
         </span>
       </button>
     );
diff --git a/src/components/button/button_icon/_button_icon.scss b/src/components/button/button_icon/_button_icon.scss
index 5c2b849a92d..cca1af101bc 100644
--- a/src/components/button/button_icon/_button_icon.scss
+++ b/src/components/button/button_icon/_button_icon.scss
@@ -1,19 +1,16 @@
 .euiButtonIcon {
   @include euiButton;
 
-  border-color: transparent;
+  border: none;
   background-color: transparent;
   box-shadow: none;
-  height: $euiSizeL;
-  width: $euiSizeL;
-  line-height: $euiSizeL;
+  height: auto;
+  min-height: $euiSizeL;
+  min-width: $euiSizeL;
+  line-height: 0; // ensures the icon creates the line-height and so it's always vertically centered
+  padding: $euiSizeXS;
   border-radius: $euiBorderRadius;
 
-  // Account for border.
-  .euiButtonIcon__icon {
-    transform: translateY(-2px);
-  }
-
   &:disabled {
     color: $euiButtonColorDisabled;
     pointer-events: none;
diff --git a/src/components/button/button_icon/button_icon.js b/src/components/button/button_icon/button_icon.js
index 9726a1a8e73..1e0c4db90cf 100644
--- a/src/components/button/button_icon/button_icon.js
+++ b/src/components/button/button_icon/button_icon.js
@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import { getSecureRelForTarget } from '../../../services';
 
 import {
+  ICON_SIZES,
   ICON_TYPES,
   EuiIcon,
 } from '../../icon';
@@ -40,6 +41,7 @@ export const COLORS = Object.keys(colorToClassNameMap);
 export const EuiButtonIcon = ({
   className,
   iconType,
+  iconSize,
   color,
   isDisabled,
   href,
@@ -64,7 +66,7 @@ export const EuiButtonIcon = ({
       <EuiIcon
         className="euiButtonIcon__icon"
         type={iconType}
-        size="m"
+        size={iconSize}
         aria-hidden="true"
       />
     );
@@ -106,6 +108,7 @@ EuiButtonIcon.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   iconType: PropTypes.oneOf(ICON_TYPES),
+  iconSize: PropTypes.oneOf(ICON_SIZES),
   color: PropTypes.oneOf(COLORS),
   isDisabled: PropTypes.bool,
   'aria-label': accessibleButtonIcon,
@@ -120,4 +123,5 @@ EuiButtonIcon.propTypes = {
 EuiButtonIcon.defaultProps = {
   type: 'button',
   color: 'primary',
+  iconSize: 'm',
 };
diff --git a/src/components/filter_group/__snapshots__/filter_button.test.js.snap b/src/components/filter_group/__snapshots__/filter_button.test.js.snap
index cf3e8aaf2bc..b3f7db5b968 100644
--- a/src/components/filter_group/__snapshots__/filter_button.test.js.snap
+++ b/src/components/filter_group/__snapshots__/filter_button.test.js.snap
@@ -10,7 +10,9 @@ exports[`EuiFilterButton is rendered 1`] = `
   <span
     class="euiButtonEmpty__content"
   >
-    <span>
+    <span
+      class="euiButtonEmpty__text"
+    >
       <span
         class="euiFilterButton__textShift"
       />
diff --git a/src/components/header/header_links/__snapshots__/header_link.test.js.snap b/src/components/header/header_links/__snapshots__/header_link.test.js.snap
index 1518be03889..d447a112c24 100644
--- a/src/components/header/header_links/__snapshots__/header_link.test.js.snap
+++ b/src/components/header/header_links/__snapshots__/header_link.test.js.snap
@@ -10,7 +10,9 @@ exports[`EuiHeaderLink is rendered 1`] = `
   <span
     class="euiButtonEmpty__content"
   >
-    <span />
+    <span
+      class="euiButtonEmpty__text"
+    />
   </span>
 </button>
 `;
diff --git a/src/components/icon/index.js b/src/components/icon/index.js
index b6daf602024..c9cc22f82b7 100644
--- a/src/components/icon/index.js
+++ b/src/components/icon/index.js
@@ -1,4 +1,5 @@
 export {
   EuiIcon,
   TYPES as ICON_TYPES,
+  SIZES as ICON_SIZES,
 } from './icon';
diff --git a/src/components/modal/__snapshots__/confirm_modal.test.js.snap b/src/components/modal/__snapshots__/confirm_modal.test.js.snap
index 53a6a67e81d..76334af75e4 100644
--- a/src/components/modal/__snapshots__/confirm_modal.test.js.snap
+++ b/src/components/modal/__snapshots__/confirm_modal.test.js.snap
@@ -71,7 +71,9 @@ exports[`renders EuiConfirmModal 1`] = `
           <span
             class="euiButtonEmpty__content"
           >
-            <span>
+            <span
+              class="euiButtonEmpty__text"
+            >
               Cancel Button Text
             </span>
           </span>
diff --git a/src/components/pagination/__snapshots__/pagination_button.test.js.snap b/src/components/pagination/__snapshots__/pagination_button.test.js.snap
index c73cf1492ce..c1c36ad30df 100644
--- a/src/components/pagination/__snapshots__/pagination_button.test.js.snap
+++ b/src/components/pagination/__snapshots__/pagination_button.test.js.snap
@@ -10,7 +10,9 @@ exports[`EuiPaginationButton is rendered 1`] = `
   <span
     class="euiButtonEmpty__content"
   >
-    <span />
+    <span
+      class="euiButtonEmpty__text"
+    />
   </span>
 </button>
 `;
diff --git a/src/components/table/mobile/__snapshots__/table_sort_mobile.test.js.snap b/src/components/table/mobile/__snapshots__/table_sort_mobile.test.js.snap
index f4f343f079f..dad030014aa 100644
--- a/src/components/table/mobile/__snapshots__/table_sort_mobile.test.js.snap
+++ b/src/components/table/mobile/__snapshots__/table_sort_mobile.test.js.snap
@@ -41,7 +41,9 @@ exports[`EuiTableSortMobile is rendered 1`] = `
               href="#arrow_down-a"
             />
           </svg>
-          <span>
+          <span
+            class="euiButtonEmpty__text"
+          >
             Sorting
           </span>
         </span>
diff --git a/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap b/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap
index 3581a31cd71..19b46ecbac7 100644
--- a/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap
+++ b/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap
@@ -42,7 +42,9 @@ exports[`EuiTablePagination is rendered 1`] = `
                 href="#arrow_down-a"
               />
             </svg>
-            <span>
+            <span
+              class="euiButtonEmpty__text"
+            >
               Rows per page: 50
             </span>
           </span>
@@ -94,7 +96,9 @@ exports[`EuiTablePagination is rendered 1`] = `
         <span
           class="euiButtonEmpty__content"
         >
-          <span>
+          <span
+            class="euiButtonEmpty__text"
+          >
             1
           </span>
         </span>
@@ -108,7 +112,9 @@ exports[`EuiTablePagination is rendered 1`] = `
         <span
           class="euiButtonEmpty__content"
         >
-          <span>
+          <span
+            class="euiButtonEmpty__text"
+          >
             2
           </span>
         </span>
@@ -122,7 +128,9 @@ exports[`EuiTablePagination is rendered 1`] = `
         <span
           class="euiButtonEmpty__content"
         >
-          <span>
+          <span
+            class="euiButtonEmpty__text"
+          >
             3
           </span>
         </span>
@@ -136,7 +144,9 @@ exports[`EuiTablePagination is rendered 1`] = `
         <span
           class="euiButtonEmpty__content"
         >
-          <span>
+          <span
+            class="euiButtonEmpty__text"
+          >
             4
           </span>
         </span>
@@ -150,7 +160,9 @@ exports[`EuiTablePagination is rendered 1`] = `
         <span
           class="euiButtonEmpty__content"
         >
-          <span>
+          <span
+            class="euiButtonEmpty__text"
+          >
             5
           </span>
         </span>
@@ -239,7 +251,9 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
         <span
           class="euiButtonEmpty__content"
         >
-          <span>
+          <span
+            class="euiButtonEmpty__text"
+          >
             1
           </span>
         </span>
@@ -253,7 +267,9 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
         <span
           class="euiButtonEmpty__content"
         >
-          <span>
+          <span
+            class="euiButtonEmpty__text"
+          >
             2
           </span>
         </span>
@@ -267,7 +283,9 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
         <span
           class="euiButtonEmpty__content"
         >
-          <span>
+          <span
+            class="euiButtonEmpty__text"
+          >
             3
           </span>
         </span>
@@ -281,7 +299,9 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
         <span
           class="euiButtonEmpty__content"
         >
-          <span>
+          <span
+            class="euiButtonEmpty__text"
+          >
             4
           </span>
         </span>
@@ -295,7 +315,9 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
         <span
           class="euiButtonEmpty__content"
         >
-          <span>
+          <span
+            class="euiButtonEmpty__text"
+          >
             5
           </span>
         </span>

From bbf5a3be58b9b2f38da6b8181dac5ee190d52034 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 27 Aug 2018 12:28:52 -0400
Subject: [PATCH 2/4] Added focus state to anchor tags within `EuiText`

---
 src-docs/src/views/text/text.js | 111 +++++++++++---------------------
 src/components/text/_text.scss  |   6 ++
 2 files changed, 43 insertions(+), 74 deletions(-)

diff --git a/src-docs/src/views/text/text.js b/src-docs/src/views/text/text.js
index 2c5a0102caf..c79d71c4317 100644
--- a/src-docs/src/views/text/text.js
+++ b/src-docs/src/views/text/text.js
@@ -1,46 +1,35 @@
 import React from 'react';
 
-import {
-  EuiText,
-  EuiHorizontalRule,
-} from '../../../../src/components';
+import { EuiText, EuiHorizontalRule } from '../../../../src/components';
 
 export default () => (
   <div>
     <EuiText grow={false}>
       <h1>This is Heading One</h1>
       <p>
-        Far out in the uncharted backwaters of the unfashionable end of
-        the western spiral arm of the Galaxy lies a small unregarded
-        yellow sun.
-
-        When suddenly some wild JavaScript code appeared! <code>const whoa = &quot;!&quot;</code>
+        Far out in the uncharted backwaters of the <a href="#">unfashionable</a> end of the western
+        spiral arm of the Galaxy lies a small unregarded yellow sun. When suddenly some wild
+        JavaScript code appeared! <code>const whoa = &quot;!&quot;</code>
       </p>
 
       <pre>
-        <code>
-          const completelyUnexpected = &quot;the audacity!&quot;;
-        </code>
+        <code>const completelyUnexpected = &quot;the audacity!&quot;;</code>
       </pre>
 
-      <p>
-        That was close.
-      </p>
+      <p>That was close.</p>
 
       <blockquote>
         <p>
-          I&apos;ve seen things you people wouldn&apos;t believe.
-          Attack ships on fire off the shoulder of Orion.
-          I watched C-beams glitter in the dark near the Tannhäuser Gate.
-          All those moments will be lost in time, like tears in rain. Time to die.
+          I&apos;ve seen things you people wouldn&apos;t believe. Attack ships on fire off the
+          shoulder of Orion. I watched C-beams glitter in the dark near the Tannhäuser Gate. All
+          those moments will be lost in time, like tears in rain. Time to die.
         </p>
       </blockquote>
 
       <p>
-        Orbiting this at a distance of roughly ninety-two million miles
-        is an utterly insignificant little blue green planet whose ape-
-        descended life forms are so amazingly primitive that they still
-        think digital watches are a pretty neat idea.
+        Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant
+        little blue green planet whose ape- descended life forms are so amazingly primitive that
+        they still think digital watches are a pretty neat idea.
       </p>
 
       <ul>
@@ -50,12 +39,11 @@ export default () => (
       </ul>
 
       <p>
-        This planet has - or rather had - a problem, which was this: most
-        of the people living on it were unhappy for pretty much of the time.
-        Many solutions were suggested for this problem, but most of these
-        were largely concerned with the movements of small green pieces
-        of paper, which is odd because on the whole it was not the small
-        green pieces of paper that were unhappy.
+        This planet has - or rather had - a problem, which was this: most of the people living on it
+        were unhappy for pretty much of the time. Many solutions were suggested for this problem,
+        but most of these were largely concerned with the movements of small green pieces of paper,
+        which is odd because on the whole it was not the small green pieces of paper that were
+        unhappy.
       </p>
 
       <h2>This is Heading Two</h2>
@@ -67,28 +55,27 @@ export default () => (
       </ol>
 
       <p>
-        But the dog wasn&rsquo;t lazy, it was just
-        practicing mindfulness, so it had a greater sense of
-        life-satisfaction than that fox with all its silly jumping.
+        But the dog wasn&rsquo;t lazy, it was just practicing mindfulness, so it had a greater sense
+        of life-satisfaction than that fox with all its silly jumping.
       </p>
 
       <p>
-        And from the fox&rsquo;s perspective, life was full of hoops to jump <em>through</em>, low-hanging
-        fruit to jump <em>for</em>, and dead car batteries to jump-<em>start</em>.
+        And from the fox&rsquo;s perspective, life was full of hoops to jump <em>through</em>,
+        low-hanging fruit to jump <em>for</em>, and dead car batteries to jump-<em>start</em>.
       </p>
 
       <h3>This is Heading Three</h3>
 
       <p>
-        So it thought the dog was making a poor life choice by focusing so much on mindfulness.
-        What if its car broke down?
+        So it thought the dog was making a poor life choice by focusing so much on mindfulness. What
+        if its car broke down?
       </p>
 
       <h4>This is Heading Four</h4>
 
       <p>
-        So it thought the dog was making a poor life choice by focusing so much on mindfulness.
-        What if its car broke down?
+        So it thought the dog was making a poor life choice by focusing so much on mindfulness. What
+        if its car broke down?
       </p>
 
       <h5>This is Heading Five</h5>
@@ -105,47 +92,23 @@ export default () => (
       <EuiHorizontalRule />
 
       <dl>
-        <dt>
-          The Elder Scrolls: Morrowind
-        </dt>
-        <dd>
-          The opening music alone evokes such strong memories.
-        </dd>
-        <dt>
-          TIE Fighter
-        </dt>
-        <dd>
-          The sequel to XWING, join the dark side and fly for the Emporer.
-        </dd>
-        <dt>
-          Quake 2
-        </dt>
-        <dd>
-          The game that made me drop out of college.
-        </dd>
+        <dt>The Elder Scrolls: Morrowind</dt>
+        <dd>The opening music alone evokes such strong memories.</dd>
+        <dt>TIE Fighter</dt>
+        <dd>The sequel to XWING, join the dark side and fly for the Emporer.</dd>
+        <dt>Quake 2</dt>
+        <dd>The game that made me drop out of college.</dd>
       </dl>
 
       <EuiHorizontalRule />
 
       <dl className="eui-definitionListReverse">
-        <dt>
-          Name
-        </dt>
-        <dd>
-          The Elder Scrolls: Morrowind
-        </dd>
-        <dt>
-          Game style
-        </dt>
-        <dd>
-          Open-world, fantasy, action role-playing
-        </dd>
-        <dt>
-          Release date
-        </dt>
-        <dd>
-          2002
-        </dd>
+        <dt>Name</dt>
+        <dd>The Elder Scrolls: Morrowind</dd>
+        <dt>Game style</dt>
+        <dd>Open-world, fantasy, action role-playing</dd>
+        <dt>Release date</dt>
+        <dd>2002</dd>
       </dl>
     </EuiText>
   </div>
diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
index b579cd125f6..13ff59d9152 100644
--- a/src/components/text/_text.scss
+++ b/src/components/text/_text.scss
@@ -110,6 +110,12 @@
       color: darken($euiLinkColor, 10%);
       text-decoration: underline;
     }
+
+    &:focus {
+      text-decoration: underline;
+      outline: solid 3px transparentize($euiLinkColor, .9);
+      background-color: transparentize($euiLinkColor, .9);
+    }
   }
 
   img {

From 370385e18843e6706dedd5aad8bf5203d3d17087 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 27 Aug 2018 12:45:06 -0400
Subject: [PATCH 3/4] Fixed alignment and coloring of form control clear button

---
 src/components/form/form_control_layout/_mixins.scss | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/form/form_control_layout/_mixins.scss b/src/components/form/form_control_layout/_mixins.scss
index 37380b8c548..19c03564c0e 100644
--- a/src/components/form/form_control_layout/_mixins.scss
+++ b/src/components/form/form_control_layout/_mixins.scss
@@ -17,9 +17,9 @@
   pointer-events: all;
 
   @include size($clearSize);
-  background-color: transparentize($euiColorMediumShade, .5);
+  background-color: lightOrDarkTheme($euiColorMediumShade, $euiColorDarkShade);
   border-radius: $clearSize;
-  line-height: $clearSize;
+  line-height: 0; // ensures the icon stays vertically centered
 
   &:focus {
     @include euiFocusRing;
@@ -30,8 +30,5 @@
     fill: $euiColorEmptyShade;
     stroke: $euiColorEmptyShade;
     stroke-width: 3px; // increase thickness of icon at such a small size
-    // better vertical position fix that works with IE
-    position: relative;
-    top: -2px;
   }
 }

From e5acf80d68486dee0afa832c10901b767dd843f0 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 4 Sep 2018 11:15:26 -0400
Subject: [PATCH 4/4] changelog

---
 CHANGELOG.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2d52d92273b..a1cd24282cd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,9 +1,13 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added sizes to `EuiButtonIcon` ([#1145](https://github.com/elastic/eui/pull/1145))
+
 **Bug fixes**
 
-- Fixed `makeHighContrastColor` sass mixin to properly output an accessible color contrast. ([#1158](https://github.com/elastic/eui/pull/1158))
+- Fixed `makeHighContrastColor` sass mixin to properly output an accessible color contrast ([#1158](https://github.com/elastic/eui/pull/1158))
 - Fixed `EuiTooltip` to interact correctly when the anchor is a disabled form element ([#1158](https://github.com/elastic/eui/pull/1158))
+- Fixed `EuiButton` (with icon) and `EuiButtonEmpty` truncation ([#1145](https://github.com/elastic/eui/pull/1145))
+- Fixed alignment and coloring of form control clear button ([#1145](https://github.com/elastic/eui/pull/1145))
 
 ## [`3.8.0`](https://github.com/elastic/eui/tree/v3.8.0)