@wordpress/components 28.6.0 → 28.7.0

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/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>

package/src/dimension-control/index.tsx

@@ -17,6 +17,7 @@ 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: {
@@ -29,7 +30,7 @@ const CONTEXT_VALUE = {
 /**
  * `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';
@@ -62,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 );

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,7 +48,6 @@ const Template: StoryFn< typeof DimensionControl > = ( args ) => (
 );
 
 export const Default = Template.bind( {} );
-
 Default.args = {
 	__nextHasNoMarginBottom: true,
 	label: 'Please select a size',

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

@@ -45,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;
@@ -157,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;
@@ -249,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"
             >
@@ -327,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;
@@ -439,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;
@@ -541,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"
             >
@@ -619,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;
@@ -731,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;
@@ -845,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"
             >
@@ -923,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;
@@ -1035,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;
@@ -1149,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

@@ -31,6 +31,7 @@ describe( 'DimensionControl', () => {
 			const { container } = render(
 				<DimensionControl instanceId={ instanceId } label="Padding" />
 			);
+			expect( console ).toHaveWarned();
 			expect( container ).toMatchSnapshot();
 		} );
 

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/dropdown-menu-v2/README.md

@@ -1,11 +1,10 @@
-# `DropdownMenu` (v2)
+# `DropdownMenuV2`
 
 <div class="callout callout-alert">
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-`DropdownMenu` displays a menu to the user (such as a set of actions or functions) triggered by a button.
-
+`DropdownMenuV2` displays a menu to the user (such as a set of actions or functions) triggered by a button.
 
 ## Design guidelines
 
@@ -46,7 +45,7 @@ This component is still highly experimental, and it's not normally accessible to
 
 The component exposes a set of components that are meant to be used in combination with each other in order to implement a `DropdownMenu` correctly.
 
-### `DropdownMenu`
+### `DropdownMenuV2`
 
 The root component, used to specify the menu's trigger and its contents.
 
@@ -58,62 +57,62 @@ The component accepts the following props:
 
 The trigger button
 
-- Required: yes
+-   Required: yes
 
 ##### `children`: `React.ReactNode`
 
 The contents of the dropdown
 
-- Required: yes
+-   Required: yes
 
 ##### `defaultOpen`: `boolean`
 
 The open state of the dropdown menu when it is initially rendered. Use when not wanting to control its open state.
 
-- Required: no
-- Default: `false`
+-   Required: no
+-   Default: `false`
 
 ##### `open`: `boolean`
 
 The controlled open state of the dropdown menu. Must be used in conjunction with `onOpenChange`.
 
-- Required: no
+-   Required: no
 
 ##### `onOpenChange`: `(open: boolean) => void`
 
 Event handler called when the open state of the dropdown menu changes.
 
-- Required: no
+-   Required: no
 
 ##### `modal`: `boolean`
 
 The modality of the dropdown menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.
 
-- Required: no
-- Default: `true`
+-   Required: no
+-   Default: `true`
 
 ##### `placement`: ``'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'`
 
 The placement of the dropdown menu popover.
 
-- Required: no
-- Default: `'bottom-start'` for root-level menus, `'right-start'` for nested menus
+-   Required: no
+-   Default: `'bottom-start'` for root-level menus, `'right-start'` for nested menus
 
 ##### `gutter`: `number`
 
 The distance in pixels from the trigger.
 
-- Required: no
-- Default: `8` for root-level menus, `16` for nested menus
+-   Required: no
+-   Default: `8` for root-level menus, `16` for nested menus
 
 ##### `shift`: `number`
 
 The skidding of the popover along the anchor element. Can be set to negative values to make the popover shift to the opposite side.
 
-- Required: no
-- Default: `0` for root-level menus, `-8` for nested menus
+-   Required: no
+-   Default: `0` for root-level menus, `-8` for nested menus
 
-### `DropdownMenuItem`
+### `DropdownMenuV2.Item`
 
 Used to render a menu item.
 
@@ -125,35 +124,35 @@ The component accepts the following props:
 
 The contents of the item
 
-- Required: yes
+-   Required: yes
 
 ##### `prefix`: `React.ReactNode`
 
 The contents of the item's prefix.
 
-- Required: no
+-   Required: no
 
 ##### `suffix`: `React.ReactNode`
 
 The contents of the item's suffix.
 
-- Required: no
+-   Required: no
 
 ##### `hideOnClick`: `boolean`
 
 Whether to hide the dropdown menu when the menu item is clicked.
 
-- Required: no
-- Default: `true`
+-   Required: no
+-   Default: `true`
 
 ##### `disabled`: `boolean`
 
 Determines if the element is disabled.
 
-- Required: no
-- Default: `false`
+-   Required: no
+-   Default: `false`
 
-### `DropdownMenuCheckboxItem`
+### `DropdownMenuV2.CheckboxItem`
 
 Used to render a checkbox item.
 
@@ -165,61 +164,61 @@ The component accepts the following props:
 
 The contents of the item
 
-- Required: yes
+-   Required: yes
 
 ##### `suffix`: `React.ReactNode`
 
 The contents of the item's suffix.
 
-- Required: no
+-   Required: no
 
 ##### `hideOnClick`: `boolean`
 
 Whether to hide the dropdown menu when the menu item is clicked.
 
-- Required: no
-- Default: `false`
+-   Required: no
+-   Default: `false`
 
 ##### `disabled`: `boolean`
 
 Determines if the element is disabled.
 
-- Required: no
-- Default: `false`
+-   Required: no
+-   Default: `false`
 
 ##### `name`: `string`
 
 The checkbox item's name.
 
-- Required: yes
+-   Required: yes
 
 ##### `value`: `string`
 
 The checkbox item's value, useful when using multiple checkbox items
- associated to the same `name`.
+associated to the same `name`.
 
-- Required: no
+-   Required: no
 
 ##### `checked`: `boolean`
 
 The checkbox item's value, useful when using multiple checkbox items
- associated to the same `name`.
+associated to the same `name`.
 
-- Required: no
+-   Required: no
 
 ##### `defaultChecked`: `boolean`
 
 The checked state of the checkbox menu item when it is initially rendered. Use when not wanting to control its checked state.
 
-- Required: no
+-   Required: no
 
 ##### `onChange`: `( event: React.ChangeEvent< HTMLInputElement > ) => void;`
 
 Event handler called when the checked state of the checkbox menu item changes.
 
-- Required: no
+-   Required: no
 
-### `DropdownMenuRadioItem`
+### `DropdownMenuV2.RadioItem`
 
 Used to render a radio item.
 
@@ -231,60 +230,60 @@ The component accepts the following props:
 
 The contents of the item
 
-- Required: yes
+-   Required: yes
 
 ##### `suffix`: `React.ReactNode`
 
 The contents of the item's suffix.
 
-- Required: no
+-   Required: no
 
 ##### `hideOnClick`: `boolean`
 
 Whether to hide the dropdown menu when the menu item is clicked.
 
-- Required: no
-- Default: `false`
+-   Required: no
+-   Default: `false`
 
 ##### `disabled`: `boolean`
 
 Determines if the element is disabled.
 
-- Required: no
-- Default: `false`
+-   Required: no
+-   Default: `false`
 
 ##### `name`: `string`
 
 The radio item's name.
 
-- Required: yes
+-   Required: yes
 
 ##### `value`: `string | number`
 
 The radio item's value.
 
-- Required: yes
+-   Required: yes
 
 ##### `checked`: `boolean`
 
 The checkbox item's value, useful when using multiple checkbox items
- associated to the same `name`.
+associated to the same `name`.
 
-- Required: no
+-   Required: no
 
 ##### `defaultChecked`: `boolean`
 
 The checked state of the radio menu item when it is initially rendered. Use when not wanting to control its checked state.
 
-- Required: no
+-   Required: no
 
 ##### `onChange`: `( event: React.ChangeEvent< HTMLInputElement > ) => void;`
 
 Event handler called when the checked radio menu item changes.
 
-- Required: no
+-   Required: no
 
-### `DropdownMenuItemLabel`
+### `DropdownMenuV2.ItemLabel`
 
 Used to render the menu item's label.
 
@@ -296,9 +295,9 @@ The component accepts the following props:
 
 The label contents.
 
-- Required: yes
+-   Required: yes
 
-### `DropdownMenuItemHelpText`
+### `DropdownMenuV2.ItemHelpText`
 
 Used to render the menu item's help text.
 
@@ -310,9 +309,9 @@ The component accepts the following props:
 
 The help text contents.
 
-- Required: yes
+-   Required: yes
 
-### `DropdownMenuGroup`
+### `DropdownMenuV2.Group`
 
 Used to group menu items.
 
@@ -324,8 +323,22 @@ The component accepts the following props:
 
 The contents of the group.
 
-- Required: yes
+-   Required: yes
+
+### `DropdownMenuV2.GroupLabel`
+
+Used to render a group label. The label text should be kept as short as possible.
+
+#### Props
+
+The component accepts the following props:
+
+##### `children`: `React.ReactNode`
+
+The contents of the group label.
+
+-   Required: yes
 
-### `DropdownMenuSeparatorProps`
+### `DropdownMenuV2.Separator`
 
 Used to render a visual separator.