@wordpress/components 29.0.0 → 29.1.0

package/src/button-group/index.tsx

@@ -8,6 +8,7 @@ import type { ForwardedRef } from 'react';
  * WordPress dependencies
  */
 import { forwardRef } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -19,9 +20,16 @@ function UnforwardedButtonGroup(
 	props: WordPressComponentProps< ButtonGroupProps, 'div', false >,
 	ref: ForwardedRef< HTMLDivElement >
 ) {
-	const { className, ...restProps } = props;
+	const { className, __shouldNotWarnDeprecated, ...restProps } = props;
 	const classes = clsx( 'components-button-group', className );
 
+	if ( ! __shouldNotWarnDeprecated ) {
+		deprecated( 'wp.components.ButtonGroup', {
+			since: '6.8',
+			alternative: 'wp.components.__experimentalToggleGroupControl',
+		} );
+	}
+
 	return (
 		<div ref={ ref } role="group" className={ classes } { ...restProps } />
 	);
@@ -31,6 +39,8 @@ function UnforwardedButtonGroup(
  * ButtonGroup can be used to group any related buttons together. To emphasize
  * related buttons, a group should share a common container.
  *
+ * @deprecated Use `ToggleGroupControl` instead.
+ *
  * ```jsx
  * import { Button, ButtonGroup } from '@wordpress/components';
  *

package/src/button-group/stories/index.story.tsx

@@ -9,8 +9,15 @@ import type { Meta, StoryObj } from '@storybook/react';
 import ButtonGroup from '..';
 import Button from '../../button';
 
+/**
+ * ButtonGroup can be used to group any related buttons together.
+ * To emphasize related buttons, a group should share a common container.
+ *
+ * This component is deprecated. Use `ToggleGroupControl` instead.
+ */
 const meta: Meta< typeof ButtonGroup > = {
-	title: 'Components/ButtonGroup',
+	title: 'Components (Deprecated)/ButtonGroup',
+	id: 'components-buttongroup',
 	component: ButtonGroup,
 	argTypes: {
 		children: { control: false },

package/src/button-group/types.ts

@@ -8,4 +8,11 @@ export type ButtonGroupProps = {
 	 * The children elements.
 	 */
 	children: ReactNode;
+	/**
+	 * Do not throw a warning for component deprecation.
+	 * For internal components of other components that already throw the warning.
+	 *
+	 * @ignore
+	 */
+	__shouldNotWarnDeprecated?: boolean;
 };

package/src/custom-select-control/index.tsx

@@ -149,16 +149,16 @@ function CustomSelectControl< T extends CustomSelectOption >(
 			);
 		} );
 
-	const { value: currentValue } = store.getState();
+	const currentValue = Ariakit.useStoreState( store, 'value' );
 
 	const renderSelectedValueHint = () => {
 		const selectedOptionHint = options
 			?.map( applyOptionDeprecations )
-			?.find( ( { name } ) => store.getState().value === name )?.hint;
+			?.find( ( { name } ) => currentValue === name )?.hint;
 
 		return (
 			<Styled.SelectedExperimentalHintWrapper>
-				{ store.getState().value }
+				{ currentValue }
 				{ selectedOptionHint && (
 					<Styled.SelectedExperimentalHintItem
 						// Keeping the classname for legacy reasons

package/src/custom-select-control-v2/custom-select.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
-import { useStoreState } from '@ariakit/react';
 
 /**
  * WordPress dependencies
@@ -63,7 +62,7 @@ const CustomSelectButton = ( {
 		CustomSelectStore,
 	'onChange'
 > ) => {
-	const { value: currentValue } = useStoreState( store );
+	const { value: currentValue } = Ariakit.useStoreState( store );
 
 	const computedRenderSelectedValue = useMemo(
 		() => renderSelectedValue ?? defaultRenderSelectedValue,

package/src/custom-select-control-v2/stories/index.story.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import type { Meta, StoryFn } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 /**
  * WordPress dependencies
@@ -44,6 +45,9 @@ const meta: Meta< typeof CustomSelectControlV2 > = {
 			</div>
 		),
 	],
+	args: {
+		onChange: fn(),
+	},
 };
 export default meta;
 

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

@@ -306,6 +306,7 @@ function Day( {
 
 	return (
 		<DayButton
+			__next40pxDefaultSize
 			ref={ ref }
 			className="components-datetime__date__day" // Unused, for backwards compatibility.
 			disabled={ isInvalid }

package/src/dimension-control/index.tsx

@@ -113,6 +113,7 @@ export function DimensionControl( props: DimensionControlProps ) {
 		<ContextSystemProvider value={ CONTEXT_VALUE }>
 			<SelectControl
 				__next40pxDefaultSize={ __next40pxDefaultSize }
+				__shouldNotWarnDeprecated36pxSize
 				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 				className={ clsx(
 					className,

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

@@ -63,7 +63,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
 }
 
 .emotion-12 {
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   line-height: 1.4;
   margin: 0;
   text-wrap: balance;
@@ -345,7 +345,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
 }
 
 .emotion-12 {
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   line-height: 1.4;
   margin: 0;
   text-wrap: balance;
@@ -637,7 +637,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
 }
 
 .emotion-12 {
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   line-height: 1.4;
   margin: 0;
   text-wrap: balance;
@@ -941,7 +941,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
 }
 
 .emotion-12 {
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   line-height: 1.4;
   margin: 0;
   text-wrap: balance;

package/src/disabled/stories/index.story.tsx

@@ -55,6 +55,7 @@ const Form = () => {
 			/>
 			<SelectControl
 				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				label="Select Control"
 				onChange={ () => {} }
 				options={ [

package/src/drop-zone/stories/index.story.tsx

@@ -21,7 +21,13 @@ export default meta;
 
 const Template: StoryFn< typeof DropZone > = ( props ) => {
 	return (
-		<div style={ { background: 'lightgray', padding: 16 } }>
+		<div
+			style={ {
+				background: 'lightgray',
+				padding: 32,
+				position: 'relative',
+			} }
+		>
 			Drop something here
 			<DropZone { ...props } />
 		</div>

package/src/font-size-picker/styles.ts

@@ -16,6 +16,7 @@ export const Container = styled.fieldset`
 	border: 0;
 	margin: 0;
 	padding: 0;
+	display: contents;
 `;
 
 export const Header = styled( HStack )`

package/src/form-file-upload/README.md

@@ -19,60 +19,64 @@ const MyFormFileUpload = () => (
   </FormFileUpload>
 );
 ```
+
 ## Props
 
 ### `__next40pxDefaultSize`
 
-Start opting into the larger default height that will become the default size in a future version.
-
  - Type: `boolean`
  - Required: No
  - Default: `false`
 
+Start opting into the larger default height that will become the default size in a future version.
+
 ### `accept`
 
+ - Type: `string`
+ - Required: No
+
 A string passed to the `input` element that tells the browser which
 [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers)
 can be uploaded by the user. e.g: `image/*,video/*`.
 
- - Type: `string`
- - Required: No
-
 ### `children`
 
-Children are passed as children of `Button`.
-
  - Type: `ReactNode`
  - Required: No
 
+Children are passed as children of `Button`.
+
 ### `icon`
 
+ - Type: `IconType`
+ - Required: No
+
 The icon to render in the default button.
 
 See the `Icon` component docs for more information.
 
- - Type: `IconType`
- - Required: No
-
 ### `multiple`
 
-Whether to allow multiple selection of files or not.
-
  - Type: `boolean`
  - Required: No
  - Default: `false`
 
+Whether to allow multiple selection of files or not.
+
 ### `onChange`
 
+ - Type: `ChangeEventHandler<HTMLInputElement>`
+ - Required: Yes
+
 Callback function passed directly to the `input` file element.
 
 Select files will be available in `event.currentTarget.files`.
 
- - Type: `ChangeEventHandler<HTMLInputElement>`
- - Required: Yes
-
 ### `onClick`
 
+ - Type: `MouseEventHandler<HTMLInputElement>`
+ - Required: No
+
 Callback function passed directly to the `input` file element.
 
 This can be useful when you want to force a `change` event to fire when
@@ -89,17 +93,14 @@ an empty string in the `onClick` function.
 </FormFileUpload>
 ```
 
- - Type: `MouseEventHandler<HTMLInputElement>`
- - Required: No
-
 ### `render`
 
+ - Type: `(arg: { openFileDialog: () => void; }) => ReactNode`
+ - Required: No
+
 Optional callback function used to render the UI.
 
 If passed, the component does not render the default UI (a button) and
 calls this function to render it. The function receives an object with
 property `openFileDialog`, a function that, when called, opens the browser
 native file upload modal window.
-
- - Type: `(arg: { openFileDialog: () => void; }) => ReactNode`
- - Required: No

package/src/gradient-picker/README.md

@@ -43,114 +43,115 @@ const MyGradientPicker = () => {
   );
 };
 ```
+
 ## Props
 
 ### `__experimentalIsRenderedInSidebar`
 
-Whether this is rendered in the sidebar.
-
  - Type: `boolean`
  - Required: No
  - Default: `false`
 
-### `asButtons`
+Whether this is rendered in the sidebar.
 
-Whether the control should present as a set of buttons,
-each with its own tab stop.
+### `asButtons`
 
  - Type: `boolean`
  - Required: No
  - Default: `false`
 
-### `aria-label`
+Whether the control should present as a set of buttons,
+each with its own tab stop.
 
-A label to identify the purpose of the control.
+### `aria-label`
 
  - Type: `string`
  - Required: No
 
-### `aria-labelledby`
+A label to identify the purpose of the control.
 
-An ID of an element to provide a label for the control.
+### `aria-labelledby`
 
  - Type: `string`
  - Required: No
 
-### `className`
+An ID of an element to provide a label for the control.
 
-The class name added to the wrapper.
+### `className`
 
  - Type: `string`
  - Required: No
 
-### `clearable`
+The class name added to the wrapper.
 
-Whether the palette should have a clearing button or not.
+### `clearable`
 
  - Type: `boolean`
  - Required: No
  - Default: `true`
 
-### `disableCustomGradients`
+Whether the palette should have a clearing button or not.
 
-If true, the gradient picker will not be displayed and only defined
-gradients from `gradients` will be shown.
+### `disableCustomGradients`
 
  - Type: `boolean`
  - Required: No
  - Default: `false`
 
-### `enableAlpha`
+If true, the gradient picker will not be displayed and only defined
+gradients from `gradients` will be shown.
 
-Whether to enable alpha transparency options in the picker.
+### `enableAlpha`
 
  - Type: `boolean`
  - Required: No
  - Default: `true`
 
+Whether to enable alpha transparency options in the picker.
+
 ### `gradients`
 
+ - Type: `GradientsProp`
+ - Required: No
+ - Default: `[]`
+
 An array of objects as predefined gradients displayed above the gradient
 selector. Alternatively, if there are multiple sets (or 'origins') of
 gradients, you can pass an array of objects each with a `name` and a
 `gradients` array which will in turn contain the predefined gradient objects.
 
- - Type: `GradientsProp`
- - Required: No
- - Default: `[]`
-
 ### `headingLevel`
 
-The heading level. Only applies in cases where gradients are provided
-from multiple origins (i.e. when the array passed as the `gradients` prop
-contains two or more items).
-
  - Type: `1 | 2 | 3 | 4 | 5 | 6 | "1" | "2" | "3" | "4" | ...`
  - Required: No
  - Default: `2`
 
-### `loop`
+The heading level. Only applies in cases where gradients are provided
+from multiple origins (i.e. when the array passed as the `gradients` prop
+contains two or more items).
 
-Prevents keyboard interaction from wrapping around.
-Only used when `asButtons` is not true.
+### `loop`
 
  - Type: `boolean`
  - Required: No
  - Default: `true`
 
-### `onChange`
+Prevents keyboard interaction from wrapping around.
+Only used when `asButtons` is not true.
 
-The function called when a new gradient has been defined. It is passed to
-the `currentGradient` as an argument.
+### `onChange`
 
  - Type: `(currentGradient: string) => void`
  - Required: Yes
 
-### `value`
+The function called when a new gradient has been defined. It is passed to
+the `currentGradient` as an argument.
 
-The current value of the gradient. Pass a css gradient string (See default value for example).
-Optionally pass in a `null` value to specify no gradient is currently selected.
+### `value`
 
  - Type: `string`
  - Required: No
  - Default: `'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'`
+
+The current value of the gradient. Pass a css gradient string (See default value for example).
+Optionally pass in a `null` value to specify no gradient is currently selected.

package/src/heading/hook.ts

@@ -14,7 +14,7 @@ export function useHeading(
 	const {
 		as: asProp,
 		level = 2,
-		color = COLORS.gray[ 900 ],
+		color = COLORS.theme.foreground,
 		isBlock = true,
 		weight = CONFIG.fontWeightHeading as import('react').CSSProperties[ 'fontWeight' ],
 		...otherProps

package/src/heading/test/__snapshots__/index.tsx.snap

@@ -2,12 +2,12 @@
 
 exports[`props should render correctly 1`] = `
 .emotion-0 {
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   line-height: 1.4;
   margin: 0;
   text-wrap: balance;
   text-wrap: pretty;
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   font-size: calc(1.95 * 13px);
   font-weight: 600;
   display: block;
@@ -30,7 +30,7 @@ Snapshot Diff:
 @@ -1,10 +1,10 @@
   Array [
     Object {
-      "color": "#1e1e1e",
+      "color": "var(--wp-components-color-foreground, #1e1e1e)",
       "display": "block",
 -     "font-size": "calc(1.25 * 13px)",
 +     "font-size": "calc(1.95 * 13px)",
@@ -49,7 +49,7 @@ Snapshot Diff:
 @@ -1,10 +1,10 @@
   Array [
     Object {
-      "color": "#1e1e1e",
+      "color": "var(--wp-components-color-foreground, #1e1e1e)",
       "display": "block",
 -     "font-size": "calc(1.25 * 13px)",
 +     "font-size": "calc(1.95 * 13px)",

package/src/icon/README.md

@@ -11,10 +11,15 @@ import { wordpress } from '@wordpress/icons';
 
 <Icon icon={ wordpress } />
 ```
+
 ## Props
 
 ### `icon`
 
+ - Type: `IconType`
+ - Required: No
+ - Default: `null`
+
 The icon to render. In most cases, you should use an icon from
 [the `@wordpress/icons` package](https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library).
 
@@ -24,16 +29,12 @@ Other supported values are: component instances, functions,
 
 The `size` value, as well as any other additional props, will be passed through.
 
- - Type: `IconType`
- - Required: No
- - Default: `null`
-
 ### `size`
 
-The size (width and height) of the icon.
-
-Defaults to `20` when `icon` is a string (i.e. a Dashicon id), otherwise `24`.
-
  - Type: `number`
  - Required: No
  - Default: `'string' === typeof icon ? 20 : 24`
+
+The size (width and height) of the icon.
+
+Defaults to `20` when `icon` is a string (i.e. a Dashicon id), otherwise `24`.

package/src/input-control/README.md

@@ -17,6 +17,7 @@ const Example = () => {
 
 	return (
 		<InputControl
+			__next40pxDefaultSize
 			value={ value }
 			onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
 		/>

package/src/input-control/index.tsx

@@ -20,6 +20,7 @@ import { space } from '../utils/space';
 import { useDraft } from './utils';
 import BaseControl from '../base-control';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const noop = () => {};
 
@@ -36,6 +37,7 @@ export function UnforwardedInputControl(
 ) {
 	const {
 		__next40pxDefaultSize,
+		__shouldNotWarnDeprecated36pxSize,
 		__unstableStateReducer: stateReducer = ( state ) => state,
 		__unstableInputWidth,
 		className,
@@ -68,6 +70,13 @@ export function UnforwardedInputControl(
 
 	const helpProp = !! help ? { 'aria-describedby': `${ id }__help` } : {};
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'InputControl',
+		__next40pxDefaultSize,
+		size,
+		__shouldNotWarnDeprecated36pxSize,
+	} );
+
 	return (
 		<BaseControl
 			className={ classes }
@@ -125,6 +134,7 @@ export function UnforwardedInputControl(
  *
  *   return (
  *  	<InputControl
+ * 			__next40pxDefaultSize
  *  		value={ value }
  *  		onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
  *  	/>

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

@@ -46,6 +46,7 @@ export const Default = Template.bind( {} );
 Default.args = {
 	label: 'Value',
 	placeholder: 'Placeholder',
+	__next40pxDefaultSize: true,
 };
 
 export const WithHelpText = Template.bind( {} );
@@ -117,7 +118,6 @@ export const ShowPassword: StoryFn< typeof InputControl > = ( args ) => {
 	return (
 		<InputControl
 			type={ visible ? 'text' : 'password' }
-			label="Password"
 			suffix={
 				<InputControlSuffixWrapper variant="control">
 					<Button
@@ -132,3 +132,8 @@ export const ShowPassword: StoryFn< typeof InputControl > = ( args ) => {
 		/>
 	);
 };
+ShowPassword.args = {
+	...Default.args,
+	label: 'Password',
+	placeholder: undefined,
+};

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

@@ -17,9 +17,15 @@ import BaseInputControl from '../';
 const getInput = () => screen.getByTestId( 'input' );
 
 describe( 'InputControl', () => {
-	const InputControl = ( props ) => (
-		<BaseInputControl { ...props } data-testid="input" />
-	);
+	const InputControl = ( props ) => {
+		return (
+			<BaseInputControl
+				{ ...props }
+				__next40pxDefaultSize
+				data-testid="input"
+			/>
+		);
+	};
 
 	describe( 'Basic rendering', () => {
 		it( 'should render', () => {

package/src/input-control/types.ts

@@ -40,6 +40,13 @@ interface BaseProps {
 	 * @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;
 	__unstableInputWidth?: CSSProperties[ 'width' ];
 	/**
 	 * If true, the label will only be visible to screen readers.
@@ -129,7 +136,7 @@ export interface InputBaseProps extends BaseProps, FlexProps {
 	 * If you want to apply standard padding in accordance with the size variant, wrap the element in
 	 * the provided `<InputControlPrefixWrapper>` component.
 	 *
-	 * @example
+	 * ```jsx
 	 * import {
 	 *   __experimentalInputControl as InputControl,
 	 *   __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
@@ -138,6 +145,7 @@ export interface InputBaseProps extends BaseProps, FlexProps {
 	 * <InputControl
 	 *   prefix={<InputControlPrefixWrapper>@</InputControlPrefixWrapper>}
 	 * />
+	 * ```
 	 */
 	prefix?: ReactNode;
 	/**
@@ -147,7 +155,7 @@ export interface InputBaseProps extends BaseProps, FlexProps {
 	 * If you want to apply standard padding in accordance with the size variant, wrap the element in
 	 * the provided `<InputControlSuffixWrapper>` component.
 	 *
-	 * @example
+	 * ```jsx
 	 * import {
 	 *   __experimentalInputControl as InputControl,
 	 *   __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
@@ -156,6 +164,7 @@ export interface InputBaseProps extends BaseProps, FlexProps {
 	 * <InputControl
 	 *   suffix={<InputControlSuffixWrapper>%</InputControlSuffixWrapper>}
 	 * />
+	 * ```
 	 */
 	suffix?: ReactNode;
 	/**