@bitrise/bitkit 13.275.0 → 13.277.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.275.0",
+  "version": "13.277.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/Table/CheckableRow.tsx

@@ -8,6 +8,7 @@ import Tr, { RowProps } from './Tr';
 export interface CheckableRowProps extends RowProps {
   id: string;
   isDisabled?: boolean;
+  isReversed?: boolean;
   label: ReactNode;
   name: string;
   tooltipProps?: Omit<TooltipProps, 'children' | 'shouldWrapChildren'>;
@@ -15,7 +16,7 @@ export interface CheckableRowProps extends RowProps {
 }
 
 const CheckableRow = (props: CheckableRowProps) => {
-  const { children, id, isDisabled, label, name, tooltipProps, value, ...rest } = props;
+  const { children, id, isDisabled, isReversed, label, name, tooltipProps, value, ...rest } = props;
 
   return (
     <Tooltip isDisabled={!tooltipProps} placement="right" {...tooltipProps}>
@@ -35,15 +36,22 @@ const CheckableRow = (props: CheckableRowProps) => {
         transform="scale(1)"
         {...rest}
       >
-        <Td>
-          <Checkbox id={id} isDisabled={isDisabled} name={name} value={value} zIndex="1" />
-        </Td>
+        {!isReversed && (
+          <Td>
+            <Checkbox id={id} isDisabled={isDisabled} name={name} value={value} zIndex="1" />
+          </Td>
+        )}
         <Td>
           <LinkOverlay as="label" cursor={isDisabled ? 'not-allowed' : 'pointer'} htmlFor={id}>
             {label}
           </LinkOverlay>
         </Td>
         {children}
+        {!!isReversed && (
+          <Td textAlign="right">
+            <Checkbox id={id} isDisabled={isDisabled} name={name} value={value} zIndex="1" />
+          </Td>
+        )}
       </LinkBox>
     </Tooltip>
   );