Small (mostly style) fixes (#1145)

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)
 

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 },

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"

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>

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]}

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]}

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"

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;