@wordpress/components 28.11.0 → 28.13.0

package/src/combobox-control/style.scss

@@ -38,9 +38,3 @@ input.components-combobox-control__input[type="text"] {
 	}
 }
 
-.components-combobox-control__reset.components-button {
-	display: flex;
-	height: $grid-unit-20;
-	min-width: $grid-unit-20;
-	padding: 0;
-}

package/src/combobox-control/test/index.tsx

@@ -58,7 +58,13 @@ const getOptionSearchString = ( option: ComboboxControlOption ) =>
 	option.label.substring( 0, 11 );
 
 const ComboboxControl = ( props: ComboboxControlProps ) => {
-	return <_ComboboxControl { ...props } __nextHasNoMarginBottom />;
+	return (
+		<_ComboboxControl
+			{ ...props }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+		/>
+	);
 };
 
 const ControlledComboboxControl = ( {

package/src/composite/hover.tsx

@@ -26,5 +26,5 @@ export const CompositeHover = forwardRef<
 	// obfuscated to discourage its use outside of the component's internals.
 	const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
 
-	return <Ariakit.CompositeGroup store={ store } { ...props } ref={ ref } />;
+	return <Ariakit.CompositeHover store={ store } { ...props } ref={ ref } />;
 } );

package/src/composite/typeahead.tsx

@@ -26,5 +26,7 @@ export const CompositeTypeahead = forwardRef<
 	// obfuscated to discourage its use outside of the component's internals.
 	const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
 
-	return <Ariakit.CompositeRow store={ store } { ...props } ref={ ref } />;
+	return (
+		<Ariakit.CompositeTypeahead store={ store } { ...props } ref={ ref } />
+	);
 } );

package/src/confirm-dialog/stories/index.story.tsx

