@wordpress/components 28.10.0 → 28.12.0

package/src/color-palette/index.native.js

@@ -115,9 +115,8 @@ function ColorPalette( {
 				scrollViewRef.current.scrollTo( { x: 0, y: 0 } );
 			}
 		}
-		// Temporarily disabling exhuastive-deps until the component can be refactored and updated safely.
+		// Not adding additional dependencies until the component can be refactored and updated safely.
 		// Please see https://github.com/WordPress/gutenberg/pull/41253 for discussion and details.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ currentSegment ] );
 
 	function isSelectedCustom() {

package/src/color-palette/index.tsx

@@ -233,7 +233,7 @@ function UnforwardedColorPalette(
 	const displayValue = value?.replace( /^var\((.+)\)$/, '$1' );
 	const customColorAccessibleLabel = !! displayValue
 		? sprintf(
-				// translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
+				// translators: 1: The name of the color e.g: "vivid red". 2: The color's hex code e.g: "#f00".
 				__(
 					'Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'
 				),

package/src/color-palette/style.scss

@@ -26,10 +26,7 @@ $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 	&::after {
 		content: "";
 		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
+		inset: $border-width;
 		z-index: -1;
 		// The background image creates a checkerboard pattern. Ignore rtlcss to
 		// make it work both in LTR and RTL.
@@ -41,6 +38,7 @@ $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 		background-position: 0 0, 24px 24px;
 		/*rtl:end:ignore*/
 		background-size: calc(2 * 24px) calc(2 * 24px);
+		border-radius: $radius-medium - $border-width $radius-medium - $border-width 0 0;
 	}
 }
 

package/src/color-picker/index.native.js

@@ -111,7 +111,6 @@ function ColorPicker( {
 		// the hook’s dependencies and running it a single time. Ideally there
 		// may be a way to refactor and obviate the disabled lint rule. If not,
 		// this comment should be replaced by one that explains the reasoning.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	function onButtonPress( action ) {

package/src/composite/legacy/index.tsx

@@ -151,8 +151,11 @@ function proxyComposite< C extends Component >(
 
 		const { store, ...rest } =
 			mapLegacyStatePropsToComponentProps( legacyProps );
-		const props = rest as ComponentProps< C >;
-		props.id = useInstanceId( store, props.baseId, props.id );
+		let props = rest as ComponentProps< C >;
+		props = {
+			...props,
+			id: useInstanceId( store, props.baseId, props.id ),
+		};
 
 		Object.entries( propMap ).forEach( ( [ from, to ] ) => {
 			if ( props.hasOwnProperty( from ) ) {

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

@@ -16,7 +16,8 @@ import { Composite } from '..';
 import { Tooltip } from '../../tooltip';
 
 const meta: Meta< typeof Composite > = {
-	title: 'Components/Composite',
+	title: 'Components/Utilities/Composite',
+	id: 'components-composite',
 	component: Composite,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170

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

@@ -56,7 +56,7 @@ function ControlPointButton( {
 		<>
 			<Button
 				aria-label={ sprintf(
-					// translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).
+					// translators: 1: gradient position e.g: 70. 2: gradient color code e.g: rgb(52,121,151).
 					__(
 						'Gradient control point at position %1$s%% with color code %2$s.'
 					),

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

@@ -302,7 +302,6 @@ function Day( {
 		}
 		// isFocusAllowed is not a dep as there is no point calling focus() on
 		// an already focused element.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ isFocusable ] );
 
 	return (

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

@@ -18,7 +18,8 @@ import TextareaControl from '../../textarea-control/';
 import { VStack } from '../../v-stack/';
 
 const meta: Meta< typeof Disabled > = {
-	title: 'Components/Disabled',
+	title: 'Components/Utilities/Disabled',
+	id: 'components-disabled',
 	component: Disabled,
 	argTypes: {
 		as: { control: { type: null } },

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

@@ -18,7 +18,8 @@ import Draggable from '..';
 
 const meta: Meta< typeof Draggable > = {
 	component: Draggable,
-	title: 'Components/Draggable',
+	title: 'Components/Utilities/Draggable',
+	id: 'components-draggable',
 	argTypes: {
 		elementId: { control: { type: null } },
 		__experimentalDragComponent: { control: { type: null } },

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/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/index.native.js

@@ -9,7 +9,7 @@ import { View, useWindowDimensions } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useState } from '@wordpress/element';
 import { Icon, chevronRight, check } from '@wordpress/icons';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -63,8 +63,8 @@ function FontSizePicker( {
 	} );
 
 	const accessibilityLabel = sprintf(
-		// translators: %1$s: Font size name e.g. Small
-		__( 'Font Size, %1$s' ),
+		// translators: %s: Font size name e.g. Small
+		__( 'Font Size, %s' ),
 		selectedOption.name
 	);
 
@@ -77,8 +77,8 @@ function FontSizePicker( {
 					value={
 						selectedValue
 							? sprintf(
-									// translators: %1$s: Select control font size name e.g. Small, %2$s: Select control font size e.g. 12px
-									__( '%1$s (%2$s)' ),
+									// translators: 1: Select control font size name e.g. Small. 2: Select control font size e.g. 12px
+									_x( '%1$s (%2$s)', 'font size' ),
 									selectedOption.name,
 									selectedPxValue
 							  )
@@ -88,7 +88,7 @@ function FontSizePicker( {
 					accessibilityRole="button"
 					accessibilityLabel={ accessibilityLabel }
 					accessibilityHint={ sprintf(
-						// translators: %s: Select control button label e.g. Small
+						// translators: %s: Select control button label e.g. "Button width"
 						__( 'Navigates to select %s' ),
 						selectedOption.name
 					) }
@@ -143,7 +143,7 @@ function FontSizePicker( {
 								accessibilityLabel={
 									item.sizePx === selectedValue
 										? sprintf(
-												// translators: %s: Select font size option value e.g: "Selected: Large".
+												// translators: %s: The selected option.
 												__( 'Selected: %s' ),
 												item.name
 										  )

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

@@ -47,6 +47,12 @@ 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.
+	const compatAccept = !! accept?.includes( 'image/*' )
+		? `${ accept }, image/heic, image/heif`
+		: accept;
 
 	return (
 		<div className="components-form-file-upload">
@@ -56,7 +62,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-token-field/index.tsx

@@ -124,17 +124,14 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		}
 
 		// TODO: updateSuggestions() should first be refactored so its actual deps are clearer.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ suggestions, prevSuggestions, value, prevValue ] );
 
 	useEffect( () => {
 		updateSuggestions();
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ incompleteTokenValue ] );
 
 	useEffect( () => {
 		updateSuggestions();
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ __experimentalAutoSelectFirstMatch ] );
 
 	if ( disabled && isActive ) {

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;
 	}
 }
@@ -173,7 +169,6 @@
 	padding: $grid-unit-10 $grid-unit-15;
 	min-height: $button-size-compact;
 	margin: 0;
-	cursor: pointer;
 	box-sizing: border-box;
 
 	&.is-selected {
@@ -189,4 +184,8 @@
 			background-color: $components-color-accent-transparent-40;
 		}
 	}
+
+	&:not(.is-empty) {
+		cursor: pointer;
+	}
 }

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

@@ -8,6 +8,7 @@ import type { MouseEventHandler, ReactNode } from 'react';
  * WordPress dependencies
  */
 import { useRefEffect } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -156,6 +157,11 @@ export function SuggestionsList<
 				);
 				/* eslint-enable jsx-a11y/click-events-have-key-events */
 			} ) }
+			{ suggestions.length === 0 && (
+				<li className="components-form-token-field__suggestion is-empty">
+					{ __( 'No items found' ) }
+				</li>
+			) }
 		</ul>
 	);
 }

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.

package/src/guide/page-control.tsx

@@ -27,6 +27,7 @@ export default function PageControl( {
 					aria-current={ page === currentPage ? 'step' : undefined }
 				>
 					<Button
+						size="small"
 						key={ page }
 						icon={ <PageControlIcon /> }
 						aria-label={ sprintf(

package/src/guide/style.scss

@@ -34,7 +34,7 @@
 		}
 	}
 
-	&__container {
+	.components-guide__container {
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
@@ -42,7 +42,7 @@
 		min-height: 100%;
 	}
 
-	&__page {
+	.components-guide__page {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
@@ -53,7 +53,7 @@
 		}
 	}
 
-	&__footer {
+	.components-guide__footer {
 		align-content: center;
 		display: flex;
 		height: $button-size;
@@ -64,7 +64,7 @@
 		width: 100%;
 	}
 
-	&__page-control {
+	.components-guide__page-control {
 		margin: 0;
 		text-align: center;
 
@@ -74,8 +74,6 @@
 		}
 
 		.components-button {
-			height: 30px;
-			min-width: 20px;
 			margin: -6px 0;
 			color: $gray-200;
 		}

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

@@ -10,7 +10,8 @@ import { Heading } from '..';
 
 const meta: Meta< typeof Heading > = {
 	component: Heading,
-	title: 'Components (Experimental)/Heading',
+	title: 'Components (Experimental)/Typography/Heading',
+	id: 'components-experimental-heading',
 	argTypes: {
 		as: { control: { type: 'text' } },
 		color: { control: { type: 'color' } },

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

@@ -37,6 +37,8 @@ const Template: StoryFn< typeof ItemGroup > = ( props ) => (
 
 export const Default: StoryFn< typeof ItemGroup > = Template.bind( {} );
 Default.args = {
+	isBordered: true,
+	isSeparated: true,
 	children: (
 		[
 			{
@@ -67,6 +69,7 @@ export const NonClickableItems: StoryFn< typeof ItemGroup > = Template.bind(
 	{}
 );
 NonClickableItems.args = {
+	...Default.args,
 	children: (
 		[
 			{
@@ -83,6 +86,7 @@ NonClickableItems.args = {
 
 export const CustomItemSize: StoryFn< typeof ItemGroup > = Template.bind( {} );
 CustomItemSize.args = {
+	...Default.args,
 	children: (
 		[
 			{
@@ -98,9 +102,9 @@ CustomItemSize.args = {
 	 ).map( mapPropsToItem ),
 };
 
-export const WithBorder: StoryFn< typeof ItemGroup > = Template.bind( {} );
-WithBorder.args = {
+export const WithoutBorder: StoryFn< typeof ItemGroup > = Template.bind( {} );
+WithoutBorder.args = {
 	...Default.args,
-	isBordered: true,
-	isSeparated: true,
+	isBordered: false,
+	isSeparated: false,
 };

package/src/keyboard-shortcuts/stories/index.story.tsx

@@ -10,7 +10,8 @@ import KeyboardShortcuts from '..';
 
 const meta: Meta< typeof KeyboardShortcuts > = {
 	component: KeyboardShortcuts,
-	title: 'Components/KeyboardShortcuts',
+	title: 'Components/Utilities/KeyboardShortcuts',
+	id: 'components-keyboardshortcuts',
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },