@bitrise/bitkit 12.60.0 → 12.61.0

package/package.json

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

package/src/Components/Menu/Menu.theme.ts

@@ -1,4 +1,5 @@
 import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+import { rem } from '../../utils/utils';
 
 const disabledItem: SystemStyleObject = {
   _disabled: {
@@ -19,6 +20,28 @@ const MenuTheme: SystemStyleObject = {
       paddingY: '12',
       zIndex: '1',
     },
+    groupTitle: {
+      display: 'flex',
+      gap: '16',
+      alignItems: 'center',
+      color: 'neutral.60',
+      cursor: 'default',
+      fontSize: '1',
+      fontWeight: 'bold',
+      lineHeight: rem(16),
+      paddingY: '12',
+      paddingX: '16',
+      position: 'relative',
+      textTransform: 'uppercase',
+      _after: {
+        content: `''`,
+        flexGrow: '1',
+        height: rem(1),
+        backgroundColor: 'separator.primary',
+        position: 'relative',
+        top: '-1px',
+      },
+    },
     item: {
       color: 'purple.10',
       paddingY: '12',

package/src/Components/Menu/MenuGroup.tsx

@@ -0,0 +1,7 @@
+import { MenuGroup as ChakraMenuGroup, MenuGroupProps as ChakraMenuGroupProps } from '@chakra-ui/react';
+
+export type MenuGroupProps = ChakraMenuGroupProps;
+
+const MenuGroup = (props: MenuGroupProps) => <ChakraMenuGroup {...props} />;
+
+export default MenuGroup;

package/src/Components/Menu/MenuItem.tsx

@@ -1,4 +1,6 @@
 import { MenuItem as ChakraMenuItem, MenuItemProps as ChakraMenuItemProps, forwardRef } from '@chakra-ui/react';
+import { TypeColors } from '../../Foundations/Colors/Colors';
+import Box from '../Box/Box';
 import Icon, { TypeIconName } from '../Icon/Icon';
 
 const dangerStyle = {
@@ -12,22 +14,46 @@ const dangerStyle = {
   },
 };
 
-export interface MenuItemProps extends ChakraMenuItemProps {
+export interface MenuItemProps extends Omit<ChakraMenuItemProps, 'icon'> {
   as?: 'a' | 'button';
   iconName?: TypeIconName;
   isDanger?: boolean;
+  leftIconColor?: TypeColors;
+  leftIconName?: TypeIconName;
+  rightIconColor?: TypeColors;
+  rightIconName?: TypeIconName;
 }
 
 const MenuItem = forwardRef<MenuItemProps, 'button'>((props, ref) => {
-  const { as, iconName, isDanger, isDisabled, ...rest } = props;
+  const {
+    as,
+    children,
+    iconName,
+    isDanger,
+    isDisabled,
+    leftIconColor,
+    leftIconName,
+    rightIconColor,
+    rightIconName,
+    ...rest
+  } = props;
   const properties: ChakraMenuItemProps = {
     as: isDisabled ? 'button' : as,
     iconSpacing: '12',
     isDisabled,
     ...rest,
   };
-  if (iconName) {
-    properties.icon = <Icon name={iconName} />;
+
+  if (iconName || leftIconName || rightIconName) {
+    properties.children = (
+      <Box display="flex" gap={properties.iconSpacing} width="100%">
+        {(iconName || leftIconName) && <Icon color={leftIconColor} name={iconName || leftIconName || 'Bitbot'} />}
+        {children}
+        {rightIconName && <Icon color={rightIconColor} name={rightIconName} marginInlineStart="auto" />}
+      </Box>
+    );
+  } else {
+    properties.children = children;
   }
   // There is no variant for MenuItem
   if (isDanger) {

package/src/index.ts

@@ -77,6 +77,9 @@ export { default as Menu } from './Components/Menu/Menu';
 export type { MenuButtonProps } from './Components/Menu/MenuButton';
 export { default as MenuButton } from './Components/Menu/MenuButton';
 
+export type { MenuGroupProps } from './Components/Menu/MenuGroup';
+export { default as MenuGroup } from './Components/Menu/MenuGroup';
+
 export type { MenuItemProps } from './Components/Menu/MenuItem';
 export { default as MenuItem } from './Components/Menu/MenuItem';