@bitrise/bitkit 12.52.4 → 12.52.5

package/package.json

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

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) && (