fix(button): disabled button triggering onClick

kodiak-packages · May 4, 2020 · 4c9cf4b · 4c9cf4b
1 parent 45c4223
commit 4c9cf4b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 11 deletions.
diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
@@ -1,4 +1,4 @@
-.base {
+.button {
     border-radius: var(--border-radius-small);
     line-height: 32px;
     font-size: 14px;
@@ -36,16 +36,12 @@
 background-color: var(--color-secondary);
 }
 
-.base:disabled {
+.button:disabled {
   color: var(--color-disabled-font);
   background-color: var(--color-disabled);
   cursor: default;
 }
 
-.label {
-  text-align: center;
-}
-
 .labelWithPrefixIcon {
   margin-left: 8px;
 }

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -29,15 +29,15 @@ const Button: React.FC<Props> = ({
   name,
 }: Props) => {
   const buttonClassNames = classNames(
-    styles.base,
+    styles.button,
     {
-      [styles.typePrimary]: (!isDisabled || !isLoading) && type === 'primary',
-      [styles.typeSecondary]: (!isDisabled || !isLoading) && type === 'secondary',
+      [styles.typePrimary]: type === 'primary',
+      [styles.typeSecondary]: type === 'secondary',
     },
     className,
   );
 
-  const labelClassNames = classNames(styles.label, {
+  const labelClassNames = classNames({
     [styles.labelWithPrefixIcon]: Boolean(prefixIcon) || isLoading,
     [styles.labelWithSuffixIcon]: Boolean(suffixIcon),
   });
@@ -47,7 +47,7 @@ const Button: React.FC<Props> = ({
       disabled={isDisabled || isLoading}
       className={buttonClassNames}
       type="button"
-      onClick={onClick}
+      onClick={isLoading || suffixIcon ? onClick : undefined}
       data-testid={`button-${name}`}
     >
       {isLoading ? <Spinner className={styles.spinner} /> : prefixIcon}