@wordpress/components 28.11.0 → 28.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "28.11.0",
+	"version": "28.13.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -25,11 +25,12 @@
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
+	"types": "build-types",
 	"sideEffects": [
 		"build-style/**",
 		"src/**/*.scss"
 	],
-	"types": "build-types",
 	"dependencies": {
 		"@ariakit/react": "^0.4.10",
 		"@babel/runtime": "7.25.7",
@@ -84,6 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"wpScript": true,
-	"gitHead": "dcf4613b33b0eda14e203ac30f700ed0db70347f"
+	"gitHead": "cce81c13739c2a8b53d91df90c4f037cb68c2665"
 }

package/src/autocomplete/autocompleter-ui.tsx

@@ -57,6 +57,7 @@ function ListBox( {
 					key={ option.key }
 					id={ `components-autocomplete-item-${ instanceId }-${ option.key }` }
 					role="option"
+					__next40pxDefaultSize
 					aria-selected={ index === selectedIndex }
 					accessibleWhenDisabled
 					disabled={ option.isDisabled }

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

@@ -10,7 +10,8 @@ import BaseControl, { useBaseControlProps } from '..';
 import Button from '../../button';
 
 const meta: Meta< typeof BaseControl > = {
-	title: 'Components/BaseControl',
+	title: 'Components/Selection & Input/Common/BaseControl',
+	id: 'components-basecontrol',
 	component: BaseControl,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170

package/src/border-box-control/border-box-control/component.tsx

@@ -118,6 +118,7 @@ const UnconnectedBorderBoxControl = (
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
+						__shouldNotWarnDeprecated36pxSize
 						size={ size }
 					/>
 				) : (

package/src/border-box-control/border-box-control-split-controls/component.tsx

@@ -67,6 +67,7 @@ const BorderBoxControlSplitControls = (
 		isCompact: true,
 		__experimentalIsRenderedInSidebar,
 		size,
+		__shouldNotWarnDeprecated36pxSize: true,
 	};
 
 	const mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );

package/src/border-control/border-control/component.tsx

@@ -122,6 +122,7 @@ const UnconnectedBorderControl = (
 						value={ widthValue || undefined }
 						withInputField={ false }
 						__next40pxDefaultSize={ __next40pxDefaultSize }
+						__shouldNotWarnDeprecated36pxSize
 					/>
 				) }
 			</HStack>

package/src/border-control/border-control/hook.ts

@@ -38,6 +38,7 @@ export function useBorderControl(
 		width,
 		__experimentalIsRenderedInSidebar = false,
 		__next40pxDefaultSize,
+		__shouldNotWarnDeprecated36pxSize,
 		...otherProps
 	} = useContextSystem( props, 'BorderControl' );
 
@@ -45,6 +46,7 @@ export function useBorderControl(
 		componentName: 'BorderControl',
 		__next40pxDefaultSize,
 		size,
+		__shouldNotWarnDeprecated36pxSize,
 	} );
 
 	const computedSize =

package/src/border-control/border-control-dropdown/component.tsx

@@ -188,7 +188,7 @@ const BorderControlDropdown = (
 			tooltipPosition={ dropdownPosition }
 			label={ __( 'Border color and style picker' ) }
 			showTooltip
-			__next40pxDefaultSize={ size === '__unstable-large' ? true : false }
+			__next40pxDefaultSize={ size === '__unstable-large' }
 		>
 			<span className={ indicatorWrapperClassName }>
 				<ColorIndicator

package/src/border-control/types.ts

@@ -116,6 +116,13 @@ export type BorderControlProps = ColorProps &
 		 * @default false
 		 */
 		__next40pxDefaultSize?: boolean;
+		/**
+		 * Do not throw a warning for the deprecated 36px default size.
+		 * For internal components of other components that already throw the warning.
+		 *
+		 * @ignore
+		 */
+		__shouldNotWarnDeprecated36pxSize?: boolean;
 	};
 
 export type DropdownProps = ColorProps &

package/src/box-control/README.md

@@ -1,106 +1,125 @@
 # BoxControl
 
-A control that lets users set values for top, right, bottom, and left. Can be used as an input control for values like `padding` or `margin`.
+<!-- This file is generated automatically and cannot be edited directly. Make edits via TypeScript types and TSDocs. -->
 
-## Usage
+<p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-boxcontrol--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>
+
+A control that lets users set values for top, right, bottom, and left. Can be
+used as an input control for values like `padding` or `margin`.
 
 ```jsx
 import { useState } from 'react';
 import { BoxControl } from '@wordpress/components';
 
 function Example() {
-	const [ values, setValues ] = useState( {
-		top: '50px',
-		left: '10%',
-		right: '10%',
-		bottom: '50px',
-	} );
-
-	return (
-		<BoxControl
-			values={ values }
-			onChange={ ( nextValues ) => setValues( nextValues ) }
-		/>
-	);
-}
+  const [ values, setValues ] = useState( {
+    top: '50px',
+    left: '10%',
+    right: '10%',
+    bottom: '50px',
+  } );
+
+  return (
+    <BoxControl
+      values={ values }
+      onChange={ setValues }
+    />
+  );
+};
 ```
-
 ## Props
 
-### `allowReset`: `boolean`
+### `__next40pxDefaultSize`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
+
+### `allowReset`
 
 If this property is true, a button to reset the box control is rendered.
 
--   Required: No
--   Default: `true`
+ - Type: `boolean`
+ - Required: No
+ - Default: `true`
 
-### `splitOnAxis`: `boolean`
+### `id`
 
-If this property is true, when the box control is unlinked, vertical and horizontal controls can be used instead of updating individual sides.
+The id to use as a base for the unique HTML id attribute of the control.
 
--   Required: No
--   Default: `false`
+ - Type: `string`
+ - Required: No
 
-### `inputProps`: `object`
+### `inputProps`
 
-Props for the internal [UnitControl](../unit-control) components.
+Props for the internal `UnitControl` components.
 
--   Required: No
--   Default: `{ min: 0 }`
+ - Type: `UnitControlPassthroughProps`
+ - Required: No
+ - Default: `{
+    	min: 0,
+    }`
 
-### `label`: `string`
+### `label`
 
 Heading label for the control.
 
--   Required: No
--   Default: `__( 'Box Control' )`
+ - Type: `string`
+ - Required: No
+ - Default: `__( 'Box Control' )`
 
-### `onChange`: `(next: BoxControlValue) => void`
+### `onChange`
 
 A callback function when an input value changes.
 
--   Required: Yes
+ - Type: `(next: BoxControlValue) => void`
+ - Required: No
+ - Default: `() => {}`
 
-### `resetValues`: `object`
+### `resetValues`
 
 The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.
 
--   Required: No
--   Default: `{ top: undefined, right: undefined, bottom: undefined, left: undefined }`
-
-### `sides`: `string[]`
-
-Collection of sides to allow control of. If omitted or empty, all sides will be available. Allowed values are "top", "right", "bottom", "left", "vertical", and "horizontal".
-
--   Required: No
-
-### `units`: `WPUnitControlUnit[]`
-
-Collection of available units which are compatible with [UnitControl](../unit-control).
+ - Type: `BoxControlValue`
+ - Required: No
+ - Default: `{
+    	top: undefined,
+    	right: undefined,
+    	bottom: undefined,
+    	left: undefined,
+    }`
 
--   Required: No
+### `sides`
 
-### `values`: `object`
+Collection of sides to allow control of. If omitted or empty, all sides will be available.
 
-The `top`, `right`, `bottom`, and `left` box dimension values.
+Allowed values are "top", "right", "bottom", "left", "vertical", and "horizontal".
 
--   Required: No
+ - Type: `readonly (keyof BoxControlValue | "horizontal" | "vertical")[]`
+ - Required: No
 
-### `onMouseOver`: `function`
+### `splitOnAxis`
 
-A handler for onMouseOver events.
+If this property is true, when the box control is unlinked, vertical and horizontal controls
+can be used instead of updating individual sides.
 
--   Required: No
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
 
-### `onMouseOut`: `function`
+### `units`
 
-A handler for onMouseOut events.
+Available units to select from.
 
--   Required: No
+ - Type: `WPUnitControlUnit[]`
+ - Required: No
+ - Default: `CSS_UNITS`
 
-### `__next40pxDefaultSize`: `boolean`
+### `values`
 
-Start opting into the larger default size that will become the default size in a future version.
+The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.
 
--   Required: No
--   Default: `false`
+ - Type: `BoxControlValue`
+ - Required: No

package/src/box-control/all-input-control.tsx

@@ -91,6 +91,7 @@ export default function AllInputControl( {
 			<FlexedRangeControl
 				__nextHasNoMarginBottom
 				__next40pxDefaultSize={ __next40pxDefaultSize }
+				__shouldNotWarnDeprecated36pxSize
 				aria-controls={ inputId }
 				label={ LABELS.all }
 				hideLabelFromVision

package/src/box-control/axial-input-controls.tsx

@@ -129,6 +129,7 @@ export default function AxialInputControls( {
 						<FlexedRangeControl
 							__nextHasNoMarginBottom
 							__next40pxDefaultSize={ __next40pxDefaultSize }
+							__shouldNotWarnDeprecated36pxSize
 							aria-controls={ inputId }
 							label={ LABELS[ side ] }
 							hideLabelFromVision

package/src/box-control/docs-manifest.json

@@ -0,0 +1,5 @@
+{
+	"$schema": "../../schemas/docs-manifest.json",
+	"displayName": "BoxControl",
+	"filePath": "./index.tsx"
+}

package/src/box-control/index.tsx

@@ -51,23 +51,23 @@ function useUniqueId( idProp?: string ) {
  * used as an input control for values like `padding` or `margin`.
  *
  * ```jsx
+ * import { useState } from 'react';
  * import { BoxControl } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
  *
  * function Example() {
- * 	const [ values, setValues ] = useState( {
- * 		top: '50px',
- * 		left: '10%',
- * 		right: '10%',
- * 		bottom: '50px',
- * 	} );
+ *   const [ values, setValues ] = useState( {
+ *     top: '50px',
+ *     left: '10%',
+ *     right: '10%',
+ *     bottom: '50px',
+ *   } );
  *
- * 	return (
- * 		<BoxControl
- * 			values={ values }
- * 			onChange={ ( nextValues ) => setValues( nextValues ) }
- * 		/>
- * 	);
+ *   return (
+ *     <BoxControl
+ *       values={ values }
+ *       onChange={ setValues }
+ *     />
+ *   );
  * };
  * ```
  */

package/src/box-control/input-controls.tsx

@@ -134,6 +134,7 @@ export default function BoxInputControls( {
 						<FlexedRangeControl
 							__nextHasNoMarginBottom
 							__next40pxDefaultSize={ __next40pxDefaultSize }
+							__shouldNotWarnDeprecated36pxSize
 							aria-controls={ inputId }
 							label={ LABELS[ side ] }
 							hideLabelFromVision

package/src/box-control/types.ts

@@ -58,6 +58,8 @@ export type BoxControlProps = Pick<
 	resetValues?: BoxControlValue;
 	/**
 	 * Collection of sides to allow control of. If omitted or empty, all sides will be available.
+	 *
+	 * Allowed values are "top", "right", "bottom", "left", "vertical", and "horizontal".
 	 */
 	sides?: readonly ( keyof BoxControlValue | 'horizontal' | 'vertical' )[];
 	/**

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

@@ -17,7 +17,8 @@ import { HStack } from '../../h-stack';
 
 const meta: Meta< typeof CheckboxControl > = {
 	component: CheckboxControl,
-	title: 'Components/CheckboxControl',
+	title: 'Components/Selection & Input/Common/CheckboxControl',
+	id: 'components-checkboxcontrol',
 	argTypes: {
 		onChange: {
 			action: 'onChange',

package/src/circular-option-picker/circular-option-picker-actions.tsx

@@ -47,6 +47,7 @@ export function ButtonAction( {
 }: WordPressComponentProps< ButtonAsButtonProps, 'button', false > ) {
 	return (
 		<Button
+			__next40pxDefaultSize
 			className={ clsx(
 				'components-circular-option-picker__clear',
 				className

package/src/circular-option-picker/circular-option-picker-option.tsx

@@ -94,6 +94,7 @@ export function Option( {
 	const commonProps = {
 		id,
 		className: 'components-circular-option-picker__option',
+		__next40pxDefaultSize: true,
 		...additionalProps,
 	};
 

package/src/circular-option-picker/stories/index.story.tsx

@@ -17,7 +17,8 @@ const CircularOptionPickerStoryContext = createContext< {
 } >( {} );
 
 const meta: Meta< typeof CircularOptionPicker > = {
-	title: 'Components/CircularOptionPicker',
+	title: 'Components/Selection & Input/Color/CircularOptionPicker',
+	id: 'components-circularoptionpicker',
 	component: CircularOptionPicker,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170

package/src/circular-option-picker/style.scss

@@ -67,8 +67,8 @@ $color-palette-circle-spacing: 12px;
 .components-circular-option-picker__option {
 	display: inline-block;
 	vertical-align: top;
-	height: 100%;
-	width: 100%;
+	height: 100% !important;
+	aspect-ratio: 1;
 	border: none;
 	border-radius: $radius-round;
 	background: transparent;

package/src/color-indicator/stories/index.story.tsx

@@ -10,7 +10,8 @@ import ColorIndicator from '..';
 
 const meta: Meta< typeof ColorIndicator > = {
 	component: ColorIndicator,
-	title: 'Components/ColorIndicator',
+	title: 'Components/Selection & Input/Color/ColorIndicator',
+	id: 'components-colorindicator',
 	argTypes: {
 		colorValue: {
 			control: { type: 'color' },

package/src/color-palette/index.tsx

@@ -249,7 +249,11 @@ function UnforwardedColorPalette(
 	};
 
 	const actions = !! clearable && (
-		<CircularOptionPicker.ButtonAction onClick={ clearColor }>
+		<CircularOptionPicker.ButtonAction
+			onClick={ clearColor }
+			accessibleWhenDisabled
+			disabled={ ! value }
+		>
 			{ __( 'Clear' ) }
 		</CircularOptionPicker.ButtonAction>
 	);

package/src/color-palette/stories/index.story.tsx

@@ -14,7 +14,8 @@ import { useState } from '@wordpress/element';
 import ColorPalette from '..';
 
 const meta: Meta< typeof ColorPalette > = {
-	title: 'Components/ColorPalette',
+	title: 'Components/Selection & Input/Color/ColorPalette',
+	id: 'components-colorpalette',
 	component: ColorPalette,
 	argTypes: {
 		as: { control: { type: null } },

package/src/color-picker/color-copy-button.tsx

@@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { CopyButton } from './styles';
+import { Button } from '../button';
 import Tooltip from '../tooltip';
 
 import type { ColorCopyButtonProps } from './types';
@@ -55,16 +55,14 @@ export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
 		};
 	}, [] );
 
+	const label =
+		copiedColor === color.toHex() ? __( 'Copied!' ) : __( 'Copy' );
+
 	return (
-		<Tooltip
-			delay={ 0 }
-			hideOnClick={ false }
-			text={
-				copiedColor === color.toHex() ? __( 'Copied!' ) : __( 'Copy' )
-			}
-		>
-			<CopyButton
-				size="small"
+		<Tooltip delay={ 0 } hideOnClick={ false } text={ label }>
+			<Button
+				size="compact"
+				aria-label={ label }
 				ref={ copyRef }
 				icon={ copy }
 				showTooltip={ false }

package/src/color-picker/component.tsx

@@ -87,6 +87,7 @@ const UnconnectedColorPicker = (
 				<AuxiliaryColorArtefactHStackHeader justify="space-between">
 					<SelectControl
 						__nextHasNoMarginBottom
+						size="compact"
 						options={ options }
 						value={ colorType }
 						onChange={ ( nextColorType ) =>

package/src/color-picker/stories/index.story.tsx

@@ -10,7 +10,8 @@ import { ColorPicker } from '../component';
 
 const meta: Meta< typeof ColorPicker > = {
 	component: ColorPicker,
-	title: 'Components/ColorPicker',
+	title: 'Components/Selection & Input/Color/ColorPicker',
+	id: 'components-colorpicker',
 	argTypes: {
 		as: { control: { type: null } },
 		color: { control: { type: null } },

package/src/color-picker/styles.ts

@@ -11,7 +11,6 @@ import InnerSelectControl from '../select-control';
 import InnerRangeControl from '../range-control';
 import { space } from '../utils/space';
 import { boxSizingReset } from '../utils';
-import Button from '../button';
 import { Flex } from '../flex';
 import { HStack } from '../h-stack';
 import CONFIG from '../utils/config-values';
@@ -22,7 +21,6 @@ export const NumberControlWrapper = styled( NumberControl )`
 
 export const SelectControl = styled( InnerSelectControl )`
 	margin-left: ${ space( -2 ) };
-	width: 5em;
 `;
 
 export const RangeControl = styled( InnerRangeControl )`
@@ -101,14 +99,3 @@ export const ColorfulWrapper = styled.div`
 
 	${ interactiveHueStyles }
 `;
-
-export const CopyButton = styled( Button )`
-	&&&&& {
-		min-width: ${ space( 6 ) };
-		padding: 0;
-
-		> svg {
-			margin-right: 0;
-		}
-	}
-`;

package/src/combobox-control/README.md

@@ -34,6 +34,7 @@ function MyComboboxControl() {
 	const [ filteredOptions, setFilteredOptions ] = useState( options );
 	return (
 		<ComboboxControl
+			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			label="Font Size"
 			value={ fontSize }

package/src/combobox-control/index.tsx

@@ -26,7 +26,7 @@ import TokenInput from '../form-token-field/token-input';
 import SuggestionsList from '../form-token-field/suggestions-list';
 import BaseControl from '../base-control';
 import Button from '../button';
-import { FlexBlock, FlexItem } from '../flex';
+import { FlexBlock } from '../flex';
 import withFocusOutside from '../higher-order/with-focus-outside';
 import { useControlledValue } from '../utils/hooks';
 import { normalizeTextString } from '../utils/strings';
@@ -34,6 +34,7 @@ import type { ComboboxControlOption, ComboboxControlProps } from './types';
 import type { TokenInputProps } from '../form-token-field/types';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const noop = () => {};
 
@@ -92,6 +93,7 @@ const getIndexOfMatchingSuggestion = (
  * 	const [ filteredOptions, setFilteredOptions ] = useState( options );
  * 	return (
  * 		<ComboboxControl
+ * 			__next40pxDefaultSize
  * 			__nextHasNoMarginBottom
  * 			label="Font Size"
  * 			value={ fontSize }
@@ -313,6 +315,12 @@ function ComboboxControl( props: ComboboxControlProps ) {
 		}
 	}, [ matchingSuggestions, isExpanded ] );
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'ComboboxControl',
+		__next40pxDefaultSize,
+		size: undefined,
+	} );
+
 	// Disable reason: There is no appropriate role which describes the
 	// input container intended accessible usability.
 	// TODO: Refactor click detection to use blur to stop propagation.
@@ -355,18 +363,16 @@ function ComboboxControl( props: ComboboxControlProps ) {
 							/>
 						</FlexBlock>
 						{ allowReset && (
-							<FlexItem>
-								<Button
-									className="components-combobox-control__reset"
-									icon={ closeSmall }
-									// Disable reason: Focus returns to input field when reset is clicked.
-									// eslint-disable-next-line no-restricted-syntax
-									disabled={ ! value }
-									onClick={ handleOnReset }
-									onKeyDown={ handleResetStopPropagation }
-									label={ __( 'Reset' ) }
-								/>
-							</FlexItem>
+							<Button
+								size="small"
+								icon={ closeSmall }
+								// Disable reason: Focus returns to input field when reset is clicked.
+								// eslint-disable-next-line no-restricted-syntax
+								disabled={ ! value }
+								onClick={ handleOnReset }
+								onKeyDown={ handleResetStopPropagation }
+								label={ __( 'Reset' ) }
+							/>
 						) }
 					</InputWrapperFlex>
 					{ isExpanded && (

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

@@ -34,7 +34,8 @@ const countries = [
 ];
 
 const meta: Meta< typeof ComboboxControl > = {
-	title: 'Components/ComboboxControl',
+	title: 'Components/Selection & Input/Common/ComboboxControl',
+	id: 'components-comboboxcontrol',
 	component: ComboboxControl,
 	argTypes: {
 		value: { control: { type: null } },
@@ -76,6 +77,7 @@ const Template: StoryFn< typeof ComboboxControl > = ( {
 };
 export const Default = Template.bind( {} );
 Default.args = {
+	__next40pxDefaultSize: true,
 	__nextHasNoMarginBottom: true,
 	allowReset: false,
 	label: 'Select a country',