From d1a1cb7ed9025a657141b76535ab49f00747ff70 Mon Sep 17 00:00:00 2001
From: Constance <constancecchen@users.noreply.github.com>
Date: Wed, 16 Nov 2022 15:36:23 -0800
Subject: [PATCH] [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
---
 .../__snapshots__/skip_link.test.tsx.snap     | 10 ++--
 .../button/__snapshots__/button.test.tsx.snap | 53 +++++++++----------
 src/components/button/button.tsx              |  1 +
 .../_button_display.test.tsx.snap             |  2 +-
 .../button_display/_button_display.styles.ts  |  5 +-
 .../button_display/_button_display.test.tsx   | 28 ++++++++--
 .../button/button_display/_button_display.tsx |  5 +-
 .../card/__snapshots__/card.test.tsx.snap     |  4 +-
 .../__snapshots__/card_select.test.tsx.snap   | 10 ++--
 .../__snapshots__/control_bar.test.tsx.snap   | 16 +++---
 .../super_update_button.test.tsx.snap         | 16 +++---
 .../super_date_picker/super_update_button.tsx |  2 +-
 .../__snapshots__/facet_button.test.tsx.snap  | 12 ++---
 src/components/facet/facet_button.tsx         |  4 +-
 .../__snapshots__/confirm_modal.test.tsx.snap |  4 +-
 upcoming_changelogs/6373.md                   |  6 +++
 16 files changed, 102 insertions(+), 76 deletions(-)
 create mode 100644 upcoming_changelogs/6373.md

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
index 9f81dada84c..53af988e3e1 100644
--- 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
index cc0079dc8e6..89fa202379a 100644
--- 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
index 820d302d87b..95fa48276df 100644
--- 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
index 9348791e83c..2d8be4b8f27 100644
--- 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
index 3ce66f464b2..a3848c68d20 100644
--- 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
index d590c9d0018..10e97d292ea 100644
--- 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
index d128aef860f..af4e79e6705 100644
--- 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,
diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap
index f02fcb9c3b6..c6b6df13c21 100644
--- a/src/components/card/__snapshots__/card.test.tsx.snap
+++ b/src/components/card/__snapshots__/card.test.tsx.snap
@@ -82,7 +82,7 @@ exports[`EuiCard horizontal selectable 1`] = `
   <button
     aria-checked="false"
     aria-describedby="generated-idTitle generated-idDescription"
-    class="emotion-euiButtonDisplay-m-fullWidth-m-base-text-euiCardSelect"
+    class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-m-base-text-euiCardSelect"
     role="switch"
     type="button"
   >
@@ -1077,7 +1077,7 @@ exports[`EuiCard props selectable 1`] = `
   <button
     aria-checked="false"
     aria-describedby="generated-idTitle generated-idDescription"
-    class="emotion-euiButtonDisplay-m-fullWidth-m-base-text-euiCardSelect"
+    class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-m-base-text-euiCardSelect"
     role="switch"
     type="button"
   >
diff --git a/src/components/card/card_select/__snapshots__/card_select.test.tsx.snap b/src/components/card/card_select/__snapshots__/card_select.test.tsx.snap
index 2f5b7719a50..1c1862c68ad 100644
--- a/src/components/card/card_select/__snapshots__/card_select.test.tsx.snap
+++ b/src/components/card/card_select/__snapshots__/card_select.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`EuiCardSelect is rendered 1`] = `
 <button
   aria-checked="false"
   aria-label="aria-label"
-  class="testClass1 testClass2 emotion-euiButtonDisplay-m-fullWidth-m-base-text-euiCardSelect"
+  class="testClass1 testClass2 emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-m-base-text-euiCardSelect"
   data-test-subj="test subject string"
   role="switch"
   type="button"
@@ -20,7 +20,7 @@ exports[`EuiCardSelect is rendered 1`] = `
 exports[`EuiCardSelect props can override color 1`] = `
 <button
   aria-checked="false"
-  class="emotion-euiButtonDisplay-m-fullWidth-m-base-danger-euiCardSelect"
+  class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-m-base-danger-euiCardSelect"
   role="switch"
   type="button"
 >
@@ -35,7 +35,7 @@ exports[`EuiCardSelect props can override color 1`] = `
 exports[`EuiCardSelect props can override text 1`] = `
 <button
   aria-checked="false"
-  class="emotion-euiButtonDisplay-m-fullWidth-m-base-text-euiCardSelect"
+  class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-m-base-text-euiCardSelect"
   role="switch"
   type="button"
 >
@@ -54,7 +54,7 @@ exports[`EuiCardSelect props can override text 1`] = `
 exports[`EuiCardSelect props isDisabled 1`] = `
 <button
   aria-checked="false"
-  class="emotion-euiButtonDisplay-m-fullWidth-isDisabled-m-base-disabled-euiCardSelect"
+  class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-isDisabled-m-base-disabled-euiCardSelect"
   disabled=""
   role="switch"
   type="button"
@@ -70,7 +70,7 @@ exports[`EuiCardSelect props isDisabled 1`] = `
 exports[`EuiCardSelect props isSelected 1`] = `
 <button
   aria-checked="true"
-  class="emotion-euiButtonDisplay-m-fullWidth-m-base-success-euiCardSelect"
+  class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-m-base-success-euiCardSelect"
   role="switch"
   type="button"
 >
diff --git a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
index d928614e5bc..19cf59437c1 100644
--- a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
+++ b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
@@ -45,7 +45,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiControlBar__button emotion-euiButtonDisplay-s-s-base-text"
+        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-s-base-text"
         data-test-subj="dts"
         type="button"
       >
@@ -139,7 +139,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiControlBar__button emotion-euiButtonDisplay-s-s-base-text"
+        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-s-base-text"
         data-test-subj="dts"
         type="button"
       >
@@ -233,7 +233,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiControlBar__button emotion-euiButtonDisplay-s-s-base-text"
+        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-s-base-text"
         data-test-subj="dts"
         type="button"
       >
@@ -327,7 +327,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiControlBar__button emotion-euiButtonDisplay-s-s-base-text"
+        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-s-base-text"
         data-test-subj="dts"
         type="button"
       >
@@ -420,7 +420,7 @@ exports[`EuiControlBar props position is rendered 1`] = `
       </ol>
     </nav>
     <button
