@bitrise/bitkit 13.271.0 → 13.273.0

package/package.json

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

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

@@ -30,6 +30,7 @@ const SelectTheme: StyleConfig = {
       },
       _readOnly: {
         cursor: 'default',
+        color: isPlaceholderShown ? 'input/text/placeholder' : 'input/text/inputValue',
       },
     },
     icon: {

package/src/Components/Select/Select.tsx

@@ -59,7 +59,7 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
   const isSelectInvalid = isInvalid || !!errorText;
 
   const formControlProps = {
-    isDisabled: isDisabled || isLoading || isReadOnly,
+    isDisabled: isDisabled || isLoading,
     isInvalid: isSelectInvalid,
     isReadOnly,
     ...rest,
@@ -68,6 +68,7 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
     defaultValue,
     icon: isLoading ? <ProgressSpinner marginEnd="4" /> : <Icon fontSize="24" name="SelectChevron" />,
     name,
+    isDisabled: formControlProps.isDisabled || isReadOnly,
     onBlur,
     onChange,
     size,

package/src/Components/Toggle/Toggle.tsx

@@ -19,12 +19,13 @@ type VariantLabel =
   | { variant?: undefined; label?: ReactNode }
   | { variant: 'dynamic'; label?: ReactNode }
   | { variant: 'fixed'; label: ReactNode };
-export type ToggleProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'> & {
+export type ToggleProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange' | 'isReadOnly'> & {
   'data-testid'?: string;
   defaultChecked?: SwitchProps['defaultChecked'];
   id?: SwitchProps['id'];
   isChecked?: SwitchProps['isChecked'];
   isDisabled?: SwitchProps['isDisabled'];
+  isReadOnly?: SwitchProps['isReadOnly'] | 'toggle';
   isLoading?: boolean;
   helperText?: ReactNode;
   name?: string;
@@ -75,8 +76,8 @@ const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
     defaultChecked,
     id,
     isChecked,
-    isDisabled,
-    isReadOnly,
+    isDisabled: isDisabled || isReadOnly === 'toggle',
+    isReadOnly: isReadOnly === true,
     isLoading,
     name,
     onBlur,
@@ -102,7 +103,7 @@ const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
   const switchComponent = () => {
     if (tooltip)
       return (
-        <Tooltip {...tooltip}>
+        <Tooltip {...tooltip} shouldWrapChildren>
           <ToggleComponent {...switchProps} />
         </Tooltip>
       );

package/src/Patterns/SettingsCard/SettingsCard.tsx

@@ -41,7 +41,12 @@ export const SettingsCardOnOffValue = (props: Pick<ToggleProps, 'isChecked' | 'v
   );
 };
 
-export const SettingsCardToggle = (props: Omit<ToggleProps, 'variant'> & { label: ReactNode }) => {
+interface SettingsCardToggleProps extends Omit<ToggleProps, 'variant' | 'isReadOnly'> {
+  label: ReactNode;
+  isReadOnly?: boolean | 'toggle';
+}
+
+export const SettingsCardToggle = (props: SettingsCardToggleProps) => {
   const { data } = useSettingsCardStyle();
   return (
     <Box __css={data}>