[EuiButtonIcon] Add display prop

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `31.8.0`.
+- Added a `display` and `size` props to `EuiButtonIcon` ([#4466](https://github.com/elastic/eui/pull/4466))
 
 ## [`31.8.0`](https://github.com/elastic/eui/tree/v31.8.0)
 

src-docs/src/views/button/button_example.js

@@ -55,9 +55,41 @@ const buttonOptionFlushSnippet = `<EuiButtonEmpty flush="left"><!-- Button text
 import ButtonIcon from './button_icon';
 const buttonIconSource = require('!!raw-loader!./button_icon');
 const buttonIconHtml = renderToHtml(ButtonIcon);
-const buttonIconSnippet = `<EuiButtonIcon
+const buttonIconSnippet = [
+  `<EuiButtonIcon
   iconType={icon}
-/>`;
+/>`,
+  `<EuiButtonIcon
+  display="fill"
+  iconType={icon}
+/>`,
+  `<EuiButtonIcon
+  display="base"
+  size="s"
+  iconType={icon}
+/>`,
+];
+
+import SplitButton from './split_button';
+const splitButtonSource = require('!!raw-loader!./split_button');
+const splitButtonHtml = renderToHtml(SplitButton);
+const splitButtonSnippet = [
+  `<EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+  <EuiFlexItem grow={false}>
+    <EuiButton size="s">
+      Primary action
+    </EuiButton>
+  </EuiFlexItem>
+  <EuiFlexItem grow={false}>
+    <EuiButtonIcon
+      display="base"
+      size="s"
+      iconType="boxesVertical"
+      aria-label="More"
+    />
+  </EuiFlexItem>
+</EuiFlexGroup>`,
+];
 
 import ButtonGhost from './button_ghost';
 const buttonGhostSource = require('!!raw-loader!./button_ghost');
@@ -300,15 +332,52 @@ export const ButtonExample = {
         },
       ],
       text: (
-        <p>
-          <strong>EuiButtonIcons</strong> are buttons that only contain an icon
-          (no text).
-        </p>
+        <>
+          <p>
+            An <strong>EuiButtonIcon</strong> is a button that only contains an
+            icon (no text). Though it does require an{' '}
+            <EuiCode>aria-label</EuiCode> to express the meaning to screen
+            readers.
+          </p>
+          <p>
+            Use the <EuiCode>display</EuiCode> and <EuiCode>size</EuiCode> props
+            to match the appearance of your <strong>EuiButtonIcon</strong> other
+            standard buttons. By defaut they will appear as{' '}
+            <EuiCode>xs</EuiCode> <EuiCode>empty</EuiCode> buttons.
+          </p>
+        </>
       ),
       props: { EuiButtonIcon },
       snippet: buttonIconSnippet,
       demo: <ButtonIcon />,
     },
+    {
+      title: 'Split buttons',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: splitButtonSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: splitButtonHtml,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            EUI does not support split buttons specifically. Instead, we
+            recommend using separate buttons for the main and overflow actions.
+            You can achieve this by simply using the <EuiCode>display</EuiCode>{' '}
+            and <EuiCode>size</EuiCode> props <strong>EuiButtonIcon</strong> to
+            match that of the primary action button.
+          </p>
+        </>
+      ),
+      props: { EuiButton, EuiButtonIcon },
+      snippet: splitButtonSnippet,
+      demo: <SplitButton />,
+    },
     {
       title: 'Toggle buttons',
       source: [

src-docs/src/views/button/button_icon.js

@@ -4,37 +4,89 @@ import {
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiSpacer,
+  EuiTitle,
 } from '../../../../src/components';
 
-const colors = [
-  'primary',
-  'text',
-  'accent',
-  'subdued',
-  'success',
-  'warning',
-  'danger',
-];
+const colors = ['primary', 'text', 'accent', 'success', 'warning', 'danger'];
 
 export default () => (
-  <EuiFlexGroup gutterSize="s" alignItems="center">
-    {colors.map((color) => (
-      <EuiFlexItem key={color} grow={false}>
+  <>
+    <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+      {colors.map((color) => (
+        <EuiFlexItem key={color} grow={false}>
+          <EuiButtonIcon
+            color={color}
+            onClick={() => {}}
+            iconType="arrowRight"
+            aria-label="Next"
+          />
+        </EuiFlexItem>
+      ))}
+    </EuiFlexGroup>
+    <EuiSpacer size="m" />
+    <EuiTitle size="xxs">
+      <h3>Display</h3>
+    </EuiTitle>
+    <EuiSpacer size="s" />
+    <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon iconType="arrowRight" aria-label="Next" />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon display="base" iconType="arrowRight" aria-label="Next" />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon display="fill" iconType="arrowRight" aria-label="Next" />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+    <EuiSpacer size="s" />
+    <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon iconType="arrowRight" isDisabled aria-label="Next" />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          display="base"
+          iconType="arrowRight"
+          isDisabled
+          aria-label="Next"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          iconType="arrowRight"
+          display="fill"
+          isDisabled
+          aria-label="Next"
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+    <EuiSpacer size="m" />
+    <EuiTitle size="xxs">
+      <h3>Size</h3>
+    </EuiTitle>
+    <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon display="base" iconType="arrowRight" aria-label="Next" />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          display="base"
+          iconType="arrowRight"
+          size="s"
+          aria-label="Next"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
         <EuiButtonIcon
-          color={color}
-          onClick={() => {}}
+          display="base"
           iconType="arrowRight"
+          iconSize="l"
+          size="m"
           aria-label="Next"
         />
       </EuiFlexItem>
-    ))}
-    <EuiFlexItem grow={false}>
-      <EuiButtonIcon
-        onClick={() => window.alert('Button clicked')}
-        iconType="arrowRight"
-        aria-label="Next"
-        disabled
-      />
-    </EuiFlexItem>
-  </EuiFlexGroup>
+    </EuiFlexGroup>
+  </>
 );

src-docs/src/views/button/split_button.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {
+  EuiButton,
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '../../../../src/components';
+
+export default () => (
+  <>
+    <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiButton size="s" iconType="calendar">
+          Last 15 min
+        </EuiButton>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          display="base"
+          size="s"
+          iconType="boxesVertical"
+          aria-label="More"
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </>
+);

src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`CollapsedItemActions render 1`] = `
     >
       <button
         aria-label="All actions"
-        class="euiButtonIcon euiButtonIcon--text"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
         data-test-subj="euiCollapsedItemActionsButton"
         type="button"
       >

src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap

@@ -473,7 +473,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                               <a
                                 aria-controls="__table_generated-id"
                                 aria-label="Previous page, 1"
-                                className="euiButtonIcon euiButtonIcon--text"
+                                className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                                 data-test-subj="pagination-button-previous"
                                 href="#__table_generated-id"
                                 onClick={[Function]}
@@ -685,7 +685,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                             >
                               <button
                                 aria-label="Next page"
-                                className="euiButtonIcon euiButtonIcon--text"
+                                className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                                 data-test-subj="pagination-button-next"
                                 disabled={true}
                                 onClick={[Function]}

src/components/button/button.tsx

@@ -50,10 +50,6 @@ export type ButtonColor =
   | 'warning'
   | 'danger'
   | 'ghost'
-  /**
-   * Set for deprecation 2/26/20
-   * This color button can easily be confused with disabled, it should not be used
-   */
   | 'text';
 
 export type ButtonSize = 's' | 'm';

src/components/button/button_empty/_button_empty.scss

@@ -29,7 +29,7 @@
   }
 
   &.euiButtonEmpty--xSmall {
-    height: $euiSizeL;
+    height: $euiButtonHeightXSmall;
     font-size: $euiFontSizeS;
   }