-      class="euiControlBar__button emotion-euiButtonDisplay-s-s-base-text"
+      class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-s-base-text"
       data-test-subj="dts"
       type="button"
     >
@@ -507,7 +507,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiControlBar__button emotion-euiButtonDisplay-s-s-base-text"
+        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-s-base-text"
         data-test-subj="dts"
         type="button"
       >
@@ -601,7 +601,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiControlBar__button emotion-euiButtonDisplay-s-s-base-text"
+        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-s-base-text"
         data-test-subj="dts"
         type="button"
       >
@@ -700,7 +700,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiControlBar__button emotion-euiButtonDisplay-s-s-base-text"
+        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-s-base-text"
         data-test-subj="dts"
         type="button"
       >
diff --git a/src/components/date_picker/super_date_picker/__snapshots__/super_update_button.test.tsx.snap b/src/components/date_picker/super_date_picker/__snapshots__/super_update_button.test.tsx.snap
index cdcc550d8f1..71a48992a5d 100644
--- a/src/components/date_picker/super_date_picker/__snapshots__/super_update_button.test.tsx.snap
+++ b/src/components/date_picker/super_date_picker/__snapshots__/super_update_button.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`EuiSuperUpdateButton iconOnly 1`] = `
       iconType="refresh"
       isDisabled={false}
       isLoading={false}
-      minWidth={0}
+      minWidth={false}
       onClick={[Function]}
       size="m"
       textProps={
@@ -75,7 +75,7 @@ exports[`EuiSuperUpdateButton is rendered 1`] = `
       iconType="refresh"
       isDisabled={false}
       isLoading={false}
