@wordpress/components 28.12.0 → 28.13.0

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

@@ -50,9 +50,15 @@ export function FormFileUpload( {
 	// @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.
-	const compatAccept = !! accept?.includes( 'image/*' )
-		? `${ accept }, image/heic, image/heif`
-		: accept;
+	// 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">

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/gradient-picker/README.md

@@ -1,110 +1,148 @@
 # GradientPicker
 
-GradientPicker is a React component that renders a color gradient picker to define a multi step gradient. There's either a _linear_ or a _radial_ type available.
+<!-- This file is generated automatically and cannot be edited directly. Make edits via TypeScript types and TSDocs. -->
 
-![gradient-picker](https://user-images.githubusercontent.com/881729/147505438-3818c4c7-65b5-4394-b97b-af903c62adce.png)
+<p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-gradientpicker--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>
 
-## Usage
-
-Render a GradientPicker.
+GradientPicker is a React component that renders a color gradient picker to
+define a multi step gradient. There's either a _linear_ or a _radial_ type
+available.
 
 ```jsx
 import { useState } from 'react';
 import { GradientPicker } from '@wordpress/components';
 
-const myGradientPicker = () => {
-	const [ gradient, setGradient ] = useState( null );
-
-	return (
-		<GradientPicker
-			value={ gradient }
-			onChange={ ( currentGradient ) => setGradient( currentGradient ) }
-			gradients={ [
-				{
-					name: 'JShine',
-					gradient:
-						'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
-					slug: 'jshine',
-				},
-				{
-					name: 'Moonlit Asteroid',
-					gradient:
-						'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
-					slug: 'moonlit-asteroid',
-				},
-				{
-					name: 'Rastafarie',
-					gradient:
-						'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
-					slug: 'rastafari',
-				},
-			] }
-		/>
-	);
+const MyGradientPicker = () => {
+  const [ gradient, setGradient ] = useState( null );
+
+  return (
+    <GradientPicker
+      value={ gradient }
+      onChange={ ( currentGradient ) => setGradient( currentGradient ) }
+      gradients={ [
+        {
+          name: 'JShine',
+          gradient:
+            'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
+          slug: 'jshine',
+        },
+        {
+          name: 'Moonlit Asteroid',
+          gradient:
+            'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
+          slug: 'moonlit-asteroid',
+        },
+        {
+          name: 'Rastafarie',
+          gradient:
+            'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
+          slug: 'rastafari',
+        },
+      ] }
+    />
+  );
 };
 ```
-
 ## Props
 
-The component accepts the following props:
+### `__experimentalIsRenderedInSidebar`
 
-### `className`: `string`
+Whether this is rendered in the sidebar.
 
-The class name added to the wrapper.
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
 
--   Required: No
+### `asButtons`
 
-### `value`: `string`
+Whether the control should present as a set of buttons,
+each with its own tab stop.
 
-The current value of the gradient. Pass a css gradient like `linear-gradient(90deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%)`. Optionally pass in a `null` value to specify no gradient is currently selected.
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
 
--   Required: No
--   Default: `linear-gradient(90deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%)`
+### `aria-label`
 
-### `onChange`: `( currentGradient: string | undefined ) => void`
+A label to identify the purpose of the control.
 
-The function called when a new gradient has been defined. It is passed the `currentGradient` as an argument.
+ - Type: `string`
+ - Required: No
 
--   Required: Yes
+### `aria-labelledby`
 
-### `gradients`: `GradientsProp[]`
+An ID of an element to provide a label for the control.
 
-An array of objects of predefined gradients displayed above the gradient selector.
+ - Type: `string`
+ - Required: No
+
+### `className`
+
+The class name added to the wrapper.
 
--   Required: No
--   Default: `[]`
+ - Type: `string`
+ - Required: No
 
-### `clearable`: `boolean`
+### `clearable`
 
 Whether the palette should have a clearing button or not.
 
--   Required: No
--   Default: true
+ - Type: `boolean`
+ - Required: No
+ - Default: `true`
+
+### `disableCustomGradients`
+
+If true, the gradient picker will not be displayed and only defined
+gradients from `gradients` will be shown.
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
+
+### `gradients`
+
+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: `[]`
 
-### `disableCustomGradients`: `boolean`
+### `headingLevel`
 
-If true, the gradient picker will not be displayed and only defined gradients from `gradients` are available.
+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).
 
--   Required: No
--   Default: false
+ - Type: `1 | 2 | 3 | 4 | 5 | 6 | "1" | "2" | "3" | "4" | ...`
+ - Required: No
+ - Default: `2`
 
-### `headingLevel`: `1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'`
+### `loop`
 
-The heading level. Only applies in cases where gradients are provided from multiple origins (ie. 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.
 
--   Required: No
--   Default: `2`
+ - Type: `boolean`
+ - Required: No
+ - Default: `true`
 
-### `asButtons`: `boolean`
+### `onChange`
 
-Whether the control should present as a set of buttons, each with its own tab stop.
+The function called when a new gradient has been defined. It is passed to
+the `currentGradient` as an argument.
 
-- Required: No
-- Default: `false`
+ - Type: `(currentGradient: string) => void`
+ - Required: Yes
 
-### `loop`: `boolean`
+### `value`
 
-Prevents keyboard interaction from wrapping around. Only used when `asButtons` is not true.
+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.
 
-- Required: No
-- Default: `true`
+ - Type: `string`
+ - Required: No
+ - Default: `'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'`

package/src/gradient-picker/docs-manifest.json

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