@bitrise/bitkit 13.56.0 → 13.57.1-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.56.0",
+  "version": "13.57.1-alpha.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -57,26 +57,26 @@
     "@babel/preset-typescript": "^7.24.1",
     "@bitrise/eslint-plugin": "^2.10.2",
     "@chakra-ui/cli": "^2.4.1",
-    "@google-cloud/storage": "^7.10.0",
-    "@storybook/addon-actions": "^8.0.8",
-    "@storybook/addon-essentials": "^8.0.8",
-    "@storybook/addon-interactions": "^8.0.8",
-    "@storybook/addon-links": "^8.0.8",
+    "@google-cloud/storage": "^7.10.1",
+    "@storybook/addon-actions": "^8.0.9",
+    "@storybook/addon-essentials": "^8.0.9",
+    "@storybook/addon-interactions": "^8.0.9",
+    "@storybook/addon-links": "^8.0.9",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
-    "@storybook/blocks": "^8.0.8",
-    "@storybook/react": "^8.0.8",
-    "@storybook/react-webpack5": "^8.0.8",
-    "@storybook/theming": "^8.0.8",
-    "@testing-library/dom": "^9.3.4",
+    "@storybook/blocks": "^8.0.9",
+    "@storybook/react": "^8.0.9",
+    "@storybook/react-webpack5": "^8.0.9",
+    "@storybook/theming": "^8.0.9",
+    "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.3.1",
+    "@testing-library/react": "^15.0.3",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/luxon": "^3.4.2",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
-    "@typescript-eslint/eslint-plugin": "^7.7.0",
-    "@typescript-eslint/parser": "^7.7.0",
+    "@typescript-eslint/eslint-plugin": "^7.7.1",
+    "@typescript-eslint/parser": "^7.7.1",
     "axios": "^1.6.8",
     "eslint": "^8.57.0",
     "glob": "^10.3.12",
@@ -86,7 +86,7 @@
     "prettier": "^3.2.5",
     "react-hook-form": "^7.51.3",
     "release-it": "^17.2.0",
-    "storybook": "^8.0.8",
+    "storybook": "^8.0.9",
     "ts-jest": "^29.1.2",
     "typescript": "^5.4.5"
   },

package/src/Components/Icons/16x16/SelectChevron.tsx

@@ -0,0 +1,9 @@
+import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
+
+const SelectChevron = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path fillRule="evenodd" clipRule="evenodd" fill="currentColor" />
+  </Icon>
+));
+
+export default SelectChevron;

package/src/Components/Icons/16x16/index.ts

@@ -183,6 +183,7 @@ export { default as Responsiveness } from './Responsiveness';
 export { default as Save } from './Save';
 export { default as Screenshare } from './Screenshare';
 export { default as SecurityShield } from './SecurityShield';
+export { default as SelectChevron } from './SelectChevron';
 export { default as Settings } from './Settings';
 export { default as SettingsSolid } from './SettingsSolid';
 export { default as Ship } from './Ship';

package/src/Components/Select/Select.theme.ts

