@bitrise/bitkit 13.272.0 → 13.274.0

package/package.json

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

package/src/Components/Breadcrumb/Breadcrumb.theme.ts

@@ -12,7 +12,8 @@ const BreadcrumbTheme: SystemStyleObject = {
         _hover: {
           textDecoration: 'none',
         },
-        color: 'neutral.10',
+        color: 'text/body',
+        textStyle: 'body/md/semibold',
       },
       _hover: {
         textDecoration: 'underline',
@@ -29,6 +30,7 @@ const BreadcrumbTheme: SystemStyleObject = {
     separator: {
       color: 'neutral.80',
       display: 'flex',
+      marginInline: '4',
     },
   },
 };

package/src/Components/Filter/Filter.storyData.ts

@@ -49,6 +49,7 @@ export const FILTER_STORY_DATA: FilterData = {
     type: 'tag',
   },
   cache_type: {
+    allOptionLabel: 'All items',
     iconsMap: {
       bazel: 'Bazel',
       gradle: 'Gradle',

package/src/Components/Filter/Filter.types.ts

@@ -36,11 +36,19 @@ export type FilterCategoryProps = {
       dayTooltip?: DatePickerProps['dayTooltip'];
       isMultiple: true;
     }
+  | {
+      type: 'switch';
+      allOptionLabel?: string;
+    }
   | {
       type?: Exclude<FilterType, 'dateRange'>;
       selectable?: never;
       dayTooltip?: never;
     }
+  | {
+      type?: Exclude<FilterType, 'switch'>;
+      allOptionLabel?: never;
+    }
 );
 
 export type FilterData = Record<string, FilterCategoryProps>;

package/src/Components/Filter/FilterDate/FilterDate.tsx

@@ -3,11 +3,12 @@ import { useEffect } from 'react';
 import { useDisclosure, useMultiStyleConfig } from '@chakra-ui/react';
 import { DateTime } from 'luxon';
 import Box from '../../Box/Box';
-import DatePicker, { DateRange, useDateRange } from '../../DatePicker/DatePicker';
+import DatePicker, { DatePickerProps, DateRange, useDateRange } from '../../DatePicker/DatePicker';
 import Icon from '../../Icon/Icon';
 import Text from '../../Text/Text';
 import { useFilterContext } from '../Filter.context';
 import { FilterStyle } from '../Filter.theme';
+import { FilterCategoryProps } from '../Filter.types';
 
 export type FilterDateProps = {
   category: string;
@@ -19,6 +20,11 @@ const FilterDate = (props: FilterDateProps) => {
 
   const { isLoading, onFilterChange, onFilterClear, setPopoverOpen, state, data } = useFilterContext();
 
+  const dateRangeData = data.date_range as FilterCategoryProps & {
+    dayTooltip?: DatePickerProps['dayTooltip'];
+    selectable?: DateRange;
+  };
+
   const { isOpen, onClose, onToggle } = useDisclosure();
 
   const value = state[category];
@@ -54,11 +60,11 @@ const FilterDate = (props: FilterDateProps) => {
 
   return (
     <DatePicker
-      selectable={data.date_range.selectable || selectable}
+      selectable={dateRangeData.selectable || selectable}
       onApply={onDateRangeApply}
       onClear={value?.length ? onClearClick : undefined}
       onClose={onClose}
-      dayTooltip={data.date_range.dayTooltip}
+      dayTooltip={dateRangeData.dayTooltip}
       selected={selectedRange}
       visible={isOpen}
       mode="range"

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

@@ -1,43 +1,44 @@
 import { rem } from '../../../utils/utils';
 
 const FilterSwitch = {
-  baseStyle: () => {
+  baseStyle: ({ isChecked }: { isChecked: boolean }) => {
     return {
       container: {
         background: 'neutral.95',
-        border: '1px solid',
-        borderColor: 'neutral.80',
         borderRadius: '4',
         color: 'neutral.40',
         display: 'flex',
       },
+      icon: {
+        color: isChecked ? 'icon/secondary' : 'icon/tertiary',
+      },
       item: {
+        borderRadius: '4',
+        maxW: '20rem',
+        borderColor: isChecked ? 'border/strong' : 'transparent',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        _hover: {
+          background: 'background/hover',
+          color: 'text/primary',
+
+          '> svg': {
+            color: 'icon/secondary',
+          },
+        },
         _active: {
-          background: 'neutral.100',
-          color: 'purple.10',
+          background: 'background/active',
         },
         _checked: {
           background: 'neutral.100',
           color: 'purple.10',
           cursor: 'default',
         },
-        _first: {
-          borderLeft: 'none',
-          borderLeftRadius: '4',
-        },
         _focusVisible: {
           boxShadow: 'outline',
           zIndex: 1,
         },
-        _hover: {
-          background: 'neutral.100',
-        },
-        _last: {
-          borderRightRadius: '4',
-        },
         alignItems: 'center',
-        borderLeft: '1px solid',
-        borderLeftColor: 'neutral.80',
         cursor: 'pointer',
         display: 'flex',
         fontSize: rem(14),

package/src/Components/Filter/FilterSwitch/FilterSwitch.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import {
   chakra,
   forwardRef,
@@ -7,33 +8,47 @@ import {
   useRadioGroupContext,
 } from '@chakra-ui/react';
 import { omitThemingProps } from '@chakra-ui/styled-system';
+import { createContext } from '@chakra-ui/react-utils';
+import Divider from '../../Divider/Divider';
+import Text from '../../Text/Text';
+import Box from '../../Box/Box';
+import Icon, { TypeIconName } from '../../Icon/Icon';
 
 type RadioInputProps = ChakraRadioProps['inputProps'] & {
   'data-testid'?: string;
 };
 
 export interface FilterSwitchProps extends Omit<ChakraRadioProps, 'inputProps'> {
+  iconName?: TypeIconName;
   inputProps?: RadioInputProps;
 }
 
+type FilterSwicthContext = {
+  selectedOption: string;
+  options: string[];
+};
+
+export const [FilterSwitchContextProvider, useFilterSwitchContext] = createContext<FilterSwicthContext>();
+
 const FilterSwitch = forwardRef<FilterSwitchProps, 'input'>((props, ref) => {
   const group = useRadioGroupContext();
   const { value: valueProp } = props;
 
-  const styles = useMultiStyleConfig('FilterSwitch');
+  const isChecked = group.value === valueProp;
+
+  const styles = useMultiStyleConfig('FilterSwitch', { isChecked });
 
   const ownProps = omitThemingProps(props);
 
   const {
     children,
+    iconName,
     inputProps: htmlInputProps,
     isDisabled = group?.isDisabled,
     isFocusable = group?.isFocusable,
     ...rest
   } = ownProps;
 
-  const isChecked = group.value === valueProp;
-
   const { name } = group;
 
   const { getRadioProps, getInputProps, getLabelProps } = useRadio({
@@ -45,12 +60,43 @@ const FilterSwitch = forwardRef<FilterSwitchProps, 'input'>((props, ref) => {
     onChange: group.onChange,
   });
 
-  return (
+  const { options, selectedOption } = useFilterSwitchContext();
+
+  const showDivider = useMemo(() => {
+    const optionCount = options.length;
+    const index = options.indexOf(valueProp || '');
+
+    const selectedIndex = options.indexOf(selectedOption);
+
+    return index < optionCount - 1 && selectedIndex !== index && selectedIndex !== index + 1;
+  }, [options, selectedOption, valueProp]);
+
+  const component = (
     <chakra.label {...getLabelProps()} {...getRadioProps()} __css={styles.item}>
       <chakra.input {...getInputProps(htmlInputProps, ref)} />
-      {children}
+      {iconName && <Icon __css={styles.icon} name={iconName} size="16" />}
+      <Text as="span" display="block" overflow="hidden" textOverflow="ellipsis">
+        {children}
+      </Text>
     </chakra.label>
   );
+
+  return (
+    <Box height="fit-content" width="fit-content" position="relative">
+      {component}
+      {showDivider && (
+        <Divider
+          background="boder/regular"
+          height="16"
+          orientation="vertical"
+          marginTop="8"
+          position="absolute"
+          right="0"
+          top="0"
+        />
+      )}
+    </Box>
+  );
 });
 
 export default FilterSwitch;

package/src/Components/Filter/FilterSwitch/FilterSwitchGroup.tsx

@@ -1,11 +1,21 @@
 import { RadioGroup as ChakraRadioGroup, RadioGroupProps, useMultiStyleConfig } from '@chakra-ui/react';
+import { FilterSwitchContextProvider } from './FilterSwitch';
 
-export type { RadioGroupProps };
+export type FilterSwitchGroupProps = { options: string[] } & RadioGroupProps;
 
-const FilterSwitchGroup = (props: RadioGroupProps) => {
+const FilterSwitchGroup = ({ options, value, ...rest }: FilterSwitchGroupProps) => {
   const { container } = useMultiStyleConfig('FilterSwitch');
 
-  return <ChakraRadioGroup sx={container} {...props} />;
+  return (
+    <FilterSwitchContextProvider
+      value={{
+        options,
+        selectedOption: value || '',
+      }}
+    >
+      <ChakraRadioGroup sx={container} {...rest} value={value} />
+    </FilterSwitchContextProvider>
+  );
 };
 
 export default FilterSwitchGroup;

package/src/Components/Filter/FilterSwitchAdapter/FilterSwitchAdapter.tsx

@@ -1,8 +1,9 @@
+import { useMemo } from 'react';
 import { useFilterContext } from '../Filter.context';
 import { getOptionLabel } from '../Filter.utils';
-import Icon from '../../Icon/Icon';
 import FilterSwitch from '../FilterSwitch/FilterSwitch';
 import FilterSwitchGroup from '../FilterSwitch/FilterSwitchGroup';
+import { FilterCategoryProps } from '../Filter.types';
 
 type FilterSwitchAdapterProps = {
   category: string;
@@ -11,7 +12,11 @@ type FilterSwitchAdapterProps = {
 const FilterSwitchAdapter = (props: FilterSwitchAdapterProps) => {
   const { category } = props;
   const { data, onFilterChange, state } = useFilterContext();
-  const { iconsMap, options, optionsMap } = data[category];
+  const { allOptionLabel, iconsMap, options, optionsMap } = data[category] as FilterCategoryProps & {
+    allOptionLabel?: string;
+  };
+
+  const optionsWithAll = useMemo(() => ['all', ...(options || [])], [options]);
 
   if (!options?.length) {
     return null;
@@ -20,10 +25,16 @@ const FilterSwitchAdapter = (props: FilterSwitchAdapterProps) => {
   const value = state[category]?.[0] || '';
 
   return (
-    <FilterSwitchGroup onChange={(newValue) => onFilterChange(category, [newValue])} value={value}>
+    <FilterSwitchGroup
+      onChange={(newValue) => onFilterChange(category, [newValue])}
+      options={optionsWithAll}
+      value={value}
+    >
+      <FilterSwitch key="all" value="all">
+        {allOptionLabel || 'All items'}
+      </FilterSwitch>
       {options.map((opt) => (
-        <FilterSwitch key={opt} value={opt}>
-          {iconsMap && iconsMap[opt] && <Icon color="icon/tertiary" name={iconsMap[opt]} size="16" />}
+        <FilterSwitch key={opt} value={opt} iconName={iconsMap && iconsMap[opt]}>
           {getOptionLabel(opt, optionsMap)}
         </FilterSwitch>
       ))}

package/src/Components/Pagination/Pagination.tsx

@@ -60,13 +60,13 @@ const Pagination = ({
               ))}
             </Dropdown>
           </Box>
-          <Divider color="pal.neutral.90" height="3rem" orientation="vertical" />
+          <Divider color="pal.neutral.90" height="2.5rem" orientation="vertical" />
         </>
       )}
       <Text as="span" color={textColor} marginRight="auto" textStyle="body/md/regular">
         {itemsStartIndex}-{itemsEndIndex} of {totalCount} items
       </Text>
-      <Divider color="pal.neutral.90" height="3rem" orientation="vertical" />
+      <Divider color="pal.neutral.90" height="2.5rem" orientation="vertical" />
       <Box alignItems="center" display="flex" gap="0.5rem">
         <Dropdown
           onChange={({ target }) => setPage(Number(target.value))}

package/src/Components/Tag/Tag.theme.ts

@@ -66,9 +66,9 @@ const schemeMap: Record<TagColors, MappedColor> = {
 };
 
 const baseStyle = definePartsStyle((props) => {
-  const { colorScheme = 'neutral' } = props;
+  const { colorScheme = 'neutral', isDisabled, isLoading } = props;
   const { color, isFilled } = schemeMap[colorScheme as TagColors];
-  const normalTextColor = color === 'neutral' ? 'text.primary' : `sys.${color}.strong`;
+  const normalTextColor = color === 'neutral' ? 'text.body' : `sys.${color}.strong`;
   const scheme = {
     backgroundColor: `sys.${color}.${isFilled ? 'bold' : 'subtle'}`,
     borderColor: `sys.${color}.${isFilled ? 'bold' : 'muted'}`,
@@ -108,6 +108,7 @@ const baseStyle = definePartsStyle((props) => {
       },
     },
     icon: {
+      color: colorScheme === 'neutral' && !isDisabled && !isLoading ? 'icon.secondary' : undefined,
       marginInlineEnd: '4',
     },
     label: {

package/src/Components/Toggle/Toggle.tsx

@@ -19,12 +19,13 @@ type VariantLabel =
   | { variant?: undefined; label?: ReactNode }
   | { variant: 'dynamic'; label?: ReactNode }
   | { variant: 'fixed'; label: ReactNode };
-export type ToggleProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'> & {
+export type ToggleProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange' | 'isReadOnly'> & {
   'data-testid'?: string;
   defaultChecked?: SwitchProps['defaultChecked'];
   id?: SwitchProps['id'];
   isChecked?: SwitchProps['isChecked'];
   isDisabled?: SwitchProps['isDisabled'];
+  isReadOnly?: SwitchProps['isReadOnly'] | 'toggle';
   isLoading?: boolean;
   helperText?: ReactNode;
   name?: string;
@@ -75,8 +76,8 @@ const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
     defaultChecked,
     id,
     isChecked,
-    isDisabled,
-    isReadOnly,
+    isDisabled: isDisabled || isReadOnly === 'toggle',
+    isReadOnly: isReadOnly === true,
     isLoading,
     name,
     onBlur,
@@ -102,7 +103,7 @@ const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
   const switchComponent = () => {
     if (tooltip)
       return (
-        <Tooltip {...tooltip}>
+        <Tooltip {...tooltip} shouldWrapChildren>
           <ToggleComponent {...switchProps} />
         </Tooltip>
       );

package/src/Patterns/SettingsCard/SettingsCard.tsx

@@ -41,7 +41,12 @@ export const SettingsCardOnOffValue = (props: Pick<ToggleProps, 'isChecked' | 'v
   );
 };
 
-export const SettingsCardToggle = (props: Omit<ToggleProps, 'variant'> & { label: ReactNode }) => {
+interface SettingsCardToggleProps extends Omit<ToggleProps, 'variant' | 'isReadOnly'> {
+  label: ReactNode;
+  isReadOnly?: boolean | 'toggle';
+}
+
+export const SettingsCardToggle = (props: SettingsCardToggleProps) => {
   const { data } = useSettingsCardStyle();
   return (
     <Box __css={data}>