@box/blueprint-web 12.100.4 → 12.102.0

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

@@ -13,6 +13,7 @@ import { getSeparatorSize } from './utils.js';
 
 const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
+    breadcrumbAriaLabel,
     crumbs,
     truncatedLinksIconAriaLabel,
     rootIconAriaLabel,
@@ -29,84 +30,82 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   // If there are more than 7 crumbs, break up crumbs into first link, ellipsis icon button, and current page ancestor
   const shouldTruncateCrumbs = crumbs?.length > 7;
   const shouldUseEllipsisTruncation = truncationMethod === 'ellipsis' && shouldTruncateCrumbs && crumbs;
-  return (
-    // Add aria-label: breadcrumb https://jira.inside-box.net/browse/UXF-427
-    jsx("nav", {
-      ref: forwardedRef,
-      className: styles.container,
-      ...rest,
-      children: jsxs("ol", {
-        className: styles.breadcrumb,
-        children: [rootIconVariant && jsxs("li", {
+  return jsx("nav", {
+    ref: forwardedRef,
+    "aria-label": breadcrumbAriaLabel,
+    className: styles.container,
+    ...rest,
+    children: jsxs("ol", {
+      className: styles.breadcrumb,
+      children: [rootIconVariant && jsxs("li", {
+        className: styles.pageLink,
+        children: [rootIconVariant === 'home' ? jsx(Home, {
+          "aria-label": rootIconAriaLabel
+        }) : jsx(FolderTree, {
+          "aria-label": rootIconAriaLabel
+        }), rootIconVariant && jsx(PointerRight, {
+          height: getSeparatorSize(size),
+          role: "presentation",
+          width: getSeparatorSize(size)
+        })]
+      }), shouldUseEllipsisTruncation && jsxs(Fragment, {
+        children: [jsx(PageLink, {
+          crumb: crumbs[0],
+          isInteractive: isInteractive,
+          isLast: false,
+          onPageLinkClick: onPageLinkClick,
+          size: size
+        }), jsxs("li", {
           className: styles.pageLink,
-          children: [rootIconVariant === 'home' ? jsx(Home, {
-            "aria-label": rootIconAriaLabel
-          }) : jsx(FolderTree, {
-            "aria-label": rootIconAriaLabel
-          }), rootIconVariant && jsx(PointerRight, {
+          children: [jsxs(DropdownMenu.Root, {
+            children: [jsx(DropdownMenu.Trigger, {
+              children: jsx(IconButton, {
+                "aria-label": truncatedLinksIconAriaLabel,
+                className: styles.iconButtonInline,
+                icon: Ellipsis,
+                size: "small"
+              })
+            }), jsx(DropdownMenu.Content, {
+              align: "start",
+              children: crumbs.slice(1, crumbs.length - 2).map(crumb => {
+                return jsx(DropdownMenu.Item, {
+                  onSelect: handlePageLinkClick(crumb.id),
+                  children: jsx(Text, {
+                    as: "span",
+                    children: crumb.name
+                  })
+                }, crumb.id);
+              })
+            })]
+          }), jsx(PointerRight, {
             height: getSeparatorSize(size),
             role: "presentation",
             width: getSeparatorSize(size)
           })]
-        }), shouldUseEllipsisTruncation && jsxs(Fragment, {
-          children: [jsx(PageLink, {
-            crumb: crumbs[0],
-            isInteractive: isInteractive,
-            isLast: false,
-            onPageLinkClick: onPageLinkClick,
-            size: size
-          }), jsxs("li", {
-            className: styles.pageLink,
-            children: [jsxs(DropdownMenu.Root, {
-              children: [jsx(DropdownMenu.Trigger, {
-                children: jsx(IconButton, {
-                  "aria-label": truncatedLinksIconAriaLabel,
-                  className: styles.iconButtonInline,
-                  icon: Ellipsis,
-                  size: "small"
-                })
-              }), jsx(DropdownMenu.Content, {
-                align: "start",
-                children: crumbs.slice(1, crumbs.length - 2).map(crumb => {
-                  return jsx(DropdownMenu.Item, {
-                    onSelect: handlePageLinkClick(crumb.id),
-                    children: jsx(Text, {
-                      as: "span",
-                      children: crumb.name
-                    })
-                  }, crumb.id);
-                })
-              })]
-            }), jsx(PointerRight, {
-              height: getSeparatorSize(size),
-              role: "presentation",
-              width: getSeparatorSize(size)
-            })]
-          }), jsx(PageLink, {
-            crumb: crumbs[crumbs.length - 2],
-            isInteractive: isInteractive,
-            isLast: false,
-            onPageLinkClick: onPageLinkClick,
-            size: size
-          }), jsx(PageLink, {
-            crumb: crumbs[crumbs.length - 1],
-            isInteractive: isInteractive,
-            isLast: true,
-            onPageLinkClick: onPageLinkClick,
-            size: size
-          })]
-        }), !shouldUseEllipsisTruncation && crumbs?.map((crumb, index) => {
-          return jsx(PageLink, {
-            crumb: crumb,
-            isInteractive: isInteractive,
-            isLast: index === crumbs.length - 1,
-            onPageLinkClick: onPageLinkClick,
-            size: size
-          }, crumb.id);
+        }), jsx(PageLink, {
+          crumb: crumbs[crumbs.length - 2],
+          isInteractive: isInteractive,
+          isLast: false,
+          onPageLinkClick: onPageLinkClick,
+          size: size
+        }), jsx(PageLink, {
+          crumb: crumbs[crumbs.length - 1],
+          isInteractive: isInteractive,
+          isLast: true,
+          onPageLinkClick: onPageLinkClick,
+          size: size
         })]
-      })
+      }), !shouldUseEllipsisTruncation && crumbs?.map((crumb, index) => {
+        return jsx(PageLink, {
+          crumb: crumb,
+          isInteractive: isInteractive,
+          isLast: index === crumbs.length - 1,
+          onPageLinkClick: onPageLinkClick,
+          size: size
+        }, crumb.id);
+      })]
     })
-  );
+  });
 });
 Breadcrumb.displayName = 'Breadcrumb';
 

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_breadcrumb_module_container--90cb3","breadcrumb":"bp_breadcrumb_module_breadcrumb--90cb3","pageLink":"bp_breadcrumb_module_pageLink--90cb3"};
+var styles = {"container":"bp_breadcrumb_module_container--51e29","breadcrumb":"bp_breadcrumb_module_breadcrumb--51e29","pageLink":"bp_breadcrumb_module_pageLink--51e29","linkWithHover":"bp_breadcrumb_module_linkWithHover--51e29"};
 
 export { styles as default };

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

@@ -30,9 +30,8 @@ const PageLink = ({
   }
   return jsxs("li", {
     className: styles.pageLink,
-    children: [isInteractive ?
-    // Add hover behavior https://jira.inside-box.net/browse/UXF-428
-    jsx(Link, {
+    children: [isInteractive ? jsx(Link, {
+      className: styles.linkWithHover,
       onClick: handlePageLinkClick,
       variant: "standalone",
       children: jsx(Text, {

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

@@ -6,6 +6,11 @@ export type Crumb = {
     name: string;
 };
 export type BreadcrumbProps = {
+    /**
+     * Aria label for the breadcrumb navigation element.
+     * Suggested value: "Breadcrumb". Consumers can localize or modify this value as needed for their use case.
+     */
+    breadcrumbAriaLabel: string;
     /** Array of breadcrumb items to display. */
     crumbs: Crumb[];
     /** Controls whether individual crumbs (items) and icons are interactive, or clickable. */

package/dist/lib-esm/index.css

@@ -2376,10 +2376,10 @@
   text-decoration-thickness:auto;
   text-underline-offset:auto;
 }
-.bp_breadcrumb_module_container--90cb3{
+.bp_breadcrumb_module_container--51e29{
   height:var(--bp-size-060);
 }
-.bp_breadcrumb_module_container--90cb3 .bp_breadcrumb_module_breadcrumb--90cb3{
+.bp_breadcrumb_module_container--51e29 .bp_breadcrumb_module_breadcrumb--51e29{
   align-items:center;
   display:flex;
   gap:var(--bp-size-010);
@@ -2388,11 +2388,30 @@
   margin:0;
   padding:0;
 }
-.bp_breadcrumb_module_container--90cb3 .bp_breadcrumb_module_pageLink--90cb3{
+.bp_breadcrumb_module_container--51e29 .bp_breadcrumb_module_pageLink--51e29{
   align-items:center;
   display:flex;
   gap:var(--bp-size-010);
 }
+
+.bp_breadcrumb_module_linkWithHover--51e29{
+  position:relative;
+}
+.bp_breadcrumb_module_linkWithHover--51e29::after{
+  background-color:var(--bp-text-text-on-light-secondary);
+  bottom:0;
+  content:"";
+  height:1px;
+  left:0;
+  position:absolute;
+  transform:scaleX(0);
+  transform-origin:center;
+  transition:transform var(--animation-duration-2) var(--animation-easing-ease-base);
+  width:100%;
+}
+.bp_breadcrumb_module_linkWithHover--51e29:hover::after{
+  transform:scaleX(1);
+}
 .bp_button_wrapper_module_buttonWrapper--b0897{
   all:unset;
 }

package/package.json

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