@wordpress/components 39.0.0 → 40.1.1-next.v.202608281122.0

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

@@ -1,4 +1,28 @@
 import { __ } from '@wordpress/i18n';
+import deprecated from '@wordpress/deprecated';
+import type { CircularOptionPickerProps } from './types';
+
+export function warnIfCircularOptionPickerAsButtonsIsSet(
+	componentName: string,
+	asButtons?: boolean
+) {
+	if ( asButtons === undefined ) {
+		return;
+	}
+
+	deprecated( `\`asButtons\` prop in wp.components.${ componentName }`, {
+		since: '7.2',
+		alternative: '`presentation`',
+		hint: '`asButtons={ true }` maps to `presentation="toggle-buttons"`. Explicit `presentation` takes precedence.',
+	} );
+}
+
+export function resolveCircularOptionPickerPresentation(
+	presentation?: CircularOptionPickerProps[ 'presentation' ],
+	asButtons?: boolean
+): NonNullable< CircularOptionPickerProps[ 'presentation' ] > {
+	return presentation ?? ( asButtons ? 'toggle-buttons' : 'listbox' );
+}
 
 /**
  * Computes the common props for the CircularOptionPicker.
@@ -7,11 +31,17 @@ export function getComputeCircularOptionPickerCommonProps(
 	asButtons?: boolean,
 	loop?: boolean,
 	ariaLabel?: string,
-	ariaLabelledby?: string
+	ariaLabelledby?: string,
+	presentation?: CircularOptionPickerProps[ 'presentation' ]
 ) {
-	const metaProps = asButtons
-		? { asButtons: true }
-		: { asButtons: false, loop };
+	const resolvedPresentation = resolveCircularOptionPickerPresentation(
+		presentation,
+		asButtons
+	);
+	const metaProps =
+		resolvedPresentation === 'listbox'
+			? { presentation: 'listbox' as const, loop }
+			: { presentation: resolvedPresentation };
 
 	const labelProps = {
 		'aria-labelledby': ariaLabelledby,
@@ -20,5 +50,5 @@ export function getComputeCircularOptionPickerCommonProps(
 			: ariaLabel || __( 'Custom color picker' ),
 	};
 
-	return { metaProps, labelProps };
+	return { metaProps, labelProps, resolvedPresentation };
 }

package/src/clipboard-button/index.tsx

@@ -21,7 +21,7 @@ export default function ClipboardButton( {
 		alternative: 'wp.compose.useCopyToClipboard',
 	} );
 
-	const timeoutIdRef = useRef< NodeJS.Timeout >( undefined );
+	const timeoutIdRef = useRef< ReturnType< typeof setTimeout > >( undefined );
 	const ref = useCopyToClipboard( text, () => {
 		onCopy();
 		if ( timeoutIdRef.current ) {

package/src/color-palette/README.md

@@ -85,16 +85,20 @@ Callback called when a color is selected.
 
 -   Required: Yes
 
-### `asButtons`: `boolean`
+### `presentation`: `'listbox' | 'toggle-buttons' | 'command-buttons'`
 
-Whether the control should present as a set of buttons, each with its own tab stop.
+Controls the predefined swatches' interaction and accessibility semantics.
 
-- Required: No
-- Default: `false`
+-   `listbox` uses one tab stop for the palette. Arrow keys move between options. Options expose selection with `aria-selected`.
+-   `toggle-buttons` uses a tab stop for each swatch. Swatches expose selection with `aria-pressed`.
+-   `command-buttons` uses a tab stop for each swatch. Swatches do not expose selection. The `value` and `selectedSlug` props do not mark predefined swatches as selected, and activating a swatch always calls `onChange` with that swatch. The `value` prop still controls the custom color picker.
+
+-   Required: No
+-   Default: `listbox`
 
 ### `loop`: `boolean`
 
-Prevents keyboard interaction from wrapping around. Only used when `asButtons` is not true.
+Prevents arrow-key navigation from wrapping around. Only used with the `listbox` presentation.
 
-- Required: No
-- Default: `true`
+-   Required: No
+-   Default: `true`

package/src/color-palette/index.tsx

@@ -10,11 +10,13 @@ import Dropdown from '../dropdown';
 import { ColorPicker } from '../color-picker';
 import CircularOptionPicker, {
 	getComputeCircularOptionPickerCommonProps,
+	warnIfCircularOptionPickerAsButtonsIsSet,
 } from '../circular-option-picker';
 import { VStack } from '../v-stack';
 import { Truncate } from '../truncate';
-import { ColorHeading } from './styles';
+import { Heading } from '../heading';
 import DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';
+import styles from './style.module.scss';
 import type {
 	ColorObject,
 	ColorPaletteProps,
@@ -40,6 +42,7 @@ function SinglePalette( {
 	onChange,
 	value,
 	selectedSlug,
+	presentation,
 	...additionalProps
 }: SinglePaletteProps ) {
 	const colorOptions = useMemo( () => {
@@ -51,9 +54,9 @@ function SinglePalette( {
 			// This correctly handles mixed palettes where some entries have slugs
 			// and others don't. Fall back to color value matching otherwise
 			// (including when selectedSlug is an empty string).
-			const isSelected = selectedSlug
-				? slug === selectedSlug
-				: value === color;
+			const isSelected =
+				presentation !== 'command-buttons' &&
+				( selectedSlug ? slug === selectedSlug : value === color );
 
 			return (
 				<CircularOptionPicker.Option
@@ -84,7 +87,7 @@ function SinglePalette( {
 				/>
 			);
 		} );
-	}, [ colors, value, selectedSlug, onChange, clearColor ] );
+	}, [ colors, value, selectedSlug, onChange, clearColor, presentation ] );
 
 	return (
 		<CircularOptionPicker.OptionGroup
@@ -103,6 +106,7 @@ function MultiplePalettes( {
 	value,
 	selectedSlug,
 	headingLevel,
+	presentation,
 }: MultiplePalettesProps ) {
 	const instanceId = useInstanceId( MultiplePalettes, 'color-palette' );
 
@@ -116,9 +120,13 @@ function MultiplePalettes( {
 				const id = `${ instanceId }-${ index }`;
 				return (
 					<VStack spacing={ 2 } key={ index }>
-						<ColorHeading id={ id } level={ headingLevel }>
+						<Heading
+							className={ styles[ 'color-heading' ] }
+							id={ id }
+							level={ headingLevel }
+						>
 							{ name }
-						</ColorHeading>
+						</Heading>
 						<SinglePalette
 							clearColor={ clearColor }
 							colors={ colorPalette }
@@ -127,6 +135,7 @@ function MultiplePalettes( {
 							}
 							value={ value }
 							selectedSlug={ selectedSlug }
+							presentation={ presentation }
 							aria-labelledby={ id }
 						/>
 					</VStack>
@@ -180,6 +189,7 @@ function UnforwardedColorPalette(
 ) {
 	const {
 		asButtons,
+		presentation,
 		loop,
 		clearable = true,
 		colors = [],
@@ -194,6 +204,7 @@ function UnforwardedColorPalette(
 		'aria-labelledby': ariaLabelledby,
 		...additionalProps
 	} = props;
+	warnIfCircularOptionPickerAsButtonsIsSet( 'ColorPalette', asButtons );
 	const [ normalizedColorValue, setNormalizedColorValue ] = useState( value );
 
 	const clearColor = useCallback( () => onChange( undefined ), [ onChange ] );
@@ -241,11 +252,21 @@ function UnforwardedColorPalette(
 		  )
 		: __( 'Custom color picker' );
 
+	const { metaProps, labelProps, resolvedPresentation } =
+		getComputeCircularOptionPickerCommonProps(
+			asButtons,
+			loop,
+			ariaLabel,
+			ariaLabelledby,
+			presentation
+		);
+
 	const paletteCommonProps = {
 		clearColor,
 		onChange,
 		value,
 		selectedSlug,
+		presentation: resolvedPresentation,
 	};
 
 	const actions = !! clearable && (
@@ -258,13 +279,6 @@ function UnforwardedColorPalette(
 		</CircularOptionPicker.ButtonAction>
 	);
 
-	const { metaProps, labelProps } = getComputeCircularOptionPickerCommonProps(
-		asButtons,
-		loop,
-		ariaLabel,
-		ariaLabelledby
-	);
-
 	// If disableCustomColors is true and colors.length is 0, return null to avoid rendering an empty palette wrapper.
 	if ( disableCustomColors && colors.length === 0 && ! actions ) {
 		return null;

package/src/color-palette/stories/index.story.tsx

@@ -73,6 +73,11 @@ export const InitialValue: ColorPaletteStory = {
 };
 
 export const MultipleOrigins: ColorPaletteStory = {
+	parameters: {
+		// FIXME: Multiple Origins: origin groups are missing required ARIA children (aria-required-children).
+		// See: https://github.com/WordPress/gutenberg/issues/81596
+		a11y: { test: 'todo' },
+	},
 	render: Template,
 	args: {
 		colors: [

package/src/color-palette/style.module.scss

@@ -0,0 +1,12 @@
+.color-heading {
+	text-transform: uppercase;
+
+	// Triple specificity to override the base Heading styles, matching the
+	// pre-migration Emotion `&&&` behavior. Dart Sass disallows `&&&`, so the
+	// selector is repeated via interpolation to produce the same specificity.
+	&#{&}#{&} {
+		font-size: 11px;
+		line-height: 24px;
+		margin-bottom: 0;
+	}
+}

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

@@ -8,6 +8,10 @@ const EXAMPLE_COLORS = [
 	{ name: 'green', color: '#0f0' },
 	{ name: 'blue', color: '#00f' },
 ];
+const DUPLICATE_COLOR_PALETTE = [
+	{ name: 'Dark Background', slug: 'dark-background', color: '#000' },
+	{ name: 'Dark Text', slug: 'dark-text', color: '#000' },
+];
 const INITIAL_COLOR = EXAMPLE_COLORS[ 0 ].color;
 
 const ControlledColorPalette = ( {
@@ -30,6 +34,82 @@ const ControlledColorPalette = ( {
 };
 
 describe( 'ColorPalette', () => {
+	it( 'should use matching values only for display in command button presentation', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+		render(
+			<ColorPalette
+				aria-label="Colors"
+				colors={ DUPLICATE_COLOR_PALETTE }
+				value="#000"
+				selectedSlug="dark-background"
+				onChange={ onChange }
+				presentation="command-buttons"
+				disableCustomColors
+				clearable={ false }
+			/>
+		);
+
+		const darkBackground = screen.getByRole( 'button', {
+			name: 'Dark Background',
+		} );
+		expect( screen.getByRole( 'group', { name: 'Colors' } ) ).toBeVisible();
+		expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
+		expect( darkBackground ).not.toHaveAttribute( 'aria-pressed' );
+
+		await user.click( darkBackground );
+		expect( onChange ).toHaveBeenCalledWith( '#000', 0, 'dark-background' );
+	} );
+
+	it( 'should warn for asButtons and prefer an explicit presentation', () => {
+		render(
+			<ColorPalette
+				aria-label="Colors"
+				colors={ EXAMPLE_COLORS }
+				onChange={ jest.fn() }
+				asButtons={ false }
+				presentation="command-buttons"
+				disableCustomColors
+				clearable={ false }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'button', { name: 'red' } )
+		).not.toHaveAttribute( 'aria-pressed' );
+		expect( console ).toHaveWarnedWith(
+			'`asButtons` prop in wp.components.ColorPalette is deprecated since version 7.2. Please use `presentation` instead. Note: `asButtons={ true }` maps to `presentation="toggle-buttons"`. Explicit `presentation` takes precedence.'
+		);
+	} );
+
+	it( 'should preserve asButtons as a toggle-button alias', () => {
+		render(
+			<ColorPalette
+				aria-label="Colors"
+				colors={ DUPLICATE_COLOR_PALETTE }
+				value="#000"
+				selectedSlug="dark-background"
+				onChange={ jest.fn() }
+				asButtons
+				disableCustomColors
+				clearable={ false }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'button', {
+				name: 'Dark Background',
+				pressed: true,
+			} )
+		).toBeVisible();
+		expect(
+			screen.getByRole( 'button', {
+				name: 'Dark Text',
+				pressed: false,
+			} )
+		).toBeVisible();
+	} );
+
 	it( 'should render three color button options', () => {
 		const onChange = jest.fn();
 
@@ -289,11 +369,6 @@ describe( 'ColorPalette', () => {
 	} );
 
 	describe( 'duplicate colors in palette', () => {
-		const DUPLICATE_COLOR_PALETTE = [
-			{ name: 'Dark Background', slug: 'dark-background', color: '#000' },
-			{ name: 'Dark Text', slug: 'dark-text', color: '#000' },
-		];
-
 		it( 'should render all swatches even when two entries share the same color value', () => {
 			render(
 				<ColorPalette

package/src/color-palette/types.ts

@@ -1,6 +1,7 @@
 import type { CSSProperties, ReactNode } from 'react';
 import type { DropdownProps } from '../dropdown/types';
 import type { HeadingSize } from '../heading/types';
+import type { CircularOptionPickerProps } from '../circular-option-picker/types';
 
 export type ColorObject = {
 	name: string;
@@ -36,6 +37,7 @@ type PaletteProps = {
 	selectedSlug?: string;
 	actions?: ReactNode;
 	headingLevel?: HeadingSize;
+	presentation: NonNullable< CircularOptionPickerProps[ 'presentation' ] >;
 };
 
 export type SinglePaletteProps = PaletteProps & {
@@ -93,15 +95,33 @@ export type ColorPaletteProps = Pick<
 	 */
 	value?: string;
 	/**
-	 * Whether the control should present as a set of buttons,
-	 * each with its own tab stop.
+	 * How predefined color swatches behave and are exposed to assistive
+	 * technology.
 	 *
+	 * - `listbox` uses one tab stop and arrow-key navigation, and exposes
+	 *   selection with `aria-selected`.
+	 * - `toggle-buttons` gives each swatch a tab stop and exposes selection with
+	 *   `aria-pressed`.
+	 * - `command-buttons` gives each swatch a tab stop and exposes no selection
+	 *   state. `value` and `selectedSlug` do not mark predefined swatches as
+	 *   selected, and activating a swatch always calls `onChange` with that
+	 *   swatch. `value` still controls the custom color picker.
+	 *
+	 * @default 'listbox'
+	 */
+	presentation?: CircularOptionPickerProps[ 'presentation' ];
+	/**
+	 * Whether the control should present as toggle buttons.
+	 *
+	 * @deprecated Use `presentation="toggle-buttons"` instead. An explicit
+	 * `presentation` takes precedence.
 	 * @default false
+	 * @ignore
 	 */
 	asButtons?: boolean;
 	/**
 	 * Prevents keyboard interaction from wrapping around.
-	 * Only used when `asButtons` is not true.
+	 * Only used with the `listbox` presentation.
 	 *
 	 * @default true
 	 */

