@bitrise/bitkit 12.83.0 → 12.84.0

package/src/Components/ProgressIndicator/ProgressIndicator.theme.ts

@@ -7,53 +7,53 @@ const ProgressIndicatorTheme = itemHelpers.defineMultiStyleConfig({
     container: {
       display: 'flex',
     },
-    stage: {
-      display: 'flex',
-      gap: '1rem',
-    },
     iconWithLine: {
       display: 'flex',
     },
+    label: {
+      alignSelf: 'flex-start',
+      lineHeight: '1.5rem',
+      maxWidth: 'max(8rem, calc(100% - 1rem))',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+    },
     line: {
       flexGrow: '1',
     },
-    label: {
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      overflow: 'hidden',
-      maxWidth: 'max(8rem, calc(100% - 1rem))',
-      lineHeight: '1.5rem',
-      alignSelf: 'flex-start',
+    stage: {
+      display: 'flex',
+      gap: '1rem',
     },
   },
   variants: {
-    vertical: {
+    horizontal: {
       container: {
-        flexDir: 'column',
-      },
-      stage: {
         flexDir: 'row',
       },
       iconWithLine: {
-        flexDir: 'column',
+        flexDir: 'row',
       },
       line: {
-        marginX: 'calc(.75rem - 1px)',
-        height: '1.5rem',
+        marginY: 'calc(.75rem - 1px)',
+      },
+      stage: {
+        flexDir: 'column',
       },
     },
-    horizontal: {
+    vertical: {
       container: {
-        flexDir: 'row',
-      },
-      stage: {
         flexDir: 'column',
       },
       iconWithLine: {
-        flexDir: 'row',
+        flexDir: 'column',
       },
       line: {
-        marginY: 'calc(.75rem - 1px)',
+        height: '1.5rem',
+        marginX: 'calc(.75rem - 1px)',
+      },
+      stage: {
+        flexDir: 'row',
       },
     },
   },

package/src/Components/ProgressIndicator/ProgressIndicator.tsx

@@ -21,12 +21,12 @@ export type ProgressIndicatorProps = {
   variant: 'horizontal' | 'vertical';
 };
 
-const ProgressIndicator = ({ stages, activeStageIndex, variant }: ProgressIndicatorProps): JSX.Element => {
+const ProgressIndicator = ({ activeStageIndex, stages, variant }: ProgressIndicatorProps): JSX.Element => {
   const style = useMultiStyleConfig('ProgressIndicator', { variant });
 
   return (
     <Box sx={style.container}>
-      {stages.map(({ label, isInvalid, isDisabled, action }, index, array) => {
+      {stages.map(({ action, isDisabled, isInvalid, label }, index, array) => {
         let iconName: IconProps['name'];
         let iconColor: IconProps['color'] = 'purple.50';
 
@@ -61,37 +61,37 @@ const ProgressIndicator = ({ stages, activeStageIndex, variant }: ProgressIndica
 
         return (
           <Box
-            sx={style.stage}
-            flexGrow={lastBlock ? undefined : '1'}
-            flexBasis={lastBlock ? undefined : `${100 / array.length}%`}
             // eslint-disable-next-line react/no-array-index-key
             key={index}
+            flexBasis={lastBlock ? undefined : `${100 / array.length}%`}
+            flexGrow={lastBlock ? undefined : '1'}
+            sx={style.stage}
           >
             <Box sx={style.iconWithLine}>
-              <Icon name={iconName} color={iconColor} />
+              <Icon color={iconColor} name={iconName} />
               {!lastBlock && (
                 <Divider
-                  sx={style.line}
-                  size="2"
                   orientation={variant === 'horizontal' ? 'horizontal' : 'vertical'}
+                  size="2"
+                  sx={style.line}
                   {...dividerProps}
                 />
               )}
             </Box>
             {action && !isDisabled ? (
               <Link
-                sx={style.label}
-                size="2"
-                colorScheme="purple"
                 as={action.href ? 'a' : 'button'}
+                colorScheme="purple"
                 href={action.href}
-                onClick={action.onClick}
                 isExternal={action.isExternal}
+                onClick={action.onClick}
+                size="2"
+                sx={style.label}
               >
                 {label}
               </Link>
             ) : (
-              <Text sx={style.label} color={isDisabled ? 'neutral.80' : 'neutral.10'} size="2">
+              <Text color={isDisabled ? 'neutral.80' : 'neutral.10'} size="2" sx={style.label}>
                 {label}
               </Text>
             )}

package/src/Components/ProgressSpinner/ProgressSpinner.tsx

@@ -1,4 +1,4 @@
-import { Spinner as ChakraSpinner, SpinnerProps, forwardRef } from '@chakra-ui/react';
+import { forwardRef, Spinner as ChakraSpinner, SpinnerProps } from '@chakra-ui/react';
 
 export interface ProgressSpinnerProps extends Omit<SpinnerProps, 'size'> {
   size?: SpinnerProps['width'];
@@ -9,7 +9,7 @@ export interface ProgressSpinnerProps extends Omit<SpinnerProps, 'size'> {
  */
 const Progresspinner = forwardRef<ProgressSpinnerProps, 'div'>((props, ref) => {
   const { size = '24', ...rest } = props;
-  return <ChakraSpinner width={size} height={size} {...rest} ref={ref} />;
+  return <ChakraSpinner height={size} width={size} {...rest} ref={ref} />;
 });
 
 export default Progresspinner;

package/src/Components/Provider/Provider.tsx

@@ -18,8 +18,8 @@ const Provider = ({ children, toastOptions }: ProviderProps) => {
       toastOptions={{
         defaultOptions: {
           containerStyle: {
-            transform: toastOptions?.offsetTop && `translateY(${toastOptions.offsetTop})`,
             marginRight: toastOptions?.offsetRight,
+            transform: toastOptions?.offsetTop && `translateY(${toastOptions.offsetTop})`,
           },
         },
         portalProps: {

package/src/Components/Ribbon/Ribbon.tsx

@@ -22,15 +22,15 @@ const ActionContext = createContext<{
   colorScheme: ColorButtonProps['colorScheme'];
 }>({ colorScheme: 'blue' });
 
-const RibbonAction = ({ label, href, ...rest }: ActionProps) => {
+const RibbonAction = ({ href, label, ...rest }: ActionProps) => {
   const actionContext = useContext(ActionContext);
   return (
     <ColorButton
+      as={(href ? 'a' : 'button') as any}
       flexGrow={0}
       flexShrink={0}
-      as={(href ? 'a' : 'button') as any}
-      marginY={-4}
       href={href}
+      marginY={-4}
       {...actionContext}
       {...rest}
     >
@@ -40,7 +40,7 @@ const RibbonAction = ({ label, href, ...rest }: ActionProps) => {
 };
 
 const Ribbon = forwardRef<RibbonProps, 'div'>((props, ref) => {
-  const { action, children, onClose, colorScheme, ...rest } = props;
+  const { action, children, colorScheme, onClose, ...rest } = props;
   const actionContext = useMemo(() => ({ colorScheme }), [colorScheme]);
   let actionButton;
   if (action) {
@@ -50,22 +50,22 @@ const Ribbon = forwardRef<RibbonProps, 'div'>((props, ref) => {
   return (
     <ChakraAlert
       ref={ref}
-      colorScheme={colorScheme}
-      justifyContent="center"
       alignItems="center"
-      gap={16}
-      borderRadius={0}
       borderLeftWidth={0}
+      borderRadius={0}
       borderRightWidth={0}
+      colorScheme={colorScheme}
+      gap={16}
+      justifyContent="center"
       {...rest}
     >
       <ActionContext.Provider value={actionContext}>
-        {onClose && <Box display={['none', 'block']} width={24} height={24} marginEnd="auto" />}
+        {onClose && <Box display={['none', 'block']} height={24} marginEnd="auto" width={24} />}
         <Box display="flex" flexDirection={['column', 'row']} gap={['12', '16']}>
           {children}
           {actionButton}
         </Box>
-        {onClose && <CloseButton flexShrink={0} colorScheme={colorScheme} marginStart="auto" onClick={onClose} />}
+        {onClose && <CloseButton colorScheme={colorScheme} flexShrink={0} marginStart="auto" onClick={onClose} />}
       </ActionContext.Provider>
     </ChakraAlert>
   );

package/src/Components/SearchInput/SearchInput.tsx

@@ -20,12 +20,12 @@ const SearchInput = (props: SearchInputProps) => {
 
   const rightButton = (
     <IconButton
+      _active={{ background: 'transparent' }}
+      _hover={{ background: 'transparent' }}
       aria-label="Clear"
       iconName="CloseSmall"
       onClick={onClearClick}
       variant="tertiary"
-      _active={{ background: 'transparent' }}
-      _hover={{ background: 'transparent' }}
     />
   );
   const inputProps: InputProps = {

package/src/Components/SegmentedControl/SegmentedControl.theme.ts

@@ -5,55 +5,55 @@ const itemHelpers = createMultiStyleConfigHelpers(['container', 'item']);
 const SegmentedControlTheme = itemHelpers.defineMultiStyleConfig({
   baseStyle: {
     container: {
-      display: 'flex',
-      width: '100%',
       backgroundColor: 'neutral.95',
-      gap: '4',
       borderRadius: '8',
+      display: 'flex',
+      gap: '4',
       padding: '4',
+      width: '100%',
     },
     item: {
-      flexGrow: 1,
-      paddingX: '0.375rem',
-      cursor: 'pointer',
-      fontSize: '3',
-      lineHeight: '2.375rem',
-      color: 'neutral.40',
-      textAlign: 'center',
-      fontWeight: 'demiBold',
-      border: '1px solid',
-      borderColor: 'transparent',
-      borderRadius: '4',
       _checked: {
-        color: 'purple.10',
-        backgroundColor: 'neutral.100',
-        borderColor: 'separator.primary',
         _hover: {
-          backgroundColor: 'neutral.100',
-          borderColor: 'separator.primary',
           _disabled: {
             backgroundColor: 'neutral.100',
             borderColor: 'separator.primary',
           },
+          backgroundColor: 'neutral.100',
+          borderColor: 'separator.primary',
         },
+        backgroundColor: 'neutral.100',
+        borderColor: 'separator.primary',
+        color: 'purple.10',
+      },
+      _disabled: {
+        color: 'neutral.70',
+        cursor: 'not-allowed',
       },
       _focus: {
         boxShadow: 'outline',
       },
       _hover: {
-        backgroundColor: 'neutral.93',
-        borderColor: 'neutral.93',
-        color: 'neutral.10',
         _disabled: {
           backgroundColor: 'transparent',
           borderColor: 'transparent',
           color: 'neutral.70',
         },
+        backgroundColor: 'neutral.93',
+        borderColor: 'neutral.93',
+        color: 'neutral.10',
       },
-      _disabled: {
-        cursor: 'not-allowed',
-        color: 'neutral.70',
-      },
+      border: '1px solid',
+      borderColor: 'transparent',
+      borderRadius: '4',
+      color: 'neutral.40',
+      cursor: 'pointer',
+      flexGrow: 1,
+      fontSize: '3',
+      fontWeight: 'demiBold',
+      lineHeight: '2.375rem',
+      paddingX: '0.375rem',
+      textAlign: 'center',
     },
   },
 });

package/src/Components/SegmentedControl/SegmentedControl.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useMultiStyleConfig, useRadioGroup, UseRadioGroupProps, forwardRef } from '@chakra-ui/react';
+import { forwardRef, useMultiStyleConfig, useRadioGroup, UseRadioGroupProps } from '@chakra-ui/react';
 import Box, { BoxProps } from '../Box/Box';
 import { SegmentedControlContext, SegmentedControlContextType } from './SegmentedControl.context';
 
@@ -11,7 +11,7 @@ export type SegmentedControlProps = Omit<BoxProps, 'onChange'> & UseRadioGroupPr
 const SegmentedControl = forwardRef<SegmentedControlProps, 'div'>((props, ref) => {
   const { defaultValue, isDisabled, name, onChange, value, ...rest } = props;
 
-  const { getRootProps, getRadioProps } = useRadioGroup({
+  const { getRadioProps, getRootProps } = useRadioGroup({
     defaultValue,
     isDisabled,
     name,
@@ -33,7 +33,7 @@ const SegmentedControl = forwardRef<SegmentedControlProps, 'div'>((props, ref) =
 
   return (
     <SegmentedControlContext value={ctx}>
-      <Box __css={theme.container} ref={ref} {...group} {...rest} />
+      <Box ref={ref} __css={theme.container} {...group} {...rest} />
     </SegmentedControlContext>
   );
 });

package/src/Components/SegmentedControl/SegmentedControlItem.tsx

@@ -24,7 +24,7 @@ const SegmentedControlItem = (props: SegmentedControlItemProps) => {
   delete radioProps['aria-hidden'];
 
   return (
-    <Box as="label" __css={theme.item} {...radioProps}>
+    <Box __css={theme.item} as="label" {...radioProps}>
       <input {...getInputProps()} />
       {children}
     </Box>

package/src/Components/Select/Select.theme.ts

@@ -1,17 +1,6 @@
 const SelectTheme = {
   baseStyle: {
     field: {
-      appearance: 'none',
-      bgGradient: 'linear(to-b, neutral.100, neutral.93)',
-      border: '0.0625rem solid',
-      borderColor: 'neutral.90',
-      borderRadius: '4',
-      color: 'purple.10',
-      position: 'relative',
-      width: '100%',
-      _hover: {
-        bgGradient: 'linear(to-b, neutral.93, neutral.93)',
-      },
       _active: {
         bgGradient: 'linear(to-b, neutral.90, neutral.90)',
         borderColor: 'neutral.80',
@@ -20,23 +9,26 @@ const SelectTheme = {
         color: 'neutral.70',
         pointerEvents: 'none',
       },
+      _hover: {
+        bgGradient: 'linear(to-b, neutral.93, neutral.93)',
+      },
+      appearance: 'none',
+      bgGradient: 'linear(to-b, neutral.100, neutral.93)',
+      border: '0.0625rem solid',
+      borderColor: 'neutral.90',
+      borderRadius: '4',
+      color: 'purple.10',
+      position: 'relative',
+      width: '100%',
     },
     icon: {
-      right: '8',
       _disabled: {
         opacity: '0.2',
       },
+      right: '8',
     },
   },
   sizes: {
-    small: {
-      field: {
-        fontSize: '2',
-        height: '32',
-        paddingLeft: '12',
-        paddingRight: '32',
-      },
-    },
     medium: {
       field: {
         fontSize: '3',
@@ -45,6 +37,14 @@ const SelectTheme = {
         paddingRight: '32',
       },
     },
+    small: {
+      field: {
+        fontSize: '2',
+        height: '32',
+        paddingLeft: '12',
+        paddingRight: '32',
+      },
+    },
   },
 };
 

package/src/Components/Select/Select.tsx

@@ -31,6 +31,7 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
   const {
     children,
     'data-testid': dataTestid,
+    defaultValue,
     errorText,
     helperText,
     isDisabled,
@@ -43,7 +44,6 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
     placeholder,
     size,
     value,
-    defaultValue,
     ...rest
   } = props;
   const iconSize = size === 'medium' ? '24' : '16';
@@ -53,17 +53,17 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
     ...rest,
   };
   const selectProperties: ChakraSelectProps = {
+    defaultValue,
     icon: isLoading ? (
-      <ProgressSpinner size={iconSize} marginEnd="4" />
+      <ProgressSpinner marginEnd="4" size={iconSize} />
     ) : (
-      <Icon name="DropdownArrows" fontSize={iconSize} size={iconSize} />
+      <Icon fontSize={iconSize} name="DropdownArrows" size={iconSize} />
     ),
     name,
     onBlur,
     onChange,
     size,
     value,
-    defaultValue,
     variant: 'select',
   };
   if (placeholder) {
@@ -78,17 +78,17 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
     <FormControl {...formControlProps}>
       {label && (
         <FormLabel
-          requiredIndicator={null as any}
           optionalIndicator={
-            <Text as="span" fontSize="2" color="neutral.40" fontWeight="normal" marginLeft="4px">
+            <Text as="span" color="neutral.40" fontSize="2" fontWeight="normal" marginLeft="4px">
               (Optional)
             </Text>
           }
+          requiredIndicator={null as any}
         >
           {label}
         </FormLabel>
       )}
-      <ChakraSelect data-testid={dataTestid} ref={ref} {...selectProperties}>
+      <ChakraSelect ref={ref} data-testid={dataTestid} {...selectProperties}>
         {placeholder && (
           <option disabled value="">
             {placeholder}

package/src/Components/Sidebar/Sidebar.tsx

@@ -17,7 +17,7 @@ const SidebarHeader = ({ title }: { title?: string }) => {
     return <Box h="24" w="100%" />;
   }
   return (
-    <Text size={['6', '4']} fontWeight="bold" px="32" py="1.375rem">
+    <Text fontWeight="bold" px="32" py="1.375rem" size={['6', '4']}>
       {title}
     </Text>
   );
@@ -33,11 +33,11 @@ const SidebarDivider = () => {
 
 const SidebarGroupHeader = ({ label }: { label: string }) => {
   return (
-    <Box marginTop="24" marginBottom="12" display="flex" mx="32" alignItems="center" gap="16">
-      <Text size="1" fontWeight="bold" textColor="neutral.60">
+    <Box alignItems="center" display="flex" gap="16" marginBottom="12" marginTop="24" mx="32">
+      <Text fontWeight="bold" size="1" textColor="neutral.60">
         {label}
       </Text>
-      <Divider w="auto" flexGrow="1" />
+      <Divider flexGrow="1" w="auto" />
     </Box>
   );
 };
@@ -71,8 +71,8 @@ const Sidebar = ({ children, title, ...boxProps }: SidebarProps) => {
 
 const SidebarButton = ({ onClick, title }: Pick<BoxProps, 'onClick'> & { title: string }) => {
   return (
-    <Box as="button" onClick={onClick} h="56" display="flex" alignItems="center" gap="4" paddingLeft="16">
-      <Icon size="24" name="ChevronLeft" />
+    <Box alignItems="center" as="button" display="flex" gap="4" h="56" onClick={onClick} paddingLeft="16">
+      <Icon name="ChevronLeft" size="24" />
       <Text as="span" lineHeight="var(--space-24)">
         {title}
       </Text>

package/src/Components/Sidebar/SidebarItem.theme.ts

@@ -4,58 +4,58 @@ const itemHelpers = createMultiStyleConfigHelpers(['icon', 'link']);
 
 const SidebarItemTheme = itemHelpers.defineMultiStyleConfig({
   baseStyle: {
+    icon: {
+      marginLeft: '32',
+      marginRight: '16',
+    },
     link: {
-      userSelect: 'none',
-      color: 'purple.10',
-      display: 'flex',
-      flexShrink: '0',
-      alignItems: 'center',
-      _hover: {
-        bg: 'neutral.95',
-      },
       _active: {
         bg: 'neutral.93',
       },
-    },
-    icon: {
-      marginLeft: '32',
-      marginRight: '16',
+      _hover: {
+        bg: 'neutral.95',
+      },
+      alignItems: 'center',
+      color: 'purple.10',
+      display: 'flex',
+      flexShrink: '0',
+      userSelect: 'none',
     },
   },
   variants: {
     disabled: {
       link: {
-        color: 'neutral.80',
-        _hover: { bg: 'unset' },
         _active: { bg: 'unset' },
+        _hover: { bg: 'unset' },
+        color: 'neutral.80',
         cursor: 'not-allowed',
       },
     },
     selected: {
+      icon: {
+        color: 'purple.50',
+      },
       link: {
-        fontWeight: 'demiBold',
-        bg: 'purple.95',
-        _hover: {
-          bg: 'purple.93',
-        },
-        _active: {
-          bg: 'purple.93',
-        },
         '&::after': {
-          display: 'block',
+          background: 'purple.50',
+          borderRadius: '0px 2px 2px 0px',
           content: "''",
-          width: '2px',
+          display: 'block',
           height: '100%',
-          right: '0px',
           position: 'absolute',
+          right: '0px',
           top: 'calc(50% - var(--sizes-48)/2)',
-          background: 'purple.50',
-          borderRadius: '0px 2px 2px 0px',
           transform: 'matrix(-1, 0, 0, 1, 0, 0)',
+          width: '2px',
         },
-      },
-      icon: {
-        color: 'purple.50',
+        _active: {
+          bg: 'purple.93',
+        },
+        _hover: {
+          bg: 'purple.93',
+        },
+        bg: 'purple.95',
+        fontWeight: 'demiBold',
       },
     },
   },

package/src/Components/Sidebar/SidebarItem.tsx

@@ -14,7 +14,7 @@ type SidebarItemProps = {
 
 const [SidebarItemStyleProvider, useSidebarItemStyle] = createStylesContext('SidebarItem');
 
-const sidebarVariant = ({ selected, disabled }: { selected?: boolean; disabled?: boolean }) => {
+const sidebarVariant = ({ disabled, selected }: { selected?: boolean; disabled?: boolean }) => {
   if (disabled) {
     return 'disabled';
   }
@@ -26,17 +26,17 @@ const sidebarVariant = ({ selected, disabled }: { selected?: boolean; disabled?:
 
 const SidebarItem = forwardRef(
   (
-    { children, disabled, selected, href, onClick }: SidebarItemProps,
+    { children, disabled, href, onClick, selected }: SidebarItemProps,
     ref: React.Ref<HTMLButtonElement & HTMLAnchorElement>,
   ) => {
     const style = useMultiStyleConfig('SidebarItem', { variant: sidebarVariant({ disabled, selected }) });
     const shared = {
+      children: <SidebarItemStyleProvider value={style}>{children}</SidebarItemStyleProvider>,
+      height: '48',
+      href,
       onClick,
       position: 'relative',
-      href,
-      children: <SidebarItemStyleProvider value={style}>{children}</SidebarItemStyleProvider>,
       sx: style.link,
-      height: '48',
     } as ChakraProps;
     if (onClick || disabled) {
       return <chakra.button ref={ref} disabled={disabled} {...shared} />;
@@ -47,11 +47,11 @@ const SidebarItem = forwardRef(
 
 const SidebarItemIcon = ({ name, ...iconProps }: { name: TypeIconName } & Omit<IconProps, 'sx'>) => {
   const { icon } = useSidebarItemStyle();
-  return <Icon sx={icon} name={name} size="24" {...iconProps} />;
+  return <Icon name={name} size="24" sx={icon} {...iconProps} />;
 };
 
 const SidebarItemLabel = ({ children }: { children: ReactNode }) => (
-  <Text as="span" textAlign="left" flexGrow="1">
+  <Text as="span" flexGrow="1" textAlign="left">
     {children}
   </Text>
 );
@@ -61,13 +61,13 @@ const SidebarItemDateExtra = ({ date }: { date: Date | DateTime }) => {
   return (
     <Text
       as="time"
-      minWidth="5rem"
       dateTime={dateTime.toFormat('yyyy-LL-dd')}
-      textAlign="left"
-      whiteSpace="nowrap"
       fontWeight="normal"
-      textColor="text.secondary"
+      minWidth="5rem"
       paddingEnd="24"
+      textAlign="left"
+      textColor="text.secondary"
+      whiteSpace="nowrap"
     >
       {dateTime.toFormat('LLL d')}
     </Text>