@@ -1,48 +1,66 @@
-const SelectTheme = {
-  baseStyle: {
+import { StyleConfig } from '@chakra-ui/styled-system';
+import { rem } from '../../utils/utils';
+
+const SelectTheme: StyleConfig = {
+  baseStyle: ({ isPlaceholderShown }) => ({
     field: {
-      _active: {
-        bgGradient: 'linear(to-b, neutral.90, neutral.90)',
-        borderColor: 'neutral.80',
-      },
-      _disabled: {
-        color: 'neutral.70',
-        pointerEvents: 'none',
-      },
-      _hover: {
-        bgGradient: 'linear(to-b, neutral.93, neutral.93)',
-      },
       appearance: 'none',
-      bgGradient: 'linear(to-b, neutral.100, neutral.93)',
-      border: '0.0625rem solid',
-      borderColor: 'neutral.90',
+      background: 'background/primary',
+      border: '1px solid',
+      borderColor: 'border/strong',
       borderRadius: '4',
-      color: 'purple.10',
+      color: isPlaceholderShown ? 'input/text/placeholder' : 'input/text/inputValue',
+      cursor: 'pointer',
       position: 'relative',
       width: '100%',
+      _disabled: {
+        background: 'background/disabled',
+        borderColor: 'border/disabled',
+        cursor: 'not-allowed',
+        color: 'text/disabled',
+      },
+      _invalid: {
+        borderColor: 'border/error',
+      },
+      _readOnly: {
+        cursor: 'default',
+      },
     },
     icon: {
+      color: 'icon/secondary',
+      right: rem(11),
       _disabled: {
-        opacity: '0.2',
+        color: 'icon/on-disabled',
       },
-      right: '8',
     },
-  },
+    selectContainer: {
+      position: 'relative',
+    },
+    stateIcon: {
+      position: 'absolute',
+      right: rem(42),
+      top: '50%',
+      transform: 'translateY(-50%)',
+      pointerEvents: 'none',
+    },
+  }),
   sizes: {
-    medium: {
+    lg: {
       field: {
         fontSize: '3',
+        gap: '0.625rem',
         height: '48',
         paddingLeft: '16',
-        paddingRight: '32',
+        paddingRight: '16',
       },
     },
-    small: {
+    md: {
       field: {
         fontSize: '2',
-        height: '32',
+        gap: '0.375rem',
+        height: '40',
         paddingLeft: '12',
-        paddingRight: '32',
+        paddingRight: '12',
       },
     },
   },

package/src/Components/Select/Select.tsx

@@ -8,22 +8,25 @@ import {
   forwardRef,
   Select as ChakraSelect,
   SelectProps as ChakraSelectProps,
+  useMultiStyleConfig,
 } from '@chakra-ui/react';
+import Box from '../Box/Box';
+import Text from '../Text/Text';
 import Icon from '../Icon/Icon';
 import ProgressSpinner from '../ProgressSpinner/ProgressSpinner';
-import Text from '../Text/Text';
 
 export interface SelectProps extends Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'> {
   'data-testid'?: string;
   errorText?: string;
   helperText?: string;
   isLoading?: boolean;
+  isWarning?: boolean;
   label?: ReactNode;
   name?: string;
   onBlur?: ChakraSelectProps['onBlur'];
   onChange?: ChakraSelectProps['onChange'];
   placeholder?: ChakraSelectProps['placeholder'];
-  size?: 'small' | 'medium';
+  size?: 'lg' | 'md';
   value?: ChakraSelectProps['value'];
 }
 
@@ -37,6 +40,8 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
     isDisabled,
     isInvalid,
     isLoading,
+    isReadOnly,
+    isWarning,
     label,
     name,
     onBlur,
@@ -46,19 +51,17 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
     value,
     ...rest
   } = props;
-  const iconSize = size === 'medium' ? '24' : '16';
+  const isSelectInvalid = isInvalid || !!errorText;
+
   const formControlProps = {
-    isDisabled: isDisabled || isLoading,
-    isInvalid: isInvalid || !!errorText,
+    isDisabled: isDisabled || isLoading || isReadOnly,
+    isInvalid: isSelectInvalid,
+    isReadOnly,
     ...rest,
   };
   const selectProperties: ChakraSelectProps = {
     defaultValue,
-    icon: isLoading ? (
-      <ProgressSpinner marginEnd="4" size={iconSize} />
-    ) : (
-      <Icon fontSize={iconSize} name="DropdownArrows" size={iconSize} />
-    ),
+    icon: isLoading ? <ProgressSpinner marginEnd="4" /> : <Icon fontSize="24" name="SelectChevron" />,
     name,
     onBlur,
     onChange,
@@ -74,10 +77,14 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
     }
   }
 
+  const iconSize = size === 'lg' ? '24' : '16';
+  const style = useMultiStyleConfig('Select', { isPlaceholderShown: !value });
+
   return (
     <FormControl {...formControlProps}>
       {label && (
         <FormLabel
+          marginBlockEnd="4"
           optionalIndicator={
             <Text as="span" color="neutral.40" fontSize="2" fontWeight="normal" marginLeft="4px">
               (Optional)
@@ -88,14 +95,28 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
           {label}
         </FormLabel>
       )}
-      <ChakraSelect ref={ref} data-testid={dataTestid} {...selectProperties}>
-        {placeholder && (
-          <option disabled value="">
-            {placeholder}
-          </option>
+      <Box sx={style.selectContainer}>
+        <ChakraSelect ref={ref} data-testid={dataTestid} {...selectProperties} sx={style.field}>
+          {placeholder && (
+            <option disabled value="">
+              {placeholder}
+            </option>
+          )}
+          {children}
+        </ChakraSelect>
+        {!isSelectInvalid && isWarning && (
+          <Icon aria-hidden="true" name="WarningColored" size={iconSize} sx={style.stateIcon} />
+        )}
+        {isSelectInvalid && (
+          <Icon
+            aria-hidden="true"
+            color="icon/negative"
+            name="ErrorCircleFilled"
+            size={iconSize}
+            sx={style.stateIcon}
+          />
         )}
-        {children}
-      </ChakraSelect>
+      </Box>
       {errorText && <FormErrorMessage as="p">{errorText}</FormErrorMessage>}
       {helperText && <FormHelperText as="p">{helperText}</FormHelperText>}
     </FormControl>
@@ -103,7 +124,7 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
 });
 
 Select.defaultProps = {
-  size: 'medium',
+  size: 'lg',
 } as SelectProps;
 
 export default Select;