fix: Button stories shouldn't shrink past min-content (microsoft#31058)

Hotell · Apr 17, 2024 · 48ced17 · 48ced17
1 parent eedf4cf
commit 48ced17
Show file tree

Hide file tree

Showing 34 changed files with 34 additions and 0 deletions.
diff --git a/packages/react-components/react-button/stories/Button/ButtonShape.stories.tsx b/packages/react-components/react-button/stories/Button/ButtonShape.stories.tsx
@@ -5,6 +5,7 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/Button/ButtonSize.stories.tsx b/packages/react-components/react-button/stories/Button/ButtonSize.stories.tsx
@@ -12,6 +12,7 @@ const useStyles = makeStyles({
     display: 'flex',
     flexDirection: 'column',
     rowGap: '15px',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/Button/ButtonWithLongText.stories.tsx b/packages/react-components/react-button/stories/Button/ButtonWithLongText.stories.tsx
@@ -9,6 +9,7 @@ const useStyles = makeStyles({
     alignItems: 'center',
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/...react-components/react-button/stories/CompoundButton/CompoundButtonAppearance.stories.tsx b/...react-components/react-button/stories/CompoundButton/CompoundButtonAppearance.stories.tsx
@@ -8,6 +8,7 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/...s/react-components/react-button/stories/CompoundButton/CompoundButtonDisabled.stories.tsx b/...s/react-components/react-button/stories/CompoundButton/CompoundButtonDisabled.stories.tsx
@@ -5,6 +5,7 @@ const useStyles = makeStyles({
   innerWrapper: {
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
   outerWrapper: {
     display: 'flex',

diff --git a/packages/react-components/react-button/stories/CompoundButton/CompoundButtonIcon.stories.tsx b/packages/react-components/react-button/stories/CompoundButton/CompoundButtonIcon.stories.tsx
@@ -7,6 +7,7 @@ const useStyles = makeStyles({
     alignItems: 'center',
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/...ages/react-components/react-button/stories/CompoundButton/CompoundButtonShape.stories.tsx b/...ages/react-components/react-button/stories/CompoundButton/CompoundButtonShape.stories.tsx
@@ -5,6 +5,7 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/CompoundButton/CompoundButtonSize.stories.tsx b/packages/react-components/react-button/stories/CompoundButton/CompoundButtonSize.stories.tsx
@@ -7,6 +7,7 @@ const useStyles = makeStyles({
     alignItems: 'center',
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/...act-components/react-button/stories/CompoundButton/CompoundButtonWithLongText.stories.tsx b/...act-components/react-button/stories/CompoundButton/CompoundButtonWithLongText.stories.tsx
@@ -9,6 +9,7 @@ const useStyles = makeStyles({
     alignItems: 'center',
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/MenuButton/MenuButtonAppearance.stories.tsx b/packages/react-components/react-button/stories/MenuButton/MenuButtonAppearance.stories.tsx
@@ -8,6 +8,7 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/MenuButton/MenuButtonDisabled.stories.tsx b/packages/react-components/react-button/stories/MenuButton/MenuButtonDisabled.stories.tsx
@@ -5,6 +5,7 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/MenuButton/MenuButtonIcon.stories.tsx b/packages/react-components/react-button/stories/MenuButton/MenuButtonIcon.stories.tsx
@@ -15,6 +15,7 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/MenuButton/MenuButtonShape.stories.tsx b/packages/react-components/react-button/stories/MenuButton/MenuButtonShape.stories.tsx
@@ -5,6 +5,7 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/MenuButton/MenuButtonSize.stories.tsx b/packages/react-components/react-button/stories/MenuButton/MenuButtonSize.stories.tsx
@@ -6,6 +6,7 @@ const useStyles = makeStyles({
     alignItems: 'center',
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/MenuButton/MenuButtonSizeLarge.stories.tsx b/packages/react-components/react-button/stories/MenuButton/MenuButtonSizeLarge.stories.tsx
@@ -15,6 +15,7 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/MenuButton/MenuButtonSizeMedium.stories.tsx b/packages/react-components/react-button/stories/MenuButton/MenuButtonSizeMedium.stories.tsx
@@ -15,6 +15,7 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/MenuButton/MenuButtonSizeSmall.stories.tsx b/packages/react-components/react-button/stories/MenuButton/MenuButtonSizeSmall.stories.tsx
@@ -15,6 +15,7 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/MenuButton/MenuButtonWithLongText.stories.tsx b/packages/react-components/react-button/stories/MenuButton/MenuButtonWithLongText.stories.tsx
@@ -9,6 +9,7 @@ const useStyles = makeStyles({
     alignItems: 'center',
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/SplitButton/SplitButtonAppearance.stories.tsx b/packages/react-components/react-button/stories/SplitButton/SplitButtonAppearance.stories.tsx
@@ -14,6 +14,7 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/SplitButton/SplitButtonDisabled.stories.tsx b/packages/react-components/react-button/stories/SplitButton/SplitButtonDisabled.stories.tsx
@@ -14,6 +14,7 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/SplitButton/SplitButtonIcon.stories.tsx b/packages/react-components/react-button/stories/SplitButton/SplitButtonIcon.stories.tsx
@@ -16,6 +16,7 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/SplitButton/SplitButtonShape.stories.tsx b/packages/react-components/react-button/stories/SplitButton/SplitButtonShape.stories.tsx
@@ -14,6 +14,7 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/SplitButton/SplitButtonSize.stories.tsx b/packages/react-components/react-button/stories/SplitButton/SplitButtonSize.stories.tsx
@@ -15,6 +15,7 @@ const useStyles = makeStyles({
     alignItems: 'center',
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/SplitButton/SplitButtonSizeLarge.stories.tsx b/packages/react-components/react-button/stories/SplitButton/SplitButtonSizeLarge.stories.tsx
@@ -16,6 +16,7 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/SplitButton/SplitButtonSizeMedium.stories.tsx b/packages/react-components/react-button/stories/SplitButton/SplitButtonSizeMedium.stories.tsx
@@ -16,6 +16,7 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/SplitButton/SplitButtonSizeSmall.stories.tsx b/packages/react-components/react-button/stories/SplitButton/SplitButtonSizeSmall.stories.tsx
@@ -16,6 +16,7 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/...ges/react-components/react-button/stories/SplitButton/SplitButtonWithLongText.stories.tsx b/...ges/react-components/react-button/stories/SplitButton/SplitButtonWithLongText.stories.tsx
@@ -18,6 +18,7 @@ const useStyles = makeStyles({
     alignItems: 'center',
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/...ges/react-components/react-button/stories/ToggleButton/ToggleButtonAppearance.stories.tsx b/...ges/react-components/react-button/stories/ToggleButton/ToggleButtonAppearance.stories.tsx
@@ -8,6 +8,7 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/ToggleButton/ToggleButtonChecked.stories.tsx b/packages/react-components/react-button/stories/ToggleButton/ToggleButtonChecked.stories.tsx
@@ -5,6 +5,7 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/ToggleButton/ToggleButtonDisabled.stories.tsx b/packages/react-components/react-button/stories/ToggleButton/ToggleButtonDisabled.stories.tsx
@@ -5,6 +5,7 @@ const useStyles = makeStyles({
   innerWrapper: {
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
   outerWrapper: {
     display: 'flex',

diff --git a/packages/react-components/react-button/stories/ToggleButton/ToggleButtonIcon.stories.tsx b/packages/react-components/react-button/stories/ToggleButton/ToggleButtonIcon.stories.tsx
@@ -8,6 +8,7 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/ToggleButton/ToggleButtonShape.stories.tsx b/packages/react-components/react-button/stories/ToggleButton/ToggleButtonShape.stories.tsx
@@ -5,6 +5,7 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/packages/react-components/react-button/stories/ToggleButton/ToggleButtonSize.stories.tsx b/packages/react-components/react-button/stories/ToggleButton/ToggleButtonSize.stories.tsx
@@ -6,6 +6,7 @@ const useStyles = makeStyles({
     alignItems: 'center',
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });
 

diff --git a/...s/react-components/react-button/stories/ToggleButton/ToggleButtonWithLongText.stories.tsx b/...s/react-components/react-button/stories/ToggleButton/ToggleButtonWithLongText.stories.tsx
@@ -9,6 +9,7 @@ const useStyles = makeStyles({
     alignItems: 'center',
     columnGap: '15px',
     display: 'flex',
+    minWidth: 'min-content',
   },
 });