feat: TET-660 fix width button issue (#150)

VirtusLab · May 22, 2024 · dc44083 · dc44083
1 parent 2070c34
commit dc44083
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -157,3 +157,12 @@ export const BareDisabled: Story = {
     variant: 'bare',
   },
 };
+
+// should automatically fill the width of the container
+export const WithFlexContainer: Story = {
+  render: () => (
+    <div style={{ display: 'flex', width: '400px', flexDirection: 'column' }}>
+      <Button label="Button 1" />
+    </div>
+  ),
+};
diff --git a/src/components/Button/Button.styles.ts b/src/components/Button/Button.styles.ts
@@ -287,7 +287,7 @@ const commonConfig = {
   display: 'inline-flex',
   borderRadius: '$border-radius-large',
   gap: '$space-component-gap-small',
-  w: 'fit-content',
+  w: 'auto',
   justifyContent: 'center',
   alignItems: 'center',
   textAlign: 'center',

diff --git a/src/components/Button/stylesBuilder/stylesBuilder.test.ts b/src/components/Button/stylesBuilder/stylesBuilder.test.ts
@@ -54,7 +54,7 @@ describe('stylesBuilder', () => {
         textAlign: 'center',
         transition: true,
         transitionDuration: 200,
-        w: 'fit-content',
+        w: 'auto',
         whiteSpace: 'nowrap',
       },
       loader: {