@box/blueprint-web 12.131.0 → 12.132.1

package/dist/lib-esm/index.css

@@ -11366,7 +11366,7 @@ 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--97dc1[data-modern=false]{
+.bp_text_button_module_textButton--d9331[data-modern=false]{
   --text-button-text-color:var(--text-cta-link);
   --text-button-radius:calc(var(--radius-1)/2);
   --text-button-padding:0;
@@ -11385,15 +11385,15 @@ 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--97dc1[data-modern=false].bp_text_button_module_isFontInherited--97dc1{
+.bp_text_button_module_textButton--d9331[data-modern=false].bp_text_button_module_isFontInherited--d9331{
   --text-button-radius-font-inherited:0.125em;
   --text-button-outline:var(--outline-focus-on-light);
 }
-.bp_text_button_module_textButton--97dc1[data-modern=false].bp_text_button_module_isIconButton--97dc1{
+.bp_text_button_module_textButton--d9331[data-modern=false].bp_text_button_module_isIconButton--d9331{
   --text-button-gap:var(--space-1);
 }
 
-.bp_text_button_module_textButton--97dc1[data-modern=true]{
+.bp_text_button_module_textButton--d9331[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);
@@ -11410,15 +11410,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--97dc1[data-modern=true].bp_text_button_module_isFontInherited--97dc1{
+.bp_text_button_module_textButton--d9331[data-modern=true].bp_text_button_module_isFontInherited--d9331{
   --text-button-radius-font-inherited:0.375em;
   --text-button-outline:var(--bp-outline-focus-on-light);
 }
-.bp_text_button_module_textButton--97dc1[data-modern=true].bp_text_button_module_isIconButton--97dc1{
+.bp_text_button_module_textButton--d9331[data-modern=true].bp_text_button_module_isIconButton--d9331{
   --text-button-gap:var(--bp-space-010);
 }
 
-.bp_text_button_module_textButton--97dc1{
+.bp_text_button_module_textButton--d9331{
   align-items:center;
   background:#0000;
   border:none;
@@ -11431,46 +11431,56 @@ 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--97dc1.bp_text_button_module_isFontInherited--97dc1{
+.bp_text_button_module_textButton--d9331.bp_text_button_module_isFontInherited--d9331{
   border-radius:var(--text-button-radius-font-inherited);
   font:inherit;
 }
-.bp_text_button_module_textButton--97dc1.bp_text_button_module_isFontInherited--97dc1.bp_text_button_module_isIconButton--97dc1{
+.bp_text_button_module_textButton--d9331.bp_text_button_module_isFontInherited--d9331.bp_text_button_module_isIconButton--d9331{
   gap:.25em;
 }
-.bp_text_button_module_textButton--97dc1.bp_text_button_module_isFontInherited--97dc1:not(:disabled)[data-focus-visible]{
+.bp_text_button_module_textButton--d9331.bp_text_button_module_isFontInherited--d9331:not(:disabled)[data-focus-visible]{
   box-shadow:0 0 0 .125em var(--text-button-outline);
 }
-.bp_text_button_module_textButton--97dc1 .bp_text_button_module_scaleLoader--97dc1 div{
+.bp_text_button_module_textButton--d9331 .bp_text_button_module_scaleLoader--d9331 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--97dc1 .bp_text_button_module_icon--97dc1{
+.bp_text_button_module_textButton--d9331 .bp_text_button_module_icon--d9331{
   align-items:center;
   display:flex;
 }
-.bp_text_button_module_textButton--97dc1 .bp_text_button_module_hideTextContent--97dc1{
+.bp_text_button_module_textButton--d9331 .bp_text_button_module_hideTextContent--d9331{
   visibility:hidden;
 }
-.bp_text_button_module_textButton--97dc1.bp_text_button_module_isIconButton--97dc1{
+.bp_text_button_module_textButton--d9331.bp_text_button_module_isEllipsized--d9331{
+  max-width:100%;
+}
+.bp_text_button_module_textButton--d9331.bp_text_button_module_isEllipsized--d9331 .bp_text_button_module_text--d9331{
+  display:block;
+  min-width:0;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.bp_text_button_module_textButton--d9331.bp_text_button_module_isIconButton--d9331{
   gap:var(--text-button-gap);
 }
-.bp_text_button_module_textButton--97dc1.bp_text_button_module_visuallyHidden--97dc1{
+.bp_text_button_module_textButton--d9331.bp_text_button_module_visuallyHidden--d9331{
   color:#0000;
   pointer-events:none;
   position:relative;
 }
-.bp_text_button_module_textButton--97dc1:disabled{
+.bp_text_button_module_textButton--d9331:disabled{
   opacity:.3;
 }
-.bp_text_button_module_textButton--97dc1:not(:disabled):hover,.bp_text_button_module_textButton--97dc1:not(:disabled)[data-focus-visible]{
+.bp_text_button_module_textButton--d9331:not(:disabled):hover,.bp_text_button_module_textButton--d9331:not(:disabled)[data-focus-visible]{
   color:var(--text-button-text-color-hover);
 }
-.bp_text_button_module_textButton--97dc1:not(:disabled)[data-focus-visible]{
+.bp_text_button_module_textButton--d9331:not(:disabled)[data-focus-visible]{
   box-shadow:var(--text-button-focus-box-shadow);
 }
-.bp_text_button_module_textButton--97dc1:not(:disabled):active{
+.bp_text_button_module_textButton--d9331:not(:disabled):active{
   color:var(--text-button-text-color-active);
 }
 

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

@@ -1,59 +1,85 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Button } from '@ariakit/react';
 import clsx from 'clsx';
-import { forwardRef, createElement } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
+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 { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { getButtonOptions } from '../utils/getButtonOptions.js';
+import { useIsEllipsized } from '../utils/useIsEllipsized.js';
 import styles from './text-button.module.js';
 
 const TextButton = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
+    color,
     loading,
     loadingAriaLabel,
     icon,
     inheritFont,
     className,
-    textRef,
+    ellipsizable,
+    tooltipSide,
+    variant,
     ...rest
   } = getButtonOptions(props);
   const {
     enableModernizedComponents
   } = useBlueprintModernization();
+  const textRef = useRef(null);
+  const isEllipsized = useIsEllipsized(ellipsizable ? textRef : {
+    current: null
+  });
   const iconsSize = `0.875${inheritFont ? 'em' : 'rem'}`;
-  return jsxs(Button, {
-    ...rest,
-    ref: ref,
-    className: clsx(styles.textButton, {
-      [styles.visuallyHidden]: loading,
-      [styles.isIconButton]: Boolean(icon),
-      [styles.isFontInherited]: inheritFont
-    }, className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
-    children: [jsx("span", {
-      ref: textRef,
-      className: clsx({
-        [styles.hideTextContent]: loading
-      }),
-      children: children
-    }), icon ? jsx("span", {
-      className: clsx(styles.icon, {
-        [styles.loading]: loading
-      }),
-      children: /*#__PURE__*/createElement(icon, {
-        width: iconsSize,
-        height: iconsSize,
-        role: 'presentation',
-        color: loading ? 'transparent' : 'currentColor'
-      })
-    }) : null, loading && loadingAriaLabel ? jsx(LoadingIndicator, {
-      "aria-label": loadingAriaLabel,
-      className: clsx({
-        [styles.scaleLoader]: inheritFont
-      }),
-      variant: "default"
-    }) : null]
+  const dataModernValue = enableModernizedComponents ? 'true' : 'false';
+  return jsx(TooltipWrapper, {
+    tooltipContent: children,
+    tooltipSide: tooltipSide,
+    withTooltip: isEllipsized,
+    children: jsxs(Button, {
+      ...rest,
+      ref: ref,
+      className: clsx(styles.textButton, {
+        [styles.visuallyHidden]: loading,
+        [styles.isIconButton]: Boolean(icon),
+        [styles.isFontInherited]: inheritFont,
+        [styles.isEllipsized]: ellipsizable
+      }, className),
+      "data-modern": dataModernValue,
+      children: [variant || color ? jsx(Text, {
+        ref: textRef,
+        as: "span",
+        className: clsx(styles.text, {
+          [styles.hideTextContent]: loading
+        }),
+        color: color,
+        variant: variant,
+        children: children
+      }) : jsx("span", {
+        ref: textRef,
+        className: clsx(styles.text, {
+          [styles.hideTextContent]: loading
+        }),
+        children: children
+      }), icon ? jsx("span", {
+        className: clsx(styles.icon, {
+          [styles.loading]: loading
+        }),
+        children: /*#__PURE__*/createElement(icon, {
+          width: iconsSize,
+          height: iconsSize,
+          role: 'presentation',
+          color: loading ? 'transparent' : 'currentColor'
+        })
+      }) : null, loading && loadingAriaLabel ? jsx(LoadingIndicator, {
+        "aria-label": loadingAriaLabel,
+        className: clsx({
+          [styles.scaleLoader]: inheritFont
+        }),
+        variant: "default"
+      }) : null]
+    })
   });
 });
 TextButton.displayName = 'TextButton';

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--97dc1","isFontInherited":"bp_text_button_module_isFontInherited--97dc1","isIconButton":"bp_text_button_module_isIconButton--97dc1","scaleLoader":"bp_text_button_module_scaleLoader--97dc1","icon":"bp_text_button_module_icon--97dc1","hideTextContent":"bp_text_button_module_hideTextContent--97dc1","visuallyHidden":"bp_text_button_module_visuallyHidden--97dc1"};
+var styles = {"textButton":"bp_text_button_module_textButton--d9331","isFontInherited":"bp_text_button_module_isFontInherited--d9331","isIconButton":"bp_text_button_module_isIconButton--d9331","scaleLoader":"bp_text_button_module_scaleLoader--d9331","icon":"bp_text_button_module_icon--d9331","hideTextContent":"bp_text_button_module_hideTextContent--d9331","isEllipsized":"bp_text_button_module_isEllipsized--d9331","text":"bp_text_button_module_text--d9331","visuallyHidden":"bp_text_button_module_visuallyHidden--d9331"};
 
 export { styles as default };

package/dist/lib-esm/text-button/types.d.ts

@@ -1,6 +1,8 @@
 import { type ButtonProps as AriakitButtonProps } from '@ariakit/react';
-import { type FunctionComponent, type PropsWithChildren, type Ref, type SVGProps } from 'react';
+import { type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
 import { type RequireAllOrNone } from 'type-fest';
+import { type TypographyColor, type TypographyVariant } from '../text/types';
+import { type TooltipProps } from '../tooltip';
 export interface Loading {
     /** Whether the button is loading. */
     loading?: boolean;
@@ -10,6 +12,20 @@ export interface Loading {
 export interface TextButtonBase extends AriakitButtonProps {
     /** Text content to display in the button. */
     children: string | string[];
+    /**
+     * Use `TypographyColor` values to adjust color of text for the button.
+     *
+     * @default textOnLightDefault
+     */
+    color?: TypographyColor;
+    /**
+     * Whether the button text should be ellipsized when it overflows.
+     *
+     * When enabled, applies ellipsis styles and shows a tooltip with the full text when truncated.
+     *
+     * Only set this to `true` when the button has a width constraint (e.g., a parent with a fixed width).
+     */
+    ellipsizable?: boolean;
     /** Icon that will be placed after the children text. */
     icon?: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
     /**
@@ -18,13 +34,19 @@ export interface TextButtonBase extends AriakitButtonProps {
      * Useful when Button is within the block of the text, to apply the same style for whole content.
      *
      * When property is falsy, button uses default style.
-     * */
+     */
     inheritFont?: boolean;
     /**
-     * Ref to the inner span element that wraps the text content.
+     * The side of the button where the tooltip should appear when text is ellipsized.
+     *
+     * Only used when `ellipsizable` is true.
+     */
+    tooltipSide?: TooltipProps['side'];
+    /**
+     * Typographic style of text
      *
-     * Useful for measuring text overflow with hooks like `useIsEllipsized`.
+     * @default bodyDefault
      */
-    textRef?: Ref<HTMLSpanElement>;
+    variant?: TypographyVariant;
 }
 export type TextButtonProps = TextButtonBase & RequireAllOrNone<Loading, keyof Loading>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.131.0",
+    "version": "12.132.1",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.15",
         "@ariakit/react-core": "0.4.15",
-        "@box/blueprint-web-assets": "^4.99.4",
+        "@box/blueprint-web-assets": "^4.99.6",
         "@internationalized/date": "^3.7.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.16.30",
+        "@box/storybook-utils": "^0.16.32",
         "@figma/code-connect": "1.3.12",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",