@wordpress/components 27.1.0 → 27.2.0

package/src/button/types.ts

@@ -61,15 +61,6 @@ type BaseButtonProps = {
 	 * Renders a pressed button style.
 	 */
 	isPressed?: boolean;
-	// TODO: Deprecate officially (add console warning and move to DeprecatedButtonProps).
-	/**
-	 * Decreases the size of the button.
-	 *
-	 * Deprecated in favor of the `size` prop. If both props are defined, the `size` prop will take precedence.
-	 *
-	 * @deprecated Use the `'small'` value on the `size` prop instead.
-	 */
-	isSmall?: boolean;
 	/**
 	 * Sets the `aria-label` of the component, if none is provided.
 	 * Sets the Tooltip content if `showTooltip` is provided.
@@ -149,11 +140,48 @@ type AnchorProps = {
 };
 
 export type DeprecatedButtonProps = {
+	/**
+	 * Gives the button a default style.
+	 *
+	 * @deprecated Use the `'secondary'` value on the `variant` prop instead.
+	 * @ignore
+	 */
 	isDefault?: boolean;
+	/**
+	 * Gives the button a link style.
+	 *
+	 * @deprecated Use the `'link'` value on the `variant` prop instead.
+	 * @ignore
+	 */
 	isLink?: boolean;
+	/**
+	 * Gives the button a primary style.
+	 *
+	 * @deprecated Use the `'primary'` value on the `variant` prop instead.
+	 * @ignore
+	 */
 	isPrimary?: boolean;
+	/**
+	 * Gives the button a default style.
+	 *
+	 * @deprecated Use the `'secondary'` value on the `variant` prop instead.
+	 * @ignore
+	 */
 	isSecondary?: boolean;
+	/**
+	 * Gives the button a text-based style.
+	 *
+	 * @deprecated Use the `'tertiary'` value on the `variant` prop instead.
+	 * @ignore
+	 */
 	isTertiary?: boolean;
+	/**
+	 * Decreases the size of the button.
+	 *
+	 * @deprecated Use the `'small'` value on the `size` prop instead.
+	 * @ignore
+	 */
+	isSmall?: boolean;
 };
 
 export type DeprecatedIconButtonProps = {

package/src/confirm-dialog/README.md

@@ -138,3 +138,10 @@ The optional custom text to display as the confirmation button's label
 -   Default: "Cancel"
 
 The optional custom text to display as the cancellation button's label
+
+## Best practices
+
+The ConfirmDialog component should:
+
+-   Be used only for short confirmation messages where a cancel and confirm actions are provided.
+-   Use a descriptive text for the _confirm_ button. Default is "OK".

package/src/date-time/date/styles.ts

@@ -84,8 +84,8 @@ export const DayButton = styled( Button, {
 
 	&&& {
 		border-radius: 100%;
-		height: ${ space( 8 ) };
-		width: ${ space( 8 ) };
+		height: ${ space( 7 ) };
+		width: ${ space( 7 ) };
 
 		${ ( props ) =>
 			props.isSelected &&

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

@@ -59,7 +59,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
 
 .emotion-11 {
   color: #1e1e1e;
-  line-height: 1.2;
+  line-height: 1.4;
   margin: 0;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
@@ -330,7 +330,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
 
 .emotion-11 {
   color: #1e1e1e;
-  line-height: 1.2;
+  line-height: 1.4;
   margin: 0;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
@@ -611,7 +611,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
 
 .emotion-11 {
   color: #1e1e1e;
-  line-height: 1.2;
+  line-height: 1.4;
   margin: 0;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
@@ -904,7 +904,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
 
 .emotion-11 {
   color: #1e1e1e;
-  line-height: 1.2;
+  line-height: 1.4;
   margin: 0;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;

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

@@ -8,6 +8,8 @@ import type { Meta, StoryFn } from '@storybook/react';
  */
 import Dropdown from '..';
 import Button from '../../button';
+import MenuGroup from '../../menu-group';
+import MenuItem from '../../menu-item';
 import { DropdownContentWrapper } from '../dropdown-content-wrapper';
 
 const meta: Meta< typeof Dropdown > = {
@@ -83,3 +85,20 @@ WithNoPadding.args = {
 		</DropdownContentWrapper>
 	),
 };
+
+export const WithMenuItems = Template.bind( {} );
+WithMenuItems.args = {
+	...Default.args,
+	renderContent: () => (
+		<>
+			<MenuGroup label="Group 1">
+				<MenuItem>Item 1</MenuItem>
+				<MenuItem>Item 2</MenuItem>
+			</MenuGroup>
+			<MenuGroup label="Group 2">
+				<MenuItem>Item 1</MenuItem>
+				<MenuItem>Item 2</MenuItem>
+			</MenuGroup>
+		</>
+	),
+};

package/src/dropdown/style.scss

@@ -10,4 +10,30 @@
 	[role="menuitem"] {
 		white-space: nowrap;
 	}
+
+	.components-menu-group {
+		padding: $grid-unit-10;
+		margin-top: 0;
+		margin-bottom: 0;
+		margin-left: -$grid-unit-10;
+		margin-right: -$grid-unit-10;
+
+		&:first-child {
+			margin-top: -$grid-unit-10;
+		}
+
+		&:last-child {
+			margin-bottom: -$grid-unit-10;
+		}
+	}
+
+	.components-menu-group + .components-menu-group {
+		margin-top: 0;
+		border-top: $border-width solid $gray-400;
+		padding: $grid-unit-10;
+
+		.is-alternate & {
+			border-color: $gray-900;
+		}
+	}
 }

package/src/dropdown-menu/style.scss

@@ -60,29 +60,4 @@
 		padding-right: $grid-unit-10;
 	}
 
-	.components-menu-group {
-		padding: $grid-unit-10;
-		margin-top: 0;
-		margin-bottom: 0;
-		margin-left: -$grid-unit-10;
-		margin-right: -$grid-unit-10;
-
-		&:first-child {
-			margin-top: -$grid-unit-10;
-		}
-
-		&:last-child {
-			margin-bottom: -$grid-unit-10;
-		}
-	}
-
-	.components-menu-group + .components-menu-group {
-		margin-top: 0;
-		border-top: $border-width solid $gray-400;
-		padding: $grid-unit-10;
-
-		.is-alternate & {
-			border-color: $gray-900;
-		}
-	}
 }

package/src/flex/flex/README.md

@@ -53,14 +53,14 @@ Spacing in between each child can be adjusted by using `gap`. The value of `gap`
 -   Required: No
 -   Default: `2`
 
-##### `justify`: `CSSProperties['justifyContent']`
+### `justify`: `CSSProperties['justifyContent']`
 
 Horizontally aligns content if the `direction` is `row`, or vertically aligns content if the `direction` is `column`.
 
 -   Required: No
 -   Default: `space-between`
 
-##### `wrap`: `boolean`
+### `wrap`: `boolean`
 
 Determines if children should wrap.
 

package/src/form-token-field/README.md

@@ -4,7 +4,7 @@ A `FormTokenField` is a field similar to the tags and categories fields in the i
 
 Up to one hundred suggestions that match what the user has typed so far will be shown from which the user can pick from (auto-complete). Tokens are separated by the "," character. Suggestions can be selected with the up or down arrows and added with the tab or enter key.
 
-The `value` property is handled in a manner similar to controlled form components. See [Forms](http://facebook.github.io/react/docs/forms.html) in the React Documentation for more information.
+The `value` property is handled in a manner similar to controlled form components. See [Forms](https://react.dev/reference/react-dom/components#form-components) in the React Documentation for more information.
 
 ## Keyboard Accessibility
 

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

@@ -40,7 +40,7 @@ const identity = ( value: string ) => value;
  * Tokens are separated by the "," character. Suggestions can be selected with the up or down arrows and added with the tab or enter key.
  *
  * The `value` property is handled in a manner similar to controlled form components.
- * See [Forms](http://facebook.github.io/react/docs/forms.html) in the React Documentation for more information.
+ * See [Forms](https://react.dev/reference/react-dom/components#form-components) in the React Documentation for more information.
  */
 export function FormTokenField( props: FormTokenFieldProps ) {
 	const {

package/src/grid/README.md

@@ -27,69 +27,69 @@ function Example() {
 
 ## Props
 
-##### `align`: `CSS['alignItems']`
+### `align`: `CSS['alignItems']`
 
 Adjusts the block alignment of children.
 
 -   Required: No
 
-##### `alignment`: `GridAlignment`
+### `alignment`: `GridAlignment`
 
 Adjusts the horizontal and vertical alignment of children.
 
 -   Required: No
 
-##### `columnGap`: `CSSProperties['gridColumnGap']`
+### `columnGap`: `CSSProperties['gridColumnGap']`
 
 Adjusts the `grid-column-gap`.
 
 -   Required: No
 
-##### `columns`: `number`
+### `columns`: `number`
 
 Adjusts the number of columns of the `Grid`.
 
 -   Required: No
 -   Default: `2`
 
-##### `gap`: `number`
+### `gap`: `number`
 
 Gap between each child.
 
 -   Required: No
 -   Default: `3`
 
-##### `isInline`: `boolean`
+### `isInline`: `boolean`
 
 Changes the CSS display from `grid` to `inline-grid`.
 
 -   Required: No
 
-##### `justify`: `CSS['justifyContent']`
+### `justify`: `CSS['justifyContent']`
 
 Adjusts the inline alignment of children.
 
 -   Required: No
 
-##### `rowGap`: `CSSProperties['gridRowGap']`
+### `rowGap`: `CSSProperties['gridRowGap']`
 
 Adjusts the `grid-row-gap`.
 
 -   Required: No
 
-##### `rows`: `number`
+### `rows`: `number`
 
 Adjusts the number of rows of the `Grid`.
 
 -   Required: No
 
-##### `templateColumns`: `CSS['gridTemplateColumns']`
+### `templateColumns`: `CSS['gridTemplateColumns']`
 
 Adjusts the CSS grid `template-columns`.
 
 -   Required: No
 
-##### `templateRows`: `CSS['gridTemplateRows']`
+### `templateRows`: `CSS['gridTemplateRows']`
 
 Adjusts the CSS grid `template-rows`.
 

package/src/h-stack/README.md

@@ -29,7 +29,7 @@ function Example() {
 
 ## Props
 
-##### alignment
+### alignment
 
 **Type**: `HStackAlignment` | `CSS[ 'alignItems' ]`
 
@@ -47,33 +47,33 @@ Determines how the child elements are aligned.
 -   `edge`: Justifies content to be evenly spread out up to the main axis edges of the container.
 -   `stretch`: Stretches content to the cross axis edges of the container.
 
-##### direction
+### direction
 
 **Type**: `FlexDirection`
 
 The direction flow of the children content can be adjusted with `direction`. `column` will align children vertically and `row` will align children horizontally.
 
-##### expanded
+### expanded
 
 **Type**: `boolean`
 
 Expands to the maximum available width (if horizontal) or height (if vertical).
 
-##### justify
+### justify
 
 **Type**: `CSS['justifyContent']`
 
 Horizontally aligns content if the `direction` is `row`, or vertically aligns content if the `direction` is `column`.
 In the example below, `flex-start` will align the children content to the left.
 
-##### spacing
+### spacing
 
 **Type**: `CSS['width']`
 
 The amount of space between each child element. Spacing in between each child can be adjusted by using `spacing`.
 The value of `spacing` works as a multiplier to the library's grid system (base of `4px`).
 
-##### wrap
+### wrap
 
 **Type**: `boolean`
 

package/src/heading/README.md

@@ -25,7 +25,7 @@ function Example() {
 
 For a complete list of those props, check out [`Text`](/packages/components/src/text/README.md#props).
 
-##### `level`: `1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'`
+### `level`: `1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'`
 
 Passing any of the heading levels to `level` will both render the correct typographic text size as well as the semantic element corresponding to the level (`h1` for `1` for example).
 

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

@@ -3,7 +3,7 @@
 exports[`props should render correctly 1`] = `
 .emotion-0 {
   color: #1e1e1e;
-  line-height: 1.2;
+  line-height: 1.4;
   margin: 0;
   color: #1e1e1e;
   font-size: calc(1.95 * 13px);
@@ -32,7 +32,7 @@ Snapshot Diff:
 -     "font-size": "calc(1.25 * 13px)",
 +     "font-size": "calc(1.95 * 13px)",
       "font-weight": "600",
-      "line-height": "1.2",
+      "line-height": "1.4",
       "margin": "0",
     },
   ]
@@ -50,7 +50,7 @@ Snapshot Diff:
 -     "font-size": "calc(1.25 * 13px)",
 +     "font-size": "calc(1.95 * 13px)",
       "font-weight": "600",
-      "line-height": "1.2",
+      "line-height": "1.4",
       "margin": "0",
     },
   ]

package/src/input-control/README.md

@@ -10,7 +10,7 @@ InputControl components let users enter and edit text. This is an experimental c
 
 ```js
 import { __experimentalInputControl as InputControl } from '@wordpress/components';
-import { useState } from '@wordpress/compose';
+import { useState } from 'react';
 
 const Example = () => {
 	const [ value, setValue ] = useState( '' );

package/src/input-control/index.tsx

@@ -126,7 +126,7 @@ export function UnforwardedInputControl(
  *
  * ```jsx
  * import { __experimentalInputControl as InputControl } from '@wordpress/components';
- * import { useState } from '@wordpress/compose';
+ * import { useState } from 'react';
  *
  * const Example = () => {
  *   const [ value, setValue ] = useState( '' );

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

@@ -25,6 +25,7 @@ const meta: Meta< typeof InputControl > = {
 		value: { control: { disable: true } },
 	},
 	parameters: {
+		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},

package/src/item-group/test/__snapshots__/index.js.snap

@@ -11,8 +11,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-ufjlmj-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-17haj95-View-large-item-spacedAround e19lxcc00"
+-         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-gg7ygh-View-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -24,8 +24,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-ufjlmj-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-17haj95-View-large-item-spacedAround e19lxcc00"
+-         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-gg7ygh-View-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -44,8 +44,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-cl593w-View-medium-item e19lxcc00"
-+       class="components-item css-1yvqxd-View-large-item e19lxcc00"
+-       class="components-item css-1lf4kzd-View-medium-item e19lxcc00"
++       class="components-item css-1vv4aem-View-large-item e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -74,7 +74,7 @@ exports[`ItemGroup ItemGroup component should render correctly 1`] = `
 }
 
 .emotion-3 {
-  padding: calc((36px - calc(13px * 1.2) - 2px) / 2) 12px;
+  padding: calc((36px - calc(13px * 1.4) - 2px) / 2) 12px;
   box-sizing: border-box;
   width: 100%;
   display: block;
@@ -125,8 +125,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-ufjlmj-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-cl593w-View-medium-item e19lxcc00"
+-         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-1lf4kzd-View-medium-item e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -153,8 +153,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-ufjlmj-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-cl593w-View-medium-item e19lxcc00"
+-         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-1lf4kzd-View-medium-item e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >

package/src/mobile/bottom-sheet-select-control/README.md

@@ -10,7 +10,7 @@ However, instead of opening up the selection in a modal, the selection opens up
  * WordPress dependencies
  */
 import { BottomSheetSelectControl } from '@wordpress/components';
-import { useState } from '@wordpress/compose';
+import { useState } from 'react';
 
 const options = [
 	{

package/src/palette-edit/index.tsx

@@ -74,7 +74,7 @@ function NameInput( { value, onChange, label }: NameInputProps ) {
 }
 
 /**
- * Returns a name for a palette item in the format "Color + id".
+ * Returns a name and slug for a palette item. The name takes the format "Color + id".
  * To ensure there are no duplicate ids, this function checks all slugs.
  * It expects slugs to be in the format: slugPrefix + color- + number.
  * It then sets the id component of the new name based on the incremented id of the highest existing slug id.
@@ -82,9 +82,9 @@ function NameInput( { value, onChange, label }: NameInputProps ) {
  * @param elements   An array of color palette items.
  * @param slugPrefix The slug prefix used to match the element slug.
  *
- * @return A unique name for a palette item.
+ * @return A name and slug for the new palette item.
  */
-export function getNameForPosition(
+export function getNameAndSlugForPosition(
 	elements: PaletteElement[],
 	slugPrefix: string
 ) {
@@ -102,11 +102,14 @@ export function getNameForPosition(
 		return previousValue;
 	}, 1 );
 
-	return sprintf(
-		/* translators: %s: is an id for a custom color */
-		__( 'Color %s' ),
-		position
-	);
+	return {
+		name: sprintf(
+			/* translators: %s: is an id for a custom color */
+			__( 'Color %s' ),
+			position
+		),
+		slug: `${ slugPrefix }color-${ position }`,
+	};
 }
 
 function ColorPickerPopover< T extends Color | Gradient >( {
@@ -434,20 +437,19 @@ export function PaletteEdit( {
 									: __( 'Add color' )
 							}
 							onClick={ () => {
-								const optionName = getNameForPosition(
-									elements,
-									slugPrefix
-								);
+								const { name, slug } =
+									getNameAndSlugForPosition(
+										elements,
+										slugPrefix
+									);
 
 								if ( !! gradients ) {
 									onChange( [
 										...gradients,
 										{
 											gradient: DEFAULT_GRADIENT,
-											name: optionName,
-											slug:
-												slugPrefix +
-												kebabCase( optionName ),
+											name,
+											slug,
 										},
 									] );
 								} else {
@@ -455,10 +457,8 @@ export function PaletteEdit( {
 										...colors,
 										{
 											color: DEFAULT_COLOR,
-											name: optionName,
-											slug:
-												slugPrefix +
-												kebabCase( optionName ),
+											name,
+											slug,
 										},
 									] );
 								}
@@ -480,7 +480,7 @@ export function PaletteEdit( {
 										: __( 'Color options' )
 								}
 								toggleProps={ {
-									isSmall: true,
+									size: 'small',
 								} }
 							>
 								{ ( { onClose }: { onClose: () => void } ) => (