@box/blueprint-web 12.98.3 → 12.99.0

package/dist/lib-esm/breadcrumb/breadcrumb.js

@@ -9,6 +9,7 @@ import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { Text } from '../text/text.js';
 import { PageLink } from './page-link.js';
 import styles from './breadcrumb.module.js';
+import { getSeparatorSize } from './utils.js';
 
 const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -43,15 +44,17 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
           }) : jsx(FolderTree, {
             "aria-label": rootIconAriaLabel
           }), rootIconVariant && jsx(PointerRight, {
-            className: styles.separator,
-            role: "presentation"
+            height: getSeparatorSize(size),
+            role: "presentation",
+            width: getSeparatorSize(size)
           })]
         }), shouldUseEllipsisTruncation && jsxs(Fragment, {
           children: [jsx(PageLink, {
             crumb: crumbs[0],
             isInteractive: isInteractive,
             isLast: false,
-            onPageLinkClick: onPageLinkClick
+            onPageLinkClick: onPageLinkClick,
+            size: size
           }), jsxs("li", {
             className: styles.pageLink,
             children: [jsxs(DropdownMenu.Root, {
@@ -75,31 +78,31 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
                 })
               })]
             }), jsx(PointerRight, {
-              className: styles.separator,
-              role: "presentation"
+              height: getSeparatorSize(size),
+              role: "presentation",
+              width: getSeparatorSize(size)
             })]
           }), jsx(PageLink, {
             crumb: crumbs[crumbs.length - 2],
             isInteractive: isInteractive,
             isLast: false,
-            onPageLinkClick: onPageLinkClick
+            onPageLinkClick: onPageLinkClick,
+            size: size
           }), jsx(PageLink, {
             crumb: crumbs[crumbs.length - 1],
             isInteractive: isInteractive,
             isLast: true,
-            onPageLinkClick: onPageLinkClick
+            onPageLinkClick: onPageLinkClick,
+            size: size
           })]
         }), !shouldUseEllipsisTruncation && crumbs?.map((crumb, index) => {
           return jsx(PageLink, {
             crumb: crumb,
             isInteractive: isInteractive,
             isLast: index === crumbs.length - 1,
-            onPageLinkClick: onPageLinkClick
+            onPageLinkClick: onPageLinkClick,
+            size: size
           }, crumb.id);
-        }), jsx("li", {
-          children: jsxs("span", {
-            children: [size, " size breadcrumb"]
-          })
         })]
       })
     })

package/dist/lib-esm/breadcrumb/breadcrumb.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_breadcrumb_module_container--ce1b6","breadcrumb":"bp_breadcrumb_module_breadcrumb--ce1b6","pageLink":"bp_breadcrumb_module_pageLink--ce1b6","pageLinkInteractive":"bp_breadcrumb_module_pageLinkInteractive--ce1b6","separator":"bp_breadcrumb_module_separator--ce1b6"};
+var styles = {"container":"bp_breadcrumb_module_container--19a63","breadcrumb":"bp_breadcrumb_module_breadcrumb--19a63","pageLink":"bp_breadcrumb_module_pageLink--19a63"};
 
 export { styles as default };

package/dist/lib-esm/breadcrumb/page-link.d.ts

@@ -11,5 +11,7 @@ export interface PageLinkProps {
     isInteractive: boolean;
     /** The callback to call when the page link is clicked. */
     onPageLinkClick: (id: string) => void;
+    /** The text size of the page link. */
+    size: 'xsmall' | 'small' | 'medium' | 'large';
 }
