🪟 🐛 🧹 Fix issues with Button component (#20737)

* Disable button in loading state * Remove defaultProps from Button and clean up some prop handling
airbytehq · Jan 4, 2023 · 40b4ad1 · 40b4ad1
1 parent 6176ecb
commit 40b4ad1
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 19 deletions.
diff --git a/airbyte-webapp/src/components/ui/Button/Button.module.scss b/airbyte-webapp/src/components/ui/Button/Button.module.scss
@@ -19,10 +19,6 @@
     width: 100%;
   }
 
-  &:disabled {
-    opacity: 0.25;
-  }
-
   &:disabled,
   &.isLoading {
     pointer-events: none;
@@ -38,6 +34,10 @@
     outline: 3px solid colors.$blue-50;
   }
 
+  &:disabled:not(.isLoading) {
+    opacity: 0.25;
+  }
+
   .buttonIcon {
     display: flex;
     justify-content: center;

diff --git a/airbyte-webapp/src/components/ui/Button/Button.tsx b/airbyte-webapp/src/components/ui/Button/Button.tsx
@@ -8,19 +8,21 @@ import { ButtonProps } from "./types";
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
+    full = false,
+    size = "xs",
+    iconPosition = "left",
+    variant = "primary",
     children,
     className,
     clickable,
-    full,
     icon,
-    iconPosition,
     isLoading,
-    size,
-    variant,
     wasActive,
     width,
+    disabled,
     ...buttonProps
   } = props;
+
   const buttonStyles = {
     [styles.full]: full,
     [styles.isLoading]: isLoading,
@@ -34,15 +36,15 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
     [styles.typeSecondary]: variant === "secondary",
     [styles.typeDark]: variant === "dark",
   };
-  const widthStyle: { width?: string } = {};
-  if (width) {
-    widthStyle.width = `${width}px`;
-  }
+
+  const widthStyle: React.CSSProperties = width ? { width: `${width}px` } : {};
+
   return (
     <button
       ref={ref}
       style={widthStyle}
       className={classNames(styles.button, className, buttonStyles)}
+      disabled={disabled || isLoading}
       {...buttonProps}
     >
       {isLoading && (
@@ -75,10 +77,3 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
     </button>
   );
 });
-
-Button.defaultProps = {
-  full: false,
-  size: "xs",
-  variant: "primary",
-  iconPosition: "left",
-};
diff --git a/airbyte-webapp/src/components/ui/Button/index.stories.tsx b/airbyte-webapp/src/components/ui/Button/index.stories.tsx
@@ -20,20 +20,23 @@ Primary.args = {
   children: "Primary",
   icon: <FontAwesomeIcon icon={faTimes} />,
   iconPosition: "left",
+  disabled: false,
 };
 
 export const LoadingButton = Template.bind({});
 LoadingButton.args = {
   variant: "primary",
   children: "Primary",
   isLoading: true,
+  disabled: false,
 };
 
 export const ButtonWithIcon = Template.bind({});
 ButtonWithIcon.args = {
   variant: "primary",
   icon: <FontAwesomeIcon icon={faTimes} />,
   iconPosition: "left",
+  disabled: false,
 };
 
 export const ButtonWithTextAndIconLeft = Template.bind({});
@@ -42,6 +45,7 @@ ButtonWithTextAndIconLeft.args = {
   icon: <FontAwesomeIcon icon={faTimes} />,
   iconPosition: "left",
   children: "Icon Left",
+  disabled: false,
 };
 
 export const ButtonWithTextAndIconRight = Template.bind({});
@@ -50,34 +54,40 @@ ButtonWithTextAndIconRight.args = {
   icon: <FontAwesomeIcon icon={faTimes} />,
   iconPosition: "right",
   children: "Icon Right",
+  disabled: false,
 };
 
 export const Secondary = Template.bind({});
 Secondary.args = {
   variant: "secondary",
   children: "Secondary",
+  disabled: false,
 };
 
 export const Light = Template.bind({});
 Light.args = {
   variant: "light",
   children: "Light",
+  disabled: false,
 };
 
 export const Danger = Template.bind({});
 Danger.args = {
   variant: "danger",
   children: "Danger",
+  disabled: false,
 };
 
 export const Clear = Template.bind({});
 Clear.args = {
   variant: "clear",
   children: "No Stroke",
+  disabled: false,
 };
 
 export const Dark = Template.bind({});
 Dark.args = {
   variant: "dark",
   children: "Dark",
+  disabled: false,
 };