@box/blueprint-web 12.19.0 → 12.20.0

package/dist/lib-esm/index.css

@@ -6906,12 +6906,50 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   opacity:60%;
 }
 
-.bp_text_button_module_textButton--3f667{
+.bp_text_button_module_textButton--e9554[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-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);
+  --text-button-text-color-active:var(--text-cta-link-pressed);
+}
+.bp_text_button_module_textButton--e9554[data-modern=false].bp_text_button_module_isFontInherited--e9554{
+  --text-button-radius-font-inherited:0.125em;
+  --text-button-outline:var(--outline-focus-on-light);
+}
+.bp_text_button_module_textButton--e9554[data-modern=false].bp_text_button_module_isIconButton--e9554{
+  --text-button-gap:var(--space-1);
+}
+
+.bp_text_button_module_textButton--e9554[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-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);
+  --text-button-text-color-active:var(--bp-text-cta-link-pressed);
+}
+.bp_text_button_module_textButton--e9554[data-modern=true].bp_text_button_module_isFontInherited--e9554{
+  --text-button-radius-font-inherited:0.375em;
+  --text-button-outline:var(--bp-outline-focus-on-light);
+}
+.bp_text_button_module_textButton--e9554[data-modern=true].bp_text_button_module_isIconButton--e9554{
+  --text-button-gap:var(--bp-space-010);
+}
+
+.bp_text_button_module_textButton--e9554{
   align-items:center;
   background:#0000;
   border:none;
-  border-radius:calc(var(--radius-1)/2);
-  color:var(--text-cta-link);
+  border-radius:var(--text-button-radius);
+  color:var(--text-button-text-color);
   cursor:pointer;
   display:inline-flex;
   font-family:var(--body-default-bold-font-family);
@@ -6920,54 +6958,54 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   letter-spacing:var(--body-default-bold-letter-spacing);
   line-height:var(--body-default-bold-line-height);
   outline:0;
-  padding:0;
+  padding:var(--text-button-padding);
   -webkit-text-decoration:var(--body-default-bold-text-decoration);
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
   -webkit-user-select:text;
           user-select:text;
 }
-.bp_text_button_module_textButton--3f667.bp_text_button_module_isFontInherited--3f667{
-  border-radius:.125em;
+.bp_text_button_module_textButton--e9554.bp_text_button_module_isFontInherited--e9554{
+  border-radius:var(--text-button-radius-font-inherited);
   font:inherit;
 }
-.bp_text_button_module_textButton--3f667.bp_text_button_module_isFontInherited--3f667.bp_text_button_module_isIconButton--3f667{
+.bp_text_button_module_textButton--e9554.bp_text_button_module_isFontInherited--e9554.bp_text_button_module_isIconButton--e9554{
   gap:.25em;
 }
-.bp_text_button_module_textButton--3f667.bp_text_button_module_isFontInherited--3f667:not(:disabled)[data-focus-visible]{
-  box-shadow:0 0 0 .125em var(--outline-focus-on-light);
+.bp_text_button_module_textButton--e9554.bp_text_button_module_isFontInherited--e9554:not(:disabled)[data-focus-visible]{
+  box-shadow:0 0 0 .125em var(--text-button-outline);
 }
-.bp_text_button_module_textButton--3f667 .bp_text_button_module_scaleLoader--3f667 div{
-  border-radius:.375em;
-  height:.625em;
-  width:.125em;
+.bp_text_button_module_textButton--e9554 .bp_text_button_module_scaleLoader--e9554 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--3f667 .bp_text_button_module_icon--3f667{
+.bp_text_button_module_textButton--e9554 .bp_text_button_module_icon--e9554{
   align-items:center;
   display:flex;
 }
-.bp_text_button_module_textButton--3f667 .bp_text_button_module_hideTextContent--3f667{
+.bp_text_button_module_textButton--e9554 .bp_text_button_module_hideTextContent--e9554{
   visibility:hidden;
 }
-.bp_text_button_module_textButton--3f667.bp_text_button_module_isIconButton--3f667{
-  gap:var(--space-1);
+.bp_text_button_module_textButton--e9554.bp_text_button_module_isIconButton--e9554{
+  gap:var(--text-button-gap);
 }
-.bp_text_button_module_textButton--3f667.bp_text_button_module_visuallyHidden--3f667{
+.bp_text_button_module_textButton--e9554.bp_text_button_module_visuallyHidden--e9554{
   color:#0000;
   pointer-events:none;
   position:relative;
 }
-.bp_text_button_module_textButton--3f667:disabled{
+.bp_text_button_module_textButton--e9554:disabled{
   opacity:.3;
 }
-.bp_text_button_module_textButton--3f667:not(:disabled):hover,.bp_text_button_module_textButton--3f667:not(:disabled)[data-focus-visible]{
-  color:var(--text-cta-link-hover);
+.bp_text_button_module_textButton--e9554:not(:disabled):hover,.bp_text_button_module_textButton--e9554:not(:disabled)[data-focus-visible]{
+  color:var(--text-button-text-color-hover);
 }
-.bp_text_button_module_textButton--3f667:not(:disabled)[data-focus-visible]{
-  box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
+.bp_text_button_module_textButton--e9554:not(:disabled)[data-focus-visible]{
+  box-shadow:var(--text-button-focus-box-shadow);
 }
-.bp_text_button_module_textButton--3f667:not(:disabled):active{
-  color:var(--text-cta-link-pressed);
+.bp_text_button_module_textButton--e9554:not(:disabled):active{
+  color:var(--text-button-text-color-active);
 }
 
 .bp_text_input_module_textInput--ea95d.bp_text_input_module_textInput--ea95d.bp_text_input_module_textInput--ea95d input:has(+ .bp_text_input_module_iconEnd--ea95d){

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

@@ -2,6 +2,7 @@ import { jsxs, jsx } 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 { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
 import { getButtonOptions } from '../utils/getButtonOptions.js';
 import styles from './text-button.module.js';
@@ -16,6 +17,9 @@ const TextButton = /*#__PURE__*/forwardRef((props, ref) => {
     className,
     ...rest
   } = getButtonOptions(props);
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const iconsSize = `0.875${inheritFont ? 'em' : 'rem'}`;
   return jsxs(Button, {
     ...rest,
@@ -25,6 +29,7 @@ const TextButton = /*#__PURE__*/forwardRef((props, ref) => {
       [styles.isIconButton]: Boolean(icon),
       [styles.isFontInherited]: inheritFont
     }, className),
+    "data-modern": enableModernizedComponents,
     children: [jsx("span", {
       className: clsx({
         [styles.hideTextContent]: loading

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--3f667","isFontInherited":"bp_text_button_module_isFontInherited--3f667","isIconButton":"bp_text_button_module_isIconButton--3f667","scaleLoader":"bp_text_button_module_scaleLoader--3f667","icon":"bp_text_button_module_icon--3f667","hideTextContent":"bp_text_button_module_hideTextContent--3f667","visuallyHidden":"bp_text_button_module_visuallyHidden--3f667"};
+var styles = {"textButton":"bp_text_button_module_textButton--e9554","isFontInherited":"bp_text_button_module_isFontInherited--e9554","isIconButton":"bp_text_button_module_isIconButton--e9554","scaleLoader":"bp_text_button_module_scaleLoader--e9554","icon":"bp_text_button_module_icon--e9554","hideTextContent":"bp_text_button_module_hideTextContent--e9554","visuallyHidden":"bp_text_button_module_visuallyHidden--e9554"};
 
 export { styles as default };

package/package.json

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