@bitrise/bitkit 13.276.0 → 13.278.0

package/package.json

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

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

@@ -8,6 +8,7 @@ export type FilterOptions = string[];
 export type FilterValue = string[];
 export type FilterOptionsMap = Record<string, string>;
 export type FilterIconsMap = Record<string, TypeIconName>;
+export type FilterIconColorsMap = Record<string, string>;
 
 export type FilterSearchCallback = (
   category: string,
@@ -20,6 +21,7 @@ export type FilterCategoryProps = {
   unfilteredLabel?: string;
   dependsOn?: Record<string, string>;
   iconsMap?: FilterIconsMap;
+  iconColorsMap?: FilterIconColorsMap;
   hasNotFilteredOption?: boolean;
   preserveOptionOrder?: boolean;
   isInitialLoading?: boolean;

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

@@ -1,7 +1,7 @@
 import { rem } from '../../../utils/utils';
 
 const FilterSwitch = {
-  baseStyle: ({ isChecked }: { isChecked: boolean }) => {
+  baseStyle: ({ isChecked, iconColor }: { isChecked: boolean; iconColor?: string }) => {
     return {
       container: {
         background: 'neutral.95',
@@ -10,7 +10,7 @@ const FilterSwitch = {
         display: 'flex',
       },
       icon: {
-        color: isChecked ? 'icon/secondary' : 'icon/tertiary',
+        color: isChecked ? iconColor || 'icon/secondary' : 'icon/tertiary',
       },
       item: {
         borderRadius: '4',
@@ -23,7 +23,7 @@ const FilterSwitch = {
           color: 'text/primary',
 
           '> svg': {
-            color: 'icon/secondary',
+            color: isChecked && iconColor ? iconColor : 'icon/secondary',
           },
         },
         _active: {

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

@@ -20,6 +20,7 @@ type RadioInputProps = ChakraRadioProps['inputProps'] & {
 
 export interface FilterSwitchProps extends Omit<ChakraRadioProps, 'inputProps'> {
   iconName?: TypeIconName;
+  iconColor?: string;
   inputProps?: RadioInputProps;
 }
 
@@ -32,11 +33,11 @@ export const [FilterSwitchContextProvider, useFilterSwitchContext] = createConte
 
 const FilterSwitch = forwardRef<FilterSwitchProps, 'input'>((props, ref) => {
   const group = useRadioGroupContext();
-  const { value: valueProp } = props;
+  const { value: valueProp, iconColor } = props;
 
   const isChecked = group.value === valueProp;
 
-  const styles = useMultiStyleConfig('FilterSwitch', { isChecked });
+  const styles = useMultiStyleConfig('FilterSwitch', { isChecked, iconColor });
 
   const ownProps = omitThemingProps(props);
 

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

@@ -12,7 +12,7 @@ type FilterSwitchAdapterProps = {
 const FilterSwitchAdapter = (props: FilterSwitchAdapterProps) => {
   const { category } = props;
   const { data, onFilterChange, state } = useFilterContext();
-  const { allOptionLabel, iconsMap, options, optionsMap } = data[category] as FilterCategoryProps & {
+  const { allOptionLabel, iconsMap, iconColorsMap, options, optionsMap } = data[category] as FilterCategoryProps & {
     allOptionLabel?: string;
   };
 
@@ -34,7 +34,12 @@ const FilterSwitchAdapter = (props: FilterSwitchAdapterProps) => {
         {allOptionLabel || 'All items'}
       </FilterSwitch>
       {options.map((opt) => (
-        <FilterSwitch key={opt} value={opt} iconName={iconsMap && iconsMap[opt]}>
+        <FilterSwitch
+          key={opt}
+          value={opt}
+          iconName={iconsMap && iconsMap[opt]}
+          iconColor={iconColorsMap && iconColorsMap[opt]}
+        >
           {getOptionLabel(opt, optionsMap)}
         </FilterSwitch>
       ))}

package/src/Components/Sidebar/Sidebar.tsx

@@ -31,13 +31,14 @@ const SidebarDivider = () => {
   return <Divider {...margins} w="auto" />;
 };
 
-const SidebarGroupHeader = ({ label }: { label: string }) => {
+const SidebarGroupHeader = ({ label, badge }: { label: string; badge: ReactNode }) => {
   return (
     <Box alignItems="center" display="flex" gap="16" marginBottom="12" marginTop="24" mx="32">
       <Text as="h6" textStyle="heading/h6" textColor="neutral.60">
         {label}
       </Text>
       <Divider flexGrow="1" w="auto" />
+      {badge}
     </Box>
   );
 };