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

Jump to bottom

[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 1 commit
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
44 changes: 22 additions & 22 deletions src/components/button/button_icon/__snapshots__/button_icon.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[`EuiButtonIcon is rendered 1`] = `
<button
aria-label="aria-label"
class="euiButtonIcon euiButtonIcon--xSmall testClass1 testClass2 emotion-euiButtonIcon-xs-empty-primary"
class="euiButtonIcon testClass1 testClass2 emotion-euiButtonIcon-xs-empty-primary"
data-test-subj="test subject string"
type="button"
>
Expand All @@ -19,7 +19,7 @@ exports[`EuiButtonIcon is rendered 1`] = `
exports[`EuiButtonIcon props color accent is rendered 1`] = `
<button
aria-label="button"
class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-accent"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-accent"
type="button"
>
<span
Expand All @@ -34,7 +34,7 @@ exports[`EuiButtonIcon props color accent is rendered 1`] = `
exports[`EuiButtonIcon props color danger is rendered 1`] = `
<button
aria-label="button"
class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-danger"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-danger"
type="button"
>
<span
Expand All @@ -49,7 +49,7 @@ exports[`EuiButtonIcon props color danger is rendered 1`] = `
exports[`EuiButtonIcon props color ghost is rendered 1`] = `
<button
aria-label="button"
class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-text"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
type="button"
>
<span
Expand All @@ -64,7 +64,7 @@ exports[`EuiButtonIcon props color ghost is rendered 1`] = `
exports[`EuiButtonIcon props color primary is rendered 1`] = `
<button
aria-label="button"
class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-primary"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
type="button"
>
<span
Expand All @@ -79,7 +79,7 @@ exports[`EuiButtonIcon props color primary is rendered 1`] = `
exports[`EuiButtonIcon props color success is rendered 1`] = `
<button
aria-label="button"
class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-success"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-success"
type="button"
>
<span
Expand All @@ -94,7 +94,7 @@ exports[`EuiButtonIcon props color success is rendered 1`] = `
exports[`EuiButtonIcon props color text is rendered 1`] = `
<button
aria-label="button"
class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-text"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
type="button"
>
<span
Expand All @@ -109,7 +109,7 @@ exports[`EuiButtonIcon props color text is rendered 1`] = `
exports[`EuiButtonIcon props color warning is rendered 1`] = `
<button
aria-label="button"
class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-warning"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-warning"
type="button"
>
<span
Expand All @@ -124,7 +124,7 @@ exports[`EuiButtonIcon props color warning is rendered 1`] = `
exports[`EuiButtonIcon props display base is rendered 1`] = `
<button
aria-label="button"
class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-base-primary"
class="euiButtonIcon emotion-euiButtonIcon-xs-base-primary"
type="button"
>
<span
Expand All @@ -139,7 +139,7 @@ exports[`EuiButtonIcon props display base is rendered 1`] = `
exports[`EuiButtonIcon props display empty is rendered 1`] = `
<button
aria-label="button"
class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-primary"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
type="button"
>
<span
Expand All @@ -154,7 +154,7 @@ exports[`EuiButtonIcon props display empty is rendered 1`] = `
exports[`EuiButtonIcon props display fill is rendered 1`] = `
<button
aria-label="button"
class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-fill-primary"
class="euiButtonIcon emotion-euiButtonIcon-xs-fill-primary"
type="button"
>
<span
Expand All @@ -169,7 +169,7 @@ exports[`EuiButtonIcon props display fill is rendered 1`] = `
exports[`EuiButtonIcon props href secures the rel attribute when the target is _blank 1`] = `
<a
aria-label="button"
class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-primary"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
href="#"
rel="noopener noreferrer"
target="_blank"
Expand All @@ -186,7 +186,7 @@ exports[`EuiButtonIcon props href secures the rel attribute when the target is _
exports[`EuiButtonIcon props iconType is rendered 1`] = `
<button
aria-label="button"
class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-primary"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
type="button"
>
<span
Expand All @@ -201,7 +201,7 @@ exports[`EuiButtonIcon props iconType is rendered 1`] = `
exports[`EuiButtonIcon props isDisabled is rendered 1`] = `
<button
aria-label="button"
class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
disabled=""
type="button"
>
Expand All @@ -217,7 +217,7 @@ exports[`EuiButtonIcon props isDisabled is rendered 1`] = `
exports[`EuiButtonIcon props isDisabled or disabled is rendered 1`] = `
<button
aria-label="button"
class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
disabled=""
type="button"
>
Expand All @@ -233,7 +233,7 @@ exports[`EuiButtonIcon props isDisabled or disabled is rendered 1`] = `
exports[`EuiButtonIcon props isDisabled renders a button even when href is defined 1`] = `
<button
aria-label="button"
class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
disabled=""
type="button"
>
Expand All @@ -249,7 +249,7 @@ exports[`EuiButtonIcon props isDisabled renders a button even when href is defin
exports[`EuiButtonIcon props isLoading is rendered 1`] = `
<button
aria-label="button"
class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
disabled=""
type="button"
>
Expand All @@ -266,7 +266,7 @@ exports[`EuiButtonIcon props isSelected is rendered as false 1`] = `
<button
aria-label="button"
aria-pressed="false"
class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-primary"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
type="button"
>
<span
Expand All @@ -282,7 +282,7 @@ exports[`EuiButtonIcon props isSelected is rendered as true 1`] = `
<button
aria-label="button"
aria-pressed="true"
class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-primary"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
type="button"
>
<span
Expand All @@ -297,7 +297,7 @@ exports[`EuiButtonIcon props isSelected is rendered as true 1`] = `
exports[`EuiButtonIcon props size m is rendered 1`] = `
<button
aria-label="button"
class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-m-empty-primary"
class="euiButtonIcon emotion-euiButtonIcon-m-empty-primary"
type="button"
>
<span
Expand All @@ -312,7 +312,7 @@ exports[`EuiButtonIcon props size m is rendered 1`] = `
exports[`EuiButtonIcon props size s is rendered 1`] = `
<button
aria-label="button"
class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-s-empty-primary"
class="euiButtonIcon emotion-euiButtonIcon-s-empty-primary"
type="button"
>
<span
Expand All @@ -327,7 +327,7 @@ exports[`EuiButtonIcon props size s is rendered 1`] = `
exports[`EuiButtonIcon props size xs is rendered 1`] = `
<button
aria-label="button"
class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-primary"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
type="button"
>
<span
Expand Down
29 changes: 5 additions & 24 deletions src/components/button/button_icon/button_icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ import {
ExclusiveUnion,
PropsForAnchor,
PropsForButton,
keysOf,
} from '../../common';

import { IconType, IconSize, EuiIcon } from '../../icon';
Expand All @@ -38,16 +37,12 @@ import {
} from '../../../themes/amsterdam/global_styling/mixins/button';
import { isButtonDisabled } from '../button_display/_button_display';
import { euiButtonIconStyles, _emptyHoverStyles } from './button_icon.styles';
import { css } from '@emotion/react';

const displayToClassNameMap = {
base: null,
empty: 'euiButtonIcon--empty',
fill: 'euiButtonIcon--fill',
};
export const SIZES = ['xs', 's', 'm'] as const;
export type EuiButtonIconSizes = (typeof SIZES)[number];

export const DISPLAYS = keysOf(displayToClassNameMap);
type EuiButtonIconDisplay = keyof typeof displayToClassNameMap;
export const DISPLAYS = ['base', 'empty', 'fill'] as const;
type EuiButtonIconDisplay = (typeof DISPLAYS)[number];
Comment on lines +41 to +45
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Happy to see this being updated to the pattern we use in most other EUI components.


export interface EuiButtonIconProps extends CommonProps {
iconType: IconType;
Expand Down Expand Up @@ -110,16 +105,6 @@ type Props = ExclusiveUnion<
EuiButtonIconPropsForButton
>;

const sizeToClassNameMap = {
xs: 'euiButtonIcon--xSmall',
s: 'euiButtonIcon--small',
m: 'euiButtonIcon--medium',
};

export type EuiButtonIconSizes = keyof typeof sizeToClassNameMap;

export const SIZES = keysOf(sizeToClassNameMap);

export const EuiButtonIcon: FunctionComponent<Props> = (props) => {
const {
className,
Expand Down Expand Up @@ -173,11 +158,7 @@ export const EuiButtonIcon: FunctionComponent<Props> = (props) => {
isDisabled && styles.isDisabled,
];

const classes = classNames(
'euiButtonIcon',
size && sizeToClassNameMap[size],
className
);
const classes = classNames('euiButtonIcon', className);

if (_color === 'ghost') {
// INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
Expand Down