-export declare const PageLink: ({ crumb, isLast, isInteractive, onPageLinkClick }: PageLinkProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PageLink: ({ crumb, isLast, isInteractive, onPageLinkClick, size }: PageLinkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib-esm/breadcrumb/page-link.js

@@ -4,12 +4,14 @@ import { PointerRight } from '@box/blueprint-web-assets/icons/Fill';
 import { Link } from '../primitives/link/link.js';
 import { Text } from '../text/text.js';
 import styles from './breadcrumb.module.js';
+import { getTextVariantFromSize, getSeparatorSize } from './utils.js';
 
 const PageLink = ({
   crumb,
   isLast,
   isInteractive,
-  onPageLinkClick
+  onPageLinkClick,
+  size
 }) => {
   const handlePageLinkClick = useCallback(() => {
     onPageLinkClick(crumb.id);
@@ -21,7 +23,7 @@ const PageLink = ({
         "aria-current": "page",
         as: "span",
         color: "textOnLightDefault",
-        variant: "bodyLarge",
+        variant: getTextVariantFromSize(size),
         children: crumb.name
       })
     }, crumb.id);
@@ -31,17 +33,22 @@ const PageLink = ({
     children: [isInteractive ?
     // Add hover behavior https://jira.inside-box.net/browse/UXF-428
     jsx(Link, {
-      className: styles.pageLinkInteractive,
-      inheritFont: true,
       onClick: handlePageLinkClick,
       variant: "standalone",
-      children: crumb.name
+      children: jsx(Text, {
+        as: "span",
+        color: "textOnLightSecondary",
+        variant: getTextVariantFromSize(size),
+        children: crumb.name
+      })
     }) : jsx(Text, {
       as: "span",
+      variant: getTextVariantFromSize(size),
       children: crumb.name
     }), jsx(PointerRight, {
-      className: styles.separator,
-      role: "presentation"
+      height: getSeparatorSize(size),
+      role: "presentation",
+      width: getSeparatorSize(size)
     })]
   }, crumb.id);
 };

package/dist/lib-esm/breadcrumb/utils.d.ts

@@ -0,0 +1,3 @@
+import { type BreadcrumbProps } from './types';
+export declare const getTextVariantFromSize: (size: BreadcrumbProps["size"]) => "bodyDefault" | "bodyLarge";
+export declare const getSeparatorSize: (size: BreadcrumbProps["size"]) => string;

package/dist/lib-esm/breadcrumb/utils.js

@@ -0,0 +1,24 @@
+import { bpSize030, bpSize020 } from '@box/blueprint-web-assets/tokens/tokens';
+
+const getTextVariantFromSize = size => {
+  switch (size) {
+    case 'small':
+      return 'bodyDefault';
+    case 'medium':
+      return 'bodyLarge';
+    default:
+      return 'bodyLarge';
+  }
+};
+const getSeparatorSize = size => {
+  switch (size) {
+    case 'small':
+      return bpSize020;
+    case 'medium':
+      return bpSize030;
+    default:
+      return bpSize030;
+  }
+};
+
+export { getSeparatorSize, getTextVariantFromSize };

package/dist/lib-esm/index.css

@@ -2370,29 +2370,21 @@
   text-decoration-thickness:auto;
   text-underline-offset:auto;
 }
-.bp_breadcrumb_module_container--ce1b6{
-  color:var(--bp-text-text-on-light-tertiary);
-  font-size:var(--bp-font-size-06);
-  line-height:var(--bp-size-060);
+.bp_breadcrumb_module_container--19a63{
+  height:var(--bp-size-060);
 }
-.bp_breadcrumb_module_container--ce1b6 .bp_breadcrumb_module_breadcrumb--ce1b6{
+.bp_breadcrumb_module_container--19a63 .bp_breadcrumb_module_breadcrumb--19a63{
   align-items:center;
   display:flex;
   gap:var(--bp-size-010);
+  height:100%;
   list-style:none;
 }
-.bp_breadcrumb_module_container--ce1b6 .bp_breadcrumb_module_pageLink--ce1b6{
+.bp_breadcrumb_module_container--19a63 .bp_breadcrumb_module_pageLink--19a63{
   align-items:center;
   display:flex;
   gap:var(--bp-size-010);
 }
-.bp_breadcrumb_module_container--ce1b6 .bp_breadcrumb_module_pageLink--ce1b6 .bp_breadcrumb_module_pageLinkInteractive--ce1b6{
-  color:inherit;
-}
-.bp_breadcrumb_module_container--ce1b6 .bp_breadcrumb_module_pageLink--ce1b6 .bp_breadcrumb_module_separator--ce1b6{
-  height:var(--bp-size-030);
-  width:var(--bp-size-030);
-}
 .bp_button_wrapper_module_buttonWrapper--b0897{
   all:unset;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.98.3",
+    "version": "12.99.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {