@bitrise/bitkit 12.111.0 → 12.112.1-alpha.0

package/package.json

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

package/src/Components/Filter/Filter.tsx

@@ -22,42 +22,32 @@ import FilterDate from './FilterDate/FilterDate';
 import FilterSwitchAdapter from './FilterSwitchAdapter/FilterSwitchAdapter';
 
 export interface FilterProps extends Omit<BoxProps, 'onChange'> {
+  data: FilterData;
   filtersDependOn?: string[];
-  initialData: FilterData;
-  initialState: FilterState;
   isLoading?: boolean;
   onChange: (state: FilterState) => void;
   showAdd?: boolean;
   showSearch?: boolean;
+  state: FilterState;
 }
 
 const Filter = (props: FilterProps) => {
-  const {
-    filtersDependOn,
-    initialData,
-    initialState,
-    isLoading,
-    onChange,
-    showAdd = true,
-    showSearch,
-    ...rest
-  } = props;
+  const { data, filtersDependOn, isLoading, onChange, showAdd = true, showSearch, state, ...rest } = props;
 
   const isInited = useRef<boolean>(false);
 
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
-  const state: FilterState = {};
-  Object.entries(initialState).forEach(([category, values]) => {
+  const cleanState: FilterState = {};
+  Object.entries(state).forEach(([category, values]) => {
     if (values?.length) {
       const cleanValues = values.filter((v) => v !== null && v !== '' && v !== undefined);
       if (cleanValues.length) {
-        state[category] = cleanValues;
+        cleanState[category] = cleanValues;
       }
     }
   });
 
-  const [data] = useState<FilterData>(initialData);
   const [isPopoverOpen, setPopoverOpen] = useState<boolean>(false);
 
   const deleteFromState = (category: string, stateProp: FilterState): FilterState => {
@@ -77,9 +67,15 @@ const Filter = (props: FilterProps) => {
     if (isInited.current === false) {
       return;
     }
-    let newState = { ...state };
+    let newState = { ...cleanState };
     if (value && value.length > 0) {
       newState[category] = value;
+      const dependents = getDependents(data, category, filtersDependOn);
+      if (dependents.length) {
+        dependents.forEach((key) => {
+          newState = deleteFromState(key, newState);
+        });
+      }
     } else if (newState[category]) {
       newState = deleteFromState(category, newState);
     }
@@ -87,7 +83,7 @@ const Filter = (props: FilterProps) => {
   };
 
   const onFilterClear = (category: string) => {
-    onChange(deleteFromState(category, state));
+    onChange(deleteFromState(category, cleanState));
   };
 
   const onClearFilters = () => {
@@ -106,21 +102,21 @@ const Filter = (props: FilterProps) => {
     filters[value.type || 'tag'][category] = value;
   });
 
-  const stateCategories = Object.keys(state).filter((c) => !['date_range', 'search'].includes(c));
+  const stateCategories = Object.keys(cleanState).filter((c) => !['date_range', 'search'].includes(c));
 
-  const showClearFilters = stateCategories.length > 0 || (state.search && state.search.length > 0);
+  const showClearFilters = stateCategories.length > 0 || (cleanState.search && cleanState.search.length > 0);
 
   const contextValue: FilterContextType = useMemo(
     () => ({
-      data: initialData,
+      data,
       filtersDependOn,
       isLoading,
       onFilterChange,
       onFilterClear,
       setPopoverOpen,
-      state,
+      state: cleanState,
     }),
-    [filtersDependOn, isLoading, initialData, onFilterChange, onFilterClear, setPopoverOpen, state],
+    [data, filtersDependOn, isLoading, onFilterChange, onFilterClear, setPopoverOpen, cleanState],
   );
 
   useEffect(() => {
@@ -150,7 +146,7 @@ const Filter = (props: FilterProps) => {
             <FilterItem key={category} category={category} />
           ))}
           {Object.keys(filters.tag).map((category) => {
-            if (!state[category]) {
+            if (!cleanState[category]) {
               return;
             }
             return <FilterItem key={category} category={category} />;
@@ -175,7 +171,9 @@ const Filter = (props: FilterProps) => {
             {showClearFilters && showSearch && (
               <Divider flexShrink="0" orientation="vertical" size="1" variant="solid" />
             )}
-            {showSearch && <FilterSearch onChange={onFilterChange} value={(state.Search && state.Search[0]) || ''} />}
+            {showSearch && (
+              <FilterSearch onChange={onFilterChange} value={(cleanState.Search && cleanState.Search[0]) || ''} />
+            )}
           </Box>
         )}
       </Box>

package/src/Components/Filter/FilterForm/FilterForm.tsx

@@ -152,7 +152,7 @@ const FilterForm = (props: FilterFormProps) => {
                 return (
                   <Radio key={opt} value={opt}>
                     {hasIcon ? (
-                      <Box alignItems="center" as="span" display="flex" gap="4">
+                      <Box as="span" display="flex" gap="4">
                         <Icon name={iconsMap[opt]} />
                         {label}
                       </Box>

package/src/Foundations/docComponents/TokenTable.tsx

@@ -28,7 +28,7 @@ const Row = ({ groupName, token, tokenPrefix, type, value }: RowType) => {
 
   const dotRef = useRef<HTMLDivElement>(null);
 
-  const tokenKey = type === 'color' ? [tokenPrefix, groupName, token].filter(Boolean).join('.') : token;
+  const tokenKey = type === 'color' ? [tokenPrefix, groupName, token].filter(Boolean).join('/') : token;
 
   useEffect(() => {
     if (dotRef.current && hexa.includes('var(')) {

package/src/tokens/tokensToTheme.json

@@ -584,7 +584,255 @@
         "overlay-light": "rgba(sys.bg.contrast, 0.16)",
         "skeleton": "sys.bg.subtle",
         "skeleton-strong": "sys.fg.minimal"
-      }
+      },
+      "brand/primary": "pal.purple.30",
+      "separator/primary": "pal.neutral.90",
+      "sys/fg/base": "pal.neutral.10",
+      "sys/fg/primary": "pal.purple.10",
+      "sys/fg/secondary": "pal.neutral.40",
+      "sys/fg/tertiary": "pal.neutral.60",
+      "sys/fg/subtle": "pal.neutral.70",
+      "sys/fg/minimal": "pal.neutral.80",
+      "sys/fg/positive": "pal.green.50",
+      "sys/fg/negative": "pal.red.50",
+      "sys/fg/on-color": "pal.neutral.100",
+      "sys/fg/on-contrast": "pal.neutral.95",
+      "sys/fg/on-disabled": "pal.neutral.70",
+      "sys/fg/disabled": "pal.neutral.80",
+      "sys/bg/surface": "pal.neutral.100",
+      "sys/bg/contrast": "pal.neutral.10",
+      "sys/bg/moderate": "pal.neutral.90",
+      "sys/bg/subtle": "pal.neutral.93",
+      "sys/bg/minimal": "pal.neutral.95",
+      "sys/bg/disabled": "pal.neutral.95",
+      "sys/bg/transparent": "pal.neutral.100 0%",
+      "sys/border/minimal": "pal.neutral.93",
+      "sys/border/subtle": "pal.neutral.90",
+      "sys/border/strong": "pal.neutral.80",
+      "sys/border/emphasized": "pal.neutral.70",
+      "sys/border/critical": "pal.red.50",
+      "sys/border/inverse": "pal.neutral.100",
+      "sys/border/on-contrast": "pal.neutral.95",
+      "sys/border/disabled": "pal.neutral.90",
+      "sys/primary/base": "pal.purple.40",
+      "sys/primary/emphasized": "pal.purple.30",
+      "sys/primary/contrast": "pal.purple.10",
+      "sys/primary/muted": "pal.purple.80",
+      "sys/primary/subtle": "pal.purple.93",
+      "sys/primary/disabled": "pal.neutral.90",
+      "sys/interactive/base": "pal.purple.50",
+      "sys/interactive/strong": "pal.purple.40",
+      "sys/interactive/bold": "pal.purple.60",
+      "sys/interactive/highlight": "pal.purple.70",
+      "sys/interactive/muted": "pal.purple.80",
+      "sys/interactive/moderate": "pal.purple.90",
+      "sys/interactive/subtle": "pal.purple.93",
+      "sys/interactive/minimal": "pal.purple.95",
+      "sys/interactive/disabled": "pal.neutral.90",
+      "sys/info/base": "pal.blue.50",
+      "sys/info/strong": "pal.blue.40",
+      "sys/info/bold": "pal.blue.60",
+      "sys/info/muted": "pal.blue.80",
+      "sys/info/moderate": "pal.blue.90",
+      "sys/info/subtle": "pal.blue.93",
+      "sys/info/minimal": "pal.blue.95",
+      "sys/success/base": "pal.green.50",
+      "sys/success/strong": "pal.green.40",
+      "sys/success/bold": "pal.green.60",
+      "sys/success/muted": "pal.green.80",
+      "sys/success/moderate": "pal.green.90",
+      "sys/success/subtle": "pal.green.93",
+      "sys/success/minimal": "pal.green.95",
+      "sys/warning/base": "pal.yellow.50",
+      "sys/warning/strong": "pal.yellow.40",
+      "sys/warning/bold": "pal.yellow.60",
+      "sys/warning/muted": "pal.yellow.80",
+      "sys/warning/moderate": "pal.yellow.90",
+      "sys/warning/subtle": "pal.yellow.93",
+      "sys/warning/minimal": "pal.yellow.95",
+      "sys/critical/base": "pal.red.50",
+      "sys/critical/dark": "pal.red.20",
+      "sys/critical/strong": "pal.red.40",
+      "sys/critical/bold": "pal.red.60",
+      "sys/critical/muted": "pal.red.80",
+      "sys/critical/moderate": "pal.red.90",
+      "sys/critical/subtle": "pal.red.93",
+      "sys/critical/minimal": "pal.red.95",
+      "sys/neutral/base": "pal.neutral.50",
+      "sys/neutral/strong": "pal.neutral.40",
+      "sys/neutral/bold": "pal.neutral.60",
+      "sys/neutral/muted": "pal.neutral.80",
+      "sys/neutral/moderate": "pal.neutral.90",
+      "sys/neutral/subtle": "pal.neutral.93",
+      "sys/neutral/minimal": "pal.neutral.95",
+      "sys/orange/base": "pal.orange.50",
+      "sys/orange/strong": "pal.orange.40",
+      "sys/orange/bold": "pal.orange.60",
+      "sys/orange/muted": "pal.orange.80",
+      "sys/orange/moderate": "pal.orange.90",
+      "sys/orange/subtle": "pal.orange.93",
+      "sys/orange/minimal": "pal.orange.95",
+      "sys/turquoise/base": "pal.turquoise.50",
+      "sys/turquoise/strong": "pal.turquoise.40",
+      "sys/turquoise/bold": "pal.turquoise.60",
+      "sys/turquoise/muted": "pal.turquoise.80",
+      "sys/turquoise/moderate": "pal.turquoise.90",
+      "sys/turquoise/subtle": "pal.turquoise.93",
+      "sys/turquoise/minimal": "pal.turquoise.95",
+      "background/primary": "sys.bg.surface",
+      "background/secondary": "sys.bg.minimal",
+      "background/tertiary": "sys.bg.subtle",
+      "background/hover": "sys.bg.subtle",
+      "background/active": "sys.bg.moderate",
+      "background/selected": "sys.interactive.minimal",
+      "background/selected-hover": "sys.interactive.subtle",
+      "background/contrast": "sys.bg.contrast",
+      "background/disabled": "sys.bg.disabled",
+      "border/regular": "sys.border.subtle",
+      "border/minimal": "sys.border.minimal",
+      "border/strong": "sys.border.strong",
+      "border/hover": "sys.border.emphasized",
+      "border/focus": "sys.interactive.highlight",
+      "border/selected": "sys.interactive.base",
+      "border/error": "sys.border.critical",
+      "border/inverse": "sys.border.inverse",
+      "border/on-contrast": "sys.border.on-contrast",
+      "border/disabled": "sys.border.disabled",
+      "text/primary": "sys.fg.primary",
+      "text/secondary": "sys.fg.secondary",
+      "text/tertiary": "sys.fg.tertiary",
+      "text/body": "sys.fg.base",
+      "text/link": "sys.interactive.base",
+      "text/link-hover": "sys.interactive.strong",
+      "text/selected": "sys.interactive.base",
+      "text/positive": "sys.fg.positive",
+      "text/negative": "sys.fg.negative",
+      "text/on-color": "sys.fg.on-color",
+      "text/on-contrast": "sys.fg.on-contrast",
+      "text/on-disabled": "sys.fg.on-disabled",
+      "text/disabled": "sys.fg.disabled",
+      "icon/primary": "sys.fg.primary",
+      "icon/secondary": "sys.fg.secondary",
+      "icon/tertiary": "sys.fg.tertiary",
+      "icon/interactive": "sys.interactive.base",
+      "icon/interactive-hover": "sys.interactive.strong",
+      "icon/positive": "sys.fg.positive",
+      "icon/negative": "sys.fg.negative",
+      "icon/on-color": "sys.fg.on-color",
+      "icon/on-contrast": "sys.fg.on-contrast",
+      "icon/on-disabled": "sys.fg.on-disabled",
+      "icon/disabled": "sys.fg.disabled",
+      "button/primary/bg": "sys.primary.base",
+      "button/primary/bg-hover": "sys.primary.emphasized",
+      "button/primary/bg-active": "sys.fg.primary",
+      "button/primary/bg-disabled": "sys.primary.disabled",
+      "button/primary/fg": "sys.fg.on-color",
+      "button/primary/fg-hover": "sys.fg.on-color",
+      "button/primary/fg-active": "sys.fg.on-color",
+      "button/primary/fg-disabled": "sys.fg.on-disabled",
+      "button/secondary/bg": "sys.bg.surface",
+      "button/secondary/bg-hover": "sys.bg.subtle",
+      "button/secondary/bg-active": "sys.bg.moderate",
+      "button/secondary/bg-disabled": "sys.bg.minimal",
+      "button/secondary/fg": "sys.fg.primary",
+      "button/secondary/fg-hover": "sys.fg.primary",
+      "button/secondary/fg-active": "sys.fg.primary",
+      "button/secondary/fg-disabled": "sys.fg.disabled",
+      "button/secondary/border": "sys.border.strong",
+      "button/secondary/border-hover": "sys.border.emphasized",
+      "button/secondary/border-active": "sys.border.emphasized",
+      "button/secondary/border-disabled": "sys.border.disabled",
+      "button/tertiary/bg": "sys.bg.transparent",
+      "button/tertiary/bg-hover": "sys.bg.subtle",
+      "button/tertiary/bg-active": "sys.bg.moderate",
+      "button/tertiary/bg-disabled": "sys.bg.transparent",
+      "button/tertiary/fg": "sys.interactive.base",
+      "button/tertiary/fg-hover": "sys.interactive.strong",
+      "button/tertiary/fg-active": "sys.fg.primary",
+      "button/tertiary/fg-disabled": "sys.fg.disabled",
+      "button/danger-primary/bg": "sys.critical.base",
+      "button/danger-primary/bg-hover": "sys.critical.strong",
+      "button/danger-primary/bg-active": "sys.critical.dark",
+      "button/danger-primary/bg-disabled": "sys.primary.disabled",
+      "button/danger-primary/fg": "sys.fg.on-color",
+      "button/danger-primary/fg-hover": "sys.fg.on-color",
+      "button/danger-primary/fg-active": "sys.fg.on-color",
+      "button/danger-primary/fg-disabled": "sys.fg.on-disabled",
+      "button/danger-secondary/bg": "sys.bg.surface",
+      "button/danger-secondary/bg-hover": "sys.critical.minimal",
+      "button/danger-secondary/bg-active": "sys.critical.moderate",
+      "button/danger-secondary/bg-disabled": "sys.bg.minimal",
+      "button/danger-secondary/fg": "sys.critical.base",
+      "button/danger-secondary/fg-hover": "sys.critical.base",
+      "button/danger-secondary/fg-active": "sys.critical.strong",
+      "button/danger-secondary/fg-disabled": "sys.fg.disabled",
+      "button/danger-secondary/border": "sys.critical.muted",
+      "button/danger-secondary/border-hover": "sys.critical.muted",
+      "button/danger-secondary/border-active": "sys.critical.base",
+      "button/danger-secondary/border-disabled": "sys.border.disabled",
+      "button/danger-tertiary/bg": "sys.bg.transparent",
+      "button/danger-tertiary/bg-hover": "sys.critical.minimal",
+      "button/danger-tertiary/bg-active": "sys.critical.moderate",
+      "button/danger-tertiary/bg-disabled": "sys.bg.transparent",
+      "button/danger-tertiary/fg": "sys.critical.base",
+      "button/danger-tertiary/fg-hover": "sys.critical.base",
+      "button/danger-tertiary/fg-active": "sys.critical.strong",
+      "button/danger-tertiary/fg-disabled": "sys.fg.disabled",
+      "input/text/label": "sys.fg.primary",
+      "input/text/inputValue": "sys.fg.base",
+      "input/text/placeholder": "sys.fg.subtle",
+      "input/text/helper": "sys.fg.secondary",
+      "input/text/error": "sys.fg.negative",
+      "input/checkbox/selection": "sys.interactive.base",
+      "input/checkbox/selection-disabled": "sys.interactive.disabled",
+      "input/toggle/frameOn": "sys.success.bold",
+      "input/toggle/frameOn-disabled": "rgba(sys.success.bold,0.5)",
+      "input/toggle/frameOff": "sys.neutral.bold",
+      "input/toggle/frameOff-disabled": "rgba(sys.neutral.bold,0.5)",
+      "input/toggle/slideOn": "sys.bg.surface",
+      "input/toggle/slideOn-disabled": "sys.bg.surface",
+      "input/toggle/slideOff": "sys.bg.surface",
+      "input/toggle/slideOff-disabled": "sys.bg.surface",
+      "status/info/bg": "sys.info.minimal",
+      "status/info/bg-hover": "sys.info.subtle",
+      "status/info/bg-active": "sys.info.moderate",
+      "status/info/border": "sys.info.muted",
+      "status/info/icon": "sys.info.strong",
+      "status/info/text": "sys.info.strong",
+      "status/success/bg": "sys.success.minimal",
+      "status/success/bg-hover": "sys.success.subtle",
+      "status/success/bg-active": "sys.success.moderate",
+      "status/success/border": "sys.success.muted",
+      "status/success/icon": "sys.success.strong",
+      "status/success/text": "sys.success.strong",
+      "status/warning/bg": "sys.warning.minimal",
+      "status/warning/bg-hover": "sys.warning.subtle",
+      "status/warning/bg-active": "sys.warning.moderate",
+      "status/warning/border": "sys.warning.muted",
+      "status/warning/icon": "sys.warning.strong",
+      "status/warning/text": "sys.warning.strong",
+      "status/critical/bg": "sys.critical.minimal",
+      "status/critical/bg-hover": "sys.critical.subtle",
+      "status/critical/bg-active": "sys.critical.moderate",
+      "status/critical/border": "sys.critical.muted",
+      "status/critical/icon": "sys.critical.strong",
+      "status/critical/text": "sys.critical.strong",
+      "status/progress/bg": "sys.interactive.minimal",
+      "status/progress/bg-hover": "sys.interactive.subtle",
+      "status/progress/bg-active": "sys.interactive.moderate",
+      "status/progress/border": "sys.interactive.muted",
+      "status/progress/icon": "sys.interactive.strong",
+      "status/progress/text": "sys.interactive.strong",
+      "status/neutral/bg": "sys.neutral.minimal",
+      "status/neutral/bg-hover": "sys.neutral.subtle",
+      "status/neutral/bg-active": "sys.neutral.moderate",
+      "status/neutral/border": "sys.neutral.muted",
+      "status/neutral/icon": "sys.neutral.strong",
+      "status/neutral/text": "sys.neutral.strong",
+      "utilities/overlay": "rgba(sys.bg.contrast, 0.8)",
+      "utilities/overlay-light": "rgba(sys.bg.contrast, 0.16)",
+      "utilities/skeleton": "sys.bg.subtle",
+      "utilities/skeleton-strong": "sys.fg.minimal"
     }
   },
   "sizes": {