Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Emotion] Convert EuiButtonIcon #6844

Merged
merged 11 commits into from
Jun 21, 2023
Merged

[Emotion] Convert EuiButtonIcon #6844

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
401eac8
[Setup] Clean up and DRY out shared button sizes
cee-chen Jun 14, 2023
2f9db9a
[EuiButtonIcon] Implement sizes styles + move existing Emotion styles…
cee-chen Jun 15, 2023
8558e85
[EuiButtonIcon] Convert remaining base button style
cee-chen Jun 15, 2023
3448484
[EuiButtonIcon] Convert disabled styles
cee-chen Jun 15, 2023
9a3567e
[EuiButtonIcon] Remove unused size modifiers/maps
cee-chen Jun 15, 2023
15e7f28
[EuiButtonIcon] Delete Sass files
cee-chen Jun 15, 2023
7008979
[EuiButtonIcon] Add Storybook playground
cee-chen Jun 15, 2023
fdd5c55
[EuiButtonIcon] Convert Enzyme tests to RTL
cee-chen Jun 20, 2023
8c1b3b0
changelog
cee-chen Jun 20, 2023
4806489
Update downstream snapshots
cee-chen Jun 20, 2023
30a415c
Fix Storybook icon loading
cee-chen Jun 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions .storybook/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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$/,
Expand Down
10 changes: 5 additions & 5 deletions src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
>
Expand All @@ -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"
Expand All @@ -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"
>
Expand All @@ -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"
Expand Down
38 changes: 19 additions & 19 deletions src/components/accordion/__snapshots__/accordion.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down
4 changes: 2 additions & 2 deletions src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
4 changes: 2 additions & 2 deletions src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Loading