@bitrise/bitkit 13.104.0 → 13.104.1-alpha.1

package/package.json

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

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

@@ -1,20 +1,55 @@
-import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/styled-system';
+import { rem } from '../../utils/utils';
 
-const ListTheme: ComponentStyleConfig = {
-  baseStyle: ({ as }) => {
-    if (as === 'ul') {
-      return {
-        item: {
-          '::marker': {
-            fontSize: '12px',
-          },
-        },
-      };
-    }
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(['container', 'icon', 'item']);
+
+const baseStyleContainer = defineStyle({
+  marginInlineStart: 16,
+});
+
+const baseStyleIcon = defineStyle({
+  marginEnd: '6',
+  display: 'inline',
+  verticalAlign: `-${rem(2)}`,
+});
 
-    return {};
+const baseStyle = definePartsStyle({
+  container: baseStyleContainer,
+  icon: baseStyleIcon,
+});
+
+const ListTheme = defineMultiStyleConfig({
+  baseStyle,
+  variants: {
+    ordered: {
+      container: {
+        counterReset: 'count',
+        marginInlineStart: rem(28),
+      },
+      item: {
+        position: 'relative',
+        counterIncrement: 'count',
+        _before: {
+          content: 'counter(count)',
+          position: 'absolute',
+          left: `-${rem(28)}`,
+          top: '2',
+          paddingY: '2',
+          color: 'sys/neutral/strong',
+          backgroundColor: 'sys/neutral/subtle',
+          textAlign: 'center',
+          textStyle: 'comp/badge/sm',
+          width: '20',
+          borderRadius: '50%',
+        },
+      },
+    },
+    unstyled: {
+      container: {
+        marginInlineStart: 0,
+      },
+    },
   },
-  parts: ['container', 'item'],
-};
+});
 
 export default ListTheme;

package/src/Components/List/List.tsx

@@ -1,16 +1,32 @@
-import { forwardRef, ListProps as ChakraListProps, OrderedList, UnorderedList } from '@chakra-ui/react';
+import { forwardRef, List as ChakraList, ListProps as ChakraListProps } from '@chakra-ui/react';
 
 export interface ListProps extends ChakraListProps {
-  isOrdered?: boolean;
+  variant?: 'simple-ordered' | 'ordered' | 'unordered' | 'unstyled';
 }
 
 /**
  * List is used to display list items. It renders a <ul> or <ol> element by default.
  */
 const List = forwardRef<ListProps, 'ul'>((props, ref) => {
-  const { isOrdered, spacing = '8', ...rest } = props;
-  const Component = isOrdered ? OrderedList : UnorderedList;
-  return <Component spacing={spacing} {...rest} ref={ref} />;
+  const { spacing = '8', variant = 'unordered', ...rest } = props;
+
+  let styleType: ListProps['styleType'] = 'none';
+  if (variant === 'unordered') {
+    styleType = 'initial';
+  }
+  if (variant === 'simple-ordered') {
+    styleType = 'decimal';
+  }
+  return (
+    <ChakraList
+      as={variant === 'ordered' || variant === 'simple-ordered' ? 'ol' : 'ul'}
+      spacing={spacing}
+      styleType={styleType}
+      variant={variant}
+      {...rest}
+      ref={ref}
+    />
+  );
 });
 
 export default List;

package/src/Components/List/ListItem.tsx

@@ -1,12 +1,29 @@
-import { forwardRef, ListItem as ChakraListItem, ListItemProps } from '@chakra-ui/react';
+import {
+  forwardRef,
+  ListItem as ChakraListItem,
+  ListItemProps as ChakraListItemProps,
+  ListIcon,
+} from '@chakra-ui/react';
+import { BoxProps } from '../Box/Box';
+import { TypeIconName } from '../Icon/Icon';
+import * as Icons from '../Icons/24x24';
+
+export interface ListItemProps extends ChakraListItemProps {
+  iconColor?: BoxProps['color'];
+  iconName?: TypeIconName;
+}
 
 /**
  * ListItem is the valid children of List. It renders a <li> element by default.
  */
 const ListItem = forwardRef<ListItemProps, 'li'>((props, ref) => {
-  return <ChakraListItem {...props} ref={ref} />;
+  const { children, iconColor, iconName, ...rest } = props;
+  return (
+    <ChakraListItem {...rest} ref={ref}>
+      {!!iconName && <ListIcon as={Icons[iconName]} color={iconColor} />}
+      {children}
+    </ChakraListItem>
+  );
 });
 
-export type { ListItemProps };
-
 export default ListItem;

package/src/Components/Note/NoteMarkdownContent.tsx

@@ -42,7 +42,7 @@ const defaultComponents = (size: 'sm' | 'md' | 'lg', gap: GapType = '16'): Compo
     h6: ({ node, ...props }) => <Text as="h6" textStyle="heading/h6" {...props} />,
     hr: () => <Divider borderColor="separator.primary" my={gap} size="2" />,
     li: ({ node, ...props }) => <ListItem {...props} />,
-    ol: ({ node, ...props }) => <List isOrdered {...props} />,
+    ol: ({ node, ...props }) => <List variant="simple-ordered" {...props} />,
     p: ({ node, ...props }) => <Text {...props} />,
     pre: ({ node, ...props }) => (
       <CodeSnippet variant="multi" size={codeSize}>