@bitrise/bitkit 9.13.1 → 9.13.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.13.1",
+  "version": "9.13.2",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Button/Button.stories.tsx

@@ -15,4 +15,5 @@ WithProps.args = sortObjectByKey({
   children: 'Button',
   isDanger: false,
   isDisabled: false,
+  isLoading: false,
 });

package/src/Components/Button/Button.theme.ts

@@ -1,9 +1,37 @@
+const disabledStates = {
+  primary: {
+    _disabled: {
+      bgGradient: 'linear(to-b, neutral.80, neutral.70)',
+      borderColor: 'neutral.70',
+    },
+  },
+  secondary: {
+    _disabled: {
+      bgGradient: 'linear(to-b, neutral.100, neutral.93)',
+      borderColor: 'neutral.90',
+      color: 'neutral.70',
+    },
+  },
+  tertiary: {
+    _disabled: {
+      background: 'transparent',
+      borderColor: 'transparent',
+      color: 'neutral.70',
+    },
+  },
+};
+
 const ButtonTheme = {
   baseStyle: {
     border: '0.0625rem solid',
     borderRadius: '4',
     _disabled: {
-      pointerEvents: 'none',
+      cursor: 'not-allowed',
+    },
+    _hover: {
+      _disabled: {
+        bg: 'initial',
+      },
     },
   },
   variants: {
@@ -14,14 +42,13 @@ const ButtonTheme = {
       fontWeight: 'bold',
       _hover: {
         bgGradient: 'linear(to-b, purple.30, purple.10)',
+        ...disabledStates.primary,
       },
       _active: {
         bgGradient: 'linear(to-b, purple.10, purple.10)',
+        ...disabledStates.primary,
       },
-      _disabled: {
-        bgGradient: 'linear(to-b, neutral.80, neutral.70)',
-        borderColor: 'neutral.70',
-      },
+      ...disabledStates.primary,
     },
     secondary: {
       bgGradient: 'linear(to-b, neutral.100, neutral.93)',
@@ -29,14 +56,14 @@ const ButtonTheme = {
       color: 'purple.10',
       _hover: {
         bgGradient: 'linear(to-b, neutral.93, neutral.93)',
+        ...disabledStates.secondary,
       },
       _active: {
         bgGradient: 'linear(to-b, neutral.90, neutral.90)',
         borderColor: 'neutral.80',
+        ...disabledStates.secondary,
       },
-      _disabled: {
-        color: 'neutral.70',
-      },
+      ...disabledStates.secondary,
     },
     tertiary: {
       background: 'transparent',
@@ -45,14 +72,14 @@ const ButtonTheme = {
       _hover: {
         background: 'neutral.93',
         borderColor: 'neutral.93',
+        ...disabledStates.tertiary,
       },
       _active: {
         background: 'neutral.90',
         borderColor: 'neutral.90',
+        ...disabledStates.tertiary,
       },
-      _disabled: {
-        color: 'neutral.70',
-      },
+      ...disabledStates.tertiary,
     },
     'primary--danger': {
       bgGradient: 'linear(to-b, red.50, red.30)',
@@ -62,15 +89,14 @@ const ButtonTheme = {
       _hover: {
         bgGradient: 'linear(to-b, red.40, red.20)',
         borderColor: 'red.40',
+        ...disabledStates.primary,
       },
       _active: {
         bgGradient: 'linear(to-b, red.20, red.20)',
         borderColor: 'red.20',
+        ...disabledStates.primary,
       },
-      _disabled: {
-        bgGradient: 'linear(to-b, neutral.80, neutral.70)',
-        borderColor: 'neutral.70',
-      },
+      ...disabledStates.primary,
     },
     'secondary--danger': {
       bgGradient: 'linear(to-b, neutral.100, neutral.93)',
@@ -79,14 +105,14 @@ const ButtonTheme = {
       _hover: {
         bgGradient: 'linear(to-b, red.93, red.93)',
         borderColor: 'red.70',
+        ...disabledStates.secondary,
       },
       _active: {
         bgGradient: 'linear(to-b, red.90, red.90)',
         borderColor: 'red.70',
+        ...disabledStates.secondary,
       },
-      _disabled: {
-        color: 'neutral.70',
-      },
+      ...disabledStates.secondary,
     },
     'tertiary--danger': {
       background: 'transparent',
@@ -95,14 +121,14 @@ const ButtonTheme = {
       _hover: {
         background: 'red.93',
         borderColor: 'red.93',
+        ...disabledStates.tertiary,
       },
       _active: {
         background: 'red.90',
         borderColor: 'red.90',
+        ...disabledStates.tertiary,
       },
-      _disabled: {
-        color: 'neutral.70',
-      },
+      ...disabledStates.tertiary,
     },
   },
   sizes: {

package/src/Components/Button/Button.tsx

@@ -16,13 +16,17 @@ export interface ButtonProps extends ChakraButtonProps {
  * The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
  */
 const Button = forwardRef<ButtonProps, 'button'>((props, ref) => {
-  const { as, isDanger, leftIconName, rightIconName, size, variant, ...rest } = props;
+  const { as, isDanger, isDisabled, leftIconName, rightIconName, size, variant, ...rest } = props;
   const properties: ChakraButtonProps = {
     as,
+    isDisabled,
     size,
     variant: isDanger ? `${variant}--danger` : variant,
     ...rest,
   };
+  if (isDisabled) {
+    properties.as = 'button';
+  }
   if (leftIconName) {
     properties.leftIcon = <Icon name={leftIconName} />;
   }

package/src/old.ts

@@ -165,9 +165,6 @@ export { default as Portal } from './Old/Portal/Portal';
 export type { Props as ProgressBarProps } from './Old/Progress/ProgressBar';
 export { default as ProgressBar } from './Old/Progress/ProgressBar';
 
-export type { Props as ProgressButtonProps } from './Old/Progress/ProgressButton';
-export { default as ProgressButton } from './Old/Progress/ProgressButton';
-
 export type { Props as ProgressBitbotProps } from './Old/Progress/ProgressBitbot';
 export { default as ProgressBitbot } from './Old/Progress/ProgressBitbot';