@bitrise/bitkit 10.11.2 → 10.12.0

package/package.json

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

package/src/Components/Dropdown/Dropdown.stories.tsx

@@ -124,3 +124,12 @@ export const InsideDialog = () => {
     </Provider>
   );
 };
+export const WithIcon = () => {
+  return (
+    <Dropdown iconName="Calendar" defaultValue="daily">
+      <DropdownOption value="daily">Daily</DropdownOption>
+      <DropdownOption value="weekly">Weekly</DropdownOption>
+      <DropdownOption value="monthly">Monthly</DropdownOption>
+    </Dropdown>
+  );
+};

package/src/Components/Dropdown/Dropdown.theme.ts

@@ -86,6 +86,7 @@ const DropdownTheme = {
         height: '32',
         paddingLeft: '12',
         paddingRight: '12',
+        gap: '0.375rem',
       },
     },
     medium: {
@@ -94,6 +95,7 @@ const DropdownTheme = {
         height: '48',
         paddingLeft: '16',
         paddingRight: '16',
+        gap: '0.625rem',
       },
     },
   },

package/src/Components/Dropdown/Dropdown.tsx

@@ -19,7 +19,7 @@ import {
   useMultiStyleConfig,
 } from '@chakra-ui/react';
 import { FloatingFocusManager } from '@floating-ui/react-dom-interactions';
-import Icon from '../Icon/Icon';
+import Icon, { TypeIconName } from '../Icon/Icon';
 import { DropdownEventArgs, DropdownProvider, useDropdownContext, useDropdownStyles } from './Dropdown.context';
 import { DropdownOption, DropdownGroup, DropdownDetailedOption, DropdownOptionProps } from './DropdownOption';
 import DropdownButton from './DropdownButton';
@@ -101,6 +101,7 @@ export interface DropdownProps<T> extends ChakraProps {
   'aria-label'?: string;
   search?: ReactNode;
   children?: ReactNode;
+  iconName?: TypeIconName;
 }
 
 function useOptionListWithIndexes({ children }: { children: ReactNode }) {

package/src/Components/Dropdown/DropdownButton.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, ReactNode } from 'react';
 import { chakra, ChakraProps } from '@chakra-ui/react';
-import Icon from '../Icon/Icon';
+import Icon, { TypeIconName } from '../Icon/Icon';
 import { useDropdownStyles } from './Dropdown.context';
 
 interface DropdownButtonProps extends ChakraProps {
@@ -10,17 +10,19 @@ interface DropdownButtonProps extends ChakraProps {
   formLabel?: ReactNode;
   size: 'medium' | 'small';
   children?: ReactNode;
+  iconName?: TypeIconName;
 }
 const DropdownButton = forwardRef<HTMLButtonElement, DropdownButtonProps>(
-  ({ size, blurHandler, formLabel, readOnly, placeholder, children, ...rest }, ref) => {
+  ({ size, blurHandler, formLabel, readOnly, placeholder, children, iconName, ...rest }, ref) => {
     const { field, icon } = useDropdownStyles();
     const iconSize = size === 'medium' ? '24' : '16';
     return (
       <chakra.button aria-readonly={readOnly} type="button" ref={ref} onBlur={blurHandler} __css={field} {...rest}>
+        {iconName && <Icon aria-hidden="true" __css={icon} name={iconName} size={iconSize} />}
         <chakra.span overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" flexGrow={1}>
           {formLabel || placeholder}
         </chakra.span>
-        <Icon aria-hidden="true" __css={icon} name="DropdownArrows" fontSize={iconSize} size={iconSize} />
+        <Icon aria-hidden="true" __css={icon} name="DropdownArrows" size={iconSize} />
       </chakra.button>
     );
   },