-      minWidth={0}
+      minWidth={false}
       onClick={[Function]}
       size="m"
       textProps={
@@ -145,7 +145,7 @@ exports[`EuiSuperUpdateButton isDisabled 1`] = `
       iconType="refresh"
       isDisabled={true}
       isLoading={false}
-      minWidth={0}
+      minWidth={false}
       onClick={[Function]}
       size="m"
       textProps={
@@ -209,7 +209,7 @@ exports[`EuiSuperUpdateButton isLoading 1`] = `
       iconType="kqlFunction"
       isDisabled={false}
       isLoading={true}
-      minWidth={0}
+      minWidth={false}
       onClick={[Function]}
       size="m"
       textProps={
@@ -279,7 +279,7 @@ exports[`EuiSuperUpdateButton needsUpdate 1`] = `
       iconType="kqlFunction"
       isDisabled={false}
       isLoading={false}
-      minWidth={0}
+      minWidth={false}
       onClick={[Function]}
       size="m"
       textProps={
@@ -346,7 +346,7 @@ exports[`EuiSuperUpdateButton responsive can be all 1`] = `
       iconType="refresh"
       isDisabled={false}
       isLoading={false}
-      minWidth={0}
+      minWidth={false}
       onClick={[Function]}
       size="m"
       textProps={
@@ -408,7 +408,7 @@ exports[`EuiSuperUpdateButton responsive can be false 1`] = `
       iconType="refresh"
       isDisabled={false}
       isLoading={false}
-      minWidth={0}
+      minWidth={false}
       onClick={[Function]}
       size="m"
       textProps={
@@ -467,7 +467,7 @@ exports[`EuiSuperUpdateButton showTooltip 1`] = `
       iconType="refresh"
       isDisabled={false}
       isLoading={false}
-      minWidth={0}
+      minWidth={false}
       onClick={[Function]}
       size="m"
       textProps={
diff --git a/src/components/date_picker/super_date_picker/super_update_button.tsx b/src/components/date_picker/super_date_picker/super_update_button.tsx
index d54a1c427d8..c100e6e617b 100644
--- a/src/components/date_picker/super_date_picker/super_update_button.tsx
+++ b/src/components/date_picker/super_date_picker/super_update_button.tsx
@@ -178,7 +178,7 @@ export class EuiSuperUpdateButton extends Component<
           <EuiShowFor sizes={responsive || 'none'}>
             <EuiButton
               className={classes}
-              minWidth={0}
+              minWidth={false}
               {...(sharedButtonProps as EuiButtonProps)}
               fill={fill}
               textProps={{
diff --git a/src/components/facet/__snapshots__/facet_button.test.tsx.snap b/src/components/facet/__snapshots__/facet_button.test.tsx.snap
index 7cc9b09d8e3..93c75252b95 100644
--- a/src/components/facet/__snapshots__/facet_button.test.tsx.snap
+++ b/src/components/facet/__snapshots__/facet_button.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiFacetButton is rendered 1`] = `
 <button
   aria-label="aria-label"
-  class="euiFacetButton testClass1 testClass2 emotion-euiButtonDisplay-s-s-euiFacetButton"
+  class="euiFacetButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiFacetButton"
   data-test-subj="test subject string"
   title="aria-label"
   type="button"
@@ -22,7 +22,7 @@ exports[`EuiFacetButton is rendered 1`] = `
 
 exports[`EuiFacetButton props icon is rendered 1`] = `
 <button
-  class="euiFacetButton emotion-euiButtonDisplay-s-s-euiFacetButton"
+  class="euiFacetButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiFacetButton"
   type="button"
 >
   <span
@@ -43,7 +43,7 @@ exports[`EuiFacetButton props icon is rendered 1`] = `
 
 exports[`EuiFacetButton props isDisabled is rendered 1`] = `
 <button
-  class="euiFacetButton emotion-euiButtonDisplay-s-isDisabled-s-euiFacetButton"
+  class="euiFacetButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiFacetButton"
   disabled=""
   type="button"
 >
@@ -71,7 +71,7 @@ exports[`EuiFacetButton props isDisabled is rendered 1`] = `
 
 exports[`EuiFacetButton props isLoading is rendered 1`] = `
 <button
-  class="euiFacetButton emotion-euiButtonDisplay-s-isDisabled-s-euiFacetButton"
+  class="euiFacetButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiFacetButton"
   disabled=""
   type="button"
 >
@@ -94,7 +94,7 @@ exports[`EuiFacetButton props isLoading is rendered 1`] = `
 
 exports[`EuiFacetButton props isSelected is rendered 1`] = `
 <button
-  class="euiFacetButton emotion-euiButtonDisplay-s-s-euiFacetButton"
+  class="euiFacetButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiFacetButton"
   type="button"
 >
   <span
@@ -111,7 +111,7 @@ exports[`EuiFacetButton props isSelected is rendered 1`] = `
 
 exports[`EuiFacetButton props quantity is rendered 1`] = `
 <button
-  class="euiFacetButton emotion-euiButtonDisplay-s-s-euiFacetButton"
+  class="euiFacetButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiFacetButton"
   type="button"
 >
   <span
diff --git a/src/components/facet/facet_button.tsx b/src/components/facet/facet_button.tsx
index e1b7eefa722..93121934650 100644
--- a/src/components/facet/facet_button.tsx
+++ b/src/components/facet/facet_button.tsx
@@ -14,7 +14,6 @@ import React, {
   ReactElement,
 } from 'react';
 import classNames from 'classnames';
-import { CommonProps } from '../common';
 
 import { EuiNotificationBadge } from '../badge';
 
@@ -32,11 +31,12 @@ import {
 } from './facet_button.styles';
 import {
   EuiButtonDisplay,
+  EuiButtonDisplayCommonProps,
   isButtonDisabled,
 } from '../button/button_display/_button_display';
 
 export interface EuiFacetButtonProps
-  extends CommonProps,
+  extends EuiButtonDisplayCommonProps,
     HTMLAttributes<HTMLButtonElement> {
   buttonRef?: RefCallback<HTMLButtonElement>;
   /**
diff --git a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
index 4ce8f887999..4bfb83a1d64 100644
--- a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
@@ -75,7 +75,7 @@ Array [
           </span>
         </button>
         <button
-          class="euiButton emotion-euiButtonDisplay-m-m-fill-primary"
+          class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-fill-primary"
           data-test-subj="confirmModalConfirmButton"
           type="button"
         >
@@ -159,7 +159,7 @@ Array [
           </span>
         </button>
         <button
-          class="euiButton emotion-euiButtonDisplay-m-m-fill-primary"
+          class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-fill-primary"
           data-test-subj="confirmModalConfirmButton"
           type="button"
         >
diff --git a/upcoming_changelogs/6373.md b/upcoming_changelogs/6373.md
new file mode 100644
index 00000000000..bf13e6eb40e
--- /dev/null
+++ b/upcoming_changelogs/6373.md
@@ -0,0 +1,6 @@
+- `EuiButton` now accepts `minWidth={false}`
+
+**Fixes**
+
+- `EuiButton` no longer outputs unnecessary inline styles for `minWidth={0}` or `minWidth={false}`
+- `EuiFacetButton` no longer reports type issues when passing props accepted by `EuiButton`