@wordpress/components 30.2.1-next.0f6f9d12c.0 → 30.2.1-next.f34ab90e9.0

package/src/calendar/style.scss

@@ -1,9 +1,9 @@
 /* Root of the component. */
 // Internal variables
 $wp-components-calendar-outline-focus: var(--wp-admin-border-width-focus) solid $components-color-accent;
-$wp-components-calendar-button-height: 2rem;
-$wp-components-calendar-button-width: 2rem;
-$wp-components-calendar-nav-height: 2rem;
+$wp-components-calendar-button-height: $grid-unit-40;
+$wp-components-calendar-button-width: $grid-unit-40;
+$wp-components-calendar-nav-height: $grid-unit-40;
 $wp-components-calendar-range-middle-background-color: color-mix(in srgb, $components-color-accent 4%, transparent);
 $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-color-accent 16%, transparent);
 
@@ -13,10 +13,10 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 	position: relative; /* Required to position the navigation toolbar. */
 	box-sizing: border-box;
 	display: inline flow-root;
-	color: $gray-900;
-	background-color: $white;
-	font-size: 13px;
-	font-weight: 400;
+	color: $components-color-foreground;
+	background-color: $components-color-background;
+	font-size: $font-size-medium;
+	font-weight: $font-weight-regular;
 	z-index: 0; // Create a stacking context and render on top of the background.
 
 	*,
@@ -35,7 +35,7 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 	// date follows the same color as the button's text, since the button
 	// inherits its text color.
 	&:has(.components-calendar__day-button:disabled) {
-		color: $gray-600;
+		color: $components-color-disabled;
 	}
 	&:has(.components-calendar__day-button:hover:not(:disabled)),
 	&:has(.components-calendar__day-button:focus-visible) {
@@ -57,7 +57,7 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 	height: $wp-components-calendar-button-height;
 
 	border: none;
-	border-radius: 2px;
+	border-radius: $radius-small;
 
 	font: inherit;
 	font-variant-numeric: tabular-nums;
@@ -73,7 +73,7 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 		z-index: -1;
 		inset: 0;
 		border: none; // No default border to avoid polluting high-contrast mode.
-		border-radius: 2px;
+		border-radius: $radius-small;
 	}
 
 	// Use the button's ::after to show the selection preview.
@@ -117,7 +117,7 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 .components-calendar__button-next,
 .components-calendar__button-previous {
 	border: none;
-	border-radius: 2px;
+	border-radius: $radius-small;
 	background: none;
 	padding: 0;
 	margin: 0;
@@ -139,7 +139,7 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 	&[aria-disabled="true"] {
 		cursor: revert;
 
-		color: $gray-600;
+		color: $components-color-disabled;
 	}
 
 	&:focus-visible {
@@ -150,8 +150,8 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 .components-calendar__chevron {
 	display: inline-block;
 	fill: currentColor;
-	width: 16px;
-	height: 16px;
+	width: $grid-unit-20;
+	height: $grid-unit-20;
 }
 
 .components-calendar[dir="rtl"]
@@ -167,7 +167,7 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 	align-content: center;
 
 	height: $wp-components-calendar-nav-height;
-	margin-bottom: 12px;
+	margin-bottom: $grid-unit-15;
 }
 
 .components-calendar__months {
@@ -175,13 +175,13 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 	display: flex;
 	justify-content: center;
 	flex-wrap: wrap;
-	gap: 1rem;
+	gap: $grid-unit-20;
 	max-width: fit-content;
 }
 
 .components-calendar__month-grid {
 	border-collapse: separate;
-	border-spacing: 0 4px;
+	border-spacing: 0 $grid-unit-05;
 }
 
 .components-calendar__nav {
@@ -202,7 +202,7 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 	height: $wp-components-calendar-button-height;
 	padding: 0;
 
-	color: $gray-700;
+	color: $components-color-gray-700;
 	text-align: center;
 	text-transform: uppercase;
 }
@@ -227,12 +227,12 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 	.components-calendar__day-button,
 	.components-calendar__day-button:hover:not(:disabled)
 ) {
-		color: $white;
+		color: $components-color-foreground-inverted;
 	}
 
 	.components-calendar__day-button {
 		&::before {
-			background-color: $gray-900;
+			background-color: $components-color-foreground;
 			// Render a transparent border to highlight the selected day in
 			// forced-colors (high-contrast) mode, since the background is not
 			// visible.
@@ -240,11 +240,11 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 		}
 
 		&:disabled::before {
-			background-color: $gray-600;
+			background-color: $components-color-disabled;
 		}
 
 		&:hover:not(:disabled)::before {
-			background-color: $gray-800;
+			background-color: $components-color-gray-800;
 		}
 	}
 }

