@bitrise/bitkit 12.52.3 → 12.52.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.52.3",
+  "version": "12.52.5",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Table/Table.theme.ts

@@ -78,6 +78,9 @@ const Tabletheme: SystemStyleObject = {
       paddingX: '16',
       paddingY: '8',
       textAlign: 'left',
+      _groupHover: {
+        backgroundColor: 'neutral.95',
+      },
     },
     expandTd: {
       borderBottomColor: 'transparent',

package/src/Components/Table/Tr.tsx

@@ -24,10 +24,10 @@ type ExpandableProps = ChakraTableRowProps & {
   onExpandedChanged?(isExpanded: boolean): void;
 };
 
-export type TableRowProps = RowProps & (NonExpandableProps | ExpandableProps);
+export type TableRowProps = RowProps & (NonExpandableProps | ExpandableProps) & { visualHover?: boolean };
 
 const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
-  const { children, defaultIsExpanded, onExpandedChanged, expandableContent, onClick, ...rest } = props;
+  const { children, defaultIsExpanded, onExpandedChanged, expandableContent, onClick, visualHover, ...rest } = props;
 
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: defaultIsExpanded });
   const css = useTableStyles();
@@ -46,7 +46,7 @@ const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
     const colSpan = Children.count(children) + 1;
     return (
       <>
-        <ChakraTr {...properties} ref={ref}>
+        <ChakraTr role={visualHover ? 'group' : undefined} {...properties} ref={ref}>
           <Td sx={css.expandTd}>
             <TableIconButton
               iconName="ChevronDown"
@@ -80,7 +80,7 @@ const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
     );
   }
   return (
-    <ChakraTr {...properties} ref={ref}>
+    <ChakraTr role={visualHover ? 'group' : undefined} {...properties} ref={ref}>
       {children}
     </ChakraTr>
   );

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

@@ -1,5 +1,6 @@
 import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
 import { rem } from '../../utils/utils';
+import { TagProps } from './Tag';
 
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers([
   'container',
@@ -10,35 +11,46 @@ const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpe
 ]);
 
 const sizes = {
-  sm: definePartsStyle({
-    container: {
-      paddingX: rem(7),
-      paddingY: rem(1),
-    },
-    label: {
-      fontSize: '1',
-      lineHeight: rem(16),
-    },
-    closeButton: {
-      height: '20',
-      width: '20',
-      marginRight: rem(-6),
-    },
+  sm: definePartsStyle((props) => {
+    const { onClose, iconName, withIcon } = props as TagProps;
+    const leftIcon = iconName || withIcon;
+
+    return {
+      container: {
+        paddingLeft: leftIcon ? rem(4) : rem(8),
+        paddingRight: onClose ? rem(2) : rem(8),
+        paddingY: onClose ? rem(2) : rem(4),
+      },
+      label: {
+        fontSize: rem(12),
+        lineHeight: rem(16),
+      },
+      closeButton: {
+        height: '20',
+        width: '20',
+      },
+    };
   }),
-  md: definePartsStyle({
-    container: {
-      paddingX: rem(11),
-      paddingY: rem(3),
-    },
-    label: {
-      fontSize: '2',
-      lineHeight: rem(24),
-    },
-    closeButton: {
-      height: '24',
-      width: '24',
-      marginRight: rem(-7),
-    },
+  md: definePartsStyle((props) => {
+    const { onClose, iconName, withIcon } = props as TagProps;
+    const leftIcon = iconName || withIcon;
+
+    return {
+      container: {
+        paddingLeft: leftIcon ? rem(6) : rem(12),
+        paddingRight: onClose ? rem(4) : rem(12),
+        paddingY: leftIcon || onClose ? rem(4) : rem(6),
+      },
+      label: {
+        fontSize: '2',
+        lineHeight: rem(20),
+      },
+      closeButton: {
+        height: '24',
+        width: '24',
+        marginLeft: '8',
+      },
+    };
   }),
 };
 
@@ -48,9 +60,7 @@ const baseStyle = definePartsStyle(({ colorScheme }) => {
     backgroundColor: `${colorScheme}.93`,
     borderColor: `${colorScheme}.80`,
   };
-  if (colorScheme === 'neutral') {
-    scheme.color = 'purple.10';
-  }
+
   return {
     container: {
       border: '1px solid',

package/src/Components/Tag/Tag.tsx

@@ -21,7 +21,7 @@ export interface TagProps extends Omit<ChakraTagProps, 'colorScheme' | 'size' |
 const Tag = (props: TagProps) => {
   const { children, closeButtonTooltip, iconColor, iconName, isDisabled, isLoading, onClose, withIcon, ...tagProps } =
     props;
-  const style = useMultiStyleConfig('Tag', tagProps);
+  const style = useMultiStyleConfig('Tag', props);
 
   return (
     <ChakraTag
@@ -29,6 +29,7 @@ const Tag = (props: TagProps) => {
       data-disabled={isDisabled || undefined}
       aria-busy={isLoading}
       data-loading={isLoading || undefined}
+      sx={style.container}
       {...tagProps}
     >
       {(withIcon || !!iconName) && (