@bitrise/bitkit 13.174.0 → 13.176.0

package/package.json

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

package/src/Components/LabeledData/LabeledData.tsx

@@ -7,7 +7,7 @@ import Label from '../Label/Label';
 import Skeleton from '../Skeleton/Skeleton';
 import SkeletonBox from '../Skeleton/SkeletonBox';
 
-type DataOrPlaceholder = { placeholder: string; data?: never } | { data: string; placeholder?: never };
+type DataOrPlaceholder = { placeholder?: string; data?: never } | { data?: string; placeholder?: never };
 export type LabeledDataProps = BoxProps & {
   skeletonVariant?: 'single' | 'double';
   as?: 'div' | 'dl';

package/src/Components/Tabs/useTabs.ts

@@ -29,8 +29,9 @@ const useTabs = <T extends string>(props: UseTabsProps<T>) => {
   }, []);
 
   useEffect(() => {
-    if (withHistory) {
-      searchParams.set(queryKey, tabIds[tabIndex]);
+    const queryValue = tabIds[tabIndex];
+    if (queryValue) {
+      searchParams.set(queryKey, queryValue);
       window.parent.history.replaceState(null, '', `?${decodeURIComponent(searchParams.toString())}`);
     }
   }, [tabIndex]);

package/src/Patterns/SettingsCard/SettingsCard.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { CardProps, createStylesContext, useMultiStyleConfig } from '@chakra-ui/react';
 import Card from '../../Components/Card/Card';
 import LabeledData, { LabeledDataProps } from '../../Components/LabeledData/LabeledData';
-import Box from '../../Components/Box/Box';
+import Box, { BoxProps } from '../../Components/Box/Box';
 import Toggle, { ToggleProps } from '../../Components/Toggle/Toggle';
 import Icon, { IconProps } from '../../Components/Icon/Icon';
 import Text from '../../Components/Text/Text';
@@ -11,9 +11,22 @@ import SkeletonBox from '../../Components/Skeleton/SkeletonBox';
 import ToggleComponent, { ToggleComponentProps } from '../../Components/Toggle/ToggleComponent';
 
 const [SettingsCardStyleProvider, useSettingsCardStyle] = createStylesContext('SettingsCard');
-export const SettingsCardData = (props: LabeledDataProps) => {
+export const SettingsCardData = ({ helperText, ...rest }: LabeledDataProps & { helperText?: string }) => {
   const { data } = useSettingsCardStyle();
-  return <LabeledData {...props} __css={data} />;
+  const labaledData = <LabeledData {...rest} __css={data} />;
+
+  return helperText ? (
+    <Box __css={data}>
+      <LabeledData {...rest} />
+      {helperText && (
+        <Text color="input/text/helper" textStyle="comp/input/helperText">
+          {helperText}
+        </Text>
+      )}
+    </Box>
+  ) : (
+    labaledData
+  );
 };
 export const SettingsCardActions = ({ children }: { children: ReactNode }) => {
   const { actions } = useSettingsCardStyle();
@@ -36,9 +49,13 @@ export const SettingsCardToggle = (props: Omit<ToggleProps, 'variant'> & { label
     </Box>
   );
 };
-export const SettingsCardFooter = ({ children }: { children: ReactNode }) => {
+export const SettingsCardFooter = ({ children, ...rest }: BoxProps) => {
   const { footer } = useSettingsCardStyle();
-  return <Box __css={footer}>{children}</Box>;
+  return (
+    <Box __css={footer} {...rest}>
+      {children}
+    </Box>
+  );
 };
 export const SettingsCardFooterToggle = ({
   label,