@bitrise/bitkit 13.126.0 → 13.126.1-alpha.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.126.0",
+  "version": "13.126.1-alpha.1",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -40,8 +40,8 @@
     "@fontsource/source-code-pro": "^5.0.18",
     "framer-motion": "^11.3.6",
     "luxon": "^3.4.4",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-focus-lock": "^2.12.1",
     "react-imask": "^7.6.1",
     "react-markdown": "^9.0.1"
@@ -83,6 +83,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^24.1.0",
+    "lodash": "^4.17.21",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.52.1",
     "release-it": "^17.6.0",

package/src/Components/Toggle/Toggle.tsx

@@ -15,7 +15,11 @@ import Skeleton from '../Skeleton/Skeleton';
 import SkeletonBox from '../Skeleton/SkeletonBox';
 import ToggleComponent from './ToggleComponent';
 
-export interface ToggleProps extends Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'> {
+type VariantLabel =
+  | { variant?: undefined; label?: ReactNode }
+  | { variant: 'dynamic'; label?: ReactNode }
+  | { variant: 'fixed'; label: ReactNode };
+export type ToggleProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'> & {
   'data-testid'?: string;
   defaultChecked?: SwitchProps['defaultChecked'];
   id?: SwitchProps['id'];
@@ -23,15 +27,13 @@ export interface ToggleProps extends Omit<FormControlProps, 'label' | 'onBlur' |
   isDisabled?: SwitchProps['isDisabled'];
   isLoading?: boolean;
   helperText?: ReactNode;
-  label: ReactNode;
   name?: string;
   onBlur?: SwitchProps['onBlur'];
   onChange?: SwitchProps['onChange'];
   tooltip?: Omit<TooltipProps, 'children'>;
   value?: SwitchProps['value'];
   valueText?: ReactNode;
-  variant?: 'dynamic' | 'fixed';
-}
+} & VariantLabel;
 
 /**
  * The Toggle component is used as an alternative for the checkbox component.
@@ -83,6 +85,7 @@ const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
     size,
   };
   const helperBlock = () => {
+    if (!helperText) return;
     if (isLoading) {
       return (
         <Skeleton marginTop="4" maxWidth="120px" isActive paddingY="0.125rem">
@@ -91,13 +94,9 @@ const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
       );
     }
     return (
-      <>
-        {helperText && (
-          <FormHelperText sx={css.helperText} as="p">
-            {helperText}
-          </FormHelperText>
-        )}
-      </>
+      <FormHelperText sx={css.helperText} as="p">
+        {helperText}
+      </FormHelperText>
     );
   };
   const switchComponent = () => {
@@ -126,9 +125,11 @@ const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
       )}
       {variant === 'dynamic' && (
         <>
-          <FormLabel htmlFor={id} sx={css.label}>
-            {label}
-          </FormLabel>
+          {label && (
+            <FormLabel htmlFor={id} sx={css.label}>
+              {label}
+            </FormLabel>
+          )}
           <Box display="flex" flexDirection="row" alignItems="center" gap="8">
             {switchComponent()}
             {isLoading ? (

package/src/tokens/tokensToTheme.json

@@ -289,7 +289,7 @@
           "subtle": "pal.neutral.93",
           "minimal": "pal.neutral.95",
           "disabled": "pal.neutral.95",
-          "transparent": "{color.pal.neutral.100} 0%"
+          "transparent": "pal.neutral.100 0%"
         },
         "border": {
           "minimal": "pal.neutral.93",
@@ -520,9 +520,9 @@
         },
         "toggle": {
           "frameOn": "sys.success.bold",
-          "frameOn-disabled": "rgb(from var(--colors-sys-success-bold) r g b / 0.5)",
+          "frameOn-disabled": "rgba(78, 183, 108, 0.5)",
           "frameOff": "sys.neutral.bold",
-          "frameOff-disabled": "rgb(from var(--colors-sys-neutral-bold) r g b / 0.5)",
+          "frameOff-disabled": "rgba(148, 135, 155, 0.5)",
           "slideOn": "sys.bg.surface",
           "slideOn-disabled": "sys.bg.surface",
           "slideOff": "sys.bg.surface",
@@ -580,8 +580,8 @@
         }
       },
       "utilities": {
-        "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)",
+        "overlay": "rgba(32, 27, 34, 0.8)",
+        "overlay-light": "rgba(32, 27, 34, 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": "{color.pal.neutral.100} 0%",
+      "sys/bg/transparent": "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": "rgb(from var(--colors-sys-success-bold) r g b / 0.5)",
+      "input/toggle/frameOn-disabled": "rgba(78, 183, 108, 0.5)",
       "input/toggle/frameOff": "sys.neutral.bold",
-      "input/toggle/frameOff-disabled": "rgb(from var(--colors-sys-neutral-bold) r g b / 0.5)",
+      "input/toggle/frameOff-disabled": "rgba(148, 135, 155, 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": "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/overlay": "rgba(32, 27, 34, 0.8)",
+      "utilities/overlay-light": "rgba(32, 27, 34, 0.16)",
       "utilities/skeleton": "sys.bg.subtle",
       "utilities/skeleton-strong": "sys.fg.minimal"
     }