@bitrise/bitkit 10.18.0-alpha-chakra.3 → 10.18.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.18.0-alpha-chakra.3",
+  "version": "10.18.2",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

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

@@ -4,7 +4,6 @@ const ToggleTheme: ComponentStyleConfig = {
   baseStyle: {
     formControl: {
       display: 'flex',
-      flexWrap: 'wrap',
       gap: '8',
     },
     track: {
@@ -25,6 +24,9 @@ const ToggleTheme: ComponentStyleConfig = {
           backgroundColor: 'turquoise.80',
         },
       },
+      _focusVisible: {
+        boxShadow: 'outline',
+      },
       _before: {
         content: '""',
         backgroundImage: `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")`,
@@ -58,18 +60,17 @@ const ToggleTheme: ComponentStyleConfig = {
         transform: 'translate(24px)',
       },
     },
-    label: {
-      flexBasis: 'calc(100% - 56px)',
-    },
     spinner: {
       width: '16',
       height: '16',
+      marginTop: '4',
+      flexShrink: 0,
       color: 'neutral.70',
     },
     helpherText: {
       fontSize: '2',
       lineHeight: '2',
-      marginTop: '-4px',
+      marginTop: '8px',
       color: 'neutral.40',
     },
   },

package/src/Components/Toggle/Toggle.tsx

@@ -9,9 +9,11 @@ import {
   forwardRef,
   useMultiStyleConfig,
 } from '@chakra-ui/react';
+import Box from '../Box/Box';
 import Text from '../Text/Text';
 
 export interface ToggleProps extends Omit<FormControlProps, 'label'> {
+  dataTestid?: string;
   defaultChecked?: SwitchProps['defaultChecked'];
   id?: SwitchProps['id'];
   isChecked?: SwitchProps['isChecked'];
@@ -27,8 +29,21 @@ export interface ToggleProps extends Omit<FormControlProps, 'label'> {
  * The Toggle component is used as an alternative for the checkbox component.
  */
 const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
-  const { defaultChecked, helpherText, id, isChecked, isDisabled, isLoading, label, onChange, value, ...rest } = props;
+  const {
+    dataTestid,
+    defaultChecked,
+    helpherText,
+    id,
+    isChecked,
+    isDisabled,
+    isLoading,
+    label,
+    onChange,
+    value,
+    ...rest
+  } = props;
   const switchProps = {
+    dataTestid,
     defaultChecked,
     id,
     isChecked,
@@ -38,12 +53,12 @@ const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
   };
   const css = useMultiStyleConfig('Switch');
   return (
-    <FormControl sx={css.formControl} {...rest} ref={ref}>
-      <Switch {...switchProps} />
-      <FormLabel sx={css.label} htmlFor={id}>
-        {label}
-      </FormLabel>
-      {isLoading && <Spinner sx={css.spinner} />}
+    <FormControl {...rest} ref={ref}>
+      <Box sx={css.formControl}>
+        <Switch {...switchProps} />
+        <FormLabel htmlFor={id}>{label}</FormLabel>
+        {isLoading && <Spinner sx={css.spinner} />}
+      </Box>
       {helpherText && <Text sx={css.helpherText}>{helpherText}</Text>}
     </FormControl>
   );