@wordpress/components 39.0.0 → 40.1.0

package/src/border-box-control/border-box-control-split-controls/hook.ts

@@ -1,8 +1,7 @@
-import { useMemo } from '@wordpress/element';
-import * as styles from '../styles';
+import clsx from 'clsx';
+import styles from '../style.module.scss';
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
-import { useCx } from '../../utils/';
 import type { SplitControlsProps } from '../types';
 
 export function useBorderBoxControlSplitControls(
@@ -17,28 +16,20 @@ export function useBorderBoxControlSplitControls(
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControlSplitControls' );
 
-	// Generate class names.
-	const cx = useCx();
-	const classes = useMemo( () => {
-		return cx( styles.borderBoxControlSplitControls, className );
-	}, [ cx, className ] );
-
-	const centeredClassName = useMemo( () => {
-		return cx( styles.centeredBorderControl, className );
-	}, [ cx, className ] );
-
-	const rightAlignedClassName = useMemo( () => {
-		return cx( styles.rightBorderControl(), className );
-	}, [ cx, className ] );
-
 	return {
 		...otherProps,
-		centeredClassName,
-		className: classes,
+		centeredClassName: clsx(
+			styles[ 'centered-border-control' ],
+			className
+		),
+		className: clsx( styles[ 'split-controls' ], className ),
 		colors,
 		enableAlpha,
 		enableStyle,
-		rightAlignedClassName,
+		rightAlignedClassName: clsx(
+			styles[ 'right-border-control' ],
+			className
+		),
 		__experimentalIsRenderedInSidebar,
 	};
 }

package/src/border-box-control/border-box-control-visualizer/hook.ts

@@ -1,23 +1,49 @@
-import { useMemo } from '@wordpress/element';
-import * as styles from '../styles';
+import clsx from 'clsx';
+import styles from '../style.module.scss';
+import { COLORS, CONFIG } from '../../utils';
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
-import { useCx } from '../../utils';
+import type { Border } from '../../border-control/types';
 import type { VisualizerProps } from '../types';
 
+const borderBoxStyleWithFallback = ( border?: Border ) => {
+	const {
+		color = COLORS.gray[ 200 ],
+		style = 'solid',
+		width = CONFIG.borderWidth,
+	} = border || {};
+
+	const clampedWidth =
+		width !== CONFIG.borderWidth ? `clamp(1px, ${ width }, 10px)` : width;
+	const hasVisibleBorder = ( !! width && width !== '0' ) || !! color;
+	const borderStyle = hasVisibleBorder ? style || 'solid' : style;
+
+	return `${ color } ${ borderStyle } ${ clampedWidth }`;
+};
+
 export function useBorderBoxControlVisualizer(
 	props: WordPressComponentProps< VisualizerProps, 'div' >
 ) {
-	const { className, value, ...otherProps } = useContextSystem(
+	const { className, style, value, ...otherProps } = useContextSystem(
 		props,
 		'BorderBoxControlVisualizer'
 	);
 
-	// Generate class names.
-	const cx = useCx();
-	const classes = useMemo( () => {
-		return cx( styles.borderBoxControlVisualizer( value ), className );
-	}, [ cx, className, value ] );
-
-	return { ...otherProps, className: classes, value };
+	return {
+		...otherProps,
+		className: clsx( styles.visualizer, className ),
+		style: {
+			...style,
+			'--wp-components-border-box-visualizer-top':
+				borderBoxStyleWithFallback( value?.top ),
+			'--wp-components-border-box-visualizer-bottom':
+				borderBoxStyleWithFallback( value?.bottom ),
+			// Logical properties map left/right to inline start/end for RTL.
+			'--wp-components-border-box-visualizer-start':
+				borderBoxStyleWithFallback( value?.left ),
+			'--wp-components-border-box-visualizer-end':
+				borderBoxStyleWithFallback( value?.right ),
+		},
+		value,
+	};
 }

package/src/border-box-control/stories/index.story.tsx

@@ -58,7 +58,7 @@ const Template: StoryFn< typeof BorderBoxControl > = ( props ) => {
 					borderBottom: 'none',
 				} }
 			/>
-			<p style={ { color: '#aaa', fontSize: '0.9em' } }>
+			<p style={ { color: '#6c6c6c', fontSize: '0.9em' } }>
 				The BorderBoxControl is intended to be used within a component
 				that will provide reset controls. The button below is only for
 				convenience.
@@ -79,3 +79,13 @@ Default.args = {
 	label: 'Borders',
 	enableStyle: true,
 };
+
+/**
+ * With no visible label there is no label row for the linked/unlinked toggle to
+ * join, so it is rendered alongside the border inputs instead.
+ */
+export const WithoutLabel = Template.bind( {} );
+WithoutLabel.args = {
+	...Default.args,
+	label: undefined,
+};

package/src/border-box-control/style.module.scss

@@ -0,0 +1,74 @@
+@use "@wordpress/base-styles/variables" as *;
+
+.linked-border-control {
+	/* Preserve the original `&&` specificity so this beats BorderControl's margin reset. */
+	&#{&} {
+		flex: 1;
+		margin-inline-end: 24px;
+	}
+}
+
+/* No inline-end gutter is needed when the toggle sits in the header row. */
+.linked-border-control-full-width {
+	&#{&} {
+		margin-inline-end: 0;
+	}
+}
+
+/* The label row the linked/unlinked toggle joins when a visible label is
+   rendered. Laid out as a content-driven grid like `BoxControl`'s label row, so
+   a label that wraps grows the row rather than overflowing a fixed height. */
+.header {
+	/* The row is as tall as the toggle (24px, `Button` `size="small"`), so 4px
+	   here leaves the same 28px between label and inputs as the sibling
+	   controls, which instead pair a fixed 16px row with a 12px margin. */
+	margin-bottom: $grid-unit-05;
+
+	/* The label (a `BaseControl.VisualLabel`, so a `span`) supplies its own
+	   bottom margin as the gap to the input below. In the header row that gap
+	   comes from the row itself, and the margin would both pull the vertically
+	   centred label off centre and pad the row out once the label wraps. */
+	> span {
+		margin-bottom: 0;
+	}
+}
+
+.wrapper {
+	position: relative;
+
+	/* Without a header row the toggle is positioned against the input instead. */
+	.linked-button {
+		position: absolute;
+		top: 8px;
+		inset-inline-end: 0;
+	}
+}
+
+.linked-button {
+	line-height: 0;
+}
+
+.visualizer {
+	position: absolute;
+	top: 20px;
+	bottom: 20px;
+	inset-inline: 39px;
+	border-top: var(--wp-components-border-box-visualizer-top);
+	border-bottom: var(--wp-components-border-box-visualizer-bottom);
+	border-inline-start: var(--wp-components-border-box-visualizer-start);
+	border-inline-end: var(--wp-components-border-box-visualizer-end);
+}
+
+.split-controls {
+	position: relative;
+	flex: 1;
+}
+
+.centered-border-control {
+	grid-column: span 2;
+	margin: 0 auto;
+}
+
+.right-border-control {
+	margin-inline-start: auto;
+}

