@box/blueprint-web 14.7.0 → 14.7.1

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

@@ -9,7 +9,7 @@ import { FolderTreeTruncationView } from './folder-tree-truncation-view.js';
 import { FullView } from './full-view.js';
 import { MobileView } from './mobile-view.js';
 import { useFolderTreeTruncation } from './useFolderTreeTruncation.js';
-import { getSeparatorSize } from './utils.js';
+import { getSeparatorSize, getContainerHeight, getRootIconSize } from './utils.js';
 import styles from './breadcrumb.module.js';
 
 const ELLIPSIS_TRUNCATION_THRESHOLD = 7;
@@ -36,6 +36,9 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     isTruncationRequired,
     visibleCrumbCount
   } = useFolderTreeTruncation(breadcrumbListRef, crumbs, isMobile);
+  const hasTruncation = isMobile || truncationMethod === 'ellipsis' && crumbs.length > ELLIPSIS_TRUNCATION_THRESHOLD || truncationMethod === 'folder-tree' && isTruncationRequired;
+  const rootIconSize = getRootIconSize(size, hasTruncation);
+  const containerHeight = getContainerHeight(size, hasTruncation);
   if (!crumbs || crumbs.length === 0) {
     return null;
   }
@@ -81,6 +84,9 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ref: forwardedRef,
     "aria-label": breadcrumbAriaLabel,
     className: styles.container,
