@bitrise/bitkit 13.123.0 → 13.125.0

package/package.json

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

package/src/Components/Toggle/Toggle.theme.ts

@@ -1,19 +1,83 @@
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
 
 const ToggleTheme: ComponentStyleConfig = {
-  baseStyle: ({ withTooltip }) => {
-    return {
-      label: {
-        fontSize: '3',
-        fontWeight: 'normal',
-        lineHeight: '1.5rem',
-        marginBottom: 0,
+  variants: {
+    fixed: {
+      form: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        gap: '24',
       },
-      labelWrapper: {
+    },
+    dynamic: {
+      form: {
+        flexDirection: 'column',
         display: 'flex',
-        gap: '8',
-        paddingInlineEnd: withTooltip ? '4' : undefined,
-        width: withTooltip ? 'fit-content' : undefined,
+      },
+    },
+  },
+  sizes: {
+    sm: {
+      container: {
+        width: '1.75rem',
+      },
+      skeleton: {
+        width: '1.75rem',
+        height: '16',
+      },
+      thumb: {
+        height: '12',
+        width: '12',
+        _checked: {
+          transform: 'translate(12px)',
+        },
+      },
+      track: {
+        height: '16',
+        width: '1.75rem',
+        _after: {
+          backgroundSize: '16px 16px',
+          backgroundPositionX: '-0.1rem',
+        },
+        _before: {
+          backgroundPositionX: '0',
+          backgroundSize: '16px 16px',
+        },
+      },
+    },
+  },
+  baseStyle: ({ isReadOnly }) => {
+    return {
+      skeleton: {
+        width: isReadOnly ? '40' : '3rem',
+        borderRadius: isReadOnly ? '4' : '12',
+        height: '24',
+      },
+      valueText: {
+        textStyle: 'body/lg/regular',
+        '[data-disabled] &': {
+          color: 'text.disabled',
+          cursor: 'not-allowed',
+        },
+      },
+      form: {
+        _disabled: { cursor: 'not-allowed' },
+      },
+      helperText: {
+        color: 'input/text/helper',
+        '[data-disabled] &': {
+          color: 'text.disabled',
+          cursor: 'not-allowed',
+        },
+      },
+      container: {
+        position: 'relative',
+        width: '3rem',
+      },
+      label: {
+        fontStyle: 'comp/input/label',
+        marginBottom: '4',
       },
       spinner: {
         color: 'neutral.70',
@@ -26,7 +90,7 @@ const ToggleTheme: ComponentStyleConfig = {
         _checked: {
           transform: 'translate(24px)',
         },
-        bgGradient: 'linear(to-b, neutral.93 3.43%, neutral.100 100%)',
+        backgroundColor: 'input/toggle/slideOn',
         borderRadius: '24',
         height: '1.25rem',
         position: 'relative',
@@ -41,6 +105,7 @@ const ToggleTheme: ComponentStyleConfig = {
             `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.01 10.608 16.618 6l1.402 1.402-4.608 4.608 4.608 4.608-1.402 1.402-4.608-4.608-4.608 4.608L6 16.618l4.608-4.608L6 7.402 7.402 6l4.608 4.608Z' fill='white' /%3E%3C/svg%3E"),` +
             `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.01 10.608 16.618 6l1.402 1.402-4.608 4.608 4.608 4.608-1.402 1.402-4.608-4.608-4.608 4.608L6 16.618l4.608-4.608L6 7.402 7.402 6l4.608 4.608Z' fill='white' /%3E%3C/svg%3E")`,
           backgroundPositionX: '-0.125rem',
+          backgroundSize: '24px 24px',
           bottom: 0,
           content: '""',
           left: '50%',
@@ -51,9 +116,10 @@ const ToggleTheme: ComponentStyleConfig = {
         _before: {
           backgroundImage:
             `/* @see: https://github.com/chakra-ui/chakra-ui/issues/7548#issuecomment-1684034030 */` +
-            `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.213 13.915 17.234 7l1.49 1.49L10.212 17 5 11.68l1.49-1.489 3.723 3.724Z' fill='white' /%3E%3C/svg%3E"),` +
-            `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.213 13.915 17.234 7l1.49 1.49L10.212 17 5 11.68l1.49-1.489 3.723 3.724Z' fill='white' /%3E%3C/svg%3E")`,
+            `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.7372 7.67567L10.7502 16.3887L5.34921 11.7592L6.6508 10.2407L10.5831 13.6112L17.2628 6.32422L18.7372 7.67567Z' fill='white' /%3E%3C/svg%3E"),` +
+            `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.7372 7.67567L10.7502 16.3887L5.34921 11.7592L6.6508 10.2407L10.5831 13.6112L17.2628 6.32422L18.7372 7.67567Z' fill='white' /%3E%3C/svg%3E")`,
           backgroundPositionX: '0.125rem',
+          backgroundSize: '24px 24px',
           bottom: 0,
           content: '""',
           left: 0,
@@ -63,18 +129,18 @@ const ToggleTheme: ComponentStyleConfig = {
         },
         _checked: {
           _disabled: {
-            backgroundColor: 'turquoise.80',
+            backgroundColor: 'input/toggle/frameOn-disabled',
           },
-          backgroundColor: 'turquoise.70',
+          backgroundColor: 'input/toggle/frameOn',
         },
         _disabled: {
-          backgroundColor: 'neutral.93',
+          backgroundColor: 'input/toggle/frameOff-disabled',
           cursor: 'not-allowed',
         },
         _focusVisible: {
           boxShadow: 'outline',
         },
-        backgroundColor: 'neutral.50',
+        backgroundColor: 'input/toggle/frameOff',
         borderRadius: '12',
         boxSizing: 'border-box',
         height: '24',

package/src/Components/Toggle/Toggle.tsx

@@ -2,33 +2,35 @@ import { ReactNode } from 'react';
 import {
   FormControl,
   FormControlProps,
-  FormErrorMessage,
   FormHelperText,
   FormLabel,
   forwardRef,
-  Switch,
   SwitchProps,
   useMultiStyleConfig,
 } from '@chakra-ui/react';
 import Box from '../Box/Box';
-import ProgressSpinner from '../ProgressSpinner/ProgressSpinner';
 import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
+import Text from '../Text/Text';
+import Skeleton from '../Skeleton/Skeleton';
+import SkeletonBox from '../Skeleton/SkeletonBox';
+import ToggleComponent from './ToggleComponent';
 
 export interface ToggleProps extends Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'> {
   'data-testid'?: string;
   defaultChecked?: SwitchProps['defaultChecked'];
-  errorText?: string;
   id?: SwitchProps['id'];
   isChecked?: SwitchProps['isChecked'];
   isDisabled?: SwitchProps['isDisabled'];
   isLoading?: boolean;
-  helperText?: string;
-  label?: ReactNode;
+  helperText?: ReactNode;
+  label: ReactNode;
   name?: string;
   onBlur?: SwitchProps['onBlur'];
   onChange?: SwitchProps['onChange'];
   tooltip?: Omit<TooltipProps, 'children'>;
   value?: SwitchProps['value'];
+  valueText?: ReactNode;
+  variant?: 'dynamic' | 'fixed';
 }
 
 /**
@@ -39,12 +41,12 @@ const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
     'aria-label': ariaLabel,
     'data-testid': dataTestid,
     defaultChecked,
-    errorText,
     helperText,
     id,
     isChecked,
     isDisabled,
     isInvalid,
+    isReadOnly,
     isLoading,
     label,
     name,
@@ -52,11 +54,16 @@ const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
     onChange,
     tooltip,
     value,
+    valueText,
+    variant = 'dynamic',
     ...rest
   } = props;
+  const size: 'sm' | 'md' = variant === 'dynamic' ? 'md' : 'sm';
+  const css = useMultiStyleConfig('Switch', { withTooltip: !!tooltip, size, variant });
   const formControlProps = {
-    isDisabled: isDisabled || isLoading,
-    isInvalid: isInvalid || !!errorText,
+    sx: css.form,
+    isDisabled,
+    isInvalid,
     ...rest,
     ref,
   };
@@ -66,28 +73,75 @@ const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
     defaultChecked,
     id,
     isChecked,
-    isDisabled: isDisabled || isLoading,
+    isDisabled,
+    isReadOnly,
+    isLoading,
     name,
     onBlur,
     onChange,
     value,
+    size,
+  };
+  const helperBlock = () => {
+    if (isLoading) {
+      return (
+        <Skeleton marginTop="4" maxWidth="120px" isActive paddingY="0.125rem">
+          <SkeletonBox height="12" />
+        </Skeleton>
+      );
+    }
+    return (
+      <>
+        {helperText && (
+          <FormHelperText sx={css.helperText} as="p">
+            {helperText}
+          </FormHelperText>
+        )}
+      </>
+    );
+  };
+  const switchComponent = () => {
+    if (tooltip)
+      return (
+        <Tooltip {...tooltip}>
+          <ToggleComponent {...switchProps} />
+        </Tooltip>
+      );
+    return <ToggleComponent {...switchProps} />;
   };
-  const css = useMultiStyleConfig('Switch', { withTooltip: !!tooltip });
   return (
     <FormControl {...formControlProps}>
-      <Tooltip isDisabled={!tooltip} {...tooltip}>
-        <Box sx={css.labelWrapper}>
-          <Switch {...switchProps} />
-          {label && (
+      {variant === 'fixed' && (
+        <>
+          <Box>
             <FormLabel htmlFor={id} sx={css.label}>
               {label}
             </FormLabel>
-          )}
-          {isLoading && <ProgressSpinner sx={css.spinner} />}
-        </Box>
-      </Tooltip>
-      {errorText && <FormErrorMessage as="p">{errorText}</FormErrorMessage>}
-      {helperText && <FormHelperText as="p">{helperText}</FormHelperText>}
+            {helperBlock()}
+          </Box>
+          <Box display="flex" flexDirection="row" alignItems="center" gap="8">
+            {switchComponent()}
+          </Box>
+        </>
+      )}
+      {variant === 'dynamic' && (
+        <>
+          <FormLabel htmlFor={id} sx={css.label}>
+            {label}
+          </FormLabel>
+          <Box display="flex" flexDirection="row" alignItems="center" gap="8">
+            {switchComponent()}
+            {isLoading ? (
+              <Skeleton maxWidth="7.5rem" flex="1" isActive>
+                <SkeletonBox height="16" />
+              </Skeleton>
+            ) : (
+              <Text sx={css.valueText}>{valueText}</Text>
+            )}
+          </Box>
+          {helperBlock()}
+        </>
+      )}
     </FormControl>
   );
 });

package/src/Components/Toggle/ToggleComponent.tsx

@@ -0,0 +1,43 @@
+import { Switch, SwitchProps, useMultiStyleConfig } from '@chakra-ui/react';
+import Skeleton from '../Skeleton/Skeleton';
+import SkeletonBox from '../Skeleton/SkeletonBox';
+import Badge from '../Badge/Badge';
+
+export interface ToggleComponentProps extends SwitchProps {
+  size?: 'md' | 'sm';
+  isLoading?: boolean;
+}
+const ToggleComponent = (props: ToggleComponentProps) => {
+  const { isLoading, isReadOnly, isChecked, ...rest } = props;
+  const { skeleton } = useMultiStyleConfig('Switch', props);
+  if (isLoading) {
+    return (
+      <Skeleton isActive>
+        <SkeletonBox __css={skeleton} />
+      </Skeleton>
+    );
+  }
+  if (isReadOnly) {
+    if (isChecked)
+      return (
+        <Badge
+          userSelect="none"
+          cursor="default"
+          w="40"
+          variant="subtle"
+          colorScheme="positive"
+          justifyContent="center"
+        >
+          ON
+        </Badge>
+      );
+    return (
+      <Badge userSelect="none" cursor="default" w="40" justifyContent="center">
+        OFF
+      </Badge>
+    );
+  }
+  return <Switch isReadOnly={isReadOnly} isChecked={isChecked} {...rest} />;
+};
+
+export default ToggleComponent;

package/src/Components/ValueDialog/ValueDialog.tsx

@@ -0,0 +1,37 @@
+import { ReactNode, useState } from 'react';
+import { As, MergeWithAs } from '@chakra-ui/react';
+import Dialog, { DialogProps } from '../Dialog/Dialog';
+
+type ValueDialogProps<T> = { value?: T; children: (value: T) => ReactNode } & Omit<
+  DialogProps,
+  'isOpen' | 'onCloseComplete' | 'children'
+>;
+
+type ComponentWithAs<Component extends As = 'section'> = {
+  <T, AsComponent extends As = Component>(
+    props: MergeWithAs<
+      React.ComponentProps<Component>,
+      React.ComponentProps<AsComponent>,
+      ValueDialogProps<T>,
+      AsComponent
+    >,
+  ): JSX.Element;
+};
+const ValueDialog: ComponentWithAs = ({ value, onClose, children, ...rest }) => {
+  const [closing, setClosing] = useState(false);
+  return (
+    <Dialog
+      isOpen={Boolean(value) || !closing}
+      onClose={() => setClosing(true)}
+      onCloseComplete={() => {
+        onClose();
+        setClosing(false);
+      }}
+      {...rest}
+    >
+      {value && children(value)}
+    </Dialog>
+  );
+};
+
+export default ValueDialog;

package/src/Patterns/NotificationCard/NotificationCard.theme.ts

@@ -1,5 +1,5 @@
 import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
-import { ColorScheme } from 'src/types/bitkit';
+import { ColorScheme } from '../../types/bitkit';
 
 const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(['card', 'icon']);
 

package/src/index.ts

@@ -203,6 +203,9 @@ export { default as Tr } from './Components/Table/Tr';
 export type { ToggleProps } from './Components/Toggle/Toggle';
 export { default as Toggle } from './Components/Toggle/Toggle';
 
+export type { ToggleComponentProps } from './Components/Toggle/ToggleComponent';
+export { default as ToggleComponent } from './Components/Toggle/ToggleComponent';
+
 export type { CollapseProps } from './Components/Collapse/Collapse';
 export { default as Collapse } from './Components/Collapse/Collapse';
 

package/src/tokens/tokensToTheme.json

@@ -289,7 +289,7 @@
           "subtle": "pal.neutral.93",
           "minimal": "pal.neutral.95",
           "disabled": "pal.neutral.95",
-          "transparent": "pal.neutral.100 0%"
+          "transparent": "{color.pal.neutral.100} 0%"
         },
         "border": {
           "minimal": "pal.neutral.93",
@@ -520,9 +520,9 @@
         },
         "toggle": {
           "frameOn": "sys.success.bold",
-          "frameOn-disabled": "rgba(sys.success.bold,0.5)",
+          "frameOn-disabled": "rgb(from var(--colors-sys-success-bold) r g b / 0.5)",
           "frameOff": "sys.neutral.bold",
-          "frameOff-disabled": "rgba(sys.neutral.bold,0.5)",
+          "frameOff-disabled": "rgb(from var(--colors-sys-neutral-bold) r g b / 0.5)",
           "slideOn": "sys.bg.surface",
           "slideOn-disabled": "sys.bg.surface",
           "slideOff": "sys.bg.surface",
@@ -580,8 +580,8 @@
         }
       },
       "utilities": {
-        "overlay": "rgba(sys.bg.contrast, 0.8)",
-        "overlay-light": "rgba(sys.bg.contrast, 0.16)",
+        "overlay": "rgb(from var(--colors-sys-bg-contrast) r g b / 0.8)",
+        "overlay-light": "rgb(from var(--colors-sys-bg-contrast) r g b / 0.16)",
         "skeleton": "sys.bg.subtle",
         "skeleton-strong": "sys.fg.minimal"
       },
@@ -605,7 +605,7 @@
       "sys/bg/subtle": "pal.neutral.93",
       "sys/bg/minimal": "pal.neutral.95",
       "sys/bg/disabled": "pal.neutral.95",
-      "sys/bg/transparent": "pal.neutral.100 0%",
+      "sys/bg/transparent": "{color.pal.neutral.100} 0%",
       "sys/border/minimal": "pal.neutral.93",
       "sys/border/subtle": "pal.neutral.90",
       "sys/border/strong": "pal.neutral.80",
@@ -786,9 +786,9 @@
       "input/checkbox/selection": "sys.interactive.base",
       "input/checkbox/selection-disabled": "sys.interactive.disabled",
       "input/toggle/frameOn": "sys.success.bold",
-      "input/toggle/frameOn-disabled": "rgba(sys.success.bold,0.5)",
+      "input/toggle/frameOn-disabled": "rgb(from var(--colors-sys-success-bold) r g b / 0.5)",
       "input/toggle/frameOff": "sys.neutral.bold",
-      "input/toggle/frameOff-disabled": "rgba(sys.neutral.bold,0.5)",
+      "input/toggle/frameOff-disabled": "rgb(from var(--colors-sys-neutral-bold) r g b / 0.5)",
       "input/toggle/slideOn": "sys.bg.surface",
       "input/toggle/slideOn-disabled": "sys.bg.surface",
       "input/toggle/slideOff": "sys.bg.surface",
@@ -829,8 +829,8 @@
       "status/neutral/border": "sys.neutral.muted",
       "status/neutral/icon": "sys.neutral.strong",
       "status/neutral/text": "sys.neutral.strong",
-      "utilities/overlay": "rgba(sys.bg.contrast, 0.8)",
-      "utilities/overlay-light": "rgba(sys.bg.contrast, 0.16)",
+      "utilities/overlay": "rgb(from var(--colors-sys-bg-contrast) r g b / 0.8)",
+      "utilities/overlay-light": "rgb(from var(--colors-sys-bg-contrast) r g b / 0.16)",
       "utilities/skeleton": "sys.bg.subtle",
       "utilities/skeleton-strong": "sys.fg.minimal"
     }