@@ -16,7 +16,8 @@ import { ConfirmDialog } from '../component';
 
 const meta: Meta< typeof ConfirmDialog > = {
 	component: ConfirmDialog,
-	title: 'Components (Experimental)/ConfirmDialog',
+	title: 'Components (Experimental)/Overlays/ConfirmDialog',
+	id: 'components-experimental-confirmdialog',
 	argTypes: {
 		isOpen: {
 			control: { type: null },

package/src/custom-gradient-picker/gradient-bar/control-points.tsx

@@ -66,6 +66,7 @@ function ControlPointButton( {
 				aria-describedby={ descriptionId }
 				aria-haspopup="true"
 				aria-expanded={ isOpen }
+				__next40pxDefaultSize
 				className={ clsx(
 					'components-custom-gradient-picker__control-point-button',
 					{
@@ -349,6 +350,7 @@ function InsertPoint( {
 			} }
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<Button
+					__next40pxDefaultSize
 					aria-expanded={ isOpen }
 					aria-haspopup="true"
 					onClick={ () => {

package/src/custom-gradient-picker/stories/index.story.tsx

@@ -13,7 +13,8 @@ import { useState } from '@wordpress/element';
 import CustomGradientPicker from '../';
 
 const meta: Meta< typeof CustomGradientPicker > = {
-	title: 'Components/CustomGradientPicker',
+	title: 'Components/Selection & Input/Color/CustomGradientPicker',
+	id: 'components-customgradientpicker',
 	component: CustomGradientPicker,
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

package/src/custom-gradient-picker/style.scss

@@ -47,7 +47,7 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 		// Same size as the .components-custom-gradient-picker__control-point-dropdown parent
 		height: inherit;
 		width: inherit;
-		min-width: $grid-unit-20;
+		min-width: $grid-unit-20 !important;
 		border-radius: $radius-round;
 
 		background: $white;

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

@@ -14,8 +14,9 @@ import { useState } from '@wordpress/element';
 import CustomSelectControl from '..';
 
 const meta: Meta< typeof CustomSelectControl > = {
-	title: 'Components/CustomSelectControl',
+	title: 'Components/Selection & Input/Common/CustomSelectControl',
 	component: CustomSelectControl,
+	id: 'components-customselectcontrol',
 	argTypes: {
 		onChange: { control: { type: null } },
 		value: { control: { type: null } },

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

@@ -14,7 +14,8 @@ import { useState } from '@wordpress/element';
 import CustomSelectControlV2 from '..';
 
 const meta: Meta< typeof CustomSelectControlV2 > = {
-	title: 'Components/CustomSelectControl v2',
+	title: 'Components/Selection & Input/Common/CustomSelectControl v2',
+	id: 'components-customselectcontrol-v2',
 	component: CustomSelectControlV2,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170

package/src/dashicon/types.ts

@@ -219,7 +219,6 @@ export type IconKey =
 	| 'insert-before'
 	| 'insert'
 	| 'instagram'
-	| 'keyboard-hide'
 	| 'laptop'
 	| 'layout'
 	| 'leftright'
@@ -266,7 +265,6 @@ export type IconKey =
 	| 'playlist-audio'
 	| 'playlist-video'
 	| 'plus-alt'
-	| 'plus-light'
 	| 'plus'
 	| 'portfolio'
 	| 'post-status'

package/src/date-time/stories/date-time.story.tsx

@@ -15,7 +15,8 @@ import DateTimePicker from '../date-time';
 import { daysFromNow, isWeekend } from './utils';
 
 const meta: Meta< typeof DateTimePicker > = {
-	title: 'Components/DateTimePicker',
+	title: 'Components/Selection & Input/Time & Date/DateTimePicker',
+	id: 'components-datetimepicker',
 	component: DateTimePicker,
 	argTypes: {
 		currentDate: { control: 'date' },

package/src/date-time/stories/date.story.tsx

@@ -15,7 +15,8 @@ import DatePicker from '../date';
 import { daysFromNow, isWeekend } from './utils';
 
 const meta: Meta< typeof DatePicker > = {
-	title: 'Components/DatePicker',
+	title: 'Components/Selection & Input/Time & Date/DatePicker',
+	id: 'components-datepicker',
 	component: DatePicker,
 	argTypes: {
 		currentDate: { control: 'date' },

package/src/date-time/stories/time.story.tsx

@@ -14,7 +14,8 @@ import { useState, useEffect } from '@wordpress/element';
 import TimePicker from '../time';
 
 const meta: Meta< typeof TimePicker > = {
-	title: 'Components/TimePicker',
+	title: 'Components/Selection & Input/Time & Date/TimePicker',
+	id: 'components-timepicker',
 	component: TimePicker,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { 'TimePicker.TimeInput': TimePicker.TimeInput },

package/src/dimension-control/README.md

@@ -22,6 +22,7 @@ export default function MyCustomDimensionControl() {
 	return (
 		<DimensionControl
 			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label={ 'Padding' }
 			icon={ 'desktop' }
 			onChange={ ( value ) => setPaddingSize( value ) }

package/src/dimension-control/index.tsx

@@ -18,6 +18,7 @@ import type { DimensionControlProps, Size } from './types';
 import type { SelectControlSingleSelectionProps } from '../select-control/types';
 import { ContextSystemProvider } from '../context';
 import deprecated from '@wordpress/deprecated';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const CONTEXT_VALUE = {
 	BaseControl: {
@@ -41,6 +42,7 @@ const CONTEXT_VALUE = {
  *
  * 	return (
  * 		<DimensionControl
+ * 			__next40pxDefaultSize
  * 			__nextHasNoMarginBottom
  * 			label={ 'Padding' }
  * 			icon={ 'desktop' }
@@ -68,6 +70,12 @@ export function DimensionControl( props: DimensionControlProps ) {
 		version: '7.0',
 	} );
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'DimensionControl',
+		__next40pxDefaultSize,
+		size: undefined,
+	} );
+
 	const onChangeSpacingSize: SelectControlSingleSelectionProps[ 'onChange' ] =
 		( val ) => {
 			const theSize = findSizeBySlug( sizes, val );

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

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

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

@@ -126,12 +126,12 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 16px;
-  height: 32px;
-  min-height: 32px;
+  height: 40px;
+  min-height: 40px;
   padding-top: 0;
   padding-bottom: 0;
-  padding-left: 8px;
-  padding-right: 26px;
+  padding-left: 12px;
+  padding-right: 30px;
   overflow: hidden;
 }
 
@@ -157,8 +157,8 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
 }
 
 .emotion-21 {
-  -webkit-padding-end: 8px;
-  padding-inline-end: 8px;
+  -webkit-padding-end: 12px;
+  padding-inline-end: 12px;
   position: absolute;
   pointer-events: none;
   right: 0;
@@ -408,12 +408,12 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 16px;
-  height: 32px;
-  min-height: 32px;
+  height: 40px;
+  min-height: 40px;
   padding-top: 0;
   padding-bottom: 0;
-  padding-left: 8px;
-  padding-right: 26px;
+  padding-left: 12px;
+  padding-right: 30px;
   overflow: hidden;
 }
 
@@ -439,8 +439,8 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
 }
 
 .emotion-21 {
-  -webkit-padding-end: 8px;
-  padding-inline-end: 8px;
+  -webkit-padding-end: 12px;
+  padding-inline-end: 12px;
   position: absolute;
   pointer-events: none;
   right: 0;
@@ -700,12 +700,12 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 16px;
-  height: 32px;
-  min-height: 32px;
+  height: 40px;
+  min-height: 40px;
   padding-top: 0;
   padding-bottom: 0;
-  padding-left: 8px;
-  padding-right: 26px;
+  padding-left: 12px;
+  padding-right: 30px;
   overflow: hidden;
 }
 
@@ -731,8 +731,8 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
 }
 
 .emotion-21 {
-  -webkit-padding-end: 8px;
-  padding-inline-end: 8px;
+  -webkit-padding-end: 12px;
+  padding-inline-end: 12px;
   position: absolute;
   pointer-events: none;
   right: 0;
@@ -1004,12 +1004,12 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 16px;
-  height: 32px;
-  min-height: 32px;
+  height: 40px;
+  min-height: 40px;
   padding-top: 0;
   padding-bottom: 0;
-  padding-left: 8px;
-  padding-right: 26px;
+  padding-left: 12px;
+  padding-right: 30px;
   overflow: hidden;
 }
 
@@ -1035,8 +1035,8 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
 }
 
 .emotion-21 {
-  -webkit-padding-end: 8px;
-  padding-inline-end: 8px;
+  -webkit-padding-end: 12px;
+  padding-inline-end: 12px;
   position: absolute;
   pointer-events: none;
   right: 0;

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

@@ -15,7 +15,13 @@ import { plus } from '@wordpress/icons';
 import { DimensionControl as _DimensionControl } from '../';
 
 const DimensionControl = ( props ) => {
-	return <_DimensionControl { ...props } __nextHasNoMarginBottom />;
+	return (
+		<_DimensionControl
+			{ ...props }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+		/>
+	);
 };
 
 describe( 'DimensionControl', () => {

package/src/disabled/README.md

@@ -13,7 +13,14 @@ import { Button, Disabled, TextControl } from '@wordpress/components';
 const MyDisabled = () => {
 	const [ isDisabled, setIsDisabled ] = useState( true );
 
-	let input = <TextControl label="Input" onChange={ () => {} } />;
+	let input = (
+		<TextControl
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			label="Input"
+			onChange={ () => {} }
+		/>
+	);
 	if ( isDisabled ) {
 		input = <Disabled>{ input }</Disabled>;
 	}
@@ -38,12 +45,7 @@ A component can detect if it has been wrapped in a `<Disabled />` by accessing i
 ```jsx
 function CustomButton( props ) {
 	const isDisabled = useContext( Disabled.Context );
-	return (
-		<button
-			{ ...props }
-			style={ { opacity: isDisabled ? 0.5 : 1 } }
-		/>
-	);
+	return <button { ...props } style={ { opacity: isDisabled ? 0.5 : 1 } } />;
 }
 ```
 

package/src/disabled/index.tsx

@@ -31,7 +31,14 @@ const { Consumer, Provider } = Context;
  * const MyDisabled = () => {
  * 	const [ isDisabled, setIsDisabled ] = useState( true );
  *
- * 	let input = <TextControl label="Input" onChange={ () => {} } />;
+ *	let input = (
+ *		<TextControl
+ *			__next40pxDefaultSize
+ *			__nextHasNoMarginBottom
+ *			label="Input"
+ *			onChange={ () => {} }
+ *		/>
+ *	);
  * 	if ( isDisabled ) {
  * 		input = <Disabled>{ input }</Disabled>;
  * 	}

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

@@ -42,6 +42,7 @@ const Form = () => {
 		<VStack>
 			<TextControl
 				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				label="Text Control"
 				value={ textControlValue }
 				onChange={ setTextControlValue }

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

@@ -9,7 +9,8 @@ import DropZone from '..';
 
 const meta: Meta< typeof DropZone > = {
 	component: DropZone,
-	title: 'Components/DropZone',
+	id: 'components-dropzone',
+	title: 'Components/Selection & Input/File Upload/DropZone',
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },

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

@@ -13,7 +13,8 @@ import MenuItem from '../../menu-item';
 import { DropdownContentWrapper } from '../dropdown-content-wrapper';
 
 const meta: Meta< typeof Dropdown > = {
-	title: 'Components/Dropdown',
+	title: 'Components/Overlays/Dropdown',
+	id: 'components-dropdown',
 	component: Dropdown,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { DropdownContentWrapper },

package/src/dropdown-menu/stories/index.story.tsx

@@ -23,8 +23,9 @@ import {
 } from '@wordpress/icons';
 
 const meta: Meta< typeof DropdownMenu > = {
-	title: 'Components/DropdownMenu',
+	title: 'Components/Actions/DropdownMenu',
 	component: DropdownMenu,
+	id: 'components-dropdownmenu',
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },

package/src/duotone-picker/duotone-picker.tsx

@@ -168,6 +168,8 @@ function DuotonePicker( {
 				!! clearable && (
 					<CircularOptionPicker.ButtonAction
 						onClick={ () => onChange( undefined ) }
+						accessibleWhenDisabled
+						disabled={ ! value }
 					>
 						{ __( 'Clear' ) }
 					</CircularOptionPicker.ButtonAction>

package/src/external-link/stories/index.story.tsx

@@ -10,7 +10,8 @@ import ExternalLink from '..';
 
 const meta: Meta< typeof ExternalLink > = {
 	component: ExternalLink,
-	title: 'Components/ExternalLink',
+	title: 'Components/Navigation/ExternalLink',
+	id: 'components-externallink',
 	argTypes: {
 		children: { control: { type: 'text' } },
 	},

package/src/font-size-picker/README.md

@@ -29,6 +29,7 @@ const MyFontSizePicker = () => {
 
 	return (
 		<FontSizePicker
+			__next40pxDefaultSize
 			fontSizes={ fontSizes }
 			value={ fontSize }
 			fallbackFontSize={ fallbackFontSize }

package/src/font-size-picker/font-size-picker-toggle-group.tsx

@@ -19,6 +19,7 @@ const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {
 		<ToggleGroupControl
 			__nextHasNoMarginBottom
 			__next40pxDefaultSize={ __next40pxDefaultSize }
+			__shouldNotWarnDeprecated36pxSize
 			label={ __( 'Font size' ) }
 			hideLabelFromVision
 			value={ value }

package/src/font-size-picker/index.tsx

@@ -35,6 +35,7 @@ import { Spacer } from '../spacer';
 import FontSizePickerSelect from './font-size-picker-select';
 import FontSizePickerToggleGroup from './font-size-picker-toggle-group';
 import { T_SHIRT_NAMES } from './constants';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];
 
@@ -123,6 +124,12 @@ const UnforwardedFontSizePicker = (
 		!! valueUnit && [ 'em', 'rem', 'vw', 'vh' ].includes( valueUnit );
 	const isDisabled = value === undefined;
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'FontSizePicker',
+		__next40pxDefaultSize,
+		size,
+	} );
+
 	return (
 		<Container ref={ ref } className="components-font-size-picker">
 			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
@@ -235,6 +242,7 @@ const UnforwardedFontSizePicker = (
 										__next40pxDefaultSize={
 											__next40pxDefaultSize
 										}
+										__shouldNotWarnDeprecated36pxSize
 										className="components-font-size-picker__custom-input"
 										label={ __( 'Custom Size' ) }
 										hideLabelFromVision

package/src/font-size-picker/stories/index.story.tsx

@@ -66,6 +66,7 @@ const TwoFontSizePickersWithState: StoryFn< typeof FontSizePicker > = ( {
 export const Default: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 Default.args = {
+	__next40pxDefaultSize: true,
 	disableCustomFontSizes: false,
 	fontSizes: [
 		{

package/src/font-size-picker/test/index.tsx

@@ -8,13 +8,17 @@ import { render } from '@ariakit/test/react';
 /**
  * Internal dependencies
  */
-import FontSizePicker from '../';
+import _FontSizePicker from '../';
 import type { FontSize } from '../types';
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
 
+const FontSizePicker = (
+	props: React.ComponentProps< typeof _FontSizePicker >
+) => <_FontSizePicker __next40pxDefaultSize { ...props } />;
+
 const ControlledFontSizePicker = ( {
 	onChange,
 	...props

package/src/form-file-upload/index.tsx

@@ -47,6 +47,18 @@ export function FormFileUpload( {
 			{ children }
 		</Button>
 	);
+	// @todo: Temporary fix a bug that prevents Chromium browsers from selecting ".heic" files
+	// from the file upload. See https://core.trac.wordpress.org/ticket/62268#comment:4.
+	// This can be removed once the Chromium fix is in the stable channel.
+	// Prevent Safari from adding "image/heic" and "image/heif" to the accept attribute.
+	const isSafari =
+		globalThis.window?.navigator.userAgent.includes( 'Safari' ) &&
+		! globalThis.window?.navigator.userAgent.includes( 'Chrome' ) &&
+		! globalThis.window?.navigator.userAgent.includes( 'Chromium' );
+	const compatAccept =
+		! isSafari && !! accept?.includes( 'image/*' )
+			? `${ accept }, image/heic, image/heif`
+			: accept;
 
 	return (
 		<div className="components-form-file-upload">
@@ -56,7 +68,7 @@ export function FormFileUpload( {
 				ref={ ref }
 				multiple={ multiple }
 				style={ { display: 'none' } }
-				accept={ accept }
+				accept={ compatAccept }
 				onChange={ onChange }
 				onClick={ onClick }
 				data-testid="form-file-upload-input"

package/src/form-file-upload/stories/index.story.tsx

@@ -14,7 +14,8 @@ import { upload as uploadIcon } from '@wordpress/icons';
 import FormFileUpload from '..';
 
 const meta: Meta< typeof FormFileUpload > = {
-	title: 'Components/FormFileUpload',
+	title: 'Components/Selection & Input/File Upload/FormFileUpload',
+	id: 'components-formfileupload',
 	component: FormFileUpload,
 	argTypes: {
 		icon: { control: { type: null } },

package/src/form-token-field/stories/index.story.tsx

@@ -15,7 +15,8 @@ import FormTokenField from '../';
 
 const meta: Meta< typeof FormTokenField > = {
 	component: FormTokenField,
-	title: 'Components/FormTokenField',
+	title: 'Components/Selection & Input/Common/FormTokenField',
+	id: 'components-formtokenfield',
 	argTypes: {
 		value: {
 			control: { type: null },

package/src/form-token-field/style.scss

@@ -81,7 +81,12 @@
 
 		.components-form-token-field__token-text {
 			background: transparent;
-			color: $components-color-accent;
+		}
+
+		&:not(.is-disabled) {
+			.components-form-token-field__token-text {
+				color: $components-color-accent;
+			}
 		}
 
 		.components-form-token-field__remove-token {
@@ -90,7 +95,6 @@
 			position: absolute;
 			top: 1px;
 			right: 0;
-			padding: 0;
 		}
 
 		&.is-success {
@@ -112,18 +116,11 @@
 			}
 		}
 	}
-
-	&.is-disabled {
-		.components-form-token-field__remove-token {
-			cursor: default;
-		}
-	}
 }
 
 .components-form-token-field__token-text,
 .components-form-token-field__remove-token.components-button {
 	display: inline-block;
-	line-height: 24px;
 	height: auto;
 	background: $gray-300;
 	min-width: unset;
@@ -134,20 +131,19 @@
 .components-form-token-field__token-text {
 	border-radius: $radius-x-small 0 0 $radius-x-small;
 	padding: 0 0 0 8px;
+	line-height: 24px;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
 .components-form-token-field__remove-token.components-button {
-	cursor: pointer;
 	border-radius: 0 $radius-x-small $radius-x-small 0;
-	padding: 0 2px;
 	color: $gray-900;
 	line-height: 10px;
 	overflow: initial;
 
-	&:hover {
+	&:hover:not(:disabled) {
 		color: $gray-900;
 	}
 }

package/src/form-token-field/token.tsx

@@ -72,6 +72,7 @@ export default function Token( {
 
 			<Button
 				className="components-form-token-field__remove-token"
+				size="small"
 				icon={ closeSmall }
 				onClick={ ! disabled ? onClick : undefined }
 				// Disable reason: Even when FormTokenField itself is accessibly disabled, token reset buttons shouldn't be in the tab sequence.