@box/blueprint-web 14.7.1 → 14.8.0

package/dist/lib-esm/index.css

@@ -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.1",
+    "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.4",
+        "@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.31",
+        "@box/storybook-utils": "^0.17.32",
         "@figma/code-connect": "1.3.12",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",