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 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
54 changes: 27 additions & 27 deletions src/components/button/__snapshots__/button.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[`EuiButton is rendered 1`] = `
<button
aria-label="aria-label"
class="testClass1 testClass2 emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
class="testClass1 testClass2 emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
data-test-subj="test subject string"
type="button"
>
Expand All @@ -21,7 +21,7 @@ exports[`EuiButton is rendered 1`] = `

exports[`EuiButton props color accent is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-accent"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-accent"
type="button"
>
<span
Expand All @@ -32,7 +32,7 @@ exports[`EuiButton props color accent is rendered 1`] = `

exports[`EuiButton props color danger is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-danger"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-danger"
type="button"
>
<span
Expand All @@ -43,7 +43,7 @@ exports[`EuiButton props color danger is rendered 1`] = `

exports[`EuiButton props color ghost is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-text"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-text"
type="button"
>
<span
Expand All @@ -54,7 +54,7 @@ exports[`EuiButton props color ghost is rendered 1`] = `

exports[`EuiButton props color primary is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
type="button"
>
<span
Expand All @@ -65,7 +65,7 @@ exports[`EuiButton props color primary is rendered 1`] = `

exports[`EuiButton props color success is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-success"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-success"
type="button"
>
<span
Expand All @@ -76,7 +76,7 @@ exports[`EuiButton props color success is rendered 1`] = `

exports[`EuiButton props color text is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-text"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-text"
type="button"
>
<span
Expand All @@ -87,7 +87,7 @@ exports[`EuiButton props color text is rendered 1`] = `

exports[`EuiButton props color warning is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-warning"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-warning"
type="button"
>
<span
Expand All @@ -98,7 +98,7 @@ exports[`EuiButton props color warning is rendered 1`] = `

exports[`EuiButton props contentProps is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
type="button"
>
<span
Expand All @@ -117,7 +117,7 @@ exports[`EuiButton props contentProps is rendered 1`] = `

exports[`EuiButton props fill is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-fill-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-fill-primary"
type="button"
>
<span
Expand All @@ -128,7 +128,7 @@ exports[`EuiButton props fill is rendered 1`] = `

exports[`EuiButton props fullWidth is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-base-primary"
type="button"
>
<span
Expand All @@ -139,7 +139,7 @@ exports[`EuiButton props fullWidth is rendered 1`] = `

exports[`EuiButton props href secures the rel attribute when the target is _blank 1`] = `
<a
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
href="#"
rel="noopener noreferrer"
target="_blank"
Expand All @@ -152,7 +152,7 @@ exports[`EuiButton props href secures the rel attribute when the target is _blan

exports[`EuiButton props iconSide left is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
type="button"
>
<span
Expand All @@ -173,7 +173,7 @@ exports[`EuiButton props iconSide left is rendered 1`] = `

exports[`EuiButton props iconSide right is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
type="button"
>
<span
Expand All @@ -194,7 +194,7 @@ exports[`EuiButton props iconSide right is rendered 1`] = `

exports[`EuiButton props iconSize m is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
type="button"
>
<span
Expand All @@ -215,7 +215,7 @@ exports[`EuiButton props iconSize m is rendered 1`] = `

exports[`EuiButton props iconSize s is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
type="button"
>
<span
Expand All @@ -236,7 +236,7 @@ exports[`EuiButton props iconSize s is rendered 1`] = `

exports[`EuiButton props iconType is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
type="button"
>
<span
Expand All @@ -252,7 +252,7 @@ exports[`EuiButton props iconType is rendered 1`] = `

exports[`EuiButton props isDisabled is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-m-base-disabled"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-base-disabled"
disabled=""
type="button"
>
Expand All @@ -264,7 +264,7 @@ exports[`EuiButton props isDisabled is rendered 1`] = `

exports[`EuiButton props isDisabled renders a button even when href is defined 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-m-base-disabled"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-base-disabled"
disabled=""
type="button"
>
Expand All @@ -276,7 +276,7 @@ exports[`EuiButton props isDisabled renders a button even when href is defined 1

exports[`EuiButton props isDisabled renders if passed as disabled 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-m-base-disabled"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-base-disabled"
disabled=""
type="button"
>
Expand All @@ -288,7 +288,7 @@ exports[`EuiButton props isDisabled renders if passed as disabled 1`] = `

exports[`EuiButton props isLoading is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-m-base-disabled"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-base-disabled"
disabled=""
type="button"
>
Expand All @@ -308,7 +308,7 @@ exports[`EuiButton props isLoading is rendered 1`] = `
exports[`EuiButton props isSelected is rendered as false 1`] = `
<button
aria-pressed="false"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
type="button"
>
<span
Expand All @@ -320,7 +320,7 @@ exports[`EuiButton props isSelected is rendered as false 1`] = `
exports[`EuiButton props isSelected is rendered as true 1`] = `
<button
aria-pressed="true"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
type="button"
>
<span
Expand All @@ -331,7 +331,7 @@ exports[`EuiButton props isSelected is rendered as true 1`] = `

exports[`EuiButton props minWidth is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-base-primary"
type="button"
>
<span
Expand All @@ -342,7 +342,7 @@ exports[`EuiButton props minWidth is rendered 1`] = `

exports[`EuiButton props size m is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
type="button"
>
<span
Expand All @@ -353,7 +353,7 @@ exports[`EuiButton props size m is rendered 1`] = `

exports[`EuiButton props size s is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-s-defaultMinWidth-s-base-primary"
class="euiButton emotion-euiButtonDisplay-s-defaultMinWidth-base-primary"
type="button"
>
<span
Expand All @@ -364,7 +364,7 @@ exports[`EuiButton props size s is rendered 1`] = `

exports[`EuiButton props textProps is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
type="button"
>
<span
Expand Down
2 changes: 1 addition & 1 deletion src/components/button/button_display/__snapshots__/_button_display.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[`EuiButtonDisplay renders 1`] = `
<button
aria-label="aria-label"
class="testClass1 testClass2 emotion-euiButtonDisplay-m-defaultMinWidth-m"
class="testClass1 testClass2 emotion-euiButtonDisplay-m-defaultMinWidth"
data-test-subj="test subject string"
type="button"
>
Expand Down
27 changes: 16 additions & 11 deletions src/components/button/button_display/_button_display.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import {
logicalShorthandCSS,
logicalTextAlignStyle,
} from '../../../global_styling';
import { euiButtonSizeMap } from '../../../themes/amsterdam/global_styling/mixins';
import { EuiButtonDisplaySizes } from './_button_display';

// Provides a solid reset and base for handling sizing layout
// Does not include any visual styles
Expand All @@ -28,16 +30,19 @@ export const euiButtonBaseCSS = () => {
`;
};

const _buttonSize = (size: string) => {
return `
${logicalCSS('height', size)};
// prevents descenders from getting cut off
line-height: ${size};
`;
};

export const euiButtonDisplayStyles = (euiThemeContext: UseEuiTheme) => {
const { euiTheme } = euiThemeContext;
const sizes = euiButtonSizeMap(euiThemeContext);

const _buttonSize = (sizeKey: EuiButtonDisplaySizes) => {
const size = sizes[sizeKey];
return css`
${logicalCSS('height', size.height)}
line-height: ${size.height}; /* Prevents descenders from getting cut off */
${euiFontSize(euiThemeContext, size.fontScale)}
border-radius: ${size.radius};
`;
};
Comment on lines +35 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.

🧼 Super clean!


return {
// Base
Expand All @@ -63,8 +68,8 @@ export const euiButtonDisplayStyles = (euiThemeContext: UseEuiTheme) => {
${logicalCSS('min-width', `${euiTheme.base * 7}px`)}
`,
// Sizes
xs: css(_buttonSize(euiTheme.size.l), euiFontSize(euiThemeContext, 'xs')),
s: css(_buttonSize(euiTheme.size.xl), euiFontSize(euiThemeContext, 's')),
m: css(_buttonSize(euiTheme.size.xxl), euiFontSize(euiThemeContext, 's')),
xs: css(_buttonSize('xs')),
s: css(_buttonSize('s')),
m: css(_buttonSize('m')),
};
};
3 changes: 0 additions & 3 deletions src/components/button/button_display/_button_display.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ import {
EuiButtonDisplayContentType,
} from './_button_display_content';
import { validateHref } from '../../../services/security/href_validator';
import { useEuiButtonRadiusCSS } from '../../../themes/amsterdam/global_styling/mixins';

const SIZES = ['xs', 's', 'm'] as const;
export type EuiButtonDisplaySizes = (typeof SIZES)[number];
Expand Down Expand Up @@ -142,14 +141,12 @@ export const EuiButtonDisplay = forwardRef<HTMLElement, EuiButtonDisplayProps>(
const theme = useEuiTheme();

const styles = euiButtonDisplayStyles(theme);
const buttonRadiusStyle = useEuiButtonRadiusCSS()[size];
const cssStyles = [
styles.euiButtonDisplay,
styles[size],
fullWidth && styles.fullWidth,
minWidth == null && styles.defaultMinWidth,
buttonIsDisabled && styles.isDisabled,
buttonRadiusStyle,
];

const innerNode = (
Expand Down
Loading