@bitrise/bitkit 13.1.1-alpha.3 → 13.2.0

package/package.json

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

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

@@ -1,129 +1,150 @@
-import { defineStyle, defineStyleConfig, SystemStyleInterpolation } from '@chakra-ui/styled-system';
-import { rem } from '../../utils/utils';
-import { ButtonProps } from './Button';
+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',
+    },
+  },
+};
 
-const baseStyle = defineStyle((props) => {
-  const style: any = {
+const ButtonTheme = {
+  baseStyle: {
+    _disabled: {
+      cursor: 'not-allowed',
+    },
+    _hover: {
+      _disabled: {
+        bg: 'initial',
+      },
+    },
+    border: '0.0625rem solid',
     borderRadius: '4',
-    '.chakra-button__group[data-attached][data-orientation=horizontal] > &': {
-      borderRadius: 0,
-      ':first-child': {
-        borderLeftRadius: '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,
       },
-      // Selects the last .chakra-button item even is there an another element after that (eg menu)
-      '&:not(:has(~ .chakra-button))': {
-        borderRightRadius: '4',
+      _hover: {
+        bgGradient: 'linear(to-b, purple.30, purple.10)',
+        ...disabledStates.primary,
       },
-      '&:not(:first-child)': {
-        ...(props.variant.includes('primary')
-          ? {
-              _before: {
-                content: `''`,
-                pos: 'absolute',
-                left: `-${rem(1)}`,
-                top: `-${rem(1)}`,
-                bottom: `-${rem(1)}`,
-                width: rem(1),
-                backgroundColor: 'background/primary',
-              },
-            }
-          : {}),
-        ...(props.variant.includes('secondary') ? { marginInlineStart: `-${rem(1)}` } : {}),
+      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,
     },
-  };
-
-  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({
+    secondary: {
+      _active: {
+        bgGradient: 'linear(to-b, neutral.90, neutral.90)',
+        borderColor: 'neutral.80',
+        ...disabledStates.secondary,
+      },
       _hover: {
-        backgroundColor: `button/${variant}/bg-hover`,
-        borderColor: variant?.includes('secondary') ? `button/${variant}/border-hover` : `button/${variant}/bg-hover`,
-        color: `button/${variant}/fg-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: {
-        backgroundColor: `button/${variant}/bg-active`,
-        borderColor: variant?.includes('secondary') ? `button/${variant}/border-active` : `button/${variant}/bg-active`,
-        color: `button/${variant}/fg-active`,
+        bgGradient: 'linear(to-b, red.90, red.90)',
+        borderColor: 'red.70',
+        ...disabledStates.secondary,
       },
-      _disabled: {
-        backgroundColor: `button/${variant}/bg-disabled`,
-        borderColor: disabledBorderColor,
-        color: `button/${variant}/fg-disabled`,
-        cursor: 'not-allowed',
+      _hover: {
+        bgGradient: 'linear(to-b, red.93, red.93)',
+        borderColor: 'red.70',
+        ...disabledStates.secondary,
       },
-      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',
+      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,
+      },
+      _hover: {
+        background: 'neutral.95',
+        borderColor: 'neutral.95',
+        ...disabledStates.tertiary,
+      },
+      background: 'transparent',
+      borderColor: 'transparent',
+      color: 'purple.50',
+      ...disabledStates.tertiary,
+    },
+    'tertiary--danger': {
+      _active: {
+        background: 'red.90',
+        borderColor: 'red.90',
+        ...disabledStates.tertiary,
+      },
+      _hover: {
+        background: 'red.93',
+        borderColor: 'red.93',
+        ...disabledStates.tertiary,
+      },
+      background: 'transparent',
+      borderColor: 'transparent',
+      color: 'red.50',
+      ...disabledStates.tertiary,
+    },
   },
-  sizes,
-  variants,
-});
+};
 
-export default buttonTheme;
+export default ButtonTheme;

package/src/Components/Button/Button.tsx

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

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

@@ -73,7 +73,6 @@ 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: 'sm' }),
+    ...useStyleConfig('Button', { size: 'small' }),
     ...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="sm" />;
+  return <ChakraButton {...properties} ref={ref} size="small" />;
 });
 
 ColorButton.defaultProps = {

package/src/Components/DatePicker/DatePickerFooter.tsx

@@ -38,7 +38,7 @@ const DatePickerFooter = ({
           gridColumn="1"
           gridRow={styleGrid('2', '1')}
           onClick={() => onClear()}
-          size="sm"
+          size="small"
           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="sm" variant="secondary">
+        <Button onClick={onClose} size="small" variant="secondary">
           Cancel
         </Button>
 
-        <Button onClick={onApply} size="sm">
+        <Button onClick={onApply} size="small">
           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="sm"
+      size="small"
       variant="tertiary"
       visibility={controls === 'right' ? 'hidden' : undefined}
     />
@@ -39,7 +39,7 @@ export const DatePickerHeaderNext = ({ label }: { label: string }) => {
       iconName="ChevronRight"
       isTooltipDisabled
       onClick={onNext}
-      size="sm"
+      size="small"
       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="sm"
+            size="small"
             variant="tertiary"
           >
             {viewDate.monthLong}

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

@@ -1,5 +1,6 @@
 import { createMultiStyleConfigHelpers, SystemStyleObject } from '@chakra-ui/styled-system';
 import { rem } from '../../utils/utils';
+import { disabledStates } from '../Button/Button.theme';
 
 export const parts = [
   'container',
@@ -22,8 +23,6 @@ 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: {
@@ -117,9 +116,9 @@ const FilterTheme = defineMultiStyleConfig({
       },
       _disabled: {
         cursor: 'not-allowed',
-        ...disabledState,
-        _active: disabledState,
-        _hover: disabledState,
+        ...disabledStates.tertiary,
+        _active: disabledStates.tertiary,
+        _hover: disabledStates.tertiary,
       },
       _hover: {
         background: 'neutral.93',
@@ -140,9 +139,9 @@ const FilterTheme = defineMultiStyleConfig({
       },
       _disabled: {
         cursor: 'not-allowed',
-        ...disabledState,
-        _active: disabledState,
-        _hover: disabledState,
+        ...disabledStates.tertiary,
+        _active: disabledStates.tertiary,
+        _hover: disabledStates.tertiary,
       },
       _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="sm"
+                size="small"
                 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="sm"
+        size="small"
         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="sm" variant="tertiary">
+          <Button marginInlineEnd="auto" onClick={onClearClick} size="small" variant="tertiary">
             Clear
           </Button>
         )}
-        <Button onClick={onCancelClick} size="sm" type="reset" variant="secondary">
+        <Button onClick={onCancelClick} size="small" type="reset" variant="secondary">
           Cancel
         </Button>
-        <Button isDisabled={isDisabled} size="sm" type="submit">
+        <Button isDisabled={isDisabled} size="small" 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="sm"
+              size="small"
               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="sm" variant="tertiary" />
+          <IconButton aria-label="Clear" iconName="CloseSmall" onClick={onClearClick} size="small" 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="sm" variant="secondary">
+            <Button flexShrink={0} leftIconName="MinusRemove" onClick={onRemoveClick} size="small" variant="secondary">
               Remove
             </Button>
           </>

package/src/Components/IconButton/IconButton.tsx

@@ -4,16 +4,15 @@ 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?: 'sm' | 'md' | 'lg';
+  size?: 'small' | 'medium';
   tooltipCloseDelay?: number;
   tooltipProps?: Omit<TooltipProps, 'children'>;
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger-primary' | 'danger-secondary' | 'danger-tertiary';
+  variant?: 'primary' | 'secondary' | 'tertiary';
 }
 
 /**
@@ -36,10 +35,10 @@ const IconButton = forwardRef<IconButtonProps, 'button'>((props, ref) => {
   } = props;
   const properties: ChakraIconButtonProps = {
     as: isDisabled ? 'button' : as,
-    icon: <Icon name={iconName} size={iconSize || (size === 'lg' ? '24' : '16')} />,
+    icon: <Icon name={iconName} size={iconSize || (size === 'small' ? '16' : '24')} />,
     isDisabled,
     size,
-    variant: isDanger ? `danger-${variant}` : variant,
+    variant: isDanger ? `${variant}--danger` : variant,
     ...rest,
   };
   return (
@@ -57,7 +56,7 @@ const IconButton = forwardRef<IconButtonProps, 'button'>((props, ref) => {
 
 IconButton.defaultProps = {
   as: 'button',
-  size: 'lg',
+  size: 'medium',
   tooltipCloseDelay: 0,
   variant: 'primary',
 } as IconButtonProps;

package/src/Components/Icons/16x16/Siren.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
 
 const Siren = forwardRef<IconProps, 'svg'>((props, ref) => (
-  <Icon ref={ref} viewBox="0 0 24 24" {...props} fill="currentColor">
+  <Icon ref={ref} viewBox="0 0 16 16" {...props} fill="currentColor">
     <path d="M7.25 3.5V1.5H8.75V3.5H7.25Z" fill="currentColor" />
     <path
       d="M6.75 10C6.75 9.30964 7.30964 8.75 8 8.75V7.25C6.48122 7.25 5.25 8.48122 5.25 10H6.75Z"

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="sm" variant="secondary">
+          <Button leftIconName="ChevronDown" onClick={() => setExpanded(!isExpanded)} size="small" 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 = 'sm', children, triggerLabel, withPortal }: OverflowMenuProps) => {
+const OverflowMenu = ({ buttonSize = 'small', 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="sm"
+      size="small"
       variant="tertiary"
       {...props}
     />