@box/blueprint-web 14.7.0 → 14.8.0

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{
@@ -11669,12 +11669,12 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   background-color:var(--switch-bg-on-hover);
 }
 
-.bp_text_button_module_textButton--2f400[data-modern=false]{
+.bp_text_button_module_textButton--997ae[data-modern=false]{
   --text-button-text-color:var(--text-cta-link);
   --text-button-radius:calc(var(--radius-1)/2);
   --text-button-padding:0;
   --text-button-scale-loader-width:var(--size-05);
-  --text-button-scale-loader-height:.625em;
+  --text-button-scale-loader-height:0.625em;
   --text-button-scale-loader-border-radius:var(--radius-2);
   --text-button-text-color-hover:var(--text-cta-link-hover);
   --text-button-focus-box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
@@ -11687,20 +11687,20 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_text_button_module_textButton--2f400[data-modern=false].bp_text_button_module_isFontInherited--2f400{
+.bp_text_button_module_textButton--997ae[data-modern=false].bp_text_button_module_isFontInherited--997ae{
   --text-button-radius-font-inherited:0.125em;
   --text-button-outline:var(--outline-focus-on-light);
 }
-.bp_text_button_module_textButton--2f400[data-modern=false].bp_text_button_module_isIconButton--2f400{
+.bp_text_button_module_textButton--997ae[data-modern=false].bp_text_button_module_isIconButton--997ae{
   --text-button-gap:var(--space-1);
 }
 
-.bp_text_button_module_textButton--2f400[data-modern=true]{
+.bp_text_button_module_textButton--997ae[data-modern=true]{
   --text-button-text-color:var(--bp-text-cta-link);
   --text-button-radius:var(--bp-radius-04);
   --text-button-padding:0 var(--bp-space-010);
   --text-button-scale-loader-width:var(--bp-size-005);
-  --text-button-scale-loader-height:.625em;
+  --text-button-scale-loader-height:0.625em;
   --text-button-scale-loader-border-radius:var(--bp-radius-03);
   --text-button-text-color-hover:var(--bp-text-cta-link-hover);
   --text-button-focus-box-shadow:0 0 0 var(--bp-border-02) var(--bp-outline-focus-on-light);
@@ -11712,15 +11712,15 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-04);
 }
-.bp_text_button_module_textButton--2f400[data-modern=true].bp_text_button_module_isFontInherited--2f400{
+.bp_text_button_module_textButton--997ae[data-modern=true].bp_text_button_module_isFontInherited--997ae{
   --text-button-radius-font-inherited:0.375em;
   --text-button-outline:var(--bp-outline-focus-on-light);
 }
-.bp_text_button_module_textButton--2f400[data-modern=true].bp_text_button_module_isIconButton--2f400{
+.bp_text_button_module_textButton--997ae[data-modern=true].bp_text_button_module_isIconButton--997ae{
   --text-button-gap:var(--bp-space-010);
 }
 
-.bp_text_button_module_textButton--2f400{
+.bp_text_button_module_textButton--997ae{
   align-items:center;
   background:#0000;
   border:none;
@@ -11733,59 +11733,65 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   -webkit-user-select:text;
           user-select:text;
 }
-.bp_text_button_module_textButton--2f400.bp_text_button_module_isFontInherited--2f400{
+.bp_text_button_module_textButton--997ae.bp_text_button_module_isFontInherited--997ae{
   border-radius:var(--text-button-radius-font-inherited);
   font:inherit;
 }
-.bp_text_button_module_textButton--2f400.bp_text_button_module_isFontInherited--2f400.bp_text_button_module_isIconButton--2f400{
+.bp_text_button_module_textButton--997ae.bp_text_button_module_isFontInherited--997ae.bp_text_button_module_isIconButton--997ae{
   gap:.25em;
 }
-.bp_text_button_module_textButton--2f400.bp_text_button_module_isFontInherited--2f400:not(:disabled)[data-focus-visible]{
+.bp_text_button_module_textButton--997ae.bp_text_button_module_isFontInherited--997ae:not(:disabled)[data-focus-visible]{
   box-shadow:0 0 0 .125em var(--text-button-outline);
 }
-.bp_text_button_module_textButton--2f400 .bp_text_button_module_scaleLoader--2f400 div{
+.bp_text_button_module_textButton--997ae .bp_text_button_module_scaleLoader--997ae div{
   border-radius:var(--text-button-scale-loader-border-radius);
   height:var(--text-button-scale-loader-height);
   width:var(--text-button-scale-loader-width);
 }
-.bp_text_button_module_textButton--2f400 .bp_text_button_module_icon--2f400{
+.bp_text_button_module_textButton--997ae .bp_text_button_module_icon--997ae{
   align-items:center;
   display:flex;
 }
-.bp_text_button_module_textButton--2f400 .bp_text_button_module_hideTextContent--2f400{
+.bp_text_button_module_textButton--997ae .bp_text_button_module_hideTextContent--997ae{
   visibility:hidden;
 }
-.bp_text_button_module_textButton--2f400.bp_text_button_module_isEllipsized--2f400{
+.bp_text_button_module_textButton--997ae.bp_text_button_module_isEllipsized--997ae{
   max-width:100%;
 }
-.bp_text_button_module_textButton--2f400.bp_text_button_module_isEllipsized--2f400 .bp_text_button_module_text--2f400{
+.bp_text_button_module_textButton--997ae.bp_text_button_module_isEllipsized--997ae .bp_text_button_module_text--997ae{
   display:block;
   min-width:0;
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
 }
-.bp_text_button_module_textButton--2f400.bp_text_button_module_isIconButton--2f400{
+.bp_text_button_module_textButton--997ae.bp_text_button_module_isIconButton--997ae{
   gap:var(--text-button-gap);
 }
-.bp_text_button_module_textButton--2f400.bp_text_button_module_visuallyHidden--2f400{
+.bp_text_button_module_textButton--997ae.bp_text_button_module_visuallyHidden--997ae{
   color:#0000;
   pointer-events:none;
   position:relative;
 }
-.bp_text_button_module_textButton--2f400:disabled{
+.bp_text_button_module_textButton--997ae:disabled{
   opacity:.3;
 }
-.bp_text_button_module_textButton--2f400:not(:disabled):hover,.bp_text_button_module_textButton--2f400:not(:disabled)[data-focus-visible]{
+.bp_text_button_module_textButton--997ae:not(:disabled):hover,.bp_text_button_module_textButton--997ae:not(:disabled)[data-focus-visible]{
   color:var(--text-button-text-color-hover);
 }
-.bp_text_button_module_textButton--2f400:not(:disabled)[data-focus-visible]{
+.bp_text_button_module_textButton--997ae:not(:disabled)[data-focus-visible]{
   box-shadow:var(--text-button-focus-box-shadow);
 }
-.bp_text_button_module_textButton--2f400:not(:disabled):active{
+.bp_text_button_module_textButton--997ae:not(:disabled):active{
   color:var(--text-button-text-color-active);
 }
 
+.bp_text_button_module_textButton--997ae[data-bp-animated=true]{
+  transition-duration:var(--bp-duration-short);
+  transition-property:color;
+  transition-timing-function:var(--bp-curve-small-on);
+}
+
 .bp_text_input_module_textInput--ede11.bp_text_input_module_textInput--ede11.bp_text_input_module_textInput--ede11 input:has(+ .bp_text_input_module_iconEnd--ede11){
   padding-inline-end:1.875rem;
 }

package/dist/lib-esm/text-button/text-button.js

@@ -5,6 +5,7 @@ import { forwardRef, useRef, createElement } from 'react';
 import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
 import { Text } from '../text/text.js';
 import { TooltipWrapper } from '../utils/TooltipWrapper.js';
+import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
 import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { getButtonOptions } from '../utils/getButtonOptions.js';
 import { useIsEllipsized } from '../utils/useIsEllipsized.js';
@@ -27,6 +28,10 @@ const TextButton = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     enableModernizedComponents
   } = useBlueprintModernization();
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('TextButton');
   const textRef = useRef(null);
   const isEllipsized = useIsEllipsized(ellipsizable ? textRef : {
     current: null
@@ -46,6 +51,7 @@ const TextButton = /*#__PURE__*/forwardRef((props, ref) => {
         [styles.isFontInherited]: inheritFont,
         [styles.isEllipsized]: ellipsizable
       }, className),
+      "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
       "data-modern": dataModernValue,
       children: [variant || color ? jsx(Text, {
         ref: textRef,

package/dist/lib-esm/text-button/text-button.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"textButton":"bp_text_button_module_textButton--2f400","isFontInherited":"bp_text_button_module_isFontInherited--2f400","isIconButton":"bp_text_button_module_isIconButton--2f400","scaleLoader":"bp_text_button_module_scaleLoader--2f400","icon":"bp_text_button_module_icon--2f400","hideTextContent":"bp_text_button_module_hideTextContent--2f400","isEllipsized":"bp_text_button_module_isEllipsized--2f400","text":"bp_text_button_module_text--2f400","visuallyHidden":"bp_text_button_module_visuallyHidden--2f400"};
+var styles = {"textButton":"bp_text_button_module_textButton--997ae","isFontInherited":"bp_text_button_module_isFontInherited--997ae","isIconButton":"bp_text_button_module_isIconButton--997ae","scaleLoader":"bp_text_button_module_scaleLoader--997ae","icon":"bp_text_button_module_icon--997ae","hideTextContent":"bp_text_button_module_hideTextContent--997ae","isEllipsized":"bp_text_button_module_isEllipsized--997ae","text":"bp_text_button_module_text--997ae","visuallyHidden":"bp_text_button_module_visuallyHidden--997ae"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "14.7.0",
+    "version": "14.8.0",
     "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.5",
         "@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.32",
         "@figma/code-connect": "1.3.12",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",