@bitrise/bitkit 13.124.0 → 13.125.1-alpha.0

package/package.json

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

package/src/Components/Toggle/Toggle.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, useId } from 'react';
 import {
   FormControl,
   FormControlProps,
@@ -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,26 +27,25 @@ 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.
  */
 const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
+  const fallbackId = useId();
   const {
     'aria-label': ariaLabel,
     'data-testid': dataTestid,
     defaultChecked,
     helperText,
-    id,
+    id: externalId,
     isChecked,
     isDisabled,
     isInvalid,
@@ -58,6 +61,7 @@ const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
     variant = 'dynamic',
     ...rest
   } = props;
+  const id = externalId || fallbackId;
   const size: 'sm' | 'md' = variant === 'dynamic' ? 'md' : 'sm';
   const css = useMultiStyleConfig('Switch', { withTooltip: !!tooltip, size, variant });
   const formControlProps = {

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

@@ -1,9 +1,11 @@
 import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
-import { ColorScheme } from 'src/types/bitkit';
+import { ColorScheme } from '../../types/bitkit';
 
 const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(['card', 'icon']);
 
-const colorSchemeToStatus = (colorScheme: ColorScheme) => {
+type NotificationColorScheme = Exclude<ColorScheme, 'orange' | 'neutral'>;
+
+const colorSchemeToStatus = (colorScheme: NotificationColorScheme) => {
   switch (colorScheme) {
     case 'blue':
       return 'info';
@@ -18,7 +20,7 @@ const colorSchemeToStatus = (colorScheme: ColorScheme) => {
   }
 };
 
-const getIconColor = ({ colorScheme }: { colorScheme: ColorScheme }) => {
+const getIconColor = ({ colorScheme }: { colorScheme: NotificationColorScheme }) => {
   switch (colorScheme) {
     case 'blue':
       return 'sys/info/base';
@@ -33,15 +35,15 @@ const getIconColor = ({ colorScheme }: { colorScheme: ColorScheme }) => {
   }
 };
 
-const getBackgroundColor = ({ colorScheme }: { colorScheme: ColorScheme }) => {
+const getBackgroundColor = ({ colorScheme }: { colorScheme: NotificationColorScheme }) => {
   return `status/${colorSchemeToStatus(colorScheme)}/bg`;
 };
 
-const getBorderColor = ({ colorScheme }: { colorScheme: ColorScheme }) => {
+const getBorderColor = ({ colorScheme }: { colorScheme: NotificationColorScheme }) => {
   return `status/${colorSchemeToStatus(colorScheme)}/border`;
 };
 
-const getTextColor = ({ colorScheme }: { colorScheme: ColorScheme }) => {
+const getTextColor = ({ colorScheme }: { colorScheme: NotificationColorScheme }) => {
   switch (colorScheme) {
     case 'blue':
       return 'text/primary';
@@ -58,7 +60,7 @@ const getTextColor = ({ colorScheme }: { colorScheme: ColorScheme }) => {
 
 const NotificationTheme = defineMultiStyleConfig({
   baseStyle: ({ colorScheme }: { colorScheme: string }) => {
-    const cs = colorScheme as ColorScheme;
+    const cs = colorScheme as NotificationColorScheme;
     return {
       card: {
         bg: getBackgroundColor({ colorScheme: cs }),

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';