@bitrise/bitkit 13.281.0 → 13.283.0

package/package.json

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

package/src/Components/LabeledData/LabeledData.tsx

@@ -108,7 +108,7 @@ const LabeledData = ({
           {skeletonVariant === 'double' && <SkeletonBox height="14" width="120px" marginY="3" />}
         </Skeleton>
       ) : (
-        <>
+        <Box display="flex" flexDirection="column" gap="4">
           {data && (
             <Box as="dd" display="flex" alignItems="center" gap="4" color="text/body" textStyle={`comp/data/${size}`}>
               {data}
@@ -142,7 +142,7 @@ const LabeledData = ({
               )}
             </Box>
           )}
-        </>
+        </Box>
       )}
     </Box>
   );

package/src/Components/ProgressIndicator/ProgressIndicator.tsx

@@ -38,28 +38,45 @@ type RenderStage = (ProgressStage & { spacer?: never }) | { spacer: true };
 const SegmentLine = ({
   activeSegmentIndex,
   segmentIndex,
+  side = 'left',
   spacer,
   variant,
 }: {
   segmentIndex: number;
   activeSegmentIndex: number;
   variant: 'horizontal' | 'vertical';
+  side?: 'left' | 'right';
   spacer?: true;
 }) => {
   const style = useMultiStyleConfig('ProgressIndicator', { variant });
   let props: {
     color: DividerProps['color'];
+    marginLeft?: DividerProps['marginLeft'];
+    paddingRight?: DividerProps['paddingRight'];
     variant?: DividerProps['variant'];
-  } = { color: 'border.minimal' };
+  } = {
+    color: 'border.minimal',
+    [variant === 'horizontal' ? 'marginLeft' : 'marginTop']: side === 'right' ? -2 : 0,
+    ...(variant === 'horizontal' ? { paddingRight: 2 } : { paddingBottom: 4 }),
+  };
 
   if (segmentIndex < activeSegmentIndex) {
-    props = { ...props, color: 'border.selected' };
+    props = {
+      ...props,
+      color: 'border.selected',
+    };
   } else if (segmentIndex === activeSegmentIndex) {
     props = {
       ...props,
       color: 'border.selected',
       variant: 'dashed',
     };
+
+    props = {
+      ...props,
+      [variant === 'horizontal' ? 'marginLeft' : 'marginTop']: side === 'left' ? 2 : -2,
+      ...(variant === 'horizontal' ? { paddingRight: 0 } : {}),
+    };
   }
   return (
     <Divider
@@ -123,6 +140,7 @@ const RealStage = ({
           (segmentIndex > 0 ? (
             <SegmentLine
               activeSegmentIndex={activeSegmentIndex}
+              side="left"
               segmentIndex={segmentIndex - (extendLines ? 2 : 1)}
               variant={variant}
             />
@@ -135,7 +153,12 @@ const RealStage = ({
         {lastBlock ? (
           <div />
         ) : (
-          <SegmentLine activeSegmentIndex={activeSegmentIndex} segmentIndex={segmentIndex} variant={variant} />
+          <SegmentLine
+            activeSegmentIndex={activeSegmentIndex}
+            segmentIndex={segmentIndex}
+            side="right"
+            variant={variant}
+          />
         )}
       </Box>
       <Box sx={style.labelContainer}>

package/src/Patterns/SettingsCard/SettingsCard.tsx

@@ -13,19 +13,14 @@ import ToggleComponent, { ToggleComponentProps } from '../../Components/Toggle/T
 const [SettingsCardStyleProvider, useSettingsCardStyle] = createStylesContext('SettingsCard');
 export const SettingsCardData = ({ helperText, ...rest }: LabeledDataProps & { helperText?: string }) => {
   const { data } = useSettingsCardStyle();
-  const labaledData = <LabeledData {...rest} __css={data} />;
+  const labeledData = <LabeledData {...rest} __css={data} />;
 
   return helperText ? (
     <Box __css={data}>
-      <LabeledData {...rest} />
-      {helperText && (
-        <Text color="input/text/helper" textStyle="comp/input/helperText">
-          {helperText}
-        </Text>
-      )}
+      <LabeledData {...rest} secondaryLabel={helperText} />
     </Box>
   ) : (
-    labaledData
+    labeledData
   );
 };
 export const SettingsCardActions = ({ children }: { children: ReactNode }) => {