@box/blueprint-web 12.63.1 → 12.64.0

package/dist/lib-esm/index.css

@@ -9059,22 +9059,80 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   border-color:var(--text-toggle-button-border-color-on-pressed);
 }
 
-.bp_time_picker_module_timePicker--2b3f5{
-  --time-picker-padding-right:var(--space-4);
-  --time-picker-border-width:var(--border-2);
-  --time-picker-focused-border-color:var(--outline-focus-on-light);
-  --clear-time-picker-button-right:var(--size-11);
-  --time-picker-icon-button-size:var(--size-6);
-  --time-picker-icon-size:var(--size-4);
+.bp_time_picker_module_timePicker--d1750[data-modern=false]{
+  --time-picker-label-margin-bottom:var(--space-2);
+  --time-picker-height:var(--size-10);
+  --time-picker-background:var(--surface-input-surface);
+  --time-picker-outline:var(--border-1) solid var(--border-input-border);
+  --time-picker-outline-hover:var(--border-1) solid var(--border-input-border);
+  --time-picker-border-radius:var(--radius-2);
+  --time-picker-inner-shadow:var(--innershadow-1);
+  --time-picker-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
+  --time-picker-error-outline:var(--border-2) solid var(--text-text-error-on-light);
+  --time-picker-padding-inline:var(--space-3) var(--space-4);
+  --time-picker-text-color:var(--text-text-on-light);
+  --time-picker-input-segment-border-radius:var(--radius-1);
+  --time-picker-data-placeholder-color:var(--text-text-on-light-secondary);
+  --time-picker-spin-button-margin:0 var(--space-05);
+  --time-picker-spin-button-padding:0 var(--space-1);
+  --time-picker-input-segment-active-background:var(--box-blue-100);
+  --time-picker-input-segment-active-text-color:var(--text-text-on-dark);
+  --time-picker-clear-button-size:var(--size-4);
+  --time-picker-clear-button-right-offset:var(--size-11);
+  --time-picker-clear-button-radius:var(--radius-2);
+  --time-picker-clear-button-background:#0000;
+  --time-picker-clear-button-hover-background:var(--surface-cta-surface-icon-hover);
+  --time-picker-clear-button-active-background:var(--surface-cta-surface-icon-pressed);
+  --time-picker-clear-button-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
+  --time-picker-clear-button-hover-icon-color:var(--icon-cta-icon-hover);
+  --time-picker-clear-button-active-icon-color:var(--icon-cta-icon-pressed);
+  --time-picker-clock-icon-right-offset:var(--space-4);
+  --time-picker-inline-error-margin-top:var(--space-2);
+  --time-picker-input-margin-right:calc(var(--time-picker-clear-button-size) + var(--time-picker-clear-button-right-offset));
+}
+
+.bp_time_picker_module_timePicker--d1750[data-modern=true]{
+  --time-picker-label-margin-bottom:var(--bp-space-020);
+  --time-picker-height:var(--bp-size-100);
+  --time-picker-background:var(--bp-surface-input-surface);
+  --time-picker-outline:var(--bp-border-01) solid var(--bp-border-input-border);
+  --time-picker-outline-hover:var(--bp-border-01) solid var(--bp-border-input-border-hover);
+  --time-picker-border-radius:var(--bp-radius-06);
+  --time-picker-inner-shadow:var(--innershadow-1);
+  --time-picker-focus-outline:var(--bp-border-02) solid var(--bp-border-input-border-focus);
+  --time-picker-error-outline:var(--bp-border-02) solid var(--bp-border-input-border-error);
+  --time-picker-padding-inline:var(--bp-space-030);
+  --time-picker-text-color:var(--bp-text-text-on-light);
+  --time-picker-input-segment-border-radius:var(--bp-radius-02);
+  --time-picker-data-placeholder-color:var(--bp-text-text-on-light);
+  --time-picker-spin-button-margin:0 var(--bp-space-005);
+  --time-picker-spin-button-padding:var(--bp-space-005) var(--bp-space-010);
+  --time-picker-input-segment-active-background:var(--bp-box-blue-100);
+  --time-picker-clear-button-size:var(--bp-size-040);
+  --time-picker-input-segment-active-text-color:var(--bp-text-text-on-dark);
+  --time-picker-clear-button-right-offset:var(--bp-size-110);
+  --time-picker-clear-button-radius:var(--bp-radius-06);
+  --time-picker-clear-button-background:var(--bp-surface-cta-surface-icon);
+  --time-picker-clear-button-hover-background:var(--bp-surface-cta-surface-icon-hover);
+  --time-picker-clear-button-active-background:var(--bp-surface-cta-surface-icon-pressed);
+  --time-picker-clear-button-focus-outline:var(--bp-border-02) solid var(--bp-border-input-border-focus);
+  --time-picker-clear-button-hover-icon-color:var(--bp-icon-cta-icon-hover);
+  --time-picker-clear-button-active-icon-color:var(--bp-icon-cta-icon-pressed);
+  --time-picker-clock-icon-right-offset:var(--bp-space-040);
+  --time-picker-inline-error-margin-top:var(--bp-space-020);
+  --time-picker-input-margin-right:calc(var(--time-picker-clear-button-size) + var(--time-picker-clear-button-right-offset));
+}
+
+.bp_time_picker_module_timePicker--d1750{
   width:100%;
 }
-.bp_time_picker_module_timePicker--2b3f5.bp_time_picker_module_disabled--2b3f5{
+.bp_time_picker_module_timePicker--d1750.bp_time_picker_module_disabled--d1750{
   opacity:60%;
   pointer-events:none;
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_time_picker_module_timePicker--2b3f5 .bp_time_picker_module_label--2b3f5{
+.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_label--d1750{
   cursor:default;
   display:block;
   font-family:var(--body-default-bold-font-family);
@@ -9082,17 +9140,18 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   font-weight:var(--body-default-bold-font-weight);
   letter-spacing:var(--body-default-bold-letter-spacing);
   line-height:var(--body-default-bold-line-height);
-  margin-block-end:var(--space-2);
+  margin-block-end:var(--time-picker-label-margin-bottom);
   -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);
   width:-moz-fit-content;
   width:fit-content;
 }
-.bp_time_picker_module_timePicker--2b3f5 .bp_time_picker_module_group--2b3f5{
+.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_group--d1750{
   align-items:center;
-  border-radius:var(--radius-2);
-  box-shadow:var(--innershadow-1);
+  background-color:var(--time-picker-background);
+  border-radius:var(--time-picker-border-radius);
+  box-shadow:var(--time-picker-inner-shadow);
   box-sizing:border-box;
   display:inline-flex;
   font-family:var(--body-default-font-family);
@@ -9100,104 +9159,104 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   font-weight:var(--body-default-font-weight);
   letter-spacing:var(--body-default-letter-spacing);
   line-height:var(--body-default-line-height);
-  outline:var(--border-1) solid var(--border-input-border);
-  padding-inline:var(--space-3) var(--time-picker-padding-right);
+  outline:var(--time-picker-outline);
+  padding-inline:var(--time-picker-padding-inline);
   position:relative;
   -webkit-text-decoration:var(--body-default-text-decoration);
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
   width:100%;
 }
-.bp_time_picker_module_timePicker--2b3f5 .bp_time_picker_module_group--2b3f5:focus-within{
-  outline:var(--time-picker-border-width) solid var(--time-picker-focused-border-color);
+.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_group--d1750:hover{
+  outline:var(--time-picker-outline-hover);
+}
+.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_group--d1750:focus-within{
+  outline:var(--time-picker-focus-outline);
 }
-.bp_time_picker_module_timePicker--2b3f5 .bp_time_picker_module_group--2b3f5.bp_time_picker_module_error--2b3f5:not(:focus-within){
-  outline:var(--time-picker-border-width) solid var(--text-text-error-on-light);
+.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_group--d1750.bp_time_picker_module_error--d1750:not(:focus-within){
+  outline:var(--time-picker-error-outline);
 }
-.bp_time_picker_module_timePicker--2b3f5 .bp_time_picker_module_group--2b3f5.bp_time_picker_module_error--2b3f5:focus-within{
-  outline:var(--time-picker-border-width) solid var(--time-picker-focused-border-color);
+.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_group--d1750.bp_time_picker_module_error--d1750:focus-within{
+  outline:var(--time-picker-focus-outline);
 }
-.bp_time_picker_module_timePicker--2b3f5 .bp_time_picker_module_timeInput--2b3f5{
+.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_timeInput--d1750{
   align-items:center;
   display:inline-flex;
-  height:var(--size-10);
-  margin-inline-end:calc(var(--time-picker-icon-button-size) + var(--clear-time-picker-button-right));
+  height:var(--time-picker-height);
+  margin-inline-end:var(--time-picker-input-margin-right);
   text-transform:uppercase;
   white-space:nowrap;
 }
-.bp_time_picker_module_timePicker--2b3f5 .bp_time_picker_module_timeInputSegment--2b3f5{
+.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_timeInputSegment--d1750{
   border:unset;
   border-radius:unset;
-  border-radius:var(--radius-1);
+  border-radius:var(--time-picker-input-segment-border-radius);
   box-shadow:unset;
-  color:var(--text-text-on-light);
+  color:var(--time-picker-text-color);
   height:-moz-fit-content;
   height:fit-content;
   padding:unset;
   transition:unset;
   width:unset;
 }
-.bp_time_picker_module_timePicker--2b3f5 .bp_time_picker_module_timeInputSegment--2b3f5[data-placeholder]{
-  color:var(--text-text-on-light-secondary);
+.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_timeInputSegment--d1750[data-placeholder]{
+  color:var(--time-picker-data-placeholder-color);
 }
-.bp_time_picker_module_timePicker--2b3f5 .bp_time_picker_module_timeInputSegment--2b3f5[role=spinbutton]{
-  margin:0 var(--space-05);
-  padding:0 var(--space-1);
+.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_timeInputSegment--d1750[role=spinbutton]{
+  border-radius:var(--time-picker-input-segment-border-radius);
+  margin:var(--time-picker-spin-button-margin);
+  padding:var(--time-picker-spin-button-padding);
 }
-.bp_time_picker_module_timePicker--2b3f5 .bp_time_picker_module_timeInputSegment--2b3f5:active,.bp_time_picker_module_timePicker--2b3f5 .bp_time_picker_module_timeInputSegment--2b3f5:focus{
-  background:var(--box-blue-100);
+.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_timeInputSegment--d1750:active,.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_timeInputSegment--d1750:focus{
+  background:var(--time-picker-input-segment-active-background);
   caret-color:#0000;
-  color:var(--text-text-brand-on-color);
+  color:var(--time-picker-input-segment-active-text-color);
   outline:none;
 }
-.bp_time_picker_module_timePicker--2b3f5 .bp_time_picker_module_timeInputSegment--2b3f5:nth-child(1 of [role=spinbutton]){
+.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_timeInputSegment--d1750:nth-child(1 of [role=spinbutton]){
   margin-inline-start:0;
 }
-.bp_time_picker_module_timePicker--2b3f5 .bp_time_picker_module_timeInputSegment--2b3f5[data-type=literal] + [data-type=dayPeriod]{
+.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_timeInputSegment--d1750[data-type=literal] + [data-type=dayPeriod]{
   margin-inline-start:calc(var(--space-1)*-1);
 }
-.bp_time_picker_module_timePicker--2b3f5 .bp_time_picker_module_clearButton--2b3f5{
+.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_clearButton--d1750{
   align-items:center;
-  background-color:initial;
+  background-color:var(--time-picker-clear-button-background);
   border:none;
-  border-radius:var(--radius-2);
+  border-radius:var(--time-picker-clear-button-radius);
   cursor:pointer;
   display:flex;
-  height:var(--time-picker-icon-button-size);
   justify-content:center;
   outline:none;
   padding:0;
   position:absolute;
-  right:var(--clear-time-picker-button-right);
-  width:var(--time-picker-icon-button-size);
+  right:var(--time-picker-clear-button-right-offset);
 }
-.bp_time_picker_module_timePicker--2b3f5 .bp_time_picker_module_clearButton--2b3f5:focus-visible,.bp_time_picker_module_timePicker--2b3f5 .bp_time_picker_module_clearButton--2b3f5[data-focus-visible]{
-  background-color:var(--surface-cta-surface-icon-pressed);
-  outline:var(--border-2) solid var(--outline-focus-on-light);
+.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_clearButton--d1750:focus-visible,.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_clearButton--d1750[data-focus-visible]{
+  background-color:var(--time-picker-clear-button-active-background);
+  outline:var(--time-picker-clear-button-focus-outline);
 }
-.bp_time_picker_module_timePicker--2b3f5 .bp_time_picker_module_clearButton--2b3f5:hover{
-  background:var(--surface-cta-surface-icon-hover);
+.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_clearButton--d1750:hover{
+  background:var(--time-picker-clear-button-hover-background);
 }
-.bp_time_picker_module_timePicker--2b3f5 .bp_time_picker_module_clearButton--2b3f5:hover *{
-  fill:var(--icon-cta-icon-hover);
+.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_clearButton--d1750:hover *{
+  fill:var(--time-picker-clear-button-hover-icon-color);
 }
-.bp_time_picker_module_timePicker--2b3f5 .bp_time_picker_module_clearButton--2b3f5:active{
-  background:var(--surface-cta-surface-icon-pressed);
+.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_clearButton--d1750:active{
+  background:var(--time-picker-clear-button-active-background);
 }
-.bp_time_picker_module_timePicker--2b3f5 .bp_time_picker_module_clearButton--2b3f5:active *{
-  fill:var(--icon-cta-icon-pressed);
+.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_clearButton--d1750:active *{
+  fill:var(--time-picker-clear-button-active-icon-color);
 }
-.bp_time_picker_module_timePicker--2b3f5 .bp_time_picker_module_clearButton--2b3f5:disabled{
+.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_clearButton--d1750:disabled{
   opacity:1;
 }
-.bp_time_picker_module_timePicker--2b3f5 .bp_time_picker_module_clockIcon--2b3f5{
-  height:var(--time-picker-icon-size);
+.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_clockIcon--d1750{
   position:absolute;
-  right:var(--time-picker-padding-right);
-  width:var(--time-picker-icon-size);
+  right:var(--time-picker-clock-icon-right-offset);
 }
-.bp_time_picker_module_timePicker--2b3f5 .bp_time_picker_module_inlineError--2b3f5{
-  margin-block-start:var(--space-2);
+.bp_time_picker_module_timePicker--d1750 .bp_time_picker_module_inlineError--d1750{
+  margin-block-start:var(--time-picker-inline-error-margin-top);
 }
 :root{
   --surface-surface-brand:#0061d5;

package/dist/lib-esm/time-picker/time-picker.js

@@ -1,9 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ClockBadge, XMark } from '@box/blueprint-web-assets/icons/Fill';
-import { Gray65, Size4 } from '@box/blueprint-web-assets/tokens/tokens';
+import { Clock, XMark as XMark$1 } from '@box/blueprint-web-assets/icons/Medium';
+import { bpGray65, bpSize040, Gray65, Size4 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import { forwardRef, useRef, useCallback } from 'react';
 import { TimeField, DateInput, DateSegment } from 'react-aria-components';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
 import { useLabelable } from '../util-components/labelable/useLabelable.js';
@@ -17,6 +19,12 @@ const ClearIcon = label => () => jsx(XMark, {
   height: Size4,
   width: Size4
 });
+const ClearIconModern = label => () => jsx(XMark$1, {
+  "aria-label": label,
+  color: bpGray65,
+  height: bpSize040,
+  width: bpSize040
+});
 const TimePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     className,
@@ -32,6 +40,9 @@ const TimePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     shouldForceLeadingZeros = true,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   // Component may be uncontrolled or controlled
   const [time, setTimeValue] = useControllableState({
     prop: value,
@@ -63,6 +74,7 @@ const TimePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className: clsx(styles.timePicker, {
       [styles.disabled]: isDisabled
     }, className),
+    "data-modern": enableModernizedComponents,
     isDisabled: isDisabled,
     isInvalid: hasError,
     onChange: setTimeValue,
@@ -93,11 +105,17 @@ const TimePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         "aria-label": clearTimePickerAriaLabel,
         className: styles.clearButton,
         disabled: isDisabled,
-        icon: ClearIcon(clearTimePickerAriaLabel),
+        icon: enableModernizedComponents ? ClearIconModern(clearTimePickerAriaLabel) : ClearIcon(clearTimePickerAriaLabel),
         onClick: handleClearInputButtonClicked,
         onKeyDownCapture: handleClearButtonKeypress,
         size: "x-small"
-      }), jsx(ClockBadge, {
+      }), enableModernizedComponents ? jsx(Clock, {
+        "aria-label": clockIconAriaLabel,
+        className: styles.clockIcon,
+        color: bpGray65,
+        height: bpSize040,
+        width: bpSize040
+      }) : jsx(ClockBadge, {
         "aria-label": clockIconAriaLabel,
         className: styles.clockIcon,
         color: Gray65,

package/dist/lib-esm/time-picker/time-picker.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"timePicker":"bp_time_picker_module_timePicker--2b3f5","disabled":"bp_time_picker_module_disabled--2b3f5","label":"bp_time_picker_module_label--2b3f5","group":"bp_time_picker_module_group--2b3f5","error":"bp_time_picker_module_error--2b3f5","timeInput":"bp_time_picker_module_timeInput--2b3f5","timeInputSegment":"bp_time_picker_module_timeInputSegment--2b3f5","clearButton":"bp_time_picker_module_clearButton--2b3f5","clockIcon":"bp_time_picker_module_clockIcon--2b3f5","inlineError":"bp_time_picker_module_inlineError--2b3f5"};
+var styles = {"timePicker":"bp_time_picker_module_timePicker--d1750","disabled":"bp_time_picker_module_disabled--d1750","label":"bp_time_picker_module_label--d1750","group":"bp_time_picker_module_group--d1750","error":"bp_time_picker_module_error--d1750","timeInput":"bp_time_picker_module_timeInput--d1750","timeInputSegment":"bp_time_picker_module_timeInputSegment--d1750","clearButton":"bp_time_picker_module_clearButton--d1750","clockIcon":"bp_time_picker_module_clockIcon--d1750","inlineError":"bp_time_picker_module_inlineError--d1750"};
 
 export { styles as default };

package/package.json

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