@bitrise/bitkit 9.37.0 → 9.38.1

package/package.json

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

package/src/Components/List/List.stories.tsx

@@ -0,0 +1,24 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import List from './List';
+import ListItem from './ListItem';
+
+export default {
+  title: 'Components/List',
+  component: List,
+} as ComponentMeta<typeof List>;
+
+export const WithProps: ComponentStory<typeof List> = (props) => (
+  <List {...props}>
+    <ListItem>Lorem ipsum dolor sit amet</ListItem>
+    <ListItem>Consectetur adipiscing elit</ListItem>
+    <ListItem>
+      Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
+    </ListItem>
+    <ListItem>Facilisis in pretium nisl aliquet</ListItem>
+  </List>
+);
+
+WithProps.args = {
+  ...List.defaultProps,
+  isOrdered: false,
+};

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

@@ -0,0 +1,20 @@
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+
+const ListTheme: ComponentStyleConfig = {
+  parts: ['container', 'item'],
+  baseStyle: ({ as }) => {
+    if (as === 'ul') {
+      return {
+        item: {
+          '::marker': {
+            fontSize: '12px',
+          },
+        },
+      };
+    }
+
+    return {};
+  },
+};
+
+export default ListTheme;

package/src/Components/List/List.tsx

@@ -0,0 +1,20 @@
+import { ListProps as ChakraListProps, forwardRef, OrderedList, UnorderedList } from '@chakra-ui/react';
+
+export interface ListProps extends ChakraListProps {
+  isOrdered?: boolean;
+}
+
+/**
+ * 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, ...rest } = props;
+  const Component = isOrdered ? OrderedList : UnorderedList;
+  return <Component {...rest} ref={ref} />;
+});
+
+List.defaultProps = {
+  spacing: '8',
+};
+
+export default List;

package/src/Components/List/ListItem.tsx

@@ -0,0 +1,12 @@
+import { ListItem as ChakraListItem, ListItemProps, forwardRef } from '@chakra-ui/react';
+
+/**
+ * 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} />;
+});
+
+export type { ListItemProps };
+
+export default ListItem;

package/src/Components/Tooltip/Tooltip.theme.ts

@@ -10,6 +10,7 @@ const TooltipTheme: SystemStyleObject = {
     paddingY: '8',
     borderRadius: '8',
     boxShadow: 'tooltip',
+    zIndex: 'tooltip',
   },
 };
 

package/src/Foundations/Zindex/Zindex.ts

@@ -8,6 +8,7 @@ const zIndices = {
   dialogOverlay: 1299,
   dialog: 1300,
   popover: 1400,
+  tooltip: 1500,
 };
 
 export default zIndices;

package/src/index.ts

@@ -112,3 +112,9 @@ export { default as PopoverContent } from './Components/Popover/PopoverContent';
 
 export type { AvatarProps } from './Components/Avatar/Avatar';
 export { default as Avatar } from './Components/Avatar/Avatar';
+
+export type { ListProps } from './Components/List/List';
+export { default as List } from './Components/List/List';
+
+export type { ListItemProps } from './Components/List/ListItem';
+export { default as ListItem } from './Components/List/ListItem';

package/src/old.ts

@@ -100,12 +100,6 @@ export { default as InputInlineHelp } from './Old/Input/InputInlineHelp';
 export type { Props as InputLabelProps } from './Old/Input/InputLabel';
 export { default as InputLabel } from './Old/Input/InputLabel';
 
-export type { Props as ListProps } from './Old/List/List';
-export { default as List } from './Old/List/List';
-
-export type { Props as ListItemProps } from './Old/List/ListItem';
-export { default as ListItem } from './Old/List/ListItem';
-
 export type { Props as LogoProps } from './Old/Logo/Logo';
 export { default as Logo } from './Old/Logo/Logo';
 

package/src/theme.ts

@@ -7,6 +7,7 @@ import Dialog from './Components/Dialog/Dialog.theme';
 import Divider from './Components/Divider/Divider.theme';
 import EmptyState from './Components/EmptyState/EmptyState.theme';
 import Link from './Components/Link/Link.theme';
+import List from './Components/List/List.theme';
 import Menu from './Components/Menu/Menu.theme';
 import Select from './Components/Select/Select.theme';
 import Tabs from './Components/Tabs/Tabs.theme';
@@ -68,6 +69,7 @@ const theme = {
     Divider,
     EmptyState,
     Link,
+    List,
     Menu,
     Modal: Dialog,
     Select,