@wordpress/components 23.4.0 → 23.5.0

package/src/circular-option-picker/{index.js → index.tsx}

@@ -1,4 +1,3 @@
-// @ts-nocheck
 /**
  * External dependencies
  */
@@ -15,15 +14,21 @@ import { Icon, check } from '@wordpress/icons';
 import Button from '../button';
 import Dropdown from '../dropdown';
 import Tooltip from '../tooltip';
+import type {
+	CircularOptionPickerProps,
+	DropdownLinkActionProps,
+	OptionProps,
+} from './types';
+import type { WordPressComponentProps } from '../ui/context';
+import type { ButtonAsButtonProps } from '../button/types';
 
-function Option( props ) {
-	const {
-		className,
-		isSelected,
-		selectedIconProps,
-		tooltipText,
-		...additionalProps
-	} = props;
+export function Option( {
+	className,
+	isSelected,
+	selectedIconProps,
+	tooltipText,
+	...additionalProps
+}: OptionProps ) {
 	const optionButton = (
 		<Button
 			isPressed={ isSelected }
@@ -53,8 +58,12 @@ function Option( props ) {
 	);
 }
 
-function DropdownLinkAction( props ) {
-	const { buttonProps, className, dropdownProps, linkText } = props;
+export function DropdownLinkAction( {
+	buttonProps,
+	className,
+	dropdownProps,
+	linkText,
+}: DropdownLinkActionProps ) {
 	return (
 		<Dropdown
 			className={ classnames(
@@ -77,8 +86,11 @@ function DropdownLinkAction( props ) {
 	);
 }
 
-function ButtonAction( props ) {
-	const { className, children, ...additionalProps } = props;
+export function ButtonAction( {
+	className,
+	children,
+	...additionalProps
+}: WordPressComponentProps< ButtonAsButtonProps, 'button', false > ) {
 	return (
 		<Button
 			className={ classnames(
@@ -93,7 +105,53 @@ function ButtonAction( props ) {
 	);
 }
 
-export default function CircularOptionPicker( props ) {
+/**
+ *`CircularOptionPicker` is a component that displays a set of options as circular buttons.
+ *
+ * ```jsx
+ * import { CircularOptionPicker } from '../circular-option-picker';
+ * import { useState } from '@wordpress/element';
+ *
+ * const Example = () => {
+ * 	const [ currentColor, setCurrentColor ] = useState();
+ * 	const colors = [
+ * 		{ color: '#f00', name: 'Red' },
+ * 		{ color: '#0f0', name: 'Green' },
+ * 		{ color: '#00f', name: 'Blue' },
+ * 	];
+ * 	const colorOptions = (
+ * 		<>
+ * 			{ colors.map( ( { color, name }, index ) => {
+ * 				return (
+ * 					<CircularOptionPicker.Option
+ * 						key={ `${ color }-${ index }` }
+ * 						tooltipText={ name }
+ * 						style={ { backgroundColor: color, color } }
+ * 						isSelected={ index === currentColor }
+ * 						onClick={ () => setCurrentColor( index ) }
+ * 						aria-label={ name }
+ * 					/>
+ * 				);
+ * 			} ) }
+ * 		</>
+ * 	);
+ * 	return (
+ * 		<CircularOptionPicker
+ * 				options={ colorOptions }
+ * 				actions={
+ * 					<CircularOptionPicker.ButtonAction
+ * 						onClick={ () => setCurrentColor( undefined ) }
+ * 					>
+ * 						{ 'Clear' }
+ * 					</CircularOptionPicker.ButtonAction>
+ * 				}
+ * 			/>
+ * 	);
+ * };
+ * ```
+ */
+
+function CircularOptionPicker( props: CircularOptionPickerProps ) {
 	const { actions, className, options, children } = props;
 	return (
 		<div
@@ -118,3 +176,5 @@ export default function CircularOptionPicker( props ) {
 CircularOptionPicker.Option = Option;
 CircularOptionPicker.ButtonAction = ButtonAction;
 CircularOptionPicker.DropdownLinkAction = DropdownLinkAction;
+
+export default CircularOptionPicker;

package/src/circular-option-picker/stories/index.tsx

@@ -0,0 +1,134 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+/**
+ * WordPress dependencies
+ */
+import { useState, createContext, useContext } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import {
+	default as CircularOptionPicker,
+	ButtonAction,
+	DropdownLinkAction,
+	Option,
+} from '..';
+
+const CircularOptionPickerStoryContext = createContext< {
+	currentColor?: string;
+	setCurrentColor?: ( v: string | undefined ) => void;
+} >( {} );
+
+const meta: ComponentMeta< typeof CircularOptionPicker > = {
+	title: 'Components/CircularOptionPicker',
+	component: CircularOptionPicker,
+	subcomponents: {
+		'CircularOptionPicker.Option': Option,
+		'CircularOptionPicker.ButtonAction': ButtonAction,
+		'CircularOptionPicker.DropdownLinkAction': DropdownLinkAction,
+	},
+	argTypes: {
+		actions: { control: { type: null } },
+		options: { control: { type: null } },
+		children: { control: { type: 'text' } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { source: { state: 'open', excludeDecorators: true } },
+	},
+	decorators: [
+		// Share current color state between main component, `actions` and `options`
+		( Story ) => {
+			const [ currentColor, setCurrentColor ] = useState< string >();
+
+			return (
+				<CircularOptionPickerStoryContext.Provider
+					value={ {
+						currentColor,
+						setCurrentColor,
+					} }
+				>
+					<Story />
+				</CircularOptionPickerStoryContext.Provider>
+			);
+		},
+	],
+};
+export default meta;
+
+const colors = [
+	{ color: '#f00', name: 'Red' },
+	{ color: '#0f0', name: 'Green' },
+	{ color: '#0af', name: 'Blue' },
+];
+
+const DefaultOptions = () => {
+	const { currentColor, setCurrentColor } = useContext(
+		CircularOptionPickerStoryContext
+	);
+
+	return (
+		<>
+			{ colors.map( ( { color, name }, index ) => {
+				return (
+					<CircularOptionPicker.Option
+						key={ `${ color }-${ index }` }
+						tooltipText={ name }
+						style={ { backgroundColor: color, color } }
+						isSelected={ color === currentColor }
+						onClick={ () => {
+							setCurrentColor?.( color );
+						} }
+						aria-label={ name }
+					/>
+				);
+			} ) }
+		</>
+	);
+};
+
+const DefaultActions = () => {
+	const { setCurrentColor } = useContext( CircularOptionPickerStoryContext );
+
+	return (
+		<CircularOptionPicker.ButtonAction
+			onClick={ () => setCurrentColor?.( undefined ) }
+		>
+			{ 'Clear' }
+		</CircularOptionPicker.ButtonAction>
+	);
+};
+
+const Template: ComponentStory< typeof CircularOptionPicker > = ( props ) => (
+	<CircularOptionPicker { ...props } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = { options: <DefaultOptions /> };
+
+export const WithButtonAction = Template.bind( {} );
+WithButtonAction.args = {
+	...Default.args,
+	actions: <DefaultActions />,
+};
+WithButtonAction.storyName = 'With ButtonAction';
+
+export const WithDropdownLinkAction = Template.bind( {} );
+WithDropdownLinkAction.args = {
+	...Default.args,
+	actions: (
+		<CircularOptionPicker.DropdownLinkAction
+			dropdownProps={ {
+				popoverProps: { position: 'top right' },
+				renderContent: () => (
+					<div>This is an example of a DropdownLinkAction.</div>
+				),
+			} }
+			linkText="Learn More"
+		></CircularOptionPicker.DropdownLinkAction>
+	),
+};
+WithDropdownLinkAction.storyName = 'With DropdownLinkAction';

package/src/circular-option-picker/types.ts

@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import type { Icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import type { ButtonAsButtonProps } from '../button/types';
+import type Dropdown from '../dropdown';
+import type { WordPressComponentProps } from '../ui/context';
+
+export type CircularOptionPickerProps = {
+	/**
+	 * A CSS class to apply to the wrapper element.
+	 */
+	className?: string;
+	/**
+	 * The action(s) to be rendered after the options,
+	 * such as a 'clear' button as seen in `ColorPalette`.
+	 * Usually a `CircularOptionPicker.ButtonAction` or
+	 * `CircularOptionPicker.DropdownLinkAction` component.
+	 */
+	actions?: ReactNode;
+	/**
+	 * The options to be rendered, such as color swatches.
+	 * Usually a `CircularOptionPicker.Option` component.
+	 */
+	options: ReactNode;
+	/**
+	 * The child elements.
+	 */
+	children?: ReactNode;
+};
+
+export type DropdownLinkActionProps = {
+	buttonProps?: Omit<
+		WordPressComponentProps< ButtonAsButtonProps, 'button', false >,
+		'children'
+	>;
+	linkText: string;
+	dropdownProps: Omit<
+		React.ComponentProps< typeof Dropdown >,
+		'className' | 'renderToggle'
+	>;
+	className?: string;
+};
+
+export type OptionProps = Omit<
+	WordPressComponentProps< ButtonAsButtonProps, 'button', false >,
+	'isPressed' | 'className'
+> & {
+	className?: string;
+	tooltipText?: string;
+	isSelected: boolean;
+	// `icon` is explicitly defined as 'check' by CircleOptionPicker.Option
+	// and is not intended to be overridden.
+	// `size` relies on the `Icon` component's default size of `24` to fit
+	// `CircularOptionPicker`'s design, and should not be explicitly set.
+	selectedIconProps?: Omit<
+		React.ComponentProps< typeof Icon >,
+		'icon' | 'size'
+	>;
+};

package/src/color-palette/test/__snapshots__/index.tsx.snap

@@ -179,7 +179,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
       <button
         aria-expanded="false"
         aria-haspopup="true"
-        aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
+        aria-label="Custom color picker. The currently selected color is called "red" and has a value of "f00"."
         class="components-flex components-color-palette__custom-color emotion-2 emotion-1"
         data-wp-c16t="true"
         data-wp-component="Flex"

package/src/dropdown-menu/index.js

@@ -91,6 +91,9 @@ function DropdownMenu( dropdownMenuProps ) {
 						onToggle();
 					}
 				};
+				const { as: Toggle = Button, ...restToggleProps } =
+					toggleProps ?? {};
+
 				const mergedToggleProps = mergeProps(
 					{
 						className: classnames(
@@ -100,11 +103,11 @@ function DropdownMenu( dropdownMenuProps ) {
 							}
 						),
 					},
-					toggleProps
+					restToggleProps
 				);
 
 				return (
-					<Button
+					<Toggle
 						{ ...mergedToggleProps }
 						icon={ icon }
 						onClick={ ( event ) => {
@@ -126,7 +129,7 @@ function DropdownMenu( dropdownMenuProps ) {
 						showTooltip={ toggleProps?.showTooltip ?? true }
 					>
 						{ mergedToggleProps.children }
-					</Button>
+					</Toggle>
 				);
 			} }
 			renderContent={ ( props ) => {

package/src/h-stack/stories/e2e/index.tsx

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '../../../view';
+import { HStack } from '../..';
+
+const meta: ComponentMeta< typeof HStack > = {
+	component: HStack,
+	title: 'Components (Experimental)/HStack',
+};
+export default meta;
+
+const Template: ComponentStory< typeof HStack > = ( props ) => {
+	return (
+		<HStack
+			style={ { background: '#eee', minHeight: '3rem' } }
+			{ ...props }
+		>
+			{ [ 'One', 'Two', 'Three', 'Four', 'Five' ].map( ( text ) => (
+				<View key={ text } style={ { background: '#b9f9ff' } }>
+					{ text }
+				</View>
+			) ) }
+		</HStack>
+	);
+};
+
+export const Default: ComponentStory< typeof HStack > = Template.bind( {} );
+Default.args = {
+	spacing: 3,
+};

package/src/higher-order/navigate-regions/style.scss

@@ -24,13 +24,14 @@
 	// visible. For the future, it's important to take into consideration that
 	// the navigable regions should always have a computed size. For now, we can
 	// fix some edge cases but these CSS rules should be later removed in favor of
-	// a more abstracted approach to make the navigabel regions focus style work
+	// a more abstracted approach to make the navigable regions focus style work
 	// regardles of the CSS used on other components.
 
 	// Header top bar when Distraction free mode is on.
 	&.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
 	.interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel,
 	.interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel,
+	.interface-interface-skeleton__actions .edit-post-layout__toggle-entities-saved-states-panel,
 	.editor-post-publish-panel {
 		outline: 4px solid $components-color-accent;
 		outline-offset: -4px;

package/src/higher-order/with-constrained-tabbing/index.tsx

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createHigherOrderComponent,
+	useConstrainedTabbing,
+} from '@wordpress/compose';
+
+/**
+ * `withConstrainedTabbing` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html)
+ * adding the ability to constrain keyboard navigation with the Tab key within a component.
+ * For accessibility reasons, some UI components need to constrain Tab navigation, for example
+ * modal dialogs or similar UI. Use of this component is recommended only in cases where a way to
+ * navigate away from the wrapped component is implemented by other means, usually by pressing
+ * the Escape key or using a specific UI control, e.g. a "Close" button.
+ */
+const withConstrainedTabbing = createHigherOrderComponent(
+	( WrappedComponent ) =>
+		function ComponentWithConstrainedTabbing( props ) {
+			const ref = useConstrainedTabbing();
+			return (
+				<div ref={ ref } tabIndex={ -1 }>
+					<WrappedComponent { ...props } />
+				</div>
+			);
+		},
+	'withConstrainedTabbing'
+);
+
+export default withConstrainedTabbing;

package/src/mobile/global-styles-context/utils.native.js

@@ -416,6 +416,7 @@ export function getGlobalStyles( rawStyles, rawFeatures ) {
 				fontSizes,
 				customLineHeight: features?.custom?.[ 'line-height' ],
 			},
+			spacing: features?.spacing,
 		},
 		__experimentalGlobalStylesBaseStyles: globalStyles,
 	};

package/src/range-control/index.tsx

@@ -269,7 +269,11 @@ function UnforwardedRangeControl< IconProps = unknown >(
 						style={ { width: fillValueOffset } }
 						trackColor={ trackColor }
 					/>
-					<ThumbWrapper style={ offsetStyle } disabled={ disabled }>
+					<ThumbWrapper
+						className="components-range-control__thumb-wrapper"
+						style={ offsetStyle }
+						disabled={ disabled }
+					>
 						<Thumb
 							aria-hidden={ true }
 							isFocused={ isThumbFocused }

package/src/tab-panel/stories/index.tsx

@@ -3,16 +3,25 @@
  */
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 
+/**
+ * WordPress dependencies
+ */
+import { link, more, wordpress } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
 import TabPanel from '..';
+import Popover from '../../popover';
+import { Provider as SlotFillProvider } from '../../slot-fill';
 
 const meta: ComponentMeta< typeof TabPanel > = {
 	title: 'Components/TabPanel',
 	component: TabPanel,
 	parameters: {
+		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
 	},
 };
 export default meta;
@@ -55,3 +64,35 @@ DisabledTab.args = {
 		},
 	],
 };
+
+const SlotFillTemplate: ComponentStory< typeof TabPanel > = ( props ) => {
+	return (
+		<SlotFillProvider>
+			<TabPanel { ...props } />
+			{ /* @ts-expect-error The 'Slot' component hasn't been typed yet. */ }
+			<Popover.Slot />
+		</SlotFillProvider>
+	);
+};
+
+export const WithTabIconsAndTooltips = SlotFillTemplate.bind( {} );
+WithTabIconsAndTooltips.args = {
+	children: ( tab ) => <p>Selected tab: { tab.title }</p>,
+	tabs: [
+		{
+			name: 'tab1',
+			title: 'Tab 1',
+			icon: wordpress,
+		},
+		{
+			name: 'tab2',
+			title: 'Tab 2',
+			icon: link,
+		},
+		{
+			name: 'tab3',
+			title: 'Tab 3',
+			icon: more,
+		},
+	],
+};