package/src/border-box-control/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,8 +1,12 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type { ComponentProps } from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { useId } from '@wordpress/element';
 import { BorderBoxControl } from '..';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const colors = [
 	{ name: 'Gray', color: '#f6f7f7' },
 	{ name: 'Blue', color: '#72aee6' },
@@ -34,7 +38,7 @@ const mixedBorders = {
 const props = {
 	colors,
 	label: 'Border Box',
-	onChange: jest.fn().mockImplementation( ( newValue ) => {
+	onChange: vi.fn().mockImplementation( ( newValue ) => {
 		props.value = newValue;
 	} ),
 	value: undefined,
@@ -50,6 +54,102 @@ function TestBorderBoxControl(
 }
 
 describe( 'BorderBoxControl', () => {
+	describe( 'Labelling', () => {
+		it( 'should give the group of controls an accessible name from the label', () => {
+			render( <TestBorderBoxControl { ...props } /> );
+
+			expect(
+				screen.getByRole( 'group', { name: props.label } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should name the group of controls even when the label is hidden', () => {
+			render( <TestBorderBoxControl { ...props } hideLabelFromVision /> );
+
+			expect(
+				screen.getByRole( 'group', { name: props.label } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should let a consumer-provided `aria-label` take precedence over the label', () => {
+			render(
+				<TestBorderBoxControl { ...props } aria-label="Outer borders" />
+			);
+
+			expect(
+				screen.getByRole( 'group', { name: 'Outer borders' } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should let a consumer-provided `aria-labelledby` take precedence over the label', () => {
+			const ExternallyLabelledControl = () => {
+				const id = useId();
+				return (
+					<>
+						<span id={ id }>Outer borders</span>
+						<TestBorderBoxControl
+							{ ...props }
+							aria-labelledby={ id }
+						/>
+					</>
+				);
+			};
+
+			render( <ExternallyLabelledControl /> );
+
+			expect(
+				screen.getByRole( 'group', { name: 'Outer borders' } )
+			).toBeInTheDocument();
+
+			// With an external name in play, the internal label is no longer
+			// referenced, so it shouldn't carry a generated ID either.
+			expect( screen.getByText( props.label ) ).not.toHaveAttribute(
+				'id'
+			);
+		} );
+
+		it( 'should form a group when named only by `aria-label`', () => {
+			render(
+				<TestBorderBoxControl
+					{ ...props }
+					label={ undefined }
+					aria-label="Outer borders"
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'group', { name: 'Outer borders' } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should fall back to the label when an ARIA naming prop is empty', () => {
+			// An empty `aria-label` is skipped by the accessible name
+			// computation, so it shouldn't suppress the label association and
+			// leave the group unnamed.
+			render( <TestBorderBoxControl { ...props } aria-label="" /> );
+
+			expect(
+				screen.getByRole( 'group', { name: props.label } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should give each instance its own label association', () => {
+			render(
+				<>
+					<TestBorderBoxControl { ...props } label="First" />
+					<TestBorderBoxControl { ...props } label="Second" />
+				</>
+			);
+
+			expect(
+				screen.getByRole( 'group', { name: 'First' } )
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole( 'group', { name: 'Second' } )
+			).toBeInTheDocument();
+		} );
+	} );
+
 	describe( 'Linked view rendering', () => {
 		it( 'should render correctly when no value provided', () => {
 			render( <TestBorderBoxControl { ...props } /> );
@@ -76,6 +176,42 @@ describe( 'BorderBoxControl', () => {
 			expect( linkedButton ).toBeInTheDocument();
 		} );
 
+		// `getAllByRole` returns document order, so the sign of this offset is
+		// which side of the border inputs the linked button sits on. The color
+		// button is the first of those inputs.
+		const getLinkedButtonOffsetFromColorButton = () => {
+			const buttons = screen.getAllByRole( 'button' );
+			const linkedButtonIndex = buttons.indexOf(
+				screen.getByLabelText( 'Unlink sides' )
+			);
+			const colorButtonIndex = buttons.indexOf(
+				screen.getByLabelText( toggleLabelRegex )
+			);
+
+			// Both queries throw when absent, and `indexOf` gives -1 for a
+			// button outside the list, which would read as "earlier than".
+			expect( linkedButtonIndex ).toBeGreaterThanOrEqual( 0 );
+			expect( colorButtonIndex ).toBeGreaterThanOrEqual( 0 );
+
+			return linkedButtonIndex - colorButtonIndex;
+		};
+
+		it( 'should place the linked button before the border inputs when the label is visible', () => {
+			render( <TestBorderBoxControl { ...props } /> );
+
+			// Sharing the label's row is what lines it up with the equivalent
+			// button on sibling controls such as border radius.
+			expect( getLinkedButtonOffsetFromColorButton() ).toBeLessThan( 0 );
+		} );
+
+		it( 'should place the linked button after the border inputs when the label is hidden', () => {
+			render( <TestBorderBoxControl { ...props } hideLabelFromVision /> );
+
+			expect( getLinkedButtonOffsetFromColorButton() ).toBeGreaterThan(
+				0
+			);
+		} );
+
 		it( 'should hide label', () => {
 			render( <TestBorderBoxControl { ...props } hideLabelFromVision /> );
 
@@ -318,7 +454,7 @@ describe( 'BorderBoxControl', () => {
 
 	describe( 'onChange handling', () => {
 		beforeEach( () => {
-			jest.clearAllMocks();
+			vi.clearAllMocks();
 			props.value = undefined;
 		} );
 

package/src/border-box-control/test/utils.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import {
 	getBorderDiff,
 	getCommonBorder,
@@ -44,12 +45,14 @@ describe( 'BorderBoxControl Utils', () => {
 	describe( 'isEmptyBorder', () => {
 		it( 'should determine a undefined, null, and {} to be empty', () => {
 			expect( isEmptyBorder( undefined ) ).toBe( true );
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `null` is outside the declared `Border | undefined` input; resilience is tested.
 			expect( isEmptyBorder( null ) ).toBe( true );
 			expect( isEmptyBorder( {} ) ).toBe( true );
 		} );
 
 		it( 'should determine object missing all border props to be empty', () => {
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `nonBorder` has no properties in common with `Border`; resilience is tested.
 			expect( isEmptyBorder( nonBorder ) ).toBe( true );
 		} );
@@ -109,12 +112,14 @@ describe( 'BorderBoxControl Utils', () => {
 	describe( 'isCompleteBorder', () => {
 		it( 'should determine a undefined, null, and {} to be incomplete', () => {
 			expect( isCompleteBorder( undefined ) ).toBe( false );
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `null` is outside the declared `Border | undefined` input; resilience is tested.
 			expect( isCompleteBorder( null ) ).toBe( false );
 			expect( isCompleteBorder( {} ) ).toBe( false );
 		} );
 
 		it( 'should determine objects missing border props to be incomplete', () => {
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `nonBorder` has no properties in common with `Border`; resilience is tested.
 			expect( isCompleteBorder( nonBorder ) ).toBe( false );
 			expect( isCompleteBorder( partialBorder ) ).toBe( false );
@@ -150,6 +155,7 @@ describe( 'BorderBoxControl Utils', () => {
 		it( 'should determine undefined, non-border or empty object as not being mixed', () => {
 			expect( hasMixedBorders( undefined ) ).toBe( false );
 			expect( hasMixedBorders( {} ) ).toBe( false );
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `nonBorder` is not assignable to `AnyBorder`; resilience is tested.
 			expect( hasMixedBorders( nonBorder ) ).toBe( false );
 		} );
@@ -170,12 +176,14 @@ describe( 'BorderBoxControl Utils', () => {
 	describe( 'getSplitBorders', () => {
 		it( 'should return undefined when no border provided', () => {
 			expect( getSplitBorders( undefined ) ).toEqual( undefined );
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `null` is outside the declared `Border | undefined` input; resilience is tested.
 			expect( getSplitBorders( null ) ).toEqual( undefined );
 		} );
 
 		it( 'should return undefined when supplied border is empty', () => {
 			expect( getSplitBorders( {} ) ).toEqual( undefined );
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `nonBorder` has no properties in common with `Border`; resilience is tested.
 			expect( getSplitBorders( nonBorder ) ).toEqual( undefined );
 		} );
@@ -197,6 +205,7 @@ describe( 'BorderBoxControl Utils', () => {
 		} );
 
 		it( 'should only return differences for border related properties', () => {
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `nonBorder` has no properties in common with `Border`; resilience is tested.
 			const diff = getBorderDiff( nonBorder, { caffeine: 'coffee' } );
 			expect( diff ).toEqual( {} );
@@ -206,6 +215,7 @@ describe( 'BorderBoxControl Utils', () => {
 			const diff = getBorderDiff( completeBorder, {
 				...completeBorder,
 				color: '#21759b',
+				// Checking for extra resilience, even if not a valid type.
 				// @ts-expect-error `caffeine` is not a declared `Border` property; the test checks it is ignored.
 				caffeine: 'cola',
 			} );
@@ -304,6 +314,7 @@ describe( 'BorderBoxControl Utils', () => {
 		it( 'should return undefined when no border provided', () => {
 			expect( getShorthandBorderStyle( undefined ) ).toEqual( undefined );
 			expect( getShorthandBorderStyle( {} ) ).toEqual( undefined );
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `nonBorder` has no properties in common with `Border`; resilience is tested.
 			expect( getShorthandBorderStyle( nonBorder ) ).toEqual( undefined );
 		} );

package/src/border-box-control/types.ts

@@ -34,7 +34,9 @@ export type BorderBoxControlProps = ColorProps &
 		 */
 		popoverPlacement?: PopoverProps[ 'placement' ];
 		/**
-		 * The space between the popover and the control wrapper.
+		 * The space between the popover and the control wrapper. A number
+		 * displaces the popover along its main axis; pass an object to also
+		 * displace it along its cross axis.
 		 */
 		popoverOffset?: PopoverProps[ 'offset' ];
 		/**
@@ -83,7 +85,9 @@ export type SplitControlsProps = ColorProps &
 		 */
 		popoverPlacement?: PopoverProps[ 'placement' ];
 		/**
-		 * The space between the popover and the control wrapper.
+		 * The space between the popover and the control wrapper. A number
+		 * displaces the popover along its main axis; pass an object to also
+		 * displace it along its cross axis.
 		 */
 		popoverOffset?: PopoverProps[ 'offset' ];
 		/**

package/src/border-control/border-control/hook.ts

@@ -1,9 +1,9 @@
-import { useCallback, useMemo, useState } from '@wordpress/element';
-import * as styles from '../styles';
+import clsx from 'clsx';
+import { useCallback, useState } from '@wordpress/element';
 import { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
-import { useCx } from '../../utils/hooks/use-cx';
+import styles from '../style.module.scss';
 import type { Border, BorderControlProps } from '../types';
 
 // If either width or color are defined, the border is considered valid
@@ -110,11 +110,7 @@ export function useBorderControl(
 		[ onWidthChange, widthUnit ]
 	);
 
-	// Generate class names.
-	const cx = useCx();
-	const classes = useMemo( () => {
-		return cx( styles.borderControl, className );
-	}, [ className, cx ] );
+	const classes = clsx( styles[ 'border-control' ], className );
 
 	let wrapperWidth = width;
 	if ( isCompact ) {
@@ -122,17 +118,12 @@ export function useBorderControl(
 		// Taller controls contain greater internal padding, thus greater width.
 		wrapperWidth = '116px';
 	}
-	const innerWrapperClassName = useMemo( () => {
-		return cx(
-			styles.getInnerWrapperStyles( {
-				hasWidth: !! wrapperWidth,
-			} )
-		);
-	}, [ wrapperWidth, cx ] );
-
-	const sliderClassName = useMemo( () => {
-		return cx( styles.borderSlider() );
-	}, [ cx ] );
+	const innerWrapperClassName = clsx(
+		styles[ 'inner-wrapper' ],
+		!! wrapperWidth && styles[ 'inner-wrapper-has-width' ]
+	);
+
+	const sliderClassName = styles.slider;
 
 	return {
 		...otherProps,

package/src/border-control/border-control-dropdown/component.tsx

@@ -137,13 +137,12 @@ const BorderControlDropdown = (
 		disableCustomColors,
 		enableAlpha,
 		enableStyle,
-		indicatorClassName,
 		indicatorWrapperClassName,
+		indicatorWrapperStyle,
 		isStyleSettable,
 		onReset,
 		onColorChange,
 		onStyleChange,
-		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonWrapperClassName,
 		__unstablePopoverProps,
@@ -177,11 +176,11 @@ const BorderControlDropdown = (
 			showTooltip
 			__next40pxDefaultSize
 		>
-			<span className={ indicatorWrapperClassName }>
-				<ColorIndicator
-					className={ indicatorClassName }
-					colorValue={ color }
-				/>
+			<span
+				className={ indicatorWrapperClassName }
+				style={ indicatorWrapperStyle }
+			>
+				<ColorIndicator colorValue={ color } />
 			</span>
 		</Button>
 	);
@@ -191,7 +190,6 @@ const BorderControlDropdown = (
 			<DropdownContentWrapper paddingSize="medium">
 				<VStack className={ popoverControlsClassName } spacing={ 6 }>
 					<ColorPalette
-						className={ popoverContentClassName }
 						value={ color }
 						onChange={ onColorChange }
 						{ ...{ colors, disableCustomColors } }

package/src/border-control/border-control-dropdown/hook.ts

@@ -1,9 +1,9 @@
-import { useMemo } from '@wordpress/element';
-import * as styles from '../styles';
+import clsx from 'clsx';
 import { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
-import { useCx } from '../../utils/hooks/use-cx';
+import { COLORS } from '../../utils';
+import styles from '../style.module.scss';
 import type { DropdownProps } from '../types';
 
 export function useBorderControlDropdown(
@@ -45,31 +45,9 @@ export function useBorderControlDropdown(
 		} );
 	};
 
-	// Generate class names.
-	const cx = useCx();
-	const classes = useMemo( () => {
-		return cx( styles.borderControlDropdown, className );
-	}, [ className, cx ] );
+	const classes = clsx( styles.dropdown, className );
 
-	const indicatorClassName = useMemo( () => {
-		return cx( styles.borderColorIndicator );
-	}, [ cx ] );
-
-	const indicatorWrapperClassName = useMemo( () => {
-		return cx( styles.colorIndicatorWrapper( border ) );
-	}, [ border, cx ] );
-
-	const popoverControlsClassName = useMemo( () => {
-		return cx( styles.borderControlPopoverControls );
-	}, [ cx ] );
-
-	const popoverContentClassName = useMemo( () => {
-		return cx( styles.borderControlPopoverContent );
-	}, [ cx ] );
-
-	const resetButtonWrapperClassName = useMemo( () => {
-		return cx( styles.resetButtonWrapper );
-	}, [ cx ] );
+	const { color: indicatorColor, style: indicatorStyle } = border || {};
 
 	return {
 		...otherProps,
@@ -78,14 +56,27 @@ export function useBorderControlDropdown(
 		colors,
 		enableAlpha,
 		enableStyle,
-		indicatorClassName,
-		indicatorWrapperClassName,
+		indicatorWrapperClassName: styles[ 'color-indicator-wrapper' ],
+		// Applied inline so CSS-wide values (e.g. `inherit`) and the `||` color
+		// fallback pass straight through to `border-style`/`border-color`. Style
+		// `none` previews as `solid`; a style without a color falls back to
+		// gray-300.
+		indicatorWrapperStyle: indicatorStyle
+			? {
+					borderStyle:
+						indicatorStyle === 'none' ? 'solid' : indicatorStyle,
+					borderColor:
+						indicatorColor ||
+						( indicatorStyle !== 'none'
+							? COLORS.gray[ 300 ]
+							: undefined ),
+			  }
+			: undefined,
 		onColorChange,
 		onStyleChange,
 		onReset,
-		popoverContentClassName,
-		popoverControlsClassName,
-		resetButtonWrapperClassName,
+		popoverControlsClassName: styles[ 'popover-controls' ],
+		resetButtonWrapperClassName: styles[ 'reset-button-wrapper' ],
 		__experimentalIsRenderedInSidebar,
 	};
 }