From 34fff99597bfcd85119a262189d5e5228e4c7ece Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Wed, 21 Jun 2023 11:39:58 -0700 Subject: [PATCH] [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 | 19 ++ .../__snapshots__/skip_link.test.tsx.snap | 10 +- .../__snapshots__/accordion.test.tsx.snap | 38 ++-- .../__snapshots__/basic_table.test.tsx.snap | 4 +- .../collapsed_item_actions.test.tsx.snap | 2 +- .../in_memory_table.test.tsx.snap | 4 +- .../button/__snapshots__/button.test.tsx.snap | 54 +++--- src/components/button/_index.scss | 1 - .../_button_display.test.tsx.snap | 2 +- .../button_display/_button_display.styles.ts | 27 +-- .../button/button_display/_button_display.tsx | 3 - .../__snapshots__/button_group.test.tsx.snap | 168 +++++++++--------- .../button_group/button_group.stories.tsx | 1 - .../__snapshots__/button_icon.test.tsx.snap | 45 ++--- .../button/button_icon/_button_icon.scss | 33 ---- src/components/button/button_icon/_index.scss | 1 - .../button_icon/button_icon.stories.tsx | 32 ++++ .../button/button_icon/button_icon.styles.ts | 68 +++++++ .../button/button_icon/button_icon.test.tsx | 83 ++++----- .../button/button_icon/button_icon.tsx | 78 ++++---- .../card/__snapshots__/card.test.tsx.snap | 4 +- .../__snapshots__/card_select.test.tsx.snap | 10 +- .../__snapshots__/code_block.test.tsx.snap | 6 +- .../collapsible_nav.test.tsx.snap | 14 +- .../collapsible_nav_group.test.tsx.snap | 4 +- .../__snapshots__/control_bar.test.tsx.snap | 16 +- .../__snapshots__/data_grid.test.tsx.snap | 28 +-- .../column_sorting.test.tsx.snap | 6 +- .../keyboard_shortcuts.test.tsx.snap | 2 +- .../super_date_picker.test.tsx.snap | 18 +- .../quick_select_popover.test.tsx.snap | 6 +- .../__snapshots__/facet_button.test.tsx.snap | 12 +- .../flyout/__snapshots__/flyout.test.tsx.snap | 46 ++--- .../field_password.test.tsx.snap | 6 +- .../inline_edit_form.test.tsx.snap | 24 +-- .../__snapshots__/list_group.test.tsx.snap | 4 +- .../list_group_item.test.tsx.snap | 4 +- ...list_group_item_extra_action.test.tsx.snap | 10 +- .../pinnable_list_group.test.tsx.snap | 20 +-- .../markdown_editor.test.tsx.snap | 138 +++++++------- .../__snapshots__/confirm_modal.test.tsx.snap | 8 +- .../modal/__snapshots__/modal.test.tsx.snap | 2 +- .../notification_event.test.tsx.snap | 2 +- ...tification_event_read_button.test.tsx.snap | 4 +- .../__snapshots__/pagination.test.tsx.snap | 48 ++--- .../table_pagination.test.tsx.snap | 8 +- .../global_toast_list.test.tsx.snap | 8 +- .../amsterdam/global_styling/mixins/button.ts | 42 ++--- upcoming_changelogs/6844.md | 3 + 49 files changed, 629 insertions(+), 547 deletions(-) delete mode 100644 src/components/button/button_icon/_button_icon.scss delete mode 100644 src/components/button/button_icon/_index.scss create mode 100644 src/components/button/button_icon/button_icon.stories.tsx create mode 100644 src/components/button/button_icon/button_icon.styles.ts create mode 100644 upcoming_changelogs/6844.md diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 1054c043e28..23d20226efc 100644 --- a/.storybook/preview.tsx +++ b/.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 = {}; + +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$/, diff --git a/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap b/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap index 53af988e3e1..9f034b50274 100644 --- a/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap +++ b/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap @@ -3,7 +3,7 @@ exports[`EuiSkipLink is rendered 1`] = ` @@ -34,7 +34,7 @@ exports[`EuiSkipLink props position absolute is rendered 1`] = ` exports[`EuiSkipLink props position fixed is rendered 1`] = ` @@ -59,7 +59,7 @@ exports[`EuiSkipLink props position static is rendered 1`] = ` exports[`EuiSkipLink props tabIndex is rendered 1`] = ` `; @@ -265,7 +266,7 @@ exports[`EuiButtonIcon props isSelected is rendered as false 1`] = `