[EuiButton] Improve minWidth handling (#6373)

* 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
elastic · Nov 16, 2022 · d1a1cb7 · d1a1cb7
1 parent cd3f835
commit d1a1cb7
Show file tree

Hide file tree

Showing 16 changed files with 102 additions and 76 deletions.
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
@@ -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"
@@ -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"
 >
@@ -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"
@@ -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"
 >
@@ -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"

diff --git a/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap
@@ -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"
 >
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"
 >
@@ -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"
 >
@@ -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"
 >
@@ -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"
 >
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -250,6 +250,7 @@ export const EuiButtonDisplayDeprecated = forwardRef<
     if (minWidth !== undefined || minWidth !== null) {
       calculatedStyle = {
         ...calculatedStyle,
+        // @ts-ignore - deprecated component
         minWidth,
       };
     }

diff --git a/src/components/button/button_display/__snapshots__/_button_display.test.tsx.snap b/src/components/button/button_display/__snapshots__/_button_display.test.tsx.snap
@@ -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"
 >

diff --git a/src/components/button/button_display/_button_display.styles.ts b/src/components/button/button_display/_button_display.styles.ts
@@ -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};
 
@@ -51,7 +50,6 @@ export const euiButtonDisplayStyles = (euiThemeContext: UseEuiTheme) => {
         text-decoration: underline;
       }
     `,
-
     // States
     isDisabled: css`
       cursor: not-allowed;
@@ -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')),

diff --git a/src/components/button/button_display/_button_display.test.tsx b/src/components/button/button_display/_button_display.test.tsx
@@ -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');
     });
   });
 

diff --git a/src/components/button/button_display/_button_display.tsx b/src/components/button/button_display/_button_display.tsx
@@ -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
    */
@@ -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,
     ];
@@ -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,