@bitrise/bitkit 13.294.0 → 13.295.0

package/package.json

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

package/src/Components/LabeledData/LabeledData.tsx

@@ -12,6 +12,7 @@ export type LabeledDataProps = BoxProps & {
   skeletonVariant?: 'single' | 'double';
   as?: 'div' | 'dl';
   isLoading?: boolean;
+  isDisabled?: boolean;
   label: string;
   secondaryLabel?: ReactNode;
   size?: 'sm' | 'md' | 'lg';
@@ -29,6 +30,7 @@ const LabeledData = ({
   data,
   placeholder,
   isLoading = false,
+  isDisabled,
   label,
   secondaryLabel,
   size = 'sm',
@@ -41,7 +43,13 @@ const LabeledData = ({
   ...rest
 }: LabeledDataProps) => {
   const trendIconSize = size === 'sm' ? '16' : '24';
-  const labelColor = size === 'sm' ? 'text/primary' : 'text/secondary';
+  let labelColor = 'text/secondary';
+  if (isDisabled) {
+    labelColor = 'text/disabled';
+  } else if (size === 'sm') {
+    labelColor = 'text/primary';
+  }
+
   let trendSign;
   if (shouldShowTrendSign) {
     trendSign = trend === 'negative' ? '-' : '+';
@@ -110,7 +118,14 @@ const LabeledData = ({
       ) : (
         <>
           {data && (
-            <Box as="dd" display="flex" alignItems="center" gap="4" color="text/body" textStyle={`comp/data/${size}`}>
+            <Box
+              as="dd"
+              display="flex"
+              alignItems="center"
+              gap="4"
+              color={isDisabled ? 'text/disabled' : 'text/body'}
+              textStyle={`comp/data/${size}`}
+            >
               {data}
               {trendIconName && trendValue && <Icon color={trendIconColor} name={trendIconName} size={trendIconSize} />}
             </Box>
@@ -129,7 +144,7 @@ const LabeledData = ({
                 </>
               )}
               {secondaryLabel && (
-                <Text as="span" color="text/tertiary">
+                <Text as="span" color={isDisabled ? 'text/disabled' : 'text/tertiary'}>
                   {secondaryLabel}
                 </Text>
               )}

package/src/Patterns/SettingsCard/SettingsCard.theme.ts

@@ -7,7 +7,7 @@ const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpe
   'footer',
 ]);
 
-const baseStyle = definePartsStyle({
+const baseStyle = definePartsStyle((props) => ({
   container: {
     paddingTop: '16',
     display: 'grid',
@@ -17,6 +17,7 @@ const baseStyle = definePartsStyle({
   },
   data: {
     gridArea: 'data',
+    color: props.isDisabled ? 'text/disabled' : undefined,
   },
   actions: {
     gridArea: 'actions',
@@ -34,7 +35,7 @@ const baseStyle = definePartsStyle({
     paddingBottom: '8',
     paddingTop: '6',
   },
-});
+}));
 
 const SettingsCardTheme = defineMultiStyleConfig({
   baseStyle,

package/src/Patterns/SettingsCard/SettingsCard.tsx

@@ -12,12 +12,15 @@ import ToggleComponent, { ToggleComponentProps } from '../../Components/Toggle/T
 
 const [SettingsCardStyleProvider, useSettingsCardStyle] = createStylesContext('SettingsCard');
 export const SettingsCardData = ({ helperText, ...rest }: LabeledDataProps & { helperText?: string }) => {
-  const { data } = useSettingsCardStyle();
-  const labeledData = <LabeledData {...rest} __css={data} />;
+  const {
+    data: { color, ...dataRest },
+  } = useSettingsCardStyle();
+  const isDisabled = color === 'text/disabled';
+  const labeledData = <LabeledData isDisabled={isDisabled} {...rest} __css={dataRest} />;
 
   return helperText ? (
-    <Box __css={data}>
-      <LabeledData {...rest} secondaryLabel={helperText} />
+    <Box __css={dataRest}>
+      <LabeledData {...rest} secondaryLabel={helperText} isDisabled={isDisabled} />
     </Box>
   ) : (
     labeledData
@@ -28,10 +31,13 @@ export const SettingsCardActions = ({ children }: { children: ReactNode }) => {
   return <Box __css={actions}>{children}</Box>;
 };
 export const SettingsCardOnOffValue = (props: Pick<ToggleProps, 'isChecked' | 'valueText' | 'label'>) => {
-  const { data } = useSettingsCardStyle();
+  const {
+    data: { color, ...rest },
+  } = useSettingsCardStyle();
+  const isDisabled = color === 'text/disabled';
   return (
-    <Box __css={data}>
-      <Toggle {...props} isReadOnly />
+    <Box __css={rest}>
+      <Toggle isDisabled={isDisabled} isReadOnly {...props} />
     </Box>
   );
 };
@@ -42,10 +48,14 @@ interface SettingsCardToggleProps extends Omit<ToggleProps, 'variant' | 'isReadO
 }
 
 export const SettingsCardToggle = (props: SettingsCardToggleProps) => {
-  const { data } = useSettingsCardStyle();
+  const {
+    data: { color, ...rest },
+  } = useSettingsCardStyle();
+  const isDisabled = color === 'text/disabled';
+
   return (
-    <Box __css={data}>
-      <Toggle {...props} variant="fixed" />
+    <Box __css={rest}>
+      <Toggle isDisabled={isDisabled} variant="fixed" {...props} />
     </Box>
   );
 };
@@ -157,8 +167,8 @@ export const SettingsCardFooterStatus = ({
     </SettingsCardFooter>
   );
 };
-const SettingsCard = ({ children, ...props }: Omit<CardProps, 'variant'>) => {
-  const style = useMultiStyleConfig('SettingsCard');
+const SettingsCard = ({ children, isDisabled, ...props }: Omit<CardProps, 'variant'> & { isDisabled?: boolean }) => {
+  const style = useMultiStyleConfig('SettingsCard', { isDisabled });
   return (
     <SettingsCardStyleProvider value={style}>
       <Card variant="outline" sx={style.container} {...props}>