@bitrise/bitkit 13.64.0 → 13.64.3-alpha.0

package/package.json

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

package/src/Components/Badge/Badge.theme.ts

@@ -1,12 +1,101 @@
+import { SystemStyleObject } from '@chakra-ui/styled-system';
+import { BadgeColorScheme, BadgeProps } from './Badge';
+
+const baseStyle: SystemStyleObject = {
+  borderRadius: '4',
+  display: 'inline-flex',
+  gap: '4',
+  padding: '4',
+  textStyle: 'comp/badge/sm',
+};
+
+type ColorsType = Record<'bold' | 'subtle', Record<BadgeColorScheme, Record<'color' | 'backgroundColor', string>>>;
+
+const colors: ColorsType = {
+  subtle: {
+    progress: {
+      backgroundColor: 'sys/interactive/subtle',
+      color: 'sys/interactive/strong',
+    },
+    neutral: {
+      backgroundColor: 'sys/neutral/subtle',
+      color: 'sys/neutral/strong',
+    },
+    info: {
+      backgroundColor: 'sys/info/subtle',
+      color: 'sys/info/strong',
+    },
+    positive: {
+      backgroundColor: 'sys/success/subtle',
+      color: 'sys/success/strong',
+    },
+    negative: {
+      backgroundColor: 'sys/critical/subtle',
+      color: 'sys/critical/strong',
+    },
+    warning: {
+      backgroundColor: 'sys/warning/subtle',
+      color: 'sys/warning/strong',
+    },
+    orange: {
+      backgroundColor: 'sys/orange/subtle',
+      color: 'sys/orange/strong',
+    },
+    turquoise: {
+      backgroundColor: 'sys/turquoise/subtle',
+      color: 'sys/turquoise/strong',
+    },
+  },
+  bold: {
+    progress: {
+      backgroundColor: 'sys/interactive/bold',
+      color: 'text/on-color',
+    },
+    neutral: {
+      backgroundColor: 'sys/neutral/bold',
+      color: 'text/on-color',
+    },
+    info: {
+      backgroundColor: 'sys/info/bold',
+      color: 'text/on-color',
+    },
+    positive: {
+      backgroundColor: 'sys/success/bold',
+      color: 'text/on-color',
+    },
+    negative: {
+      backgroundColor: 'sys/critical/bold',
+      color: 'text/on-color',
+    },
+    warning: {
+      backgroundColor: 'sys/warning/muted',
+      color: 'text/primary',
+    },
+    orange: {
+      backgroundColor: 'sys/orange/bold',
+      color: 'text/on-color',
+    },
+    turquoise: {
+      backgroundColor: 'sys/turquoise/bold',
+      color: 'text/on-color',
+    },
+  },
+};
+
+const getVariant = (props: BadgeProps) => {
+  const { colorScheme, variant } = props;
+  return colors[variant || 'subtle'][colorScheme || 'neutral'];
+};
+
 const BadgeTheme = {
-  baseStyle: {
-    borderRadius: '4',
-    display: 'inline-block',
-    paddingX: '8',
-    paddingY: '4',
-    textStyle: 'comp/badge/sm',
-    color: 'text/on-color',
-    backgroundColor: 'sys/primary/base',
+  baseStyle,
+  variants: {
+    bold: getVariant,
+    subtle: getVariant,
+  },
+  defaultProps: {
+    variant: 'subtle',
+    colorScheme: 'neutral',
   },
 };
 

package/src/Components/Badge/Badge.tsx

@@ -1,10 +1,38 @@
 import { Badge as ChakraBadge, BadgeProps as ChakraBadgeProps, forwardRef } from '@chakra-ui/react';
+import Icon, { TypeIconName } from '../Icon/Icon';
+import Text from '../Text/Text';
 
-export type BadgeProps = ChakraBadgeProps;
+export type BadgeColorScheme =
+  | 'neutral'
+  | 'info'
+  | 'positive'
+  | 'negative'
+  | 'warning'
+  | 'progress'
+  | 'orange'
+  | 'turquoise';
+export interface BadgeProps extends ChakraBadgeProps {
+  children?: string | number;
+  colorScheme?: BadgeColorScheme;
+  iconName?: TypeIconName;
+  variant?: 'bold' | 'subtle';
+}
 
 /**
  * Badges are used to highlight an item's status for quick recognition.
  */
-const Badge = forwardRef<BadgeProps, 'span'>((props, ref) => <ChakraBadge {...props} ref={ref} />);
+const Badge = forwardRef<BadgeProps, 'span'>((props, ref) => {
+  const { children, iconName, ...rest } = props;
+  return (
+    <ChakraBadge {...rest} ref={ref} paddingInlineStart={iconName ? '4' : '8'} paddingInlineEnd={children ? '8' : '4'}>
+      {!!iconName && <Icon size="16" name={iconName} />}
+      {!!children && (
+        <Text hasEllipsis as="span">
+          {children}
+        </Text>
+      )}
+    </ChakraBadge>
+  );
+});
 
 export default Badge;

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

@@ -45,10 +45,7 @@ const FilterTheme = defineMultiStyleConfig({
       padding: '16',
     },
     formBadge: {
-      backgroundColor: 'neutral.93',
-      color: 'neutral.40',
       fontVariantNumeric: 'tabular-nums',
-      fontWeight: 'bold',
     },
     formButtonGroup: {
       display: 'flex',

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

@@ -117,7 +117,11 @@ const FilterForm = (props: FilterFormProps) => {
         <Text as="h5" sx={filterStyle.formTitle}>
           {categoryName || category}
         </Text>
-        {isMultiple && <Badge sx={filterStyle.formBadge}>{selected[0] === '' ? '0' : selected.length}</Badge>}
+        {isMultiple && (
+          <Badge variant="subtle" colorScheme="neutral" sx={filterStyle.formBadge}>
+            {selected[0] === '' ? '0' : selected.length}
+          </Badge>
+        )}
       </Box>
       {(withSearch || isAsync) && (
         <SearchInput