@bitrise/bitkit 13.1.0 → 13.1.1-alpha.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.1.0",
+  "version": "13.1.1-alpha.1",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

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

@@ -1,150 +1,122 @@
-export 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',
-    },
-  },
-};
+import { defineStyle, defineStyleConfig, SystemStyleInterpolation } from '@chakra-ui/styled-system';
+import { rem } from '../../utils/utils';
+import { ButtonProps } from './Button';
 
-const ButtonTheme = {
-  baseStyle: {
-    _disabled: {
-      cursor: 'not-allowed',
-    },
-    _hover: {
-      _disabled: {
-        bg: 'initial',
-      },
-    },
-    border: '0.0625rem solid',
+const baseStyle = defineStyle((props) => {
+  const style: any = {
     borderRadius: '4',
-  },
-  sizes: {
-    medium: {
-      fontSize: '3',
-      height: '48',
-      minWidth: '48',
-      paddingX: '16',
-    },
-    small: {
-      fontSize: '2',
-      height: '32',
-      minWidth: '32',
-      paddingX: '12',
-    },
-  },
-  variants: {
-    primary: {
-      _active: {
-        bgGradient: 'linear(to-b, purple.10, purple.10)',
-        ...disabledStates.primary,
-      },
-      _hover: {
-        bgGradient: 'linear(to-b, purple.30, purple.10)',
-        ...disabledStates.primary,
-      },
-      bgGradient: 'linear(to-b, purple.40, purple.20)',
-      borderColor: 'purple.40',
-      color: 'neutral.95',
-      fontWeight: 'bold',
-      ...disabledStates.primary,
-    },
-    'primary--danger': {
-      _active: {
-        bgGradient: 'linear(to-b, red.20, red.20)',
-        borderColor: 'red.20',
-        ...disabledStates.primary,
-      },
-      _hover: {
-        bgGradient: 'linear(to-b, red.40, red.20)',
-        borderColor: 'red.40',
-        ...disabledStates.primary,
-      },
-      bgGradient: 'linear(to-b, red.50, red.30)',
-      borderColor: 'red.50',
-      color: 'neutral.95',
-      fontWeight: 'bold',
-      ...disabledStates.primary,
-    },
-    secondary: {
-      _active: {
-        bgGradient: 'linear(to-b, neutral.90, neutral.90)',
-        borderColor: 'neutral.80',
-        ...disabledStates.secondary,
-      },
-      _hover: {
-        bgGradient: 'linear(to-b, neutral.93, neutral.93)',
-        ...disabledStates.secondary,
-      },
-      bgGradient: 'linear(to-b, neutral.100, neutral.93)',
-      borderColor: 'neutral.90',
-      color: 'purple.10',
-      ...disabledStates.secondary,
-    },
-    'secondary--danger': {
-      _active: {
-        bgGradient: 'linear(to-b, red.90, red.90)',
-        borderColor: 'red.70',
-        ...disabledStates.secondary,
-      },
-      _hover: {
-        bgGradient: 'linear(to-b, red.93, red.93)',
-        borderColor: 'red.70',
-        ...disabledStates.secondary,
-      },
-      bgGradient: 'linear(to-b, neutral.100, neutral.93)',
-      borderColor: 'neutral.90',
-      color: 'red.50',
-      ...disabledStates.secondary,
-    },
-    tertiary: {
-      _active: {
-        background: 'neutral.90',
-        borderColor: 'neutral.90',
-        ...disabledStates.tertiary,
+  };
+
+  if (props.variant.includes('primary')) {
+    style['.chakra-button__group[data-attached][data-orientation=horizontal] > &:not(:first-of-type)'] = {
+      _before: {
+        content: `''`,
+        pos: 'absolute',
+        left: 0,
+        top: `-${rem(1)}`,
+        bottom: `-${rem(1)}`,
+        width: rem(1),
+        backgroundColor: 'background/primary',
       },
+    };
+  }
+  if (props.variant.includes('secondary')) {
+    style['.chakra-button__group[data-attached][data-orientation=horizontal] > &:not(:first-of-type)'] = {
+      marginInlineStart: `-${rem(1)}`,
+    };
+  }
+
+  return style;
+});
+
+const sizes = {
+  lg: defineStyle((props) => {
+    return {
+      paddingBlock: rem(11),
+      paddingInlineEnd: props.rightIcon ? rem(11) : rem(15),
+      paddingInlineStart: props.leftIcon ? rem(11) : rem(15),
+      textStyle: 'comp/button/lg',
+      minWidth: 48,
+      height: 48,
+    };
+  }),
+  md: defineStyle((props) => {
+    return {
+      paddingBlock: rem(9),
+      paddingInlineEnd: props.rightIcon ? rem(11) : rem(15),
+      paddingInlineStart: props.leftIcon ? rem(11) : rem(15),
+      textStyle: 'comp/button/md',
+      minWidth: 40,
+      height: 40,
+    };
+  }),
+  sm: defineStyle((props) => {
+    return {
+      paddingBlock: rem(5),
+      paddingInlineEnd: props.rightIcon ? rem(7) : rem(11),
+      paddingInlineStart: props.leftIcon ? rem(7) : rem(11),
+      textStyle: 'comp/button/sm',
+      minWidth: 32,
+      height: 32,
+    };
+  }),
+};
+
+const variants = (
+  [
+    'primary',
+    'secondary',
+    'tertiary',
+    'danger-primary',
+    'danger-secondary',
+    'danger-tertiary',
+  ] as ButtonProps['variant'][]
+).reduce(
+  (obj, variant) => {
+    let borderColor = variant?.includes('secondary') ? `button/${variant}/border` : `button/${variant}/bg`;
+    let disabledBorderColor = variant?.includes('secondary')
+      ? `button/${variant}/border-disabled`
+      : `button/${variant}/bg-disabled`;
+    if (variant?.includes('tertiary')) {
+      borderColor = 'transparent';
+      disabledBorderColor = 'transparent';
+    }
+    obj[variant as NonNullable<ButtonProps['variant']>] = defineStyle({
       _hover: {
-        background: 'neutral.95',
-        borderColor: 'neutral.95',
-        ...disabledStates.tertiary,
+        backgroundColor: `button/${variant}/bg-hover`,
+        borderColor: variant?.includes('secondary') ? `button/${variant}/border-hover` : `button/${variant}/bg-hover`,
+        color: `button/${variant}/fg-hover`,
       },
-      background: 'transparent',
-      borderColor: 'transparent',
-      color: 'purple.50',
-      ...disabledStates.tertiary,
-    },
-    'tertiary--danger': {
       _active: {
-        background: 'red.90',
-        borderColor: 'red.90',
-        ...disabledStates.tertiary,
+        backgroundColor: `button/${variant}/bg-active`,
+        borderColor: variant?.includes('secondary') ? `button/${variant}/border-active` : `button/${variant}/bg-active`,
+        color: `button/${variant}/fg-active`,
       },
-      _hover: {
-        background: 'red.93',
-        borderColor: 'red.93',
-        ...disabledStates.tertiary,
+      _disabled: {
+        backgroundColor: `button/${variant}/bg-disabled`,
+        borderColor: disabledBorderColor,
+        color: `button/${variant}/fg-disabled`,
+        cursor: 'not-allowed',
       },
-      background: 'transparent',
-      borderColor: 'transparent',
-      color: 'red.50',
-      ...disabledStates.tertiary,
-    },
+      backgroundColor: `button/${variant}/bg`,
+      borderColor,
+      borderStyle: 'solid',
+      borderWidth: rem(1),
+      color: `button/${variant}/fg`,
+    });
+    return obj;
   },
-};
+  {} as Record<NonNullable<ButtonProps['variant']>, SystemStyleInterpolation>,
+);
+
+const buttonTheme = defineStyleConfig({
+  baseStyle,
+  defaultProps: {
+    size: 'lg',
+    variant: 'primary',
+  },
+  sizes,
+  variants,
+});
 
-export default ButtonTheme;
+export default buttonTheme;

package/src/Components/Button/Button.tsx

@@ -3,43 +3,40 @@ import Icon, { TypeIconName } from '../Icon/Icon';
 
 export interface ButtonProps extends ChakraButtonProps {
   as?: 'a' | 'button';
+  disabled?: never;
   isDanger?: boolean;
   leftIconName?: TypeIconName;
-  rightIconName?: TypeIconName;
-  size?: 'small' | 'medium';
-  variant?: 'primary' | 'secondary' | 'tertiary';
-  disabled?: never;
+  rightIconName?: 'ArrowRight' | 'ChevronDown' | 'ChevronUp' | 'OpenInBrowser';
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger-primary' | 'danger-secondary' | 'danger-tertiary';
 }
 
 /**
  * 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, isDisabled, leftIconName, rightIconName, size = 'medium', variant, ...rest } = props;
+  const { as, isDanger, isDisabled, leftIconName, rightIconName, size = 'lg', variant, ...rest } = props;
   const properties: ChakraButtonProps = {
     as: isDisabled ? 'button' : as,
     isDisabled,
     size,
-    variant: isDanger ? `${variant}--danger` : variant,
+    variant: isDanger && !variant?.includes('danger') ? `danger-${variant}` : variant,
     ...rest,
   };
-  const iconSize = size === 'medium' ? '24' : '16';
+  const iconSize = size === 'lg' ? '24' : '16';
   if (leftIconName) {
     properties.leftIcon = <Icon name={leftIconName} size={iconSize} />;
   }
   if (rightIconName) {
     properties.rightIcon = <Icon name={rightIconName} size={iconSize} />;
   }
-  if ((properties.leftIcon || properties.rightIcon) && !properties.iconSpacing) {
-    properties.iconSpacing = size === 'medium' ? '0.625rem' : '0.375rem';
-  }
-
+  properties.iconSpacing = properties.children ? '8' : '4';
   return <ChakraButton {...properties} ref={ref} />;
 });
 
 Button.defaultProps = {
   as: 'button',
-  size: 'medium',
+  size: 'lg',
   variant: 'primary',
 } as ButtonProps;
 

package/src/Components/CodeBlock/CodeBlock.tsx

@@ -24,7 +24,7 @@ const CodeBlock = ({ children, isCopiable, ...props }: CodeBlockProps) => {
           aria-label="Copy to clipboard"
           iconName="Duplicate"
           onClick={onCopy}
-          size="small"
+          size="sm"
           sx={style.copyIcon}
           variant="secondary"
         />

package/src/Components/ColorButton/ColorButton.theme.ts

@@ -73,6 +73,7 @@ const ColorButtonTheme = {
       backgroundColor: 'transparent',
       display: 'inline-flex',
       justifyContent: 'center',
+      borderColor: 'inherit',
       ...schemeColors[colorScheme || 'blue'],
     };
   },

package/src/Components/ColorButton/ColorButton.tsx

@@ -12,7 +12,7 @@ export interface ColorButtonProps extends ChakraButtonProps {
 const ColorButton = forwardRef<ColorButtonProps, 'button'>((props, ref) => {
   const { as, colorScheme, isDisabled, isLoading, ...rest } = props;
   const styles = {
-    ...useStyleConfig('Button', { size: 'small' }),
+    ...useStyleConfig('Button', { size: 'sm' }),
     ...useStyleConfig('ColorButton', { colorScheme }),
   };
 
@@ -26,7 +26,7 @@ const ColorButton = forwardRef<ColorButtonProps, 'button'>((props, ref) => {
   if (isDisabled) {
     properties.as = 'button';
   }
-  return <ChakraButton {...properties} ref={ref} size="small" />;
+  return <ChakraButton {...properties} ref={ref} size="sm" />;
 });
 
 ColorButton.defaultProps = {

package/src/Components/DatePicker/DatePickerFooter.tsx

@@ -38,7 +38,7 @@ const DatePickerFooter = ({
           gridColumn="1"
           gridRow={styleGrid('2', '1')}
           onClick={() => onClear()}
-          size="small"
+          size="sm"
           variant="tertiary"
           width="fit-content"
         >
@@ -68,11 +68,11 @@ const DatePickerFooter = ({
         )}
       </Text>
       <ButtonGroup gridColumn={styleGrid('2 / 4', '3')} gridRow={styleGrid('2', '1')} justifyContent="end">
-        <Button onClick={onClose} size="small" variant="secondary">
+        <Button onClick={onClose} size="sm" variant="secondary">
           Cancel
         </Button>
 
-        <Button onClick={onApply} size="small">
+        <Button onClick={onApply} size="sm">
           Apply
         </Button>
       </ButtonGroup>

package/src/Components/DatePicker/DatePickerHeader.tsx

@@ -23,7 +23,7 @@ export const DatePickerHeaderPrevious = ({ label }: { label: string }) => {
       iconName="ChevronLeft"
       isTooltipDisabled
       onClick={onPrevious}
-      size="small"
+      size="sm"
       variant="tertiary"
       visibility={controls === 'right' ? 'hidden' : undefined}
     />
@@ -39,7 +39,7 @@ export const DatePickerHeaderNext = ({ label }: { label: string }) => {
       iconName="ChevronRight"
       isTooltipDisabled
       onClick={onNext}
-      size="small"
+      size="sm"
       variant="tertiary"
       visibility={controls === 'left' ? 'hidden' : undefined}
     />

package/src/Components/DatePicker/DatePickerMonth.tsx

@@ -59,7 +59,7 @@ const DatePickerMonth = ({ controls, onMonthClick, onViewDateChange, viewDate }:
             flexShrink={0}
             onClick={onMonthClick}
             rightIconName="ChevronDown"
-            size="small"
+            size="sm"
             variant="tertiary"
           >
             {viewDate.monthLong}

package/src/Components/Filter/Filter.theme.ts

@@ -1,6 +1,5 @@
 import { createMultiStyleConfigHelpers, SystemStyleObject } from '@chakra-ui/styled-system';
 import { rem } from '../../utils/utils';
-import { disabledStates } from '../Button/Button.theme';
 
 export const parts = [
   'container',
@@ -23,6 +22,8 @@ export type FilterStyle = Record<(typeof parts)[number], SystemStyleObject>;
 
 const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(parts);
 
+const disabledState = { background: 'transparent', borderColor: 'transparent', color: 'neutral.70' };
+
 const FilterTheme = defineMultiStyleConfig({
   baseStyle: {
     container: {
@@ -116,9 +117,9 @@ const FilterTheme = defineMultiStyleConfig({
       },
       _disabled: {
         cursor: 'not-allowed',
-        ...disabledStates.tertiary,
-        _active: disabledStates.tertiary,
-        _hover: disabledStates.tertiary,
+        ...disabledState,
+        _active: disabledState,
+        _hover: disabledState,
       },
       _hover: {
         background: 'neutral.93',
@@ -139,9 +140,9 @@ const FilterTheme = defineMultiStyleConfig({
       },
       _disabled: {
         cursor: 'not-allowed',
-        ...disabledStates.tertiary,
-        _active: disabledStates.tertiary,
-        _hover: disabledStates.tertiary,
+        ...disabledState,
+        _active: disabledState,
+        _hover: disabledState,
       },
       _hover: {
         background: 'neutral.93',

package/src/Components/Filter/Filter.tsx

@@ -174,7 +174,7 @@ const Filter = (props: FilterProps) => {
                 leftIconName="CloseSmall"
                 minWidth="7.5rem"
                 onClick={onClearFilters}
-                size="small"
+                size="sm"
                 variant="tertiary"
               >
                 Clear filters

package/src/Components/Filter/FilterAdd/FilterAdd.tsx

@@ -57,7 +57,7 @@ const FilterAdd = (props: FilterAddProps) => {
         isLoading={isLoading}
         leftIconName="PlusOpen"
         position={isOpen ? 'relative' : undefined}
-        size="small"
+        size="sm"
         variant="tertiary"
         zIndex={isOpen ? 'dialog' : undefined}
       >

package/src/Components/Filter/FilterForm/FilterForm.tsx

@@ -170,14 +170,14 @@ const FilterForm = (props: FilterFormProps) => {
       )}
       <ButtonGroup spacing="12" sx={filterStyle.formButtonGroup}>
         {isEditMode && (
-          <Button marginInlineEnd="auto" onClick={onClearClick} size="small" variant="tertiary">
+          <Button marginInlineEnd="auto" onClick={onClearClick} size="sm" variant="tertiary">
             Clear
           </Button>
         )}
-        <Button onClick={onCancelClick} size="small" type="reset" variant="secondary">
+        <Button onClick={onCancelClick} size="sm" type="reset" variant="secondary">
           Cancel
         </Button>
-        <Button isDisabled={isDisabled} size="small" type="submit">
+        <Button isDisabled={isDisabled} size="sm" type="submit">
           {(selected.length === 0 || selected[0] === '') && isEditMode ? 'Remove' : 'Apply'}
         </Button>
       </ButtonGroup>

package/src/Components/Filter/FilterItem/FilterItem.tsx

@@ -79,7 +79,7 @@ const FilterItem = (props: FilterItemProps) => {
               iconName="CloseSmall"
               isDisabled={isLoading}
               onClick={() => onFilterClear(category)}
-              size="small"
+              size="sm"
               sx={filterStyle.tagClear}
               tooltipProps={{ shouldWrapChildren: false }}
               variant="tertiary"

package/src/Components/Filter/FilterSearch/FilterSearch.tsx

@@ -56,7 +56,7 @@ const FilterSearch = (props: FilterSearchProps) => {
       <Input {...inputProps} />
       {!!searchValue && (
         <InputRightElement>
-          <IconButton aria-label="Clear" iconName="CloseSmall" onClick={onClearClick} size="small" variant="tertiary" />
+          <IconButton aria-label="Clear" iconName="CloseSmall" onClick={onClearClick} size="sm" variant="tertiary" />
         </InputRightElement>
       )}
     </InputGroup>

package/src/Components/Form/FileInput/FileInput.tsx

@@ -104,7 +104,7 @@ const FileInput = forwardRef<FileInputProps, 'div'>((props, ref) => {
               </Text>
               <Text as="span">{selectedFileNames[0]}</Text>
             </Box>
-            <Button flexShrink={0} leftIconName="MinusRemove" onClick={onRemoveClick} size="small" variant="secondary">
+            <Button flexShrink={0} leftIconName="MinusRemove" onClick={onRemoveClick} size="sm" variant="secondary">
               Remove
             </Button>
           </>

package/src/Components/IconButton/IconButton.tsx

@@ -4,15 +4,16 @@ import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
 
 export interface IconButtonProps extends ChakraIconButtonProps {
   as?: 'a' | 'button';
+  disabled?: never;
   iconName: TypeIconName;
   isDanger?: boolean;
   iconSize?: IconProps['size'];
   isTooltipDisabled?: boolean;
   label?: string;
-  size?: 'small' | 'medium';
+  size?: 'sm' | 'md' | 'lg';
   tooltipCloseDelay?: number;
   tooltipProps?: Omit<TooltipProps, 'children'>;
-  variant?: 'primary' | 'secondary' | 'tertiary';
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger-primary' | 'danger-secondary' | 'danger-tertiary';
 }
 
 /**
@@ -35,10 +36,10 @@ const IconButton = forwardRef<IconButtonProps, 'button'>((props, ref) => {
   } = props;
   const properties: ChakraIconButtonProps = {
     as: isDisabled ? 'button' : as,
-    icon: <Icon name={iconName} size={iconSize || (size === 'small' ? '16' : '24')} />,
+    icon: <Icon name={iconName} size={iconSize || (size === 'lg' ? '24' : '16')} />,
     isDisabled,
     size,
-    variant: isDanger ? `${variant}--danger` : variant,
+    variant: isDanger ? `danger-${variant}` : variant,
     ...rest,
   };
   return (
@@ -56,7 +57,7 @@ const IconButton = forwardRef<IconButtonProps, 'button'>((props, ref) => {
 
 IconButton.defaultProps = {
   as: 'button',
-  size: 'medium',
+  size: 'lg',
   tooltipCloseDelay: 0,
   variant: 'primary',
 } as IconButtonProps;

package/src/Components/Note/Note.tsx

@@ -55,7 +55,7 @@ const Note = ({ children, startingHeight, status }: NoteProps) => {
       </Box>
       {!!startingHeight && (
         <Box __css={buttonContainer}>
-          <Button leftIconName="ChevronDown" onClick={() => setExpanded(!isExpanded)} size="small" variant="secondary">
+          <Button leftIconName="ChevronDown" onClick={() => setExpanded(!isExpanded)} size="sm" variant="secondary">
             {isExpanded ? 'Show less' : 'Show more'}
           </Button>
         </Box>

package/src/Components/OverflowMenu/OverflowMenu.tsx

@@ -12,7 +12,7 @@ export interface OverflowMenuProps extends MenuProps {
   withPortal?: boolean;
 }
 
-const OverflowMenu = ({ buttonSize = 'small', children, triggerLabel, withPortal }: OverflowMenuProps) => {
+const OverflowMenu = ({ buttonSize = 'sm', children, triggerLabel, withPortal }: OverflowMenuProps) => {
   const Wrapper = withPortal ? Portal : Fragment;
   return (
     <Menu isLazy>

package/src/Components/Table/TableIconButton.tsx

@@ -17,7 +17,7 @@ const TableIconButton = forwardRef<TableIconButtonProps, 'button'>((props, ref)
       color={isDanger ? undefined : 'pal.purple.10'}
       iconSize="24"
       isDanger={isDanger}
-      size="small"
+      size="sm"
       variant="tertiary"
       {...props}
     />