Skip to content

Commit

Permalink
[EuiButton] Improve minWidth handling (#6373)
Browse files Browse the repository at this point in the history
* EuiButton `minWidth` - allow disabling/removing minWidth without having to set an overriding inline style

* Update snapshots

* Props API - support `minWidth={false}`

- since false satisfies the conditions already laid out by `minWidth={0}`, we should explicitly allow this option as well for clearer intention communication

* [Typescript] Allow `EuiFacetButton` to accept the `minWidth` prop
- and all other props EuiButtonDisplay accepts

- it already `...rest`s them anyway, so this is just a question of typing

* changelog

* Snapshot updates
  • Loading branch information
Constance authored Nov 16, 2022
1 parent cd3f835 commit d1a1cb7
Show file tree
Hide file tree
Showing 16 changed files with 102 additions and 76 deletions.
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-s-fill-primary-euiSkipLink-euiScreenReaderOnly"
class="euiSkipLink testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-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-s-fill-primary-euiSkipLink-absolute-euiScreenReaderOnly"
class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-s-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-s-fill-primary-euiSkipLink-fixed-euiScreenReaderOnly"
class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-s-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-s-fill-primary-euiSkipLink-euiScreenReaderOnly"
class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-s-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-s-fill-primary-euiSkipLink-euiScreenReaderOnly"
class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-s-fill-primary-euiSkipLink-euiScreenReaderOnly"
href="#somewhere"
rel="noreferrer"
tabindex="-1"
Expand Down
53 changes: 26 additions & 27 deletions src/components/button/__snapshots__/button.test.tsx.snap
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-m-base-primary"
class="testClass1 testClass2 emotion-euiButtonDisplay-m-defaultMinWidth-m-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-m-base-accent"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-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-m-base-danger"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-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-m-base-text"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-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-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-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-m-base-success"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-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-m-base-text"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-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-m-base-warning"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-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-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-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-m-fill-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-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-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-m-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-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-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-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-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-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-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-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-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-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-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-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-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-isDisabled-m-base-disabled"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-m-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-isDisabled-m-base-disabled"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-m-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-isDisabled-m-base-disabled"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-m-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-isDisabled-m-base-disabled"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-m-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-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-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-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
type="button"
>
<span
Expand All @@ -332,7 +332,6 @@ 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"
style="min-inline-size:0"
type="button"
>
<span
Expand All @@ -343,7 +342,7 @@ exports[`EuiButton props minWidth is rendered 1`] = `

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

exports[`EuiButton props textProps is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-m-base-primary"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
type="button"
>
<span
Expand Down
1 change: 1 addition & 0 deletions src/components/button/button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -250,6 +250,7 @@ export const EuiButtonDisplayDeprecated = forwardRef<
if (minWidth !== undefined || minWidth !== null) {
calculatedStyle = {
...calculatedStyle,
// @ts-ignore - deprecated component
minWidth,
};
}
Expand Down
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-m"
class="testClass1 testClass2 emotion-euiButtonDisplay-m-defaultMinWidth-m"
data-test-subj="test subject string"
type="button"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ export const euiButtonDisplayStyles = (euiThemeContext: UseEuiTheme) => {
// Base
euiButtonDisplay: css`
${euiButtonBaseCSS()};
${logicalCSS('min-width', `${euiTheme.base * 7}px`)}
font-weight: ${euiTheme.font.weight.medium};
padding: 0 ${euiTheme.size.m};
Expand All @@ -51,7 +50,6 @@ export const euiButtonDisplayStyles = (euiThemeContext: UseEuiTheme) => {
text-decoration: underline;
}
`,

// States
isDisabled: css`
cursor: not-allowed;
Expand All @@ -60,6 +58,9 @@ export const euiButtonDisplayStyles = (euiThemeContext: UseEuiTheme) => {
display: block;
${logicalCSS('width', '100%')}
`,
defaultMinWidth: css`
${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')),
Expand Down
28 changes: 23 additions & 5 deletions src/components/button/button_display/_button_display.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,31 @@ describe('EuiButtonDisplay', () => {
expect(container.firstChild).toMatchSnapshot();
});

describe('props', () => {
test('minWidth', () => {
const { container } = render(<EuiButtonDisplay minWidth={0} />);
describe('minWidth', () => {
it('applies a `defaultMinWidth` class and no inline styles by default', () => {
const { container } = render(<EuiButtonDisplay />);

expect(container.innerHTML).toEqual(
expect.stringContaining('style="min-inline-size: 0;"')
expect(container.innerHTML).toContain('defaultMinWidth');
expect(container.innerHTML).not.toContain('style');
});

it('applies an inline style & not the `defaultMinWidth` class if a custom minWidth is passed', () => {
const { container } = render(<EuiButtonDisplay minWidth={200} />);

expect(container.innerHTML).not.toContain('defaultMinWidth');
expect(container.innerHTML).toContain('style="min-inline-size: 200px;"');
});

it('does not apply an inline style or `defaultMinWidth` if set to 0 or false', () => {
const { container } = render(
<>
<EuiButtonDisplay minWidth={0} />
<EuiButtonDisplay minWidth={false} />
</>
);

expect(container.innerHTML).not.toContain('defaultMinWidth');
expect(container.innerHTML).not.toContain('style');
});
});

Expand Down
5 changes: 3 additions & 2 deletions src/components/button/button_display/_button_display.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export interface EuiButtonDisplayCommonProps
/**
* Override the default minimum width
*/
minWidth?: CSSProperties['minWidth'];
minWidth?: CSSProperties['minWidth'] | false;
/**
* Force disables the button and changes the icon to a loading spinner
*/
Expand Down Expand Up @@ -145,6 +145,7 @@ export const EuiButtonDisplay = forwardRef<HTMLElement, EuiButtonDisplayProps>(
styles.euiButtonDisplay,
styles[size],
fullWidth && styles.fullWidth,
minWidth == null && styles.defaultMinWidth,
buttonIsDisabled && styles.isDisabled,
buttonRadiusStyle,
];
Expand Down Expand Up @@ -193,7 +194,7 @@ export const EuiButtonDisplay = forwardRef<HTMLElement, EuiButtonDisplayProps>(
element,
{
css: cssStyles,
style: minWidth != null ? { ...style, minInlineSize: minWidth } : style,
style: minWidth ? { ...style, minInlineSize: minWidth } : style,
ref,
...elementProps,
...relObj,
Expand Down
Loading

0 comments on commit d1a1cb7

Please sign in to comment.