@bitrise/bitkit 13.104.1-alpha.2 → 13.104.1-alpha.3

package/package.json

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

package/src/Components/List/List.theme.ts

@@ -45,15 +45,8 @@ const baseStyleContainer = defineStyle({
   marginInlineStart: '16',
 });
 
-const baseStyleIcon = defineStyle({
-  marginEnd: rem(6),
-  display: 'inline',
-  verticalAlign: `-${rem(2)}`,
-});
-
 const baseStyle = definePartsStyle({
   container: baseStyleContainer,
-  icon: baseStyleIcon,
 });
 
 const variantOrdered = defineStyle((props) => {

package/src/Components/List/ListItem.tsx

@@ -1,26 +1,33 @@
-import {
-  forwardRef,
-  ListItem as ChakraListItem,
-  ListItemProps as ChakraListItemProps,
-  ListIcon,
-} from '@chakra-ui/react';
+import { forwardRef, ListItem as ChakraListItem, ListItemProps as ChakraListItemProps } from '@chakra-ui/react';
 import { BoxProps } from '../Box/Box';
-import { TypeIconName } from '../Icon/Icon';
-import * as Icons from '../Icons/24x24';
+import Icon, { IconProps, TypeIconName } from '../Icon/Icon';
 
 export interface ListItemProps extends ChakraListItemProps {
   iconColor?: BoxProps['color'];
   iconName?: TypeIconName;
+  iconSize?: IconProps['size'];
 }
 
 /**
  * ListItem is the valid children of List. It renders a <li> element by default.
  */
 const ListItem = forwardRef<ListItemProps, 'li'>((props, ref) => {
-  const { children, iconColor, iconName, ...rest } = props;
+  const { children, iconColor, iconName, iconSize, ...rest } = props;
+  let iconVerticalAlign = 'middle';
+  if (iconSize === '16') {
+    iconVerticalAlign = '-3px';
+  }
+  if (iconSize === '24') {
+    iconVerticalAlign = '-6px';
+  }
+  if (iconSize === '32') {
+    iconVerticalAlign = '-11px';
+  }
   return (
     <ChakraListItem {...rest} ref={ref}>
-      {!!iconName && <ListIcon as={Icons[iconName]} color={iconColor} />}
+      {!!iconName && (
+        <Icon name={iconName} color={iconColor} marginEnd="6" size={iconSize} verticalAlign={iconVerticalAlign} />
+      )}
       {children}
     </ChakraListItem>
   );