feat(button): Adjust dynamically button width

src/button/Button.tsx

@@ -73,15 +73,13 @@ function Button({
       onBlur={onBlur}
       disabled={isButtonDisabled}
       aria-label={ariaLabel}>
-      {shouldDisplaySpinner ? (
+      {children}
+
+      {shouldDisplaySpinner && (
         <Spinner
-          customClassName={classNames("button__spinner", {
-            [`${customClassName}__spinner`]: customClassName
-          })}
+          customClassName={"button__spinner"}
           aria-label={"Button spinner visible. Button inactivated."}
         />
-      ) : (
-        children
       )}
     </button>
   );

src/button/_button.scss

@@ -1,9 +1,11 @@
 .button {
-  --button-width: 100%;
+  --button-width: max-content;
   --button-height: 35px;
   --button-bg: black;
   --button-color: white;
 
+  position: relative;
+
   display: flex;
   align-items: center;
   justify-content: center;
@@ -31,7 +33,13 @@
   cursor: not-allowed;
 }
 
+.button--is-pending {
+  color: var(--button-bg);
+}
+
 .button__spinner {
+  position: absolute;
+
   .spinner__background {
     background: var(--button-bg);
   }

src/dropdown/_dropdown.scss

@@ -45,7 +45,7 @@ $dropdown-header-horizontal-padding: 8px;
 }
 
 .dropdown__header-button__text {
-  @include truncate-line(calc(100% - #{$dropdown-header-horizontal-padding}));
+  @include truncate-line();
 
   flex: 1;
 
@@ -58,6 +58,7 @@ $dropdown-header-horizontal-padding: 8px;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 8px;
 
   flex: 1;
 

src/form/input/file/_file-input.scss

@@ -25,6 +25,8 @@
   align-items: center;
   justify-content: center;
 
+  padding: 0 8px;
+
   cursor: pointer;
 }
 

stories/3-Button.stories.tsx

@@ -4,6 +4,7 @@ import {storiesOf} from "@storybook/react";
 import Button from "../src/button/Button";
 import FileUploadButton from "../src/button/file-upload/FileUploadButton";
 import StoryFragment from "./utils/StoryFragment";
+import StateProvider from "./utils/StateProvider";
 
 storiesOf("Button", module).add("Button States", () => (
   <StoryFragment>
@@ -19,12 +20,16 @@ storiesOf("Button", module).add("Button States", () => (
 
     <br />
 
-    <Button
-      type={"button"}
-      onClick={(e) => alert("Thank You!")}
-      shouldDisplaySpinner={true}>
-      {"Click Me - shouldDisplaySpinner"}
-    </Button>
+    <StateProvider initialState={false}>
+      {(state, setState) => (
+        <Button
+          type={"button"}
+          onClick={() => setState(true)}
+          shouldDisplaySpinner={state}>
+          {"Click Me - shouldDisplaySpinner"}
+        </Button>
+      )}
+    </StateProvider>
 
     <br />
     <hr />