[Emotion] Convert EuiButtonIcon (#6844)

* [Setup] Clean up and DRY out shared button sizes

- Remove `useEuiButtonRadiusCSS` in favor of a more agnostic `euiButtonSizeMap` - using the raw data is less strict and generates fewer classNames

- `EuiButtonIcon` will shortly need the height/radius map and does not need to use all of `EuiButtonDisplay`'s logic (e.g. doesn't need fullWidth, or a content/text wrapper)

- Move `_buttonSize` to internal fn to make it unexportable / clearer that its CSS is specific to `EuiButtonDisplay`

* [EuiButtonIcon] Implement sizes styles + move existing Emotion styles to separate file

* [EuiButtonIcon] Convert remaining base button style

+ focus CSS comes from a hook

* [EuiButtonIcon] Convert disabled styles

- this can mostly be simplified down from its Sass mixin to just the cursor CSS

- the loading spinner color comment + logic is copied from `EuiButtonDisplay` - it previously existed in the `euiButtonContentDisabled` Sass mixin, but was targeting a selector that did not exist in EuiButtonIcon

* [EuiButtonIcon] Remove unused size modifiers/maps

+ convert enum types to new preferred syntax
+ move type enums to top of file

* [EuiButtonIcon] Delete Sass files

* [EuiButtonIcon] Add Storybook playground

+ configure all playgrounds to sort props by required first, then alphabetical

* [EuiButtonIcon] Convert Enzyme tests to RTL

* changelog

* Update downstream snapshots

* Fix Storybook icon loading

- preload all icons into the cache at once in the preview

- this increases Storybook's startup time somewhat significantly, but will probably be necessary until we resolve dynamic icons for SSR/Vite

.storybook/preview.tsx

@@ -11,6 +11,24 @@
 import React from 'react';
 import type { Preview } from '@storybook/react';
 
+/*
+ * Preload all EuiIcons - Storybook does not support dynamic icon loading
+ * TODO: https://github.com/elastic/eui/issues/5463
+ */
+import { typeToPathMap } from '../src/components/icon/icon_map';
+import { appendIconComponentCache } from '../src/components/icon/icon';
+const iconCache: Record<string, React.FC> = {};
+
+Object.entries(typeToPathMap).forEach(async ([iconType, iconFileName]) => {
+ // eslint-disable-next-line @typescript-eslint/no-var-requires
+ const iconExport = require(`../src/components/icon/assets/${iconFileName}`);
+ iconCache[iconType] = iconExport.icon;
+});
+appendIconComponentCache(iconCache);
+
+/*
+ * Theming
+ */
 import { EuiProvider } from '../src/components/provider';
 import { writingModeStyles } from './writing_mode.styles';
 
