@bitrise/bitkit 13.46.0 → 13.47.0

package/package.json

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

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

@@ -1,90 +1,167 @@
+import { DropdownProps } from './DropdownProps';
+
+type DropdownStateProps = Pick<DropdownProps<string | null>, 'disabled' | 'readOnly' | 'isWarning' | 'isError'> & {
+  placeholder: boolean;
+  isOpen: boolean;
+};
+
+const getCursor = ({ readOnly, disabled }: DropdownStateProps) => {
+  if (disabled) {
+    return 'not-allowed';
+  }
+
+  if (readOnly) {
+    return 'default';
+  }
+
+  return 'pointer';
+};
+
+const getBorderColor = ({ readOnly, disabled, isError }: DropdownStateProps) => {
+  if (isError) {
+    return 'border/error';
+  }
+
+  if (readOnly || disabled) {
+    return 'border/disabled';
+  }
+
+  return 'border/strong';
+};
+
+const getIconColor = ({ disabled, isOpen, readOnly }: DropdownStateProps) => {
+  if (isOpen) {
+    return 'icon/primary';
+  }
+
+  if (disabled || readOnly) {
+    return 'icon/on-disabled';
+  }
+
+  return 'icon/secondary';
+};
+
+const getHelperTextColor = ({ disabled, isWarning }: DropdownStateProps) => {
+  if (isWarning) {
+    return 'text/body';
+  }
+
+  if (disabled) {
+    return 'text/disabled';
+  }
+
+  return 'input/text/helper';
+};
+
+const getButtonContentColor = ({ disabled, placeholder }: DropdownStateProps) => {
+  if (disabled) {
+    return 'text/disabled';
+  }
+
+  if (placeholder) {
+    return 'text/secondary';
+  }
+
+  return 'input/text/inputValue';
+};
+
 const DropdownTheme = {
-  baseStyle: ({ disabled }: { disabled?: boolean }) => ({
-    field: {
-      _active: disabled
-        ? undefined
-        : {
-            bgGradient: 'linear(to-b, neutral.90, neutral.90)',
-            borderColor: 'neutral.80',
-          },
-      _hover: disabled
-        ? undefined
-        : {
-            bgGradient: 'linear(to-b, neutral.93, neutral.93)',
+  baseStyle: (props: DropdownStateProps) => {
+    const { disabled, readOnly, isError } = props;
+    return {
+      field: {
+        _hover:
+          disabled || readOnly || isError
+            ? undefined
+            : {
+                borderColor: 'border/hover',
+                color: 'text/primary',
+              },
+        alignItems: 'center',
+        backgroundColor: disabled || readOnly ? 'background/disabled' : 'transparent',
+        border: '0.0625rem solid',
+        borderColor: getBorderColor(props),
+        borderRadius: '4',
+        cursor: getCursor(props),
+        display: 'flex',
+        position: 'relative',
+        textAlign: 'start',
+        width: '100%',
+      },
+      buttonContent: {
+        color: getButtonContentColor(props),
+      },
+      buttonContentHover: {
+        color: disabled || readOnly ? undefined : 'text/primary',
+      },
+      group: {
+        alignItems: 'center',
+        display: 'flex',
+        flexDir: 'row',
+        gap: '12',
+        paddingX: '16',
+        paddingY: '8',
+      },
+      helperText: {
+        color: getHelperTextColor(props),
+      },
+      icon: {
+        color: getIconColor(props),
+        _groupHover: {
+          color: disabled || readOnly ? 'icon/on-disabled' : 'icon/primary',
+        },
+      },
+      item: {
+        '&.bitkit-select__option-active': {
+          '&.bitkit-select__option-hover': {
+            backgroundColor: 'purple.93',
           },
-      alignItems: 'center',
-      bgGradient: 'linear(to-b, neutral.100, neutral.93)',
-      border: '0.0625rem solid',
-      borderColor: 'neutral.90',
-      borderRadius: '4',
-      color: disabled ? 'neutral.70' : 'purple.10',
-      display: 'flex',
-      pointerEvents: disabled && 'none',
-      position: 'relative',
-      textAlign: 'start',
-      width: '100%',
-    },
-    group: {
-      alignItems: 'center',
-      display: 'flex',
-      flexDir: 'row',
-      gap: '12',
-      paddingX: '16',
-      paddingY: '8',
-    },
-    icon: {
-      opacity: disabled && '0.2',
-    },
-    item: {
-      '&.bitkit-select__option-active': {
+          backgroundColor: 'purple.95',
+        },
         '&.bitkit-select__option-hover': {
-          backgroundColor: 'purple.93',
+          backgroundColor: 'neutral.95',
         },
-        backgroundColor: 'purple.95',
+        _disabled: {
+          color: 'neutral.70',
+          cursor: 'not-allowed',
+        },
+        color: 'purple.10',
+        cursor: 'pointer',
+        paddingX: '16',
+        paddingY: '8',
+        textAlign: 'start',
+        userSelect: 'none',
+        w: '100%',
+        wordBreak: 'break-word',
       },
-      '&.bitkit-select__option-hover': {
-        backgroundColor: 'neutral.95',
+      list: {
+        backgroundColor: 'neutral.100',
+        border: '1px solid',
+        borderColor: 'neutral.93',
+        borderRadius: '4',
+        boxShadow: 'large',
+        display: 'flex',
+        flexDir: 'column',
+        flexShrink: 1,
+        maxH: 'max(min(var(--dropdown-floating-max, 16rem), var(--floating-available-height)), var(--dropdown-floating-min, 10rem))',
+        minH: 0,
+        zIndex: '1',
       },
-      _disabled: {
-        color: 'neutral.70',
-        cursor: 'not-allowed',
+      options: {
+        flexShrink: 1,
+        overflowY: 'auto',
+        paddingY: '12',
+        position: 'relative',
       },
-      color: 'purple.10',
-      cursor: 'pointer',
-      paddingX: '16',
-      paddingY: '8',
-      textAlign: 'start',
-      userSelect: 'none',
-      w: '100%',
-      wordBreak: 'break-word',
-    },
-    list: {
-      backgroundColor: 'neutral.100',
-      border: '1px solid',
-      borderColor: 'neutral.93',
-      borderRadius: '4',
-      boxShadow: 'large',
-      display: 'flex',
-      flexDir: 'column',
-      flexShrink: 1,
-      maxH: 'max(min(var(--dropdown-floating-max, 16rem), var(--floating-available-height)), var(--dropdown-floating-min, 10rem))',
-      minH: 0,
-      zIndex: '1',
-    },
-    options: {
-      flexShrink: 1,
-      overflowY: 'auto',
-      paddingY: '12',
-      position: 'relative',
-    },
-    search: {
-      marginTop: '12',
-      mx: 16,
-      width: 'auto',
-    },
-  }),
+      search: {
+        marginTop: '12',
+        mx: 16,
+        width: 'auto',
+      },
+    };
+  },
   sizes: {
-    medium: {
+    lg: {
       field: {
         fontSize: '3',
         gap: '0.625rem',
@@ -93,11 +170,11 @@ const DropdownTheme = {
         paddingRight: '16',
       },
     },
-    small: {
+    md: {
       field: {
         fontSize: '2',
         gap: '0.375rem',
-        height: '32',
+        height: '40',
         paddingLeft: '12',
         paddingRight: '12',
       },

package/src/Components/Dropdown/Dropdown.tsx

@@ -1,7 +1,24 @@
-import React, { cloneElement, forwardRef, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { chakra, ChakraProps, useControllableState, useMultiStyleConfig } from '@chakra-ui/react';
-import { FloatingFocusManager, UseFloatingProps } from '@floating-ui/react-dom-interactions';
-import { TypeIconName } from '../Icon/Icon';
+import React, {
+  cloneElement,
+  forwardRef,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  chakra,
+  FormControl,
+  FormErrorMessage,
+  FormHelperText,
+  FormLabel,
+  useControllableState,
+  useMultiStyleConfig,
+} from '@chakra-ui/react';
+import { FloatingFocusManager } from '@floating-ui/react-dom-interactions';
 import SearchInput from '../SearchInput/SearchInput';
 import { DropdownEventArgs, DropdownProvider, useDropdownContext, useDropdownStyles } from './Dropdown.context';
 import { DropdownDetailedOption, DropdownGroup, DropdownOption, DropdownOptionProps } from './DropdownOption';
@@ -9,6 +26,7 @@ import DropdownButton from './DropdownButton';
 import useFloatingDropdown from './hooks/useFloatingDropdown';
 import { NoResultsFound, useSimpleSearch } from './hooks/useSimpleSearch';
 import { isSearchable } from './isNodeMatch';
+import { DropdownProps } from './DropdownProps';
 
 type DropdownSearchCustomProps = {
   value: string;
@@ -62,31 +80,6 @@ const DropdownSearch = ({
 };
 export { DropdownOption, DropdownGroup, DropdownSearch, NoResultsFound, DropdownDetailedOption };
 
-type DropdownInstance<T> = { value: T; name?: string };
-type DropdownChangeEventHandler<T> = (ev: { target: DropdownInstance<T> }) => void;
-export interface DropdownProps<T> extends ChakraProps {
-  id?: string;
-  name?: string;
-  onChange?: DropdownChangeEventHandler<T>;
-  onBlur?: DropdownChangeEventHandler<T>;
-  value?: T;
-  defaultValue?: T;
-  size?: 'small' | 'medium';
-  dropdownMaxHeight?: ChakraProps['maxH'];
-  dropdownMinHeight?: ChakraProps['minH'];
-  dropdownWidth?: ChakraProps['width'] | 'match';
-  placement?: UseFloatingProps['placement'];
-  readOnly?: boolean;
-  disabled?: boolean;
-  placeholder?: string;
-  'aria-label'?: string;
-  search?: ReactNode;
-  children?: ReactNode;
-  iconName?: TypeIconName;
-  formLabel?: ReactNode;
-  returnFocus?: boolean;
-}
-
 function useOptionListWithIndexes({ children }: { children: ReactNode }) {
   return useMemo(() => {
     const childList = React.Children.toArray(children);
@@ -255,17 +248,30 @@ function useDropdown<T>({
 const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
   (
     {
+      'aria-label': ariaLabel,
+      buttonProps = {},
+      defaultValue,
+      disabled,
       dropdownMaxHeight,
       dropdownMinHeight,
       dropdownWidth,
+      errorText,
       formLabel: customFormLabel,
+      helperText,
+      iconName,
+      isError,
+      isWarning,
+      label,
       name,
       onBlur,
+      onChange,
       placeholder,
+      placement,
       readOnly,
       returnFocus = true,
       search,
-      size = 'medium',
+      size,
+      value,
       ...props
     },
     ref,
@@ -283,14 +289,28 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
       searchRef,
       ...rest
     } = useDropdown({
+      defaultValue,
       dropdownWidth,
+      isWarning,
       name,
+      onChange,
       optionsRef,
+      placement,
       readOnly,
       ref,
+      value,
       ...props,
     });
-    const dropdownStyles = useMultiStyleConfig('Dropdown', { disabled: readOnly, size, ...rest });
+    const dropdownStyles = useMultiStyleConfig('Dropdown', {
+      disabled,
+      isError,
+      isOpen,
+      isWarning,
+      placeholder: !formLabel,
+      readOnly,
+      size,
+      ...rest,
+    });
 
     const blurHandler = () => {
       if (!onBlur) {
@@ -309,19 +329,40 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
       [dropdownMinHeight, dropdownMaxHeight, dropdownStyles.list],
     );
     const searchElement = search === false ? null : search || <DropdownSearch />;
+    const buttonId = useId();
     return (
       <>
         {name && formValue && <input name={name} type="hidden" value={formValue} />}
         <DropdownProvider context={dropdownCtx} styles={dropdownStyles}>
-          <DropdownButton
-            {...referenceProps}
-            {...props}
-            blurHandler={blurHandler}
-            formLabel={customFormLabel ?? formLabel}
-            placeholder={placeholder}
-            readOnly={readOnly}
-            size={size}
-          />
+          <FormControl {...props} isDisabled={disabled} isInvalid={isError}>
+            {label && (
+              <FormLabel htmlFor={disabled || readOnly ? undefined : buttonId} marginBlockEnd="4">
+                {label}
+              </FormLabel>
+            )}
+            <DropdownButton
+              {...referenceProps}
+              {...buttonProps}
+              aria-label={ariaLabel}
+              id={buttonId}
+              iconName={iconName}
+              blurHandler={blurHandler}
+              disabled={disabled}
+              formLabel={customFormLabel ?? formLabel}
+              placeholder={placeholder}
+              readOnly={readOnly}
+              isError={isError}
+              isOpen={isOpen}
+              isWarning={isWarning}
+              size={size}
+            />
+            {errorText && <FormErrorMessage as="p">{errorText}</FormErrorMessage>}
+            {!errorText && helperText && (
+              <FormHelperText data-disabled={disabled} as="p">
+                {helperText}
+              </FormHelperText>
+            )}
+          </FormControl>
           {isOpen && (
             <FloatingFocusManager context={floatingContext} initialFocus={searchRef} returnFocus={returnFocus}>
               <chakra.div {...floatingProps} sx={listStyles}>
@@ -338,6 +379,10 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
   },
 );
 
+Dropdown.defaultProps = {
+  size: 'lg',
+} as DropdownProps<string | null>;
+
 export function typedDropdown<T>() {
   return {
     Dropdown: Dropdown as React.ForwardRefExoticComponent<DropdownProps<T> & React.RefAttributes<Element>>,

package/src/Components/Dropdown/DropdownButton.tsx

@@ -2,27 +2,88 @@ import { forwardRef, ReactNode } from 'react';
 import { chakra, ChakraProps } from '@chakra-ui/react';
 import Icon, { TypeIconName } from '../Icon/Icon';
 import { useDropdownStyles } from './Dropdown.context';
+import { DropdownProps } from './DropdownProps';
 
 interface DropdownButtonProps extends ChakraProps {
+  'aria-label'?: string;
   blurHandler: () => void;
+  id?: string;
   readOnly?: boolean;
   placeholder?: string;
   formLabel?: ReactNode;
-  size: 'medium' | 'small';
+  size: DropdownProps<string | null>['size'];
   children?: ReactNode;
   iconName?: TypeIconName;
+  isWarning?: boolean;
+  isOpen?: boolean;
+  isError?: boolean;
+  disabled?: boolean;
 }
 const DropdownButton = forwardRef<HTMLButtonElement, DropdownButtonProps>(
-  ({ blurHandler, children, formLabel, iconName, placeholder, readOnly, size, ...rest }, ref) => {
-    const { field, icon } = useDropdownStyles();
-    const iconSize = size === 'medium' ? '24' : '16';
+  (
+    {
+      blurHandler,
+      children,
+      disabled,
+      formLabel,
+      iconName,
+      placeholder,
+      readOnly,
+      size,
+      isWarning,
+      isError,
+      isOpen,
+      ...rest
+    },
+    ref,
+  ) => {
+    const { field, buttonContent, buttonContentHover, icon } = useDropdownStyles();
+    const iconSize = size === 'lg' ? '24' : '16';
+
+    const chevronStyle = {
+      ...icon,
+      transform: isOpen ? 'rotate(180deg)' : undefined,
+      transition: 'transform 0.2s ease',
+    };
+
     return (
-      <chakra.button ref={ref} __css={field} aria-readonly={readOnly} onBlur={blurHandler} type="button" {...rest}>
+      <chakra.button
+        ref={ref}
+        __css={field}
+        aria-readonly={readOnly}
+        disabled={disabled}
+        onBlur={blurHandler}
+        role={readOnly ? undefined : 'group'}
+        type="button"
+        {...rest}
+      >
         {iconName && <Icon __css={icon} aria-hidden="true" name={iconName} size={iconSize} />}
-        <chakra.span flexGrow={1} overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">
+        <chakra.span
+          __css={buttonContent}
+          _groupHover={buttonContentHover}
+          flexGrow={1}
+          overflow="hidden"
+          textOverflow="ellipsis"
+          whiteSpace="nowrap"
+        >
           {formLabel || placeholder}
         </chakra.span>
-        <Icon __css={icon} aria-hidden="true" name="DropdownArrows" size={iconSize} />
+        {!isError && isWarning && <Icon aria-hidden="true" name="WarningColored" size={iconSize} />}
+        {isError && <Icon aria-hidden="true" color="icon/negative" name="ErrorCircleFilled" size={iconSize} />}
+        <Icon
+          __css={chevronStyle}
+          _groupActive={
+            readOnly || disabled
+              ? undefined
+              : {
+                  transform: 'rotate(180deg)',
+                  transition: 'transform 0.2s ease',
+                }
+          }
+          aria-hidden="true"
+          name="SelectChevron"
+          size="24"
+        />
       </chakra.button>
     );
   },

package/src/Components/Dropdown/DropdownProps.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { ChakraProps } from '@chakra-ui/react';
+import { UseFloatingProps } from '@floating-ui/react-dom-interactions';
+import { TypeIconName } from '../Icon/Icon';
+
+type DropdownInstance<T> = { value: T; name?: string };
+
+type DropdownChangeEventHandler<T> = (ev: { target: DropdownInstance<T> }) => void;
+
+export interface DropdownProps<T> extends ChakraProps {
+  'aria-label'?: string;
+  buttonProps?: ChakraProps;
+  children?: ReactNode;
+  defaultValue?: T;
+  disabled?: boolean;
+  dropdownMinHeight?: ChakraProps['minH'];
+  dropdownMaxHeight?: ChakraProps['maxH'];
+  dropdownWidth?: ChakraProps['width'] | 'match';
+  errorText?: ReactNode;
+  formLabel?: ReactNode;
+  helperText?: ReactNode;
+  iconName?: TypeIconName;
+  id?: string;
+  isError?: boolean;
+  isWarning?: boolean;
+  label?: ReactNode;
+  name?: string;
+  onBlur?: DropdownChangeEventHandler<T>;
+  onChange?: DropdownChangeEventHandler<T>;
+  placeholder?: string;
+  placement?: UseFloatingProps['placement'];
+  readOnly?: boolean;
+  returnFocus?: boolean;
+  search?: ReactNode;
+  size?: 'lg' | 'md';
+  value?: T;
+}

package/src/Components/Form/Form.theme.ts

@@ -5,7 +5,11 @@ const FormTheme = {
     baseStyle: {
       helperText: {
         color: 'neutral.50',
+        _disabled: {
+          color: 'text/disabled',
+        },
         marginTop: '4',
+
         textStyle: 'comp/input/helperText',
       },
     } as ComponentStyleConfig,
@@ -13,7 +17,7 @@ const FormTheme = {
   FormError: {
     baseStyle: {
       text: {
-        color: 'red.50',
+        color: 'input/text/error',
         marginTop: '4',
         textStyle: 'comp/input/helperText',
       },
@@ -22,9 +26,9 @@ const FormTheme = {
   FormLabel: {
     baseStyle: {
       _disabled: {
-        color: 'neutral.80',
+        color: 'text/disabled',
       },
-      color: 'purple.10',
+      color: 'input/text/label',
       textStyle: 'comp/input/label',
     } as ComponentStyleConfig,
   },

package/src/Components/Icon/Icon.tsx

@@ -2,7 +2,7 @@ import { forwardRef, IconProps as ChakraIconProps } from '@chakra-ui/react';
 import * as bigIcons from '../Icons/24x24';
 import * as smallIcons from '../Icons/16x16';
 
-export type TypeIconName = keyof typeof bigIcons & keyof typeof smallIcons;
+export type TypeIconName = keyof typeof bigIcons | keyof typeof smallIcons;
 export interface IconProps extends ChakraIconProps {
   name: TypeIconName;
   size?: '16' | '24' | '32';
@@ -15,7 +15,7 @@ const Icon = forwardRef<IconProps, 'svg'>(({ name, size = '24', ...rest }, ref)
     width: size,
     ...rest,
   };
-  const ThisIcon = size === '16' ? smallIcons[name] : bigIcons[name];
+  const ThisIcon = size === '16' ? smallIcons[name as keyof typeof smallIcons] : bigIcons[name];
   return <ThisIcon {...props} />;
 });
 

package/src/Components/Icons/24x24/SelectChevron.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
+
+const SelectChevron = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.29285 10.2071L7.70706 8.79289L12 13.0858L16.2928 8.79289L17.7071 10.2071L12 15.9142L6.29285 10.2071Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default SelectChevron;

package/src/Components/Icons/24x24/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/index.ts

@@ -143,7 +143,7 @@ export { default as BreadcrumbLink } from './Components/Breadcrumb/BreadcrumbLin
 export type { RibbonProps } from './Components/Ribbon/Ribbon';
 export { default as Ribbon } from './Components/Ribbon/Ribbon';
 
-export type { DropdownProps } from './Components/Dropdown/Dropdown';
+export type { DropdownProps } from './Components/Dropdown/DropdownProps';
 export {
   default as Dropdown,
   DropdownOption,