package/src/color-picker/stories/index.story.tsx

@@ -5,11 +5,6 @@ import { ColorPicker } from '../component';
 const meta: Meta< typeof ColorPicker > = {
 	tags: [ 'manifest' ],
 	component: ColorPicker,
-	// Temporary: Due to an upstream bug, render the root explicitly so the
-	// components manifest extractor can resolve props from the JSX.
-	//
-	// See: https://github.com/storybookjs/storybook/issues/34877
-	render: ( args ) => <ColorPicker { ...args } />,
 	title: 'Components/Selection & Input/Color/ColorPicker',
 	id: 'components-colorpicker',
 	argTypes: {

package/src/combobox-control/README.md

@@ -92,7 +92,7 @@ Function called when the control's search input value changes. The argument cont
 
 Function called when the selected value changes.
 
--   Type: `( value: string | null | undefined ) => void`
+-   Type: `( value: string | null ) => void`
 -   Required: No
 
 #### value

package/src/combobox-control/index.tsx

@@ -11,18 +11,18 @@ import { useInstanceId } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 import { closeSmall } from '@wordpress/icons';
 import { withIgnoreIMEEvents } from '@wordpress/keycodes';
-import { InputWrapperFlex } from './styles';
 import TokenInput from '../form-token-field/token-input';
 import SuggestionsList from '../form-token-field/suggestions-list';
 import BaseControl from '../base-control';
 import Button from '../button';
-import { FlexBlock } from '../flex';
+import { Flex, FlexBlock } from '../flex';
 import withFocusOutside from '../higher-order/with-focus-outside';
 import { useControlledValue } from '../utils/hooks';
 import { normalizeTextString } from '../utils/strings';
 import type { ComboboxControlOption, ComboboxControlProps } from './types';
 import type { TokenInputProps } from '../form-token-field/types';
 import Spinner from '../spinner';
+import styles from './style.module.scss';
 
 const noop = () => {};
 
@@ -318,7 +318,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 					tabIndex={ -1 }
 					onKeyDown={ onKeyDown }
 				>
-					<InputWrapperFlex>
+					<Flex className={ styles[ 'input-wrapper' ] }>
 						<FlexBlock>
 							<TokenInput
 								className="components-combobox-control__input"
@@ -353,7 +353,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 								label={ __( 'Reset' ) }
 							/>
 						) }
