@bitrise/bitkit 13.103.0 → 13.104.1-alpha.0

package/package.json

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

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

@@ -1,20 +1,54 @@
-import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/styled-system';
 
-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: '-2px',
+});
 
-    return {};
+const baseStyle = definePartsStyle({
+  container: baseStyleContainer,
+  icon: baseStyleIcon,
+});
+
+const ListTheme = defineMultiStyleConfig({
+  baseStyle,
+  variants: {
+    ordered: {
+      container: {
+        counterReset: 'count',
+        marginInlineStart: '32',
+      },
+      item: {
+        position: 'relative',
+        counterIncrement: 'count',
+        _before: {
+          content: 'counter(count)',
+          position: 'absolute',
+          left: '-32px',
+          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,33 @@
-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 = 'unstyled', ...rest } = props;
+
+  const isOrdered = variant === 'simple-ordered';
+  let styleType: ListProps['styleType'] = 'none';
+  if (variant === 'unordered') {
+    styleType = 'initial';
+  }
+  if (isOrdered) {
+    styleType = 'decimal';
+  }
+  return (
+    <ChakraList
+      as={isOrdered ? '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}>

package/src/Components/Sidebar/Sidebar.tsx

@@ -34,7 +34,7 @@ const SidebarDivider = () => {
 const SidebarGroupHeader = ({ label }: { label: string }) => {
   return (
     <Box alignItems="center" display="flex" gap="16" marginBottom="12" marginTop="24" mx="32">
-      <Text fontWeight="bold" size="1" textColor="neutral.60">
+      <Text as="h6" textStyle="heading/h6" textColor="neutral.60">
         {label}
       </Text>
       <Divider flexGrow="1" w="auto" />

package/src/Components/Table/TablePagination.tsx

@@ -40,10 +40,11 @@ const TablePagination = ({
         <Td colSpan={colSpan}>
           <Box alignItems="center" display="flex" gap="1rem">
             <Box alignItems="center" display="flex" gap="0.5rem">
-              <Text>Items per page:</Text>
+              <Text textStyle="body/md/regular">Items per page:</Text>
               <Dropdown
                 onChange={({ target }) => setPerPage(Number(target.value))}
                 search={false}
+                size="md"
                 value={perPage.toString()}
                 width="auto"
               >
@@ -55,7 +56,7 @@ const TablePagination = ({
               </Dropdown>
             </Box>
             <Divider color="pal.neutral.90" height="3rem" orientation="vertical" />
-            <Text as="span" marginRight="auto">
+            <Text as="span" marginRight="auto" textStyle="body/md/regular">
               {itemsStartIndex}-{itemsEndIndex} of {totalCount} items
             </Text>
             <Divider color="pal.neutral.90" height="3rem" orientation="vertical" />
@@ -63,6 +64,7 @@ const TablePagination = ({
               <Dropdown
                 onChange={({ target }) => setPage(Number(target.value))}
                 search={false}
+                size="md"
                 value={page.toString()}
                 width="auto"
               >
@@ -76,7 +78,9 @@ const TablePagination = ({
                   );
                 })}
               </Dropdown>
-              <Text as="span">of {pageCount} pages</Text>
+              <Text as="span" textStyle="body/md/regular">
+                of {pageCount} pages
+              </Text>
             </Box>
             <ButtonGroup>
               <IconButton
@@ -84,6 +88,7 @@ const TablePagination = ({
                 iconName="ChevronLeft"
                 isDisabled={page === 1}
                 onClick={() => setPage(page - 1)}
+                size="md"
                 variant="secondary"
               />
               <IconButton
@@ -91,6 +96,7 @@ const TablePagination = ({
                 iconName="ChevronRight"
                 isDisabled={page === pageCount}
                 onClick={() => setPage(page + 1)}
+                size="md"
                 variant="secondary"
               />
             </ButtonGroup>