@apify/ui-library 1.164.10 → 1.165.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.164.10",
+    "version": "1.165.1",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -75,7 +75,7 @@
         "styled-components": "^6.1.19"
     },
     "devDependencies": {
-        "@apify-packages/types": "^3.431.0",
+        "@apify-packages/types": "^3.431.2",
         "@storybook/react-vite": "^10.3.5",
         "@testing-library/react": "^16.3.2",
         "@types/hast": "^3.0.4",
@@ -95,5 +95,5 @@
         "src",
         "style"
     ],
-    "gitHead": "e8516708c2ab2b928a92fa36ec6c10fb79212243"
+    "gitHead": "d0f82825558dfdb4c756c807fbfdf3dc68b28249"
 }

package/src/components/breadcrumb/breadcrumb.tsx

@@ -29,7 +29,7 @@ const StyledBreadcrumbLink = styled(Link)`
     /* Reserve the bolder hover width via a hidden ::after copy of the label on the same span, so it
        inherits identical font-size/line-height and (with height: 0) adds no height — hovering changes
        the weight without widening the label or shifting the rest of the row. */
-    > span {
+    > span[data-label] {
         display: inline-block;
         /* Center the label within its reserved (bold) width so it grows symmetrically on hover. */
         text-align: center;
@@ -46,7 +46,7 @@ const StyledBreadcrumbLink = styled(Link)`
 
     &:hover {
         color: ${theme.color.neutral.textMuted};
-        span {
+        > span[data-label] {
             /* TODO: (typography-partial) font-weight override without paired font-size/line-height — revisit to confirm intended typography token. */
             font-weight: 500;
         }
@@ -56,10 +56,16 @@ const StyledBreadcrumbLink = styled(Link)`
 const StyledBreadcrumbItemText = styled(Text)`
     padding: ${theme.space.space2} ${theme.space.space4};
     white-space: nowrap;
+
+    > span {
+        margin-left: ${theme.space.space4};
+    }
 `;
 
 export type BreadcrumbItem = {
     label: string;
+    /** Rendered after the label in muted, normal weight - e.g. a "+2" disclosing what the label omits. */
+    labelSuffix?: string;
     url?: string;
     /** Fires a `Clicked` event with this `element` when the crumb is a link. Ignored on the active crumb. */
     trackingId?: string;
@@ -98,6 +104,13 @@ export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items, className }) =>
                                 <Text as="span" size="small" weight="normal" data-label={item.label}>
                                     {item.label}
                                 </Text>
+                                {/* Its own `data-label` earns it the same width reservation as the label, so it
+                                    takes the hover colour and weight without widening the row. */}
+                                {item.labelSuffix && (
+                                    <Text as="span" size="small" weight="normal" data-label={item.labelSuffix}>
+                                        {item.labelSuffix}
+                                    </Text>
+                                )}
                             </StyledBreadcrumbLink>
                         ) : (
                             <StyledBreadcrumbItemText
@@ -106,6 +119,11 @@ export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items, className }) =>
                                 color={isActive ? theme.color.neutral.text : theme.color.neutral.textSubtle}
                             >
                                 {item.label}
+                                {item.labelSuffix && (
+                                    <Text as="span" size="small" weight="normal" color={theme.color.neutral.textSubtle}>
+                                        {item.labelSuffix}
+                                    </Text>
+                                )}
                             </StyledBreadcrumbItemText>
                         )}
                     </span>