@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

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

@@ -1,180 +1,13 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { Icon, check } from '@wordpress/icons';
-
 /**
  * Internal dependencies
  */
-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';
-
-export function Option( {
-	className,
-	isSelected,
-	selectedIconProps,
-	tooltipText,
-	...additionalProps
-}: OptionProps ) {
-	const optionButton = (
-		<Button
-			isPressed={ isSelected }
-			className="components-circular-option-picker__option"
-			{ ...additionalProps }
-		/>
-	);
-	return (
-		<div
-			className={ classnames(
-				className,
-				'components-circular-option-picker__option-wrapper'
-			) }
-		>
-			{ tooltipText ? (
-				<Tooltip text={ tooltipText }>{ optionButton }</Tooltip>
-			) : (
-				optionButton
-			) }
-			{ isSelected && (
-				<Icon
-					icon={ check }
-					{ ...( selectedIconProps ? selectedIconProps : {} ) }
-				/>
-			) }
-		</div>
-	);
-}
-
-export function DropdownLinkAction( {
-	buttonProps,
-	className,
-	dropdownProps,
-	linkText,
-}: DropdownLinkActionProps ) {
-	return (
-		<Dropdown
-			className={ classnames(
-				'components-circular-option-picker__dropdown-link-action',
-				className
-			) }
-			renderToggle={ ( { isOpen, onToggle } ) => (
-				<Button
-					aria-expanded={ isOpen }
-					aria-haspopup="true"
-					onClick={ onToggle }
-					variant="link"
-					{ ...buttonProps }
-				>
-					{ linkText }
-				</Button>
-			) }
-			{ ...dropdownProps }
-		/>
-	);
-}
-
-export function ButtonAction( {
-	className,
-	children,
-	...additionalProps
-}: WordPressComponentProps< ButtonAsButtonProps, 'button', false > ) {
-	return (
-		<Button
-			className={ classnames(
-				'components-circular-option-picker__clear',
-				className
-			) }
-			variant="tertiary"
-			{ ...additionalProps }
-		>
-			{ children }
-		</Button>
-	);
-}
-
-/**
- *`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
-			className={ classnames(
-				'components-circular-option-picker',
-				className
-			) }
-		>
-			<div className="components-circular-option-picker__swatches">
-				{ options }
-			</div>
-			{ children }
-			{ actions && (
-				<div className="components-circular-option-picker__custom-clear-wrapper">
-					{ actions }
-				</div>
-			) }
-		</div>
-	);
-}
+import CircularOptionPicker from './circular-option-picker';
 
-CircularOptionPicker.Option = Option;
-CircularOptionPicker.ButtonAction = ButtonAction;
-CircularOptionPicker.DropdownLinkAction = DropdownLinkAction;
+export { Option } from './circular-option-picker-option';
+export { OptionGroup } from './circular-option-picker-option-group';
+export {
+	ButtonAction,
+	DropdownLinkAction,
+} from './circular-option-picker-actions';
 
 export default CircularOptionPicker;

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

@@ -9,11 +9,7 @@ import { useState, createContext, useContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import {
-	ButtonAction,
-	default as CircularOptionPicker,
-	DropdownLinkAction,
-} from '..';
+import CircularOptionPicker from '..';
 
 const CircularOptionPickerStoryContext = createContext< {
 	currentColor?: string;
@@ -25,11 +21,14 @@ const meta: Meta< typeof CircularOptionPicker > = {
 	component: CircularOptionPicker,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		'CircularOptionPicker.Option': Option,
+		'CircularOptionPicker.Option': CircularOptionPicker.Option,
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		'CircularOptionPicker.ButtonAction': ButtonAction,
+		'CircularOptionPicker.OptionGroup': CircularOptionPicker.OptionGroup,
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		'CircularOptionPicker.DropdownLinkAction': DropdownLinkAction,
+		'CircularOptionPicker.ButtonAction': CircularOptionPicker.ButtonAction,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'CircularOptionPicker.DropdownLinkAction':
+			CircularOptionPicker.DropdownLinkAction,
 	},
 	argTypes: {
 		actions: { control: { type: null } },
@@ -112,7 +111,33 @@ const Template: StoryFn< typeof CircularOptionPicker > = ( props ) => (
 );
 
 export const Default = Template.bind( {} );
-Default.args = { options: <DefaultOptions /> };
+Default.args = {
+	'aria-label': 'Circular Option Picker',
+	options: <DefaultOptions />,
+};
+
+export const AsButtons = Template.bind( {} );
+AsButtons.args = {
+	...Default.args,
+	asButtons: true,
+};
+
+export const WithLoopingDisabled = Template.bind( {} );
+WithLoopingDisabled.args = {
+	...Default.args,
+	loop: false,
+};
+WithLoopingDisabled.parameters = {
+	docs: {
+		source: {
+			code: `<CircularOptionPicker
+  aria-label="${ WithLoopingDisabled.args[ 'aria-label' ] }"
+  loop={false}
+  options={<DefaultOptions />}
+/>`,
+		},
+	},
+};
 
 export const WithButtonAction = Template.bind( {} );
 WithButtonAction.args = {

package/src/circular-option-picker/style.scss

@@ -83,7 +83,8 @@ $color-palette-circle-spacing: 12px;
 		box-shadow: inset 0 0 0 ($color-palette-circle-size * 0.5) !important;
 	}
 
-	&.is-pressed {
+	&[aria-pressed="true"],
+	&[aria-selected="true"] {
 		box-shadow: inset 0 0 0 4px;
 		position: relative;
 		z-index: z-index(".components-circular-option-picker__option.is-pressed");
@@ -116,14 +117,19 @@ $color-palette-circle-spacing: 12px;
 	&:focus {
 		&::after {
 			content: "";
-			border: #{ $border-width * 2 } solid $gray-700;
-			width: 32px;
-			height: 32px;
-			position: absolute;
-			top: -2px;
-			left: -2px;
 			border-radius: $radius-round;
 			box-shadow: inset 0 0 0 2px $white;
+
+			// Make sure it's always centered
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+
+			// Make sure dimensions account for border width
+			border: #{ $border-width * 2 } solid $gray-700;
+			width: calc(100% + #{ ( $border-width * 2 ) * 2 });
+			height: calc(100% + #{ ( $border-width * 2 ) * 2 });
 		}
 	}
 
@@ -139,7 +145,6 @@ $color-palette-circle-spacing: 12px;
 	background: $white;
 }
 
-
 .components-circular-option-picker__dropdown-link-action {
 	margin-right: $grid-unit-20;
 

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

@@ -0,0 +1,127 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { press } from '@ariakit/test';
+
+/**
+ * Internal dependencies
+ */
+import CircularOptionPicker from '..';
+
+const SINGLE_OPTION = [ <CircularOptionPicker.Option key={ 'option' } /> ];
+
+const MULTIPLE_OPTIONS = [
+	<CircularOptionPicker.Option
+		key={ 'option-1' }
+		aria-label={ 'Option One' }
+	/>,
+	<CircularOptionPicker.Option
+		key={ 'option-2' }
+		aria-label={ 'Option Two' }
+	/>,
+];
+
+const DEFAULT_PROPS = {
+	'aria-label': 'Circular Option Picker',
+	options: SINGLE_OPTION,
+};
+
+function getOption( name: string ) {
+	return screen.getByRole( 'option', { name } );
+}
+
+describe( 'CircularOptionPicker', () => {
+	describe( 'when `asButtons` is not set', () => {
+		it( 'should render as a listbox', async () => {
+			render( <CircularOptionPicker { ...DEFAULT_PROPS } /> );
+
+			expect( screen.getByRole( 'listbox' ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'option' ) ).toBeInTheDocument();
+			expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'when `asButtons` is false', () => {
+		it( 'should render as a listbox', async () => {
+			render(
+				<CircularOptionPicker
+					{ ...DEFAULT_PROPS }
+					asButtons={ false }
+				/>
+			);
+
+			expect( screen.getByRole( 'listbox' ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'option' ) ).toBeInTheDocument();
+			expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'when `asButtons` is true', () => {
+		it( 'should render as buttons', async () => {
+			render(
+				<CircularOptionPicker { ...DEFAULT_PROPS } asButtons={ true } />
+			);
+
+			expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
+			expect( screen.queryByRole( 'option' ) ).not.toBeInTheDocument();
+			expect( screen.getByRole( 'button' ) ).toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'when `loop` is not set', () => {
+		it( 'should loop', async () => {
+			render(
+				<CircularOptionPicker
+					{ ...DEFAULT_PROPS }
+					options={ MULTIPLE_OPTIONS }
+				/>
+			);
+
+			await press.Tab();
+			expect( getOption( 'Option One' ) ).toHaveFocus();
+			await press.ArrowRight();
+			expect( getOption( 'Option Two' ) ).toHaveFocus();
+			await press.ArrowRight();
+			expect( getOption( 'Option One' ) ).toHaveFocus();
+		} );
+	} );
+
+	describe( 'when `loop` is true', () => {
+		it( 'should loop', async () => {
+			render(
+				<CircularOptionPicker
+					{ ...DEFAULT_PROPS }
+					options={ MULTIPLE_OPTIONS }
+					loop={ true }
+				/>
+			);
+
+			await press.Tab();
+			expect( getOption( 'Option One' ) ).toHaveFocus();
+			await press.ArrowRight();
+			expect( getOption( 'Option Two' ) ).toHaveFocus();
+			await press.ArrowRight();
+			expect( getOption( 'Option One' ) ).toHaveFocus();
+		} );
+	} );
+
+	describe( 'when `loop` is false', () => {
+		it( 'should not loop', async () => {
+			render(
+				<CircularOptionPicker
+					{ ...DEFAULT_PROPS }
+					loop={ false }
+					options={ MULTIPLE_OPTIONS }
+				/>
+			);
+
+			await press.Tab();
+			expect( getOption( 'Option One' ) ).toHaveFocus();
+			await press.ArrowRight();
+			expect( getOption( 'Option Two' ) ).toHaveFocus();
+			await press.ArrowRight();
+			expect( getOption( 'Option Two' ) ).toHaveFocus();
+		} );
+	} );
+} );

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

@@ -13,9 +13,14 @@ import type { Icon } from '@wordpress/icons';
  */
 import type { ButtonAsButtonProps } from '../button/types';
 import type { DropdownProps } from '../dropdown/types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import type { CompositeStore } from '../composite/v2';
 
-export type CircularOptionPickerProps = {
+type CommonCircularOptionPickerProps = {
+	/**
+	 * An ID to apply to the component.
+	 */
+	id?: string;
 	/**
 	 * A CSS class to apply to the wrapper element.
 	 */
@@ -38,6 +43,54 @@ export type CircularOptionPickerProps = {
 	children?: ReactNode;
 };
 
+type WithBaseId = {
+	baseId: string;
+};
+
+type FullListboxCircularOptionPickerProps = CommonCircularOptionPickerProps & {
+	/**
+	 * Whether the control should present as a set of buttons,
+	 * each with its own tab stop.
+	 */
+	asButtons?: false;
+	/**
+	 * Prevents keyboard interaction from wrapping around.
+	 * Only used when `asButtons` is not true.
+	 *
+	 * @default true
+	 */
+	loop?: boolean;
+} & (
+		| {
+				'aria-label': string;
+				'aria-labelledby'?: never;
+		  }
+		| {
+				'aria-label'?: never;
+				'aria-labelledby': string;
+		  }
+	);
+
+export type ListboxCircularOptionPickerProps = WithBaseId &
+	Omit< FullListboxCircularOptionPickerProps, 'asButtons' >;
+
+type FullButtonsCircularOptionPickerProps = CommonCircularOptionPickerProps & {
+	/**
+	 * Whether the control should present as a set of buttons,
+	 * each with its own tab stop.
+	 *
+	 * @default false
+	 */
+	asButtons: true;
+};
+
+export type ButtonsCircularOptionPickerProps = WithBaseId &
+	Omit< FullButtonsCircularOptionPickerProps, 'asButtons' >;
+
+export type CircularOptionPickerProps =
+	| FullListboxCircularOptionPickerProps
+	| FullButtonsCircularOptionPickerProps;
+
 export type DropdownLinkActionProps = {
 	buttonProps?: Omit<
 		WordPressComponentProps< ButtonAsButtonProps, 'button', false >,
@@ -48,6 +101,11 @@ export type DropdownLinkActionProps = {
 	className?: string;
 };
 
+export type OptionGroupProps = {
+	className?: string;
+	options: ReactNode;
+};
+
 export type OptionProps = Omit<
 	WordPressComponentProps< ButtonAsButtonProps, 'button', false >,
 	'isPressed' | 'className'
@@ -64,3 +122,9 @@ export type OptionProps = Omit<
 		'icon' | 'size'
 	>;
 };
+
+export type CircularOptionPickerCompositeStore = CompositeStore;
+export type CircularOptionPickerContextProps = {
+	baseId?: string;
+	compositeStore?: CircularOptionPickerCompositeStore;
+};

package/src/clipboard-button/README.md

@@ -11,8 +11,8 @@ With a clipboard button, users copy text (or other elements) with a single click
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { ClipboardButton } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyClipboardButton = () => {
 	const [ hasCopied, setHasCopied ] = useState( false );

package/src/clipboard-button/index.tsx

@@ -15,7 +15,7 @@ import deprecated from '@wordpress/deprecated';
  */
 import Button from '../button';
 import type { ClipboardButtonProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 const TIMEOUT = 4000;
 

package/src/color-indicator/index.tsx

@@ -12,7 +12,7 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { ColorIndicatorProps } from './types';
 
 function UnforwardedColorIndicator(

package/src/color-palette/README.md

@@ -5,8 +5,8 @@
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { ColorPalette } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyColorPalette = () => {
 	const [ color, setColor ] = useState ( '#f00' )
@@ -84,3 +84,17 @@ Currently active value.
 Callback called when a color is selected.
 
 -   Required: Yes
+
+### `asButtons`: `boolean`
+
+Whether the control should present as a set of buttons, each with its own tab stop.
+
+- Required: No
+- Default: `false`
+
+### `loop`: `boolean`
+
+Prevents keyboard interaction from wrapping around. Only used when `asButtons` is not true.
+
+- Required: No
+- Default: `true`

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

@@ -33,7 +33,7 @@ let scrollPosition = 0;
 let customIndicatorWidth = 0;
 
 function ColorPalette( {
-	enableCustomColor = true,
+	enableCustomColor = false,
 	setColor,
 	activeColor,
 	isGradientColor,
@@ -62,24 +62,35 @@ function ColorPalette( {
 	const scale = useRef( new Animated.Value( 1 ) ).current;
 	const opacity = useRef( new Animated.Value( 1 ) ).current;
 
-	const defaultColors = [
+	const mergedColors = [
 		...new Set(
 			( defaultSettings.colors ?? [] ).map( ( { color } ) => color )
 		),
 	];
-	const mergedColors = [
+	const mergedGradients = [
+		...new Set(
+			( defaultSettings.gradients ?? [] ).map(
+				( { gradient } ) => gradient
+			)
+		),
+	];
+	const allAvailableColors = [
 		...new Set(
 			( defaultSettings.allColors ?? [] ).map( ( { color } ) => color )
 		),
 	];
-	const defaultGradientColors = [
+	const allAvailableGradients = [
 		...new Set(
-			( defaultSettings.gradients ?? [] ).map(
+			( defaultSettings.allGradients ?? [] ).map(
 				( { gradient } ) => gradient
 			)
 		),
 	];
-	const colors = isGradientSegment ? defaultGradientColors : defaultColors;
+
+	const colors = isGradientSegment ? mergedGradients : mergedColors;
+	const allColors = isGradientSegment
+		? allAvailableGradients
+		: allAvailableColors;
 
 	const customIndicatorColor = isGradientSegment
 		? activeColor
@@ -110,7 +121,7 @@ function ColorPalette( {
 
 	function isSelectedCustom() {
 		const isWithinColors =
-			activeColor && mergedColors && mergedColors.includes( activeColor );
+			activeColor && allColors?.includes( activeColor );
 		if ( enableCustomColor && activeColor ) {
 			if ( isGradientSegment ) {
 				return isGradientColor && ! isWithinColors;