-					</InputWrapperFlex>
+					</Flex>
 					{ isExpanded && ! isLoading && (
 						<SuggestionsList
 							instanceId={ instanceId }

package/src/combobox-control/style.module.scss

@@ -0,0 +1,6 @@
+@use "@wordpress/base-styles/variables" as *;
+
+.input-wrapper {
+	height: 38px; // 40px - 2px vertical borders on parent container
+	padding-inline: $grid-unit-10;
+}

package/src/combobox-control/style.scss

@@ -41,7 +41,7 @@ input.components-combobox-control__input[type="text"] {
 	padding: 0;
 
 	&:focus-within {
-		@include input-style__focus;
+		@include outset-ring__focus;
 	}
 
 	.components-spinner {

package/src/combobox-control/types.ts

@@ -7,6 +7,8 @@ export type ComboboxControlOption = {
 	[ key: string ]: any;
 };
 
+type ComboboxControlValue = string | null;
+
 export type ComboboxControlProps = Pick<
 	BaseControlProps,
 	| '__nextHasNoMarginBottom'
@@ -65,7 +67,7 @@ export type ComboboxControlProps = Pick<
 	/**
 	 * Function called with the selected value changes.
 	 */
-	onChange?: ( value: ComboboxControlProps[ 'value' ] ) => void;
+	onChange?: ( value: ComboboxControlValue ) => void;
 	/**
 	 * Function called when the control's search input value changes. The argument contains the next input value.
 	 *
@@ -79,7 +81,7 @@ export type ComboboxControlProps = Pick<
 	/**
 	 * The current value of the control.
 	 */
-	value?: string | null;
+	value?: ComboboxControlValue;
 	/**
 	 * If passed, the combobox input will show a placeholder string if no values are present.
 	 */

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

@@ -147,19 +147,19 @@ export const OneDimensionWithStateProp: StoryFn<
 			state={ state }
 			aria-label="Legacy Composite with state prop (one dimension)"
 		>
-			<CompositeItem state={ state } role="listitem">
+			<CompositeItem state={ state } role="listitem" render={ <div /> }>
 				Item 1
 			</CompositeItem>
-			<CompositeItem state={ state } role="listitem">
+			<CompositeItem state={ state } role="listitem" render={ <div /> }>
 				Item 2
 			</CompositeItem>
-			<CompositeItem state={ state } role="listitem">
+			<CompositeItem state={ state } role="listitem" render={ <div /> }>
 				Item 3
 			</CompositeItem>
-			<CompositeItem state={ state } role="listitem">
+			<CompositeItem state={ state } role="listitem" render={ <div /> }>
 				Item 4
 			</CompositeItem>
-			<CompositeItem state={ state } role="listitem">
+			<CompositeItem state={ state } role="listitem" render={ <div /> }>
 				Item 5
 			</CompositeItem>
 		</Composite>
@@ -178,19 +178,19 @@ export const OneDimensionWithSpreadProps: StoryFn<
 			{ ...state }
 			aria-label="Legacy Composite with spread props (one dimension)"
 		>
-			<CompositeItem { ...state } role="listitem">
+			<CompositeItem { ...state } role="listitem" render={ <div /> }>
 				Item 1
 			</CompositeItem>
-			<CompositeItem { ...state } role="listitem">
+			<CompositeItem { ...state } role="listitem" render={ <div /> }>
 				Item 2
 			</CompositeItem>
-			<CompositeItem { ...state } role="listitem">
+			<CompositeItem { ...state } role="listitem" render={ <div /> }>
 				Item 3
 			</CompositeItem>
-			<CompositeItem { ...state } role="listitem">
+			<CompositeItem { ...state } role="listitem" render={ <div /> }>
 				Item 4
 			</CompositeItem>
-			<CompositeItem { ...state } role="listitem">
+			<CompositeItem { ...state } role="listitem" render={ <div /> }>
 				Item 5
 			</CompositeItem>
 		</Composite>

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

@@ -19,11 +19,6 @@ const meta: Meta< typeof Composite > = {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		'Composite.Context': Composite.Context,
 	},
-	// Temporary: Due to an upstream bug, render the root explicitly so the
-	// components manifest extractor can resolve props from the JSX.
-	//
-	// See: https://github.com/storybookjs/storybook/issues/34877
-	render: ( args ) => <Composite { ...args } />,
 	argTypes: {
 		children: { control: false },
 		render: { control: false },

package/src/confirm-dialog/README.md

@@ -81,6 +81,14 @@ function Example() {
 
 ## Props
 
+### `__experimentalHideHeader`
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `true`
+
+Whether the underlying `Modal` should hide its header, `title` included.
+
 ### `children`
 
  - Type: `ReactNode`
@@ -150,3 +158,11 @@ dialog to close when the user cancels.
  - Required: No
 
 Size of the underlying Modal. See `Modal`'s `size` prop.
+
+### `title`
+
+ - Type: `string`
+ - Required: No
+
+The title of the underlying `Modal`: its accessible name, and the
+visible heading unless `__experimentalHideHeader` is `true`.

package/src/confirm-dialog/component.tsx

@@ -22,6 +22,8 @@ const UnconnectedConfirmDialog = (
 		confirmButtonText,
 		cancelButtonText,
 		isBusy,
+		title,
+		__experimentalHideHeader = true,
 		...otherProps
 	} = useContextSystem( props, 'ConfirmDialog' );
 
@@ -81,7 +83,11 @@ const UnconnectedConfirmDialog = (
 					isDismissible
 					ref={ forwardedRef }
 					overlayClassName={ wrapperClassName }
-					__experimentalHideHeader
+					title={ title }
+					contentLabel={
+						__experimentalHideHeader ? title : undefined
+					}
+					__experimentalHideHeader={ __experimentalHideHeader }
 					{ ...otherProps }
 				>
 					<VStack spacing={ 8 }>

package/src/confirm-dialog/test/index.tsx

@@ -29,6 +29,47 @@ describe( 'Confirm', () => {
 					expect( el ).toBeInTheDocument();
 				} );
 			} );
+			it( 'uses title as the dialog accessible name while the default header is hidden', () => {
+				const title = 'Delete item?';
+
+				render(
+					<ConfirmDialog
+						title={ title }
+						onConfirm={ noop }
+						onCancel={ noop }
+					>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				expect(
+					screen.getByRole( 'dialog', { name: title } )
+				).toBeInTheDocument();
+				expect(
+					screen.queryByRole( 'heading', { name: title } )
+				).not.toBeInTheDocument();
+			} );
+			it( 'renders the title heading when __experimentalHideHeader is false', () => {
+				const title = 'Delete item?';
+
+				render(
+					<ConfirmDialog
+						title={ title }
+						__experimentalHideHeader={ false }
+						onConfirm={ noop }
+						onCancel={ noop }
+					>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				expect(
+					screen.getByRole( 'dialog', { name: title } )
+				).toBeInTheDocument();
+				expect(
+					screen.getByRole( 'heading', { name: title } )
+				).toBeInTheDocument();
+			} );
 			it( 'should render correctly with custom button labels', () => {
 				const cancelButtonText = 'No thanks';
 				const confirmButtonText = 'Yes please!';