package/src/menu-item/index.tsx

@@ -67,6 +67,7 @@ function UnforwardedMenuItem(
 			role={ role }
 			icon={ iconPosition === 'left' ? icon : undefined }
 			className={ className }
+			accessibleWhenDisabled
 			{ ...buttonProps }
 		>
 			<span className="components-menu-item__item">{ children }</span>

package/src/utils/theme-variables.scss

@@ -29,3 +29,4 @@ $components-color-light-gray-placeholder: color-mix(in srgb, $components-color-b
 
 // Semantic aliases (prefer these over raw gray values when applicable).
 $components-color-border: #{ $components-color-gray-600 };
+$components-color-disabled: #{ $components-color-gray-600 };

package/src/validated-form-controls/components/checkbox-control.tsx

@@ -17,7 +17,8 @@ type Value = CheckboxControlProps[ 'checked' ];
 const UnforwardedValidatedCheckboxControl = (
 	{
 		required,
-		customValidator,
+		onValidate,
+		customValidity,
 		onChange,
 		markWhenOptional,
 		...restProps
@@ -37,9 +38,10 @@ const UnforwardedValidatedCheckboxControl = (
 			required={ required }
 			markWhenOptional={ markWhenOptional }
 			ref={ mergedRefs }
-			customValidator={ () => {
-				return customValidator?.( valueRef.current );
+			onValidate={ () => {
+				return onValidate?.( valueRef.current );
 			} }
+			customValidity={ customValidity }
 			getValidityTarget={ () =>
 				validityTargetRef.current?.querySelector< HTMLInputElement >(
 					'input[type="checkbox"]'

package/src/validated-form-controls/components/combobox-control.tsx

@@ -17,7 +17,8 @@ type Value = ComboboxControlProps[ 'value' ];
 const UnforwardedValidatedComboboxControl = (
 	{
 		required,
-		customValidator,
+		onValidate,
+		customValidity,
 		onChange,
 		markWhenOptional,
 		...restProps
@@ -50,9 +51,10 @@ const UnforwardedValidatedComboboxControl = (
 			required={ required }
 			markWhenOptional={ markWhenOptional }
 			ref={ mergedRefs }
-			customValidator={ () => {
-				return customValidator?.( valueRef.current );
+			onValidate={ () => {
+				return onValidate?.( valueRef.current );
 			} }
+			customValidity={ customValidity }
 			getValidityTarget={ () =>
 				validityTargetRef.current?.querySelector< HTMLInputElement >(
 					'input[role="combobox"]'

package/src/validated-form-controls/components/custom-select-control.tsx

@@ -21,7 +21,8 @@ type Value = CustomSelectControlProps[ 'value' ];
 const UnforwardedValidatedCustomSelectControl = (
 	{
 		required,
-		customValidator,
+		onValidate,
+		customValidity,
 		onChange,
 		markWhenOptional,
 		...restProps
@@ -43,9 +44,10 @@ const UnforwardedValidatedCustomSelectControl = (
 			<ControlWithError
 				required={ required }
 				markWhenOptional={ markWhenOptional }
-				customValidator={ () => {
-					return customValidator?.( valueRef.current );
+				onValidate={ () => {
+					return onValidate?.( valueRef.current );
 				} }
+				customValidity={ customValidity }
 				getValidityTarget={ () => validityTargetRef.current }
 			>
 				<CustomSelectControl

package/src/validated-form-controls/components/input-control.tsx

@@ -17,7 +17,8 @@ type Value = InputControlProps[ 'value' ];
 const UnforwardedValidatedInputControl = (
 	{
 		required,
-		customValidator,
+		onValidate,
+		customValidity,
 		onChange,
 		markWhenOptional,
 		...restProps
@@ -36,9 +37,10 @@ const UnforwardedValidatedInputControl = (
 		<ControlWithError
 			required={ required }
 			markWhenOptional={ markWhenOptional }
-			customValidator={ () => {
-				return customValidator?.( valueRef.current );
+			onValidate={ () => {
+				return onValidate?.( valueRef.current );
 			} }
+			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
 			<InputControl

package/src/validated-form-controls/components/number-control.tsx

@@ -17,7 +17,8 @@ type Value = NumberControlProps[ 'value' ];
 const UnforwardedValidatedNumberControl = (
 	{
 		required,
-		customValidator,
+		onValidate,
+		customValidity,
 		onChange,
 		markWhenOptional,
 		...restProps
@@ -36,9 +37,10 @@ const UnforwardedValidatedNumberControl = (
 		<ControlWithError
 			required={ required }
 			markWhenOptional={ markWhenOptional }
-			customValidator={ () => {
-				return customValidator?.( valueRef.current );
+			onValidate={ () => {
+				return onValidate?.( valueRef.current );
 			} }
+			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
 			<NumberControl

package/src/validated-form-controls/components/radio-control.tsx

@@ -17,7 +17,8 @@ type Value = RadioControlProps[ 'selected' ];
 const UnforwardedValidatedRadioControl = (
 	{
 		required,
-		customValidator,
+		onValidate,
+		customValidity,
 		onChange,
 		markWhenOptional,
 		...restProps
@@ -35,9 +36,10 @@ const UnforwardedValidatedRadioControl = (
 			markWhenOptional={ markWhenOptional }
 			// TODO: Upstream limitation - RadioControl does not accept a ref.
 			ref={ mergedRefs }
-			customValidator={ () => {
-				return customValidator?.( valueRef.current );
+			onValidate={ () => {
+				return onValidate?.( valueRef.current );
 			} }
+			customValidity={ customValidity }
 			getValidityTarget={ () =>
 				validityTargetRef.current?.querySelector< HTMLInputElement >(
 					'input[type="radio"]'

package/src/validated-form-controls/components/range-control.tsx

@@ -17,7 +17,8 @@ type Value = RangeControlProps[ 'value' ];
 const UnforwardedValidatedRangeControl = (
 	{
 		required,
-		customValidator,
+		onValidate,
+		customValidity,
 		onChange,
 		markWhenOptional,
 		...restProps
@@ -36,9 +37,10 @@ const UnforwardedValidatedRangeControl = (
 		<ControlWithError
 			required={ required }
 			markWhenOptional={ markWhenOptional }
-			customValidator={ () => {
-				return customValidator?.( valueRef.current );
+			onValidate={ () => {
+				return onValidate?.( valueRef.current );
 			} }
+			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
 			<RangeControl

package/src/validated-form-controls/components/select-control.tsx

@@ -26,7 +26,8 @@ type Value = SelectControlProps[ 'value' ];
 const UnforwardedValidatedSelectControl = (
 	{
 		required,
-		customValidator,
+		onValidate,
+		customValidity,
 		onChange,
 		markWhenOptional,
 		...restProps
@@ -51,9 +52,10 @@ const UnforwardedValidatedSelectControl = (
 		<ControlWithError
 			required={ required }
 			markWhenOptional={ markWhenOptional }
-			customValidator={ () => {
-				return customValidator?.( valueRef.current );
+			onValidate={ () => {
+				return onValidate?.( valueRef.current );
 			} }
+			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
 			<SelectControl

package/src/validated-form-controls/components/stories/checkbox-control.story.tsx

@@ -32,6 +32,12 @@ export default meta;
 export const Default: StoryObj< typeof ValidatedCheckboxControl > = {
 	render: function Template( { onChange, ...args } ) {
 		const [ checked, setChecked ] = useState( false );
+		const [ customValidity, setCustomValidity ] =
+			useState<
+				React.ComponentProps<
+					typeof ValidatedCheckboxControl
+				>[ 'customValidity' ]
+			>( undefined );
 
 		return (
 			<ValidatedCheckboxControl
@@ -41,6 +47,17 @@ export const Default: StoryObj< typeof ValidatedCheckboxControl > = {
 					setChecked( value );
 					onChange?.( value );
 				} }
+				onValidate={ ( value ) => {
+					if ( value ) {
+						setCustomValidity( {
+							type: 'invalid',
+							message: 'This checkbox may not be checked.',
+						} );
+					} else {
+						setCustomValidity( undefined );
+					}
+				} }
+				customValidity={ customValidity }
 			/>
 		);
 	},
@@ -49,10 +66,4 @@ Default.args = {
 	required: true,
 	label: 'Checkbox',
 	help: 'This checkbox may neither be checked nor unchecked.',
-	customValidator: ( value ) => {
-		if ( value ) {
-			return 'This checkbox may not be checked.';
-		}
-		return undefined;
-	},
 };

package/src/validated-form-controls/components/stories/combobox-control.story.tsx

@@ -35,6 +35,12 @@ export const Default: StoryObj< typeof ValidatedComboboxControl > = {
 					typeof ValidatedComboboxControl
 				>[ 'value' ]
 			>();
+		const [ customValidity, setCustomValidity ] =
+			useState<
+				React.ComponentProps<
+					typeof ValidatedComboboxControl
+				>[ 'customValidity' ]
+			>( undefined );
 
 		return (
 			<ValidatedComboboxControl
@@ -44,6 +50,17 @@ export const Default: StoryObj< typeof ValidatedComboboxControl > = {
 					setValue( newValue );
 					onChange?.( newValue );
 				} }
+				onValidate={ ( v ) => {
+					if ( v === 'a' ) {
+						setCustomValidity( {
+							type: 'invalid',
+							message: 'Option A is not allowed.',
+						} );
+					} else {
+						setCustomValidity( undefined );
+					}
+				} }
+				customValidity={ customValidity }
 			/>
 		);
 	},
@@ -56,10 +73,4 @@ Default.args = {
 		{ value: 'a', label: 'Option A (not allowed)' },
 		{ value: 'b', label: 'Option B' },
 	],
-	customValidator: ( value ) => {
-		if ( value === 'a' ) {
-			return 'Option A is not allowed.';
-		}
-		return undefined;
-	},
 };

package/src/validated-form-controls/components/stories/custom-select-control.story.tsx

@@ -35,6 +35,12 @@ export const Default: StoryObj< typeof ValidatedCustomSelectControl > = {
 					typeof ValidatedCustomSelectControl
 				>[ 'value' ]
 			>();
+		const [ customValidity, setCustomValidity ] =
+			useState<
+				React.ComponentProps<
+					typeof ValidatedCustomSelectControl
+				>[ 'customValidity' ]
+			>( undefined );
 
 		return (
 			<ValidatedCustomSelectControl
@@ -44,6 +50,17 @@ export const Default: StoryObj< typeof ValidatedCustomSelectControl > = {
 					setValue( newValue.selectedItem );
 					onChange?.( newValue );
 				} }
+				onValidate={ ( v ) => {
+					if ( v?.key === 'a' ) {
+						setCustomValidity( {
+							type: 'invalid',
+							message: 'Option A is not allowed.',
+						} );
+					} else {
+						setCustomValidity( undefined );
+					}
+				} }
+				customValidity={ customValidity }
 			/>
 		);
 	},
@@ -56,10 +73,4 @@ Default.args = {
 		{ key: 'a', name: 'Option A (not allowed)' },
 		{ key: 'b', name: 'Option B' },
 	],
-	customValidator: ( value ) => {
-		if ( value?.key === 'a' ) {
-			return 'Option A is not allowed.';
-		}
-		return undefined;
-	},
 };

package/src/validated-form-controls/components/stories/input-control.story.tsx

@@ -46,6 +46,12 @@ export const Default: StoryObj< typeof ValidatedInputControl > = {
 			useState<
 				React.ComponentProps< typeof ValidatedInputControl >[ 'value' ]
 			>( '' );
+		const [ customValidity, setCustomValidity ] =
+			useState<
+				React.ComponentProps<
+					typeof ValidatedInputControl
+				>[ 'customValidity' ]
+			>( undefined );
 
 		return (
 			<ValidatedInputControl
@@ -55,6 +61,17 @@ export const Default: StoryObj< typeof ValidatedInputControl > = {
 					setValue( newValue );
 					onChange?.( newValue, ...rest );
 				} }
+				onValidate={ ( v ) => {
+					if ( v?.toLowerCase() === 'error' ) {
+						setCustomValidity( {
+							type: 'invalid',
+							message: 'The word "error" is not allowed.',
+						} );
+					} else {
+						setCustomValidity( undefined );
+					}
+				} }
+				customValidity={ customValidity }
 			/>
 		);
 	},
@@ -63,12 +80,6 @@ Default.args = {
 	required: true,
 	label: 'Input',
 	help: 'The word "error" will trigger an error.',
-	customValidator: ( value ) => {
-		if ( value?.toLowerCase() === 'error' ) {
-			return 'The word "error" is not allowed.';
-		}
-		return undefined;
-	},
 };
 
 /**
@@ -83,6 +94,12 @@ export const Password: StoryObj< typeof ValidatedInputControl > = {
 				React.ComponentProps< typeof ValidatedInputControl >[ 'value' ]
 			>( '' );
 		const [ visible, setVisible ] = useState( false );
+		const [ customValidity, setCustomValidity ] =
+			useState<
+				React.ComponentProps<
+					typeof ValidatedInputControl
+				>[ 'customValidity' ]
+			>( undefined );
 
 		return (
 			<ValidatedInputControl
@@ -105,6 +122,34 @@ export const Password: StoryObj< typeof ValidatedInputControl > = {
 					setValue( newValue );
 					onChange?.( newValue, ...rest );
 				} }
+				onValidate={ ( v ) => {
+					if ( ! /\d/.test( v ?? '' ) ) {
+						setCustomValidity( {
+							type: 'invalid',
+							message:
+								'Password must include at least one number.',
+						} );
+						return;
+					}
+					if ( ! /[A-Z]/.test( v ?? '' ) ) {
+						setCustomValidity( {
+							type: 'invalid',
+							message:
+								'Password must include at least one capital letter.',
+						} );
+						return;
+					}
+					if ( ! /[!@£$%^&*#]/.test( v ?? '' ) ) {
+						setCustomValidity( {
+							type: 'invalid',
+							message:
+								'Password must include at least one symbol.',
+						} );
+						return;
+					}
+					setCustomValidity( undefined );
+				} }
+				customValidity={ customValidity }
 			/>
 		);
 	},
@@ -114,18 +159,6 @@ Password.args = {
 	label: 'Password',
 	help: 'Minimum 8 characters, include a number, capital letter, and symbol (!@£$%^&*#).',
 	minLength: 8,
-	customValidator: ( value ) => {
-		if ( ! /\d/.test( value ?? '' ) ) {
-			return 'Password must include at least one number.';
-		}
-		if ( ! /[A-Z]/.test( value ?? '' ) ) {
-			return 'Password must include at least one capital letter.';
-		}
-		if ( ! /[!@£$%^&*#]/.test( value ?? '' ) ) {
-			return 'Password must include at least one symbol.';
-		}
-		return undefined;
-	},
 };
 Password.argTypes = {
 	suffix: { control: false },

package/src/validated-form-controls/components/stories/number-control.story.tsx

@@ -37,6 +37,12 @@ export const Default: StoryObj< typeof ValidatedNumberControl > = {
 			useState<
 				React.ComponentProps< typeof ValidatedNumberControl >[ 'value' ]
 			>();
+		const [ customValidity, setCustomValidity ] =
+			useState<
+				React.ComponentProps<
+					typeof ValidatedNumberControl
+				>[ 'customValidity' ]
+			>( undefined );
 
 		return (
 			<ValidatedNumberControl
@@ -46,6 +52,17 @@ export const Default: StoryObj< typeof ValidatedNumberControl > = {
 					setValue( newValue );
 					onChange?.( newValue, ...rest );
 				} }
+				onValidate={ ( v ) => {
+					if ( v && parseInt( v.toString(), 10 ) % 2 !== 0 ) {
+						setCustomValidity( {
+							type: 'invalid',
+							message: 'Choose an even number.',
+						} );
+					} else {
+						setCustomValidity( undefined );
+					}
+				} }
+				customValidity={ customValidity }
 			/>
 		);
 	},
@@ -54,10 +71,4 @@ Default.args = {
 	required: true,
 	label: 'Number',
 	help: 'Odd numbers are not allowed.',
-	customValidator: ( value ) => {
-		if ( value && parseInt( value.toString(), 10 ) % 2 !== 0 ) {
-			return 'Choose an even number.';
-		}
-		return undefined;
-	},
 };

package/src/validated-form-controls/components/stories/overview.mdx

@@ -16,7 +16,7 @@ We are still gathering feedback and iterating. Please get in touch with `@WordPr
 
 Component APIs are the same as the underlying WordPress components, with the addition of some optional props:
 
-<ArgTypes of={ ValidatedInputControl } include={ [ 'required', 'markWhenOptional', 'customValidator' ] } />
+<ArgTypes of={ ValidatedInputControl } include={ [ 'required', 'markWhenOptional', 'onValidate', 'customValidity' ] } />
 
 ## Implementation