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

Author: mwleklinski

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>
+  ),
+};

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',

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: {