@wordpress/components 28.5.0 → 28.7.0

package/src/date-time/time/index.tsx

@@ -13,6 +13,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import BaseControl from '../../base-control';
+import { VisuallyHidden } from '../../visually-hidden';
 import SelectControl from '../../select-control';
 import TimeZone from './timezone';
 import type { TimeInputValue, TimePickerProps } from '../types';
@@ -61,6 +62,7 @@ export function TimePicker( {
 	currentTime,
 	onChange,
 	dateOrder: dateOrderProp,
+	hideLabelFromVision = false,
 }: TimePickerProps ) {
 	const [ date, setDate ] = useState( () =>
 		// Truncate the date at the minutes, see: #15495.
@@ -219,12 +221,18 @@ export function TimePicker( {
 			className="components-datetime__time" // Unused, for backwards compatibility.
 		>
 			<Fieldset>
-				<BaseControl.VisualLabel
-					as="legend"
-					className="components-datetime__time-legend" // Unused, for backwards compatibility.
-				>
-					{ __( 'Time' ) }
-				</BaseControl.VisualLabel>
+				{ hideLabelFromVision ? (
+					<VisuallyHidden as="legend">
+						{ __( 'Time' ) }
+					</VisuallyHidden>
+				) : (
+					<BaseControl.VisualLabel
+						as="legend"
+						className="components-datetime__time-legend" // Unused, for backwards compatibility.
+					>
+						{ __( 'Time' ) }
+					</BaseControl.VisualLabel>
+				) }
 				<HStack
 					className="components-datetime__time-wrapper" // Unused, for backwards compatibility.
 				>
@@ -241,12 +249,18 @@ export function TimePicker( {
 				</HStack>
 			</Fieldset>
 			<Fieldset>
-				<BaseControl.VisualLabel
-					as="legend"
-					className="components-datetime__time-legend" // Unused, for backwards compatibility.
-				>
-					{ __( 'Date' ) }
-				</BaseControl.VisualLabel>
+				{ hideLabelFromVision ? (
+					<VisuallyHidden as="legend">
+						{ __( 'Date' ) }
+					</VisuallyHidden>
+				) : (
+					<BaseControl.VisualLabel
+						as="legend"
+						className="components-datetime__time-legend" // Unused, for backwards compatibility.
+					>
+						{ __( 'Date' ) }
+					</BaseControl.VisualLabel>
+				) }
 				<HStack
 					className="components-datetime__time-wrapper" // Unused, for backwards compatibility.
 				>

package/src/date-time/time/test/index.tsx

@@ -281,12 +281,9 @@ describe( 'TimePicker', () => {
 		expect(
 			( screen.getByLabelText( 'Minutes' ) as HTMLInputElement ).value
 		).toBe( '00' );
-		/**
-		 * This is not ideal, but best of we can do for now until we refactor
-		 * AM/PM into accessible elements, like radio buttons.
-		 */
-		expect( screen.getByText( 'AM' ) ).not.toHaveClass( 'is-primary' );
-		expect( screen.getByText( 'PM' ) ).toHaveClass( 'is-primary' );
+
+		expect( screen.getByRole( 'radio', { name: 'AM' } ) ).not.toBeChecked();
+		expect( screen.getByRole( 'radio', { name: 'PM' } ) ).toBeChecked();
 	} );
 
 	it( 'should have different layouts/orders for 12/24 hour formats', () => {

package/src/date-time/time/time-input/index.tsx

@@ -20,8 +20,6 @@ import {
 	Fieldset,
 } from '../styles';
 import { HStack } from '../../../h-stack';
-import Button from '../../../button';
-import ButtonGroup from '../../../button-group';
 import {
 	from12hTo24h,
 	from24hTo12h,
@@ -32,6 +30,10 @@ import type { TimeInputProps } from '../../types';
 import type { InputChangeCallback } from '../../../input-control/types';
 import { useControlledValue } from '../../../utils';
 import BaseControl from '../../../base-control';
+import {
+	ToggleGroupControl,
+	ToggleGroupControlOption,
+} from '../../../toggle-group-control';
 
 export function TimeInput( {
 	value: valueProp,
@@ -164,30 +166,28 @@ export function TimeInput( {
 					/>
 				</TimeWrapper>
 				{ is12Hour && (
-					<ButtonGroup
-						className="components-datetime__time-field components-datetime__time-field-am-pm" // Unused, for backwards compatibility.
+					<ToggleGroupControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						isBlock
+						label={ __( 'Select AM or PM' ) }
+						hideLabelFromVision
+						value={ dayPeriod }
+						onChange={ ( newValue ) => {
+							buildAmPmChangeCallback(
+								newValue as 'AM' | 'PM'
+							)();
+						} }
 					>
-						<Button
-							className="components-datetime__time-am-button" // Unused, for backwards compatibility.
-							variant={
-								dayPeriod === 'AM' ? 'primary' : 'secondary'
-							}
-							__next40pxDefaultSize
-							onClick={ buildAmPmChangeCallback( 'AM' ) }
-						>
-							{ __( 'AM' ) }
-						</Button>
-						<Button
-							className="components-datetime__time-pm-button" // Unused, for backwards compatibility.
-							variant={
-								dayPeriod === 'PM' ? 'primary' : 'secondary'
-							}
-							__next40pxDefaultSize
-							onClick={ buildAmPmChangeCallback( 'PM' ) }
-						>
-							{ __( 'PM' ) }
-						</Button>
-					</ButtonGroup>
+						<ToggleGroupControlOption
+							value="AM"
+							label={ __( 'AM' ) }
+						/>
+						<ToggleGroupControlOption
+							value="PM"
+							label={ __( 'PM' ) }
+						/>
+					</ToggleGroupControl>
 				) }
 			</HStack>
 		</Wrapper>

package/src/date-time/time/time-input/test/index.tsx

@@ -80,12 +80,11 @@ describe( 'TimeInput', () => {
 		const minutesInput = screen.getByRole( 'spinbutton', {
 			name: 'Minutes',
 		} );
-		const amButton = screen.getByRole( 'button', { name: 'AM' } );
-		const pmButton = screen.getByRole( 'button', { name: 'PM' } );
+		const amButton = screen.getByRole( 'radio', { name: 'AM' } );
+		const pmButton = screen.getByRole( 'radio', { name: 'PM' } );
 
-		// TODO: Update assert these states through the accessibility tree rather than through styles, see: https://github.com/WordPress/gutenberg/issues/61163
-		expect( amButton ).toHaveClass( 'is-primary' );
-		expect( pmButton ).not.toHaveClass( 'is-primary' );
+		expect( amButton ).toBeChecked();
+		expect( pmButton ).not.toBeChecked();
 		expect( hoursInput ).not.toHaveValue( 0 );
 		expect( hoursInput ).toHaveValue( 12 );
 
@@ -94,7 +93,7 @@ describe( 'TimeInput', () => {
 		await user.keyboard( '{Tab}' );
 
 		expect( onChangeSpy ).toHaveBeenCalledWith( { hours: 0, minutes: 35 } );
-		expect( amButton ).toHaveClass( 'is-primary' );
+		expect( amButton ).toBeChecked();
 
 		await user.clear( hoursInput );
 		await user.type( hoursInput, '12' );
@@ -107,7 +106,7 @@ describe( 'TimeInput', () => {
 			hours: 12,
 			minutes: 35,
 		} );
-		expect( pmButton ).toHaveClass( 'is-primary' );
+		expect( pmButton ).toBeChecked();
 	} );
 
 	it( 'should call onChange with defined minutes steps', async () => {

package/src/date-time/types.ts

@@ -29,6 +29,13 @@ export type TimePickerProps = {
 	 * time as an argument.
 	 */
 	onChange?: ( time: string ) => void;
+
+	/**
+	 * If true, the label will only be visible to screen readers.
+	 *
+	 * @default false
+	 */
+	hideLabelFromVision?: boolean;
 };
 
 export type TimeInputValue = {
@@ -130,7 +137,10 @@ export type DatePickerProps = {
 };
 
 export type DateTimePickerProps = Omit< DatePickerProps, 'onChange' > &
-	Omit< TimePickerProps, 'currentTime' | 'onChange' > & {
+	Omit<
+		TimePickerProps,
+		'currentTime' | 'onChange' | 'hideLabelFromVision'
+	> & {
 		/**
 		 * The function called when a new date or time has been selected. It is
 		 * passed the date and time as an argument.

package/src/dimension-control/README.md

@@ -1,5 +1,9 @@
 # DimensionControl
 
+<div class="callout callout-alert">
+This component is deprecated.
+</div>
+
 <div class="callout callout-alert">
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
@@ -17,6 +21,7 @@ export default function MyCustomDimensionControl() {
 
 	return (
 		<DimensionControl
+			__nextHasNoMarginBottom
 			label={ 'Padding' }
 			icon={ 'desktop' }
 			onChange={ ( value ) => setPaddingSize( value ) }
@@ -91,3 +96,19 @@ A callback which is triggered when a spacing size value changes (is selected/cli
 -   **Required:** No
 
 A string of classes to be added to the control component.
+
+### `__next40pxDefaultSize`
+
+-   **Type:** `Boolean`
+-   **Required:** No
+-   **Default:** `false`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+### `__nextHasNoMarginBottom`
+
+-   **Type:** `Boolean`
+-   **Required:** No
+-   **Default:** `false`
+
+Start opting into the new margin-free styles that will become the default in a future version.

package/src/dimension-control/index.tsx

@@ -16,11 +16,21 @@ import SelectControl from '../select-control';
 import sizesTable, { findSizeBySlug } from './sizes';
 import type { DimensionControlProps, Size } from './types';
 import type { SelectControlSingleSelectionProps } from '../select-control/types';
+import { ContextSystemProvider } from '../context';
+import deprecated from '@wordpress/deprecated';
+
+const CONTEXT_VALUE = {
+	BaseControl: {
+		// Temporary during deprecation grace period: Overrides the underlying `__associatedWPComponentName`
+		// via the context system to override the value set by SelectControl.
+		_overrides: { __associatedWPComponentName: 'DimensionControl' },
+	},
+};
 
 /**
  * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.
  *
- * This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+ * @deprecated
  *
  * ```jsx
  * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
@@ -31,6 +41,7 @@ import type { SelectControlSingleSelectionProps } from '../select-control/types'
  *
  * 	return (
  * 		<DimensionControl
+ * 			__nextHasNoMarginBottom
  * 			label={ 'Padding' }
  * 			icon={ 'desktop' }
  * 			onChange={ ( value ) => setPaddingSize( value ) }
@@ -43,6 +54,7 @@ import type { SelectControlSingleSelectionProps } from '../select-control/types'
 export function DimensionControl( props: DimensionControlProps ) {
 	const {
 		__next40pxDefaultSize = false,
+		__nextHasNoMarginBottom = false,
 		label,
 		value,
 		sizes = sizesTable,
@@ -51,6 +63,11 @@ export function DimensionControl( props: DimensionControlProps ) {
 		className = '',
 	} = props;
 
+	deprecated( 'wp.components.DimensionControl', {
+		since: '6.7',
+		version: '7.0',
+	} );
+
 	const onChangeSpacingSize: SelectControlSingleSelectionProps[ 'onChange' ] =
 		( val ) => {
 			const theSize = findSizeBySlug( sizes, val );
@@ -85,15 +102,21 @@ export function DimensionControl( props: DimensionControlProps ) {
 	);
 
 	return (
-		<SelectControl
-			__next40pxDefaultSize={ __next40pxDefaultSize }
-			className={ clsx( className, 'block-editor-dimension-control' ) }
-			label={ selectLabel }
-			hideLabelFromVision={ false }
-			value={ value }
-			onChange={ onChangeSpacingSize }
-			options={ formatSizesAsOptions( sizes ) }
-		/>
+		<ContextSystemProvider value={ CONTEXT_VALUE }>
+			<SelectControl
+				__next40pxDefaultSize={ __next40pxDefaultSize }
+				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+				className={ clsx(
+					className,
+					'block-editor-dimension-control'
+				) }
+				label={ selectLabel }
+				hideLabelFromVision={ false }
+				value={ value }
+				onChange={ onChangeSpacingSize }
+				options={ formatSizesAsOptions( sizes ) }
+			/>
+		</ContextSystemProvider>
 	);
 }
 

package/src/dimension-control/stories/index.story.tsx

@@ -13,9 +13,15 @@ import sizes from '../sizes';
  */
 import { desktop, tablet, mobile } from '@wordpress/icons';
 
+/**
+ * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.
+ *
+ * This component is deprecated.
+ */
 const meta: Meta< typeof DimensionControl > = {
 	component: DimensionControl,
-	title: 'Components (Experimental)/DimensionControl',
+	title: 'Components (Deprecated)/DimensionControl',
+	id: 'components-dimensioncontrol',
 	argTypes: {
 		onChange: { action: 'onChange' },
 		value: { control: { type: null } },
@@ -42,8 +48,8 @@ const Template: StoryFn< typeof DimensionControl > = ( args ) => (
 );
 
 export const Default = Template.bind( {} );
-
 Default.args = {
+	__nextHasNoMarginBottom: true,
 	label: 'Please select a size',
 	sizes,
 };

package/src/dimension-control/test/__snapshots__/index.test.js.snap

@@ -13,10 +13,6 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -49,7 +45,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   min-height: 0;
 }
 
-.emotion-6:focus-within:not( :has( :is( .em5sgkm7, .emotion-19 ):focus-within ) ) .emotion-26 {
+.emotion-6:focus-within:not( :has( :is( .em5sgkm8, .emotion-19 ):focus-within ) ) .emotion-26 {
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
@@ -161,8 +157,8 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
 }
 
 .emotion-21 {
-  margin-bottom: 0;
-  padding-right: calc(4px * 2);
+  -webkit-padding-end: 8px;
+  padding-inline-end: 8px;
   position: absolute;
   pointer-events: none;
   right: 0;
@@ -253,7 +249,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
             class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-7"
+              class="components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-22"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >
@@ -299,10 +295,6 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -335,7 +327,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   min-height: 0;
 }
 
-.emotion-6:focus-within:not( :has( :is( .em5sgkm7, .emotion-19 ):focus-within ) ) .emotion-26 {
+.emotion-6:focus-within:not( :has( :is( .em5sgkm8, .emotion-19 ):focus-within ) ) .emotion-26 {
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
@@ -447,8 +439,8 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
 }
 
 .emotion-21 {
-  margin-bottom: 0;
-  padding-right: calc(4px * 2);
+  -webkit-padding-end: 8px;
+  padding-inline-end: 8px;
   position: absolute;
   pointer-events: none;
   right: 0;
@@ -549,7 +541,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
             class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-7"
+              class="components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-22"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >
@@ -595,10 +587,6 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -631,7 +619,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   min-height: 0;
 }
 
-.emotion-6:focus-within:not( :has( :is( .em5sgkm7, .emotion-19 ):focus-within ) ) .emotion-26 {
+.emotion-6:focus-within:not( :has( :is( .em5sgkm8, .emotion-19 ):focus-within ) ) .emotion-26 {
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
@@ -743,8 +731,8 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
 }
 
 .emotion-21 {
-  margin-bottom: 0;
-  padding-right: calc(4px * 2);
+  -webkit-padding-end: 8px;
+  padding-inline-end: 8px;
   position: absolute;
   pointer-events: none;
   right: 0;
@@ -857,7 +845,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
             class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-7"
+              class="components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-22"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >
@@ -903,10 +891,6 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -939,7 +923,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   min-height: 0;
 }
 
-.emotion-6:focus-within:not( :has( :is( .em5sgkm7, .emotion-19 ):focus-within ) ) .emotion-26 {
+.emotion-6:focus-within:not( :has( :is( .em5sgkm8, .emotion-19 ):focus-within ) ) .emotion-26 {
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
@@ -1051,8 +1035,8 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
 }
 
 .emotion-21 {
-  margin-bottom: 0;
-  padding-right: calc(4px * 2);
+  -webkit-padding-end: 8px;
+  padding-inline-end: 8px;
   position: absolute;
   pointer-events: none;
   right: 0;
@@ -1165,7 +1149,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
             class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-7"
+              class="components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-22"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >

package/src/dimension-control/test/index.test.js

@@ -12,7 +12,11 @@ import { plus } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { DimensionControl } from '../';
+import { DimensionControl as _DimensionControl } from '../';
+
+const DimensionControl = ( props ) => {
+	return <_DimensionControl { ...props } __nextHasNoMarginBottom />;
+};
 
 describe( 'DimensionControl', () => {
 	const onChangeHandler = jest.fn();
@@ -27,6 +31,7 @@ describe( 'DimensionControl', () => {
 			const { container } = render(
 				<DimensionControl instanceId={ instanceId } label="Padding" />
 			);
+			expect( console ).toHaveWarned();
 			expect( container ).toMatchSnapshot();
 		} );
 

package/src/dimension-control/types.ts

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import type { IconType } from '../icon';
+import type { SelectControlProps } from '../select-control/types';
 
 export type Size = {
 	/**
@@ -14,7 +15,10 @@ export type Size = {
 	slug: string;
 };
 
-export type DimensionControlProps = {
+export type DimensionControlProps = Pick<
+	SelectControlProps,
+	'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
+> & {
 	/**
 	 * Label for the control.
 	 */
@@ -45,10 +49,4 @@ export type DimensionControlProps = {
 	 * @default ''
 	 */
 	className?: string;
-	/**
-	 * Start opting into the larger default height that will become the default size in a future version.
-	 *
-	 * @default false
-	 */
-	__next40pxDefaultSize?: boolean;
 };

package/src/draggable/index.tsx

@@ -71,7 +71,7 @@ export function Draggable( {
 	__experimentalDragComponent: dragComponent,
 }: DraggableProps ) {
 	const dragComponentRef = useRef< HTMLDivElement >( null );
-	const cleanup = useRef( () => {} );
+	const cleanupRef = useRef( () => {} );
 
 	/**
 	 * Removes the element clone, resets cursor, and removes drag listener.
@@ -80,7 +80,7 @@ export function Draggable( {
 	 */
 	function end( event: DragEvent ) {
 		event.preventDefault();
-		cleanup.current();
+		cleanupRef.current();
 
 		if ( onDragEnd ) {
 			onDragEnd( event );
@@ -216,7 +216,7 @@ export function Draggable( {
 			onDragStart( event );
 		}
 
-		cleanup.current = () => {
+		cleanupRef.current = () => {
 			// Remove drag clone.
 			if ( cloneWrapper && cloneWrapper.parentNode ) {
 				cloneWrapper.parentNode.removeChild( cloneWrapper );
@@ -235,7 +235,7 @@ export function Draggable( {
 
 	useEffect(
 		() => () => {
-			cleanup.current();
+			cleanupRef.current();
 		},
 		[]
 	);

package/src/drop-zone/style.scss

@@ -7,7 +7,7 @@
 	z-index: z-index(".components-drop-zone");
 	visibility: hidden;
 	opacity: 0;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 
 	&.is-active {
 		opacity: 1;