@@ -63,6 +81,7 @@ const preview: Preview = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  backgrounds: { disable: true }, // Use colorMode instead
  controls: {
+ sort: 'requiredFirst',
  matchers: {
  color: /(background|color)$/i,
  date: /Date$/,

src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EuiSkipLink is rendered 1`] = `
 <a
  aria-label="aria-label"
- class="euiSkipLink testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-fill-primary-euiSkipLink-euiScreenReaderOnly"
+ class="euiSkipLink testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-euiScreenReaderOnly"
  data-test-subj="test subject string"
  href="#somewhere"
  rel="noreferrer"
@@ -22,7 +22,7 @@ exports[`EuiSkipLink is rendered 1`] = `
 
 exports[`EuiSkipLink props position absolute is rendered 1`] = `
 <a
- class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-s-fill-primary-euiSkipLink-absolute-euiScreenReaderOnly"
+ class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-absolute-euiScreenReaderOnly"
  href="#somewhere"
  rel="noreferrer"
 >
@@ -34,7 +34,7 @@ exports[`EuiSkipLink props position absolute is rendered 1`] = `
 
 exports[`EuiSkipLink props position fixed is rendered 1`] = `
 <a
- class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-s-fill-primary-euiSkipLink-fixed-euiScreenReaderOnly"
+ class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-fixed-euiScreenReaderOnly"
  href="#somewhere"
  rel="noreferrer"
  tabindex="0"
@@ -47,7 +47,7 @@ exports[`EuiSkipLink props position fixed is rendered 1`] = `
 
 exports[`EuiSkipLink props position static is rendered 1`] = `
 <a
- class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-s-fill-primary-euiSkipLink-euiScreenReaderOnly"
+ class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-euiScreenReaderOnly"
  href="#somewhere"
  rel="noreferrer"
 >
@@ -59,7 +59,7 @@ exports[`EuiSkipLink props position static is rendered 1`] = `
 
 exports[`EuiSkipLink props tabIndex is rendered 1`] = `
 <a
- class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-s-fill-primary-euiSkipLink-euiScreenReaderOnly"
+ class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-euiScreenReaderOnly"
  href="#somewhere"
  rel="noreferrer"
  tabindex="-1"

src/components/accordion/__snapshots__/accordion.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
  aria-controls="20"
  aria-expanded="false"
  aria-labelledby="generated-id"
- class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+ class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
  tabindex="-1"
  type="button"
  >
@@ -65,7 +65,7 @@ exports[`EuiAccordion behavior does not open when isDisabled 1`] = `
  aria-controls="18"
  aria-expanded="false"
  aria-labelledby="generated-id"
- class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiAccordion__iconButton"
+ class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiAccordion__iconButton"
  disabled=""
  tabindex="-1"
  type="button"
@@ -121,7 +121,7 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
  aria-controls="17"
  aria-expanded="true"
  aria-labelledby="generated-id"
- class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton-isOpen"
+ class="euiButtonIcon euiAccordion__iconButton euiAccordion__iconButton-isOpen emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton-isOpen"
  tabindex="-1"
  type="button"
  >
@@ -175,7 +175,7 @@ exports[`EuiAccordion behavior opens when div is clicked if element is a div 1`]
  aria-controls="19"
  aria-expanded="true"
  aria-labelledby="generated-id"
- class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton-isOpen"
+ class="euiButtonIcon euiAccordion__iconButton euiAccordion__iconButton-isOpen emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton-isOpen"
  tabindex="-1"
  type="button"
  >
@@ -231,7 +231,7 @@ exports[`EuiAccordion is rendered 1`] = `
  aria-controls="0"
  aria-expanded="false"
  aria-labelledby="generated-id"
- class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+ class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
  tabindex="-1"
  type="button"
  >
@@ -281,7 +281,7 @@ exports[`EuiAccordion isDisabled is rendered 1`] = `
  aria-controls="16"
  aria-expanded="false"
  aria-labelledby="generated-id"
- class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiAccordion__iconButton"
+ class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiAccordion__iconButton"
  disabled=""
  tabindex="-1"
  type="button"
@@ -379,7 +379,7 @@ exports[`EuiAccordion props arrowDisplay right is rendered 1`] = `
  aria-controls="8"
  aria-expanded="false"
  aria-labelledby="generated-id"
- class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton--right emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton-arrowRight"
+ class="euiButtonIcon euiAccordion__iconButton euiAccordion__iconButton--right emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton-arrowRight"
  tabindex="-1"
  type="button"
  >
@@ -419,7 +419,7 @@ exports[`EuiAccordion props arrowProps is rendered 1`] = `
  aria-expanded="false"
  aria-label="aria-label"
  aria-labelledby="generated-id"
- class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton testClass1 testClass2 emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+ class="euiButtonIcon euiAccordion__iconButton testClass1 testClass2 emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
  data-test-subj="test subject string"
  tabindex="-1"
  type="button"
@@ -470,7 +470,7 @@ exports[`EuiAccordion props buttonContent is rendered 1`] = `
  aria-controls="3"
  aria-expanded="false"
  aria-labelledby="generated-id"
- class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+ class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
  tabindex="-1"
  type="button"
  >
@@ -524,7 +524,7 @@ exports[`EuiAccordion props buttonContentClassName is rendered 1`] = `
  aria-controls="2"
  aria-expanded="false"
  aria-labelledby="generated-id"
- class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+ class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
  tabindex="-1"
  type="button"
  >
@@ -574,7 +574,7 @@ exports[`EuiAccordion props buttonElement is rendered 1`] = `
  aria-controls="5"
  aria-expanded="false"
  aria-labelledby="generated-id"
- class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+ class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
  tabindex="0"
  type="button"
  >
@@ -622,7 +622,7 @@ exports[`EuiAccordion props buttonProps is rendered 1`] = `
  aria-controls="4"
  aria-expanded="false"
  aria-labelledby="generated-id"
- class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+ class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
  tabindex="-1"
  type="button"
  >
@@ -674,7 +674,7 @@ exports[`EuiAccordion props element is rendered 1`] = `
  aria-controls="1"
  aria-expanded="false"
  aria-labelledby="generated-id"
- class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+ class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
  tabindex="0"
  type="button"
  >
@@ -722,7 +722,7 @@ exports[`EuiAccordion props extraAction is rendered 1`] = `
  aria-controls="6"
  aria-expanded="false"
  aria-labelledby="generated-id"
- class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+ class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
  tabindex="-1"
  type="button"
  >
@@ -779,7 +779,7 @@ exports[`EuiAccordion props forceState closed is rendered 1`] = `
  aria-controls="11"
  aria-expanded="false"
  aria-labelledby="generated-id"
- class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+ class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
  tabindex="-1"
  type="button"
  >
@@ -833,7 +833,7 @@ exports[`EuiAccordion props forceState open is rendered 1`] = `
  aria-controls="12"
  aria-expanded="true"
  aria-labelledby="generated-id"
- class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton-isOpen"
+ class="euiButtonIcon euiAccordion__iconButton euiAccordion__iconButton-isOpen emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton-isOpen"
  tabindex="-1"
  type="button"
  >
@@ -887,7 +887,7 @@ exports[`EuiAccordion props initialIsOpen is rendered 1`] = `
  aria-controls="7"
  aria-expanded="true"
  aria-labelledby="generated-id"
- class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton-isOpen"
+ class="euiButtonIcon euiAccordion__iconButton euiAccordion__iconButton-isOpen emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton-isOpen"
  tabindex="-1"
  type="button"
  >
@@ -941,7 +941,7 @@ exports[`EuiAccordion props isLoading is rendered 1`] = `
  aria-controls="14"
  aria-expanded="false"
  aria-labelledby="generated-id"
- class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+ class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
  tabindex="-1"
  type="button"
  >
@@ -1000,7 +1000,7 @@ exports[`EuiAccordion props isLoadingMessage is rendered 1`] = `
  aria-controls="15"
  aria-expanded="false"
  aria-labelledby="generated-id"
- class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+ class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
  tabindex="-1"
  type="button"
  >

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

@@ -821,7 +821,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
  </span>
  <button
  aria-label="Previous page"
- class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiPaginationArrowButton"
+ class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiPaginationArrowButton"
  data-test-subj="pagination-button-previous"
  disabled=""
  type="button"
@@ -886,7 +886,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
  <a
  aria-controls="__table_generated-id"
  aria-label="Next page"
- class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-text-hoverStyles-euiPaginationArrowButton"
+ class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-text-euiPaginationArrowButton"
  data-test-subj="pagination-button-next"
  href="#__table_generated-id"
  rel="noreferrer"

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--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+ class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
  data-test-subj="euiCollapsedItemActionsButton"
  type="button"
  >

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

@@ -162,7 +162,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
  <a
  aria-controls="__table_generated-id"
  aria-label="Previous page"
- class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-text-hoverStyles-euiPaginationArrowButton"
+ class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-text-euiPaginationArrowButton"
  data-test-subj="pagination-button-previous"
  href="#__table_generated-id"
  rel="noreferrer"
@@ -227,7 +227,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
  </ul>
  <button
  aria-label="Next page"
- class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiPaginationArrowButton"
+ class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiPaginationArrowButton"
  data-test-subj="pagination-button-next"
  disabled=""
  type="button"