+    style: {
+      height: containerHeight
+    },
     ...rest,
     children: jsxs("ol", {
       ref: breadcrumbListRef,
@@ -88,9 +94,13 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       children: [!isMobile && rootIconVariant && jsxs("li", {
         className: styles.pageLink,
         children: [rootIconVariant === 'home' ? jsx(Home, {
-          "aria-label": rootIconAriaLabel
+          "aria-label": rootIconAriaLabel,
+          height: rootIconSize,
+          width: rootIconSize
         }) : jsx(FolderTree, {
-          "aria-label": rootIconAriaLabel
+          "aria-label": rootIconAriaLabel,
+          height: rootIconSize,
+          width: rootIconSize
         }), jsx(PointerRight, {
           height: getSeparatorSize(size),
           role: "presentation",

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_breadcrumb_module_container--335e0","breadcrumb":"bp_breadcrumb_module_breadcrumb--335e0","pageLink":"bp_breadcrumb_module_pageLink--335e0","linkWithHover":"bp_breadcrumb_module_linkWithHover--335e0","dropdownContent":"bp_breadcrumb_module_dropdownContent--335e0"};
+var styles = {"container":"bp_breadcrumb_module_container--30dee","breadcrumb":"bp_breadcrumb_module_breadcrumb--30dee","pageLink":"bp_breadcrumb_module_pageLink--30dee","linkWithHover":"bp_breadcrumb_module_linkWithHover--30dee","dropdownContent":"bp_breadcrumb_module_dropdownContent--30dee"};
 
 export { styles as default };

package/dist/lib-esm/breadcrumb/ellipsis-truncation-view.js

@@ -3,6 +3,7 @@ import { Ellipsis } from '@box/blueprint-web-assets/icons/Medium';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { BreadcrumbDropdown } from './breadcrumb-dropdown.js';
 import { PageLink } from './page-link.js';
+import { getIconButtonSize } from './utils.js';
 
 const EllipsisTruncationView = ({
   crumbs,
@@ -25,7 +26,7 @@ const EllipsisTruncationView = ({
       iconButton: jsx(IconButton, {
         "aria-label": truncatedLinksIconAriaLabel,
         icon: Ellipsis,
-        size: "small"
+        size: getIconButtonSize(size)
       }),
       onPageLinkClick: onPageLinkClick,
       size: size

package/dist/lib-esm/breadcrumb/folder-tree-truncation-view.js

@@ -3,6 +3,7 @@ import { FolderTree } from '@box/blueprint-web-assets/icons/Fill';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { BreadcrumbDropdown } from './breadcrumb-dropdown.js';
 import { PageLink } from './page-link.js';
+import { getIconButtonSize } from './utils.js';
 
 const FolderTreeTruncationView = ({
   crumbs,
@@ -22,7 +23,7 @@ const FolderTreeTruncationView = ({
       iconButton: jsx(IconButton, {
         "aria-label": truncatedLinksIconAriaLabel,
         icon: FolderTree,
-        size: "small"
+        size: getIconButtonSize(size)
       }),
       listRef: iconButtonRef,
       onPageLinkClick: onPageLinkClick,

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

@@ -3,6 +3,7 @@ import { FolderTree } from '@box/blueprint-web-assets/icons/Fill';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { BreadcrumbDropdown } from './breadcrumb-dropdown.js';
 import { PageLink } from './page-link.js';
+import { getIconButtonSize } from './utils.js';
 
 const MobileView = ({
   crumbs,
@@ -19,7 +20,7 @@ const MobileView = ({
       iconButton: jsx(IconButton, {
         "aria-label": truncatedLinksIconAriaLabel,
         icon: FolderTree,
-        size: "small"
+        size: getIconButtonSize(size)
       }),
       onPageLinkClick: onPageLinkClick,
       size: size

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

@@ -1,4 +1,8 @@
 import { type BreadcrumbProps } from './types';
-export declare const getTextVariantFromSize: (size: BreadcrumbProps["size"]) => "bodyLarge" | "bodyDefault";
-export declare const getBoldTextVariantFromSize: (size: BreadcrumbProps["size"]) => "bodyLargeBold" | "bodyDefaultBold";
+import { type TypographyVariant } from '../text/types';
+export declare const getTextVariantFromSize: (size: BreadcrumbProps["size"]) => TypographyVariant;
+export declare const getBoldTextVariantFromSize: (size: BreadcrumbProps["size"]) => TypographyVariant;
 export declare const getSeparatorSize: (size: BreadcrumbProps["size"]) => string;
+export declare const getRootIconSize: (size: BreadcrumbProps["size"], hasTruncation?: boolean) => string;
+export declare const getContainerHeight: (size: BreadcrumbProps["size"], hasTruncation?: boolean) => string;
+export declare const getIconButtonSize: (size: BreadcrumbProps["size"]) => "x-small" | "small" | "large";

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

@@ -1,34 +1,116 @@
-import { bpSize030, bpSize020 } from '@box/blueprint-web-assets/tokens/tokens';
+import { bpSize030, bpSize040, bpSize020, bpSize060, bpSize080, bpSize050 } from '@box/blueprint-web-assets/tokens/tokens';
 
 const getTextVariantFromSize = size => {
   switch (size) {
+    case 'xsmall':
+      return 'caption';
     case 'small':
       return 'bodyDefault';
     case 'medium':
       return 'bodyLarge';
+    case 'large':
+      return 'titleXLarge';
     default:
       return 'bodyLarge';
   }
 };
 const getBoldTextVariantFromSize = size => {
   switch (size) {
+    case 'xsmall':
+      return 'captionBold';
     case 'small':
       return 'bodyDefaultBold';
     case 'medium':
       return 'bodyLargeBold';
+    case 'large':
+      return 'titleXLarge';
     default:
       return 'bodyLargeBold';
   }
 };
 const getSeparatorSize = size => {
   switch (size) {
+    case 'xsmall':
+      return bpSize020;
     case 'small':
       return bpSize020;
     case 'medium':
       return bpSize030;
+    case 'large':
+      return bpSize040;
     default:
       return bpSize030;
   }
 };
+const getRootIconSize = (size, hasTruncation = false) => {
+  if (hasTruncation) {
+    switch (size) {
+      case 'xsmall':
+        return bpSize060;
+      case 'small':
+        return bpSize060;
+      case 'medium':
+        return bpSize060;
+      case 'large':
+        return bpSize080;
+      default:
+        return bpSize060;
+    }
+  }
+  switch (size) {
+    case 'xsmall':
+      return bpSize040;
+    case 'small':
+      return bpSize040;
+    case 'medium':
+      return bpSize050;
+    case 'large':
+      return bpSize060;
+    default:
+      return bpSize050;
+  }
+};
+const getContainerHeight = (size, hasTruncation = false) => {
+  if (hasTruncation) {
+    switch (size) {
+      case 'xsmall':
+        return bpSize060;
+      case 'small':
+        return bpSize060;
+      case 'medium':
+        return bpSize060;
+      case 'large':
+        return bpSize080;
+      default:
+        return bpSize060;
+    }
+  }
+  switch (size) {
+    case 'xsmall':
+      return bpSize040;
+    case 'small':
+      return bpSize050;
+    case 'medium':
+      return bpSize060;
+    case 'large':
+      return bpSize080;
+    default:
+      return bpSize060;
+  }
+};
+const getIconButtonSize = size => {
+  switch (size) {
+    case 'xsmall':
+      return 'x-small';
+    case 'small':
+      return 'x-small';
+    case 'medium':
+      return 'x-small';
+    case 'large':
+      return 'small';
+    default:
+      return 'x-small';
+  }
+};
 
-export { getBoldTextVariantFromSize, getSeparatorSize, getTextVariantFromSize };
+export { getBoldTextVariantFromSize, getContainerHeight, getIconButtonSize, getRootIconSize, getSeparatorSize, getTextVariantFromSize };

package/dist/lib-esm/index.css

@@ -3072,11 +3072,10 @@
 .bp_menu_item_sections_module_menuItemSideContent--dd1ef.bp_menu_item_sections_module_textOnLightSecondary--dd1ef{
   color:var(--menu-item-text-color);
 }
-.bp_breadcrumb_module_container--335e0{
-  height:var(--bp-size-060);
+.bp_breadcrumb_module_container--30dee{
   width:100%;
 }
-.bp_breadcrumb_module_container--335e0 .bp_breadcrumb_module_breadcrumb--335e0{
+.bp_breadcrumb_module_container--30dee .bp_breadcrumb_module_breadcrumb--30dee{
   align-items:center;
   display:flex;
   flex-wrap:nowrap;
@@ -3086,7 +3085,7 @@
   margin:0;
   padding:0;
 }
-.bp_breadcrumb_module_container--335e0 .bp_breadcrumb_module_pageLink--335e0{
+.bp_breadcrumb_module_container--30dee .bp_breadcrumb_module_pageLink--30dee{
   align-items:center;
   display:flex;
   flex-shrink:0;
@@ -3095,15 +3094,16 @@
   overflow:hidden;
   white-space:nowrap;
 }
-.bp_breadcrumb_module_container--335e0 .bp_breadcrumb_module_pageLink--335e0:last-child{
+.bp_breadcrumb_module_container--30dee .bp_breadcrumb_module_pageLink--30dee:last-child{
   flex-shrink:1;
 }
 
-.bp_breadcrumb_module_linkWithHover--335e0{
+.bp_breadcrumb_module_linkWithHover--30dee{
   cursor:pointer;
+  display:inline-flex;
   position:relative;
 }
-.bp_breadcrumb_module_linkWithHover--335e0::after{
+.bp_breadcrumb_module_linkWithHover--30dee::after{
   background-color:var(--bp-text-text-on-light-secondary);
   bottom:0;
   content:"";
@@ -3115,11 +3115,11 @@
   transition:transform var(--animation-duration-2) var(--animation-easing-ease-base);
   width:100%;
 }
-.bp_breadcrumb_module_linkWithHover--335e0:hover::after{
+.bp_breadcrumb_module_linkWithHover--30dee:hover::after{
   transform:scaleX(1);
 }
 
-.bp_breadcrumb_module_dropdownContent--335e0{
+.bp_breadcrumb_module_dropdownContent--30dee{
   --blueprint-web-dropdown-menu-max-height:calc(var(--bp-size-300)*2);
 }
 .bp_link_module_link--27104{

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "14.7.0",
+    "version": "14.7.1",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^4.112.3",
+        "@box/blueprint-web-assets": "^4.112.4",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.17.30",
+        "@box/storybook-utils": "^0.17.31",
         "@figma/code-connect": "1.3.12",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",