@bitrise/bitkit 13.104.1-alpha.0 → 13.104.1-alpha.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.104.1-alpha.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,4 +1,5 @@
 import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/styled-system';
+import { rem } from '../../utils/utils';
 
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(['container', 'icon', 'item']);
 
@@ -9,7 +10,7 @@ const baseStyleContainer = defineStyle({
 const baseStyleIcon = defineStyle({
   marginEnd: '6',
   display: 'inline',
-  verticalAlign: '-2px',
+  verticalAlign: `-${rem(2)}`,
 });
 
 const baseStyle = definePartsStyle({
@@ -23,7 +24,7 @@ const ListTheme = defineMultiStyleConfig({
     ordered: {
       container: {
         counterReset: 'count',
-        marginInlineStart: '32',
+        marginInlineStart: rem(28),
       },
       item: {
         position: 'relative',
@@ -31,7 +32,7 @@ const ListTheme = defineMultiStyleConfig({
         _before: {
           content: 'counter(count)',
           position: 'absolute',
-          left: '-32px',
+          left: `-${rem(28)}`,
           top: '2',
           paddingY: '2',
           color: 'sys/neutral/strong',

package/src/Components/List/List.tsx

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