@bitrise/bitkit 12.73.2 → 12.73.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.73.2",
+  "version": "12.73.4",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

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

@@ -21,7 +21,7 @@ const ProgressIndicatorTheme = itemHelpers.defineMultiStyleConfig({
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis',
       overflow: 'hidden',
-      maxWidth: 'calc(100% - 1rem)',
+      maxWidth: 'max(8rem, calc(100% - 1rem))',
       lineHeight: '1.5rem',
       alignSelf: 'flex-start',
     },

package/src/Components/ProgressIndicator/ProgressIndicator.tsx

@@ -57,21 +57,26 @@ const ProgressIndicator = ({ stages, activeStageIndex, variant }: ProgressIndica
           iconColor = 'neutral.80';
         }
 
+        const lastBlock = index === array.length - 1;
+
         return (
           <Box
-            width={variant === 'horizontal' ? `${100 / array.length}%` : 'auto'}
             sx={style.stage}
+            flexGrow={lastBlock ? undefined : '1'}
+            flexBasis={lastBlock ? undefined : `${100 / array.length}%`}
             // eslint-disable-next-line react/no-array-index-key
             key={index}
           >
             <Box sx={style.iconWithLine}>
               <Icon name={iconName} color={iconColor} />
-              <Divider
-                sx={style.line}
-                size="2"
-                orientation={variant === 'horizontal' ? 'horizontal' : 'vertical'}
-                {...dividerProps}
-              />
+              {!lastBlock && (
+                <Divider
+                  sx={style.line}
+                  size="2"
+                  orientation={variant === 'horizontal' ? 'horizontal' : 'vertical'}
+                  {...dividerProps}
+                />
+              )}
             </Box>
             {action && !isDisabled ? (
               <Link

package/src/Components/Tooltip/Tooltip.tsx

@@ -1,13 +1,20 @@
-import { Tooltip as ChakraTooltip, TooltipProps as ChakraTooltipProps, forwardRef, chakra } from '@chakra-ui/react';
+import {
+  Tooltip as ChakraTooltip,
+  TooltipProps as ChakraTooltipProps,
+  forwardRef,
+  chakra,
+  BoxProps,
+} from '@chakra-ui/react';
 
 export interface TooltipProps extends Omit<ChakraTooltipProps, 'shouldWrapChildren'> {
   shouldWrapChildren?: boolean | 'block';
+  wrapperProps?: BoxProps;
 }
 /**
  * A tooltip is a brief, informative message that appears when a user interacts with an element. Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture.
  */
 const Tooltip = forwardRef<TooltipProps, 'div'>((props, ref) => {
-  const { children, shouldWrapChildren, ...rest } = props;
+  const { children, shouldWrapChildren, wrapperProps = {}, ...rest } = props;
   const properties: ChakraTooltipProps = {
     bg: 'neutral.10',
     children,
@@ -18,7 +25,7 @@ const Tooltip = forwardRef<TooltipProps, 'div'>((props, ref) => {
   };
   if (shouldWrapChildren) {
     properties.children = (
-      <chakra.span display={shouldWrapChildren === 'block' ? 'block' : 'inline-block'} tabIndex={0}>
+      <chakra.span sx={wrapperProps} display={shouldWrapChildren === 'block' ? 'block' : 'inline-block'} tabIndex={0}>
         {children}
       </chakra.span>
     );