@bitrise/bitkit 13.286.0 → 13.288.0

package/package.json

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

package/src/Components/LabeledData/LabeledData.tsx

@@ -51,7 +51,7 @@ const LabeledData = ({
   let dataSkeletonPaddingY;
   switch (size) {
     case 'lg':
-      dataSkeletonHeight = '30px';
+      dataSkeletonHeight = '30';
       dataSkeletonPaddingY = '5';
       break;
     case 'md':
@@ -98,8 +98,8 @@ const LabeledData = ({
   }
 
   return (
-    <Box as={as} display="flex" flexDirection="column" {...rest}>
-      <Label as="dt" color={labelColor} tooltip={tooltip}>
+    <Box as={as} display="flex" flexDirection="column" gap="4" {...rest}>
+      <Label as="dt" color={labelColor} marginBlockEnd={0} tooltip={tooltip}>
         {label}
       </Label>
       {isLoading ? (
@@ -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}
@@ -116,14 +116,7 @@ const LabeledData = ({
             </Box>
           )}
           {placeholder && (
-            <Box
-              as="dd"
-              display="flex"
-              alignItems="center"
-              gap="4"
-              color="text/tertiary"
-              textStyle={`comp/data/${size}`}
-            >
+            <Box as="dd" gap="4" color="text/tertiary" textStyle={`comp/data/${size}`}>
               {placeholder}
             </Box>
           )}
@@ -142,7 +135,7 @@ const LabeledData = ({
               )}
             </Box>
           )}
-        </Box>
+        </>
       )}
     </Box>
   );

package/src/Components/ProgressIndicator/ProgressIndicator.theme.ts

@@ -15,6 +15,11 @@ const ProgressIndicatorTheme = itemHelpers.defineMultiStyleConfig({
       display: 'flex',
       width: '100%',
     },
+    iconContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
     iconWithLine: {
       display: 'grid',
     },
@@ -44,7 +49,7 @@ const ProgressIndicatorTheme = itemHelpers.defineMultiStyleConfig({
         flexDir: 'row',
       },
       iconWithLine: {
-        gridTemplateColumns: '1fr 24px 1fr',
+        gridTemplateColumns: '1fr 20px 1fr',
       },
       labelContainer: {
         flexDir: 'row',
@@ -61,12 +66,13 @@ const ProgressIndicatorTheme = itemHelpers.defineMultiStyleConfig({
         flexDir: 'column',
       },
       iconWithLine: {
-        gridTemplateRows: '24px 1fr',
+        gridTemplateRows: '20px 1fr',
         minHeight: '62px',
       },
       labelContainer: {
         flexDir: 'column',
         justifyContent: 'start',
+        marginTop: '-0.125rem',
       },
       line: {
         height: '100%',

package/src/Components/ProgressIndicator/ProgressIndicator.tsx

@@ -38,45 +38,28 @@ 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',
-    [variant === 'horizontal' ? 'marginLeft' : 'marginTop']: side === 'right' ? -2 : 0,
-    ...(variant === 'horizontal' ? { paddingRight: 2 } : { paddingBottom: 4 }),
-  };
+  } = { color: 'border.minimal' };
 
   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
@@ -140,7 +123,6 @@ const RealStage = ({
           (segmentIndex > 0 ? (
             <SegmentLine
               activeSegmentIndex={activeSegmentIndex}
-              side="left"
               segmentIndex={segmentIndex - (extendLines ? 2 : 1)}
               variant={variant}
             />
@@ -148,17 +130,14 @@ const RealStage = ({
             <div />
           ))}
         <Tooltip isDisabled={!tooltip} {...tooltip}>
-          <Icon color={iconColor} name={iconName} transform={iconTransform} />
+          <Box sx={style.iconContainer}>
+            <Icon color={iconColor} name={iconName} transform={iconTransform} />
+          </Box>
         </Tooltip>
         {lastBlock ? (
           <div />
         ) : (
-          <SegmentLine
-            activeSegmentIndex={activeSegmentIndex}
-            segmentIndex={segmentIndex}
-            side="right"
-            variant={variant}
-          />
+          <SegmentLine activeSegmentIndex={activeSegmentIndex} segmentIndex={segmentIndex} variant={variant} />
         )}
       </Box>
       <Box sx={style.labelContainer}>