@bitrise/bitkit 13.57.1-alpha.0 → 13.57.1-alpha.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.57.1-alpha.0",
+  "version": "13.57.1-alpha.2",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Button/Button.tsx

@@ -6,7 +6,7 @@ export interface ButtonProps extends ChakraButtonProps {
   disabled?: never;
   isDanger?: boolean;
   leftIconName?: TypeIconName;
-  rightIconName?: 'ArrowRight' | 'ChevronDown' | 'ChevronUp' | 'OpenInBrowser';
+  rightIconName?: 'ArrowRight' | 'ChevronDown' | 'ChevronUp' | 'SelectChevron' | 'OpenInBrowser';
   size?: 'sm' | 'md' | 'lg';
   variant?: 'primary' | 'secondary' | 'tertiary' | 'danger-primary' | 'danger-secondary' | 'danger-tertiary';
 }

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

@@ -2,7 +2,7 @@ import { StyleConfig } from '@chakra-ui/styled-system';
 import { rem } from '../../utils/utils';
 
 const SelectTheme: StyleConfig = {
-  baseStyle: ({ isPlaceholderShown }) => ({
+  baseStyle: ({ hasStateIcon, isPlaceholderShown }) => ({
     field: {
       appearance: 'none',
       background: 'background/primary',
@@ -13,6 +13,12 @@ const SelectTheme: StyleConfig = {
       cursor: 'pointer',
       position: 'relative',
       width: '100%',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      paddingRight: hasStateIcon ? '64' : '40',
+      _hover: {
+        borderColor: 'border/hover',
+      },
       _disabled: {
         background: 'background/disabled',
         borderColor: 'border/disabled',
@@ -29,6 +35,12 @@ const SelectTheme: StyleConfig = {
     icon: {
       color: 'icon/secondary',
       right: rem(11),
+      _groupHover: {
+        color: 'icon/primary',
+        _disabled: {
+          color: 'icon/on-disabled',
+        },
+      },
       _disabled: {
         color: 'icon/on-disabled',
       },
@@ -51,7 +63,6 @@ const SelectTheme: StyleConfig = {
         gap: '0.625rem',
         height: '48',
         paddingLeft: '16',
-        paddingRight: '16',
       },
     },
     md: {
@@ -60,7 +71,6 @@ const SelectTheme: StyleConfig = {
         gap: '0.375rem',
         height: '40',
         paddingLeft: '12',
-        paddingRight: '12',
       },
     },
   },

package/src/Components/Select/Select.tsx

@@ -47,7 +47,7 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
     onBlur,
     onChange,
     placeholder,
-    size,
+    size = 'lg',
     value,
     ...rest
   } = props;
@@ -67,7 +67,6 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
     onChange,
     size,
     value,
-    variant: 'select',
   };
   if (placeholder) {
     if ('value' in props) {
@@ -78,7 +77,10 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
   }
 
   const iconSize = size === 'lg' ? '24' : '16';
-  const style = useMultiStyleConfig('Select', { isPlaceholderShown: !value });
+  const style = useMultiStyleConfig('Select', {
+    hasStateIcon: isSelectInvalid || isWarning,
+    isPlaceholderShown: !!placeholder && !value,
+  });
 
   return (
     <FormControl {...formControlProps}>
@@ -123,8 +125,4 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
   );
 });
 
-Select.defaultProps = {
-  size: 'lg',
-} as SelectProps;
-
 export default Select;