From dc440831d33c51e0edea6fcb3acf7ba884f9382c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Wlekli=C5=84ski?=
 <114148518+mwleklinski@users.noreply.github.com>
Date: Wed, 22 May 2024 14:37:57 +0200
Subject: [PATCH] feat: TET-660 fix width button issue (#150)

---
 src/components/Button/Button.stories.tsx                 | 9 +++++++++
 src/components/Button/Button.styles.ts                   | 2 +-
 .../Button/stylesBuilder/stylesBuilder.test.ts           | 2 +-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index 0fab6d26..3c57cae1 100644
--- 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
index 83386fff..e93af4cc 100644
--- 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
index 49470c74..921b0536 100644
--- 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: {