Border Controls: Passthrough popover props instead of class names

packages/block-editor/src/hooks/border.js

@@ -253,6 +253,23 @@ export function BorderPanel( props ) {
 	};
 
 	const hydratedBorder = getBorderObject( attributes, colors );
+	const popoversProps = {
+		linked: {
+			className: 'block-editor__border-box-control__popover',
+		},
+		top: {
+			className: 'block-editor__border-box-control__popover-top',
+		},
+		right: {
+			className: 'block-editor__border-box-control__popover-right',
+		},
+		bottom: {
+			className: 'block-editor__border-box-control__popover-bottom',
+		},
+		left: {
+			className: 'block-editor__border-box-control__popover-left',
+		},
+	};
 
 	return (
 		<InspectorControls __experimentalGroup="border">
@@ -269,17 +286,7 @@ export function BorderPanel( props ) {
 						colors={ colors }
 						enableAlpha={ true }
 						onChange={ onBorderChange }
-						popoverClassNames={ {
-							linked: 'block-editor__border-box-control__popover',
-							top:
-								'block-editor__border-box-control__popover-top',
-							right:
-								'block-editor__border-box-control__popover-right',
-							bottom:
-								'block-editor__border-box-control__popover-bottom',
-							left:
-								'block-editor__border-box-control__popover-left',
-						} }
+						popoversProps={ popoversProps }
 						showStyle={ isStyleSupported }
 						value={ hydratedBorder }
 						__experimentalHasMultipleOrigins={ true }

packages/components/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## Enhancements
+
+-    Update `BorderControl` and `BorderBoxControl` to passthrough popover props to their dropdowns instead of classnames only. ([#40836](https://github.com/WordPress/gutenberg/pull/40836))
+
 ## 19.10.0 (2022-05-04)
 
 ### Internal

packages/components/src/border-box-control/border-box-control-split-controls/component.tsx

@@ -25,7 +25,7 @@ const BorderBoxControlSplitControls = (
 		enableAlpha,
 		enableStyle,
 		onChange,
-		popoverClassNames,
+		popoversProps,
 		value,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
@@ -50,23 +50,23 @@ const BorderBoxControlSplitControls = (
 				hideLabelFromVision={ true }
 				label={ __( 'Top border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'top' ) }
-				popoverContentClassName={ popoverClassNames?.top }
+				popoverProps={ popoversProps?.top }
 				value={ value?.top }
 				{ ...sharedBorderControlProps }
 			/>
 			<BorderControl
 				hideLabelFromVision={ true }
 				label={ __( 'Left border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'left' ) }
-				popoverContentClassName={ popoverClassNames?.left }
+				popoverProps={ popoversProps?.left }
 				value={ value?.left }
 				{ ...sharedBorderControlProps }
 			/>
 			<BorderControl
 				hideLabelFromVision={ true }
 				label={ __( 'Right border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'right' ) }
-				popoverContentClassName={ popoverClassNames?.right }
+				popoverProps={ popoversProps?.right }
 				value={ value?.right }
 				{ ...sharedBorderControlProps }
 			/>
@@ -75,7 +75,7 @@ const BorderBoxControlSplitControls = (
 				hideLabelFromVision={ true }
 				label={ __( 'Bottom border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'bottom' ) }
-				popoverContentClassName={ popoverClassNames?.bottom }
+				popoverProps={ popoversProps?.bottom }
 				value={ value?.bottom }
 				{ ...sharedBorderControlProps }
 			/>

packages/components/src/border-box-control/border-box-control/README.md

@@ -122,19 +122,19 @@ _Note: The will be `undefined` if a user clears all borders._
 
 - Required: Yes
 
-### `popoverClassNames`: `Object`
+### `popoversProps`: `Object`
 
-An object defining CSS classnames for all the inner `BorderControl` popover
-content.
+An object defining the `popoverProps` for all the inner `BorderControl`
+dropdowns.
 
 Example:
 ```js
 {
-	linked: 'linked-border-popover-content',
-	top: 'top-border-popover-content',
-	right: 'right-border-popover-content',
-	bottom: 'bottom-border-popover-content',
-	left: 'left-border-popover-content',
+	linked: { className: 'linked-border-popover-content' },
+	top: { className: 'top-border-popover-content' },
+	right: { className: 'right-border-popover-content' },
+	bottom: { className: 'bottom-border-popover-content' },
+	left: { className: 'left-border-popover-content' },
 }
 ```
 

packages/components/src/border-box-control/border-box-control/component.tsx

@@ -51,7 +51,7 @@ const BorderBoxControl = (
 		linkedValue,
 		onLinkedChange,
 		onSplitChange,
-		popoverClassNames,
+		popoversProps,
 		splitValue,
 		toggleLinked,
 		__experimentalHasMultipleOrigins,
@@ -77,7 +77,7 @@ const BorderBoxControl = (
 						placeholder={
 							hasMixedBorders ? __( 'Mixed' ) : undefined
 						}
-						popoverContentClassName={ popoverClassNames?.linked }
+						popoverProps={ popoversProps?.linked }
 						shouldSanitizeBorder={ false } // This component will handle that.
 						value={ linkedValue }
 						withSlider={ true }
@@ -96,7 +96,7 @@ const BorderBoxControl = (
 						enableAlpha={ enableAlpha }
 						enableStyle={ enableStyle }
 						onChange={ onSplitChange }
-						popoverClassNames={ popoverClassNames }
+						popoversProps={ popoversProps }
 						value={ splitValue }
 						__experimentalHasMultipleOrigins={
 							__experimentalHasMultipleOrigins

packages/components/src/border-box-control/types.ts

@@ -1,7 +1,12 @@
 /**
  * Internal dependencies
  */
-import type { Border, ColorProps, LabelProps } from '../border-control/types';
+import type {
+	Border,
+	ColorProps,
+	DropdownPopoverProps,
+	LabelProps,
+} from '../border-control/types';
 
 export type Borders = {
 	top?: Border;
@@ -14,12 +19,15 @@ export type AnyBorder = Border | Borders | undefined;
 export type BorderProp = keyof Border;
 export type BorderSide = keyof Borders;
 
-export type PopoverClassNames = {
-	linked?: string;
-	top?: string;
-	right?: string;
-	bottom?: string;
-	left?: string;
+/**
+ * Collection of `popoverProps` for each of the inner border controls.
+ */
+export type PopoversProps = {
+	linked?: DropdownPopoverProps;
+	top?: DropdownPopoverProps;
+	right?: DropdownPopoverProps;
+	bottom?: DropdownPopoverProps;
+	left?: DropdownPopoverProps;
 };
 
 export type BorderBoxControlProps = ColorProps &
@@ -35,10 +43,10 @@ export type BorderBoxControlProps = ColorProps &
 		 */
 		onChange: ( value: AnyBorder ) => void;
 		/**
-		 * An object defining CSS classnames for all the inner `BorderControl`
-		 * popover content.
+		 * An object defining the `popoverProps` for all the inner
+		 * `BorderControl` dropdowns.
 		 */
-		popoverClassNames?: PopoverClassNames;
+		popoversProps?: PopoversProps;
 		/**
 		 * An object representing the current border configuration.
 		 *
@@ -85,10 +93,10 @@ export type SplitControlsProps = ColorProps & {
 	 */
 	onChange: ( value: Border | undefined, side: BorderSide ) => void;
 	/**
-	 * An object defining CSS classnames for the split side `BorderControl`s'
-	 * popover content.
+	 * An object defining the `popoverProps` for the split side
+	 * `BorderControl` dropdowns.
 	 */
-	popoverClassNames?: PopoverClassNames;
+	popoversProps?: PopoversProps;
 	/**
 	 * An object representing the current border configuration. It contains
 	 * properties for each side, with each side an object reflecting the border

packages/components/src/border-control/border-control-dropdown/component.tsx

@@ -141,8 +141,7 @@ const BorderControlDropdown = (
 		onReset,
 		onColorChange,
 		onStyleChange,
-		popoverClassName,
-		popoverContentClassName,
+		popoverProps,
 		popoverControlsClassName,
 		resetButtonClassName,
 		showDropdownHeader,
@@ -199,7 +198,6 @@ const BorderControlDropdown = (
 					</HStack>
 				) : undefined }
 				<ColorPalette
-					className={ popoverContentClassName }
 					value={ color }
 					onChange={ onColorChange }
 					{ ...{ colors, disableCustomColors } }
@@ -237,7 +235,7 @@ const BorderControlDropdown = (
 		<Dropdown
 			renderToggle={ renderToggle }
 			renderContent={ renderContent }
-			contentClassName={ popoverClassName }
+			popoverProps={ popoverProps }
 			{ ...otherProps }
 			ref={ forwardedRef }
 		/>

packages/components/src/border-control/border-control-dropdown/hook.ts

@@ -20,8 +20,8 @@ export function useBorderControlDropdown(
 		border,
 		className,
 		colors,
-		contentClassName,
 		onChange,
+		popoverProps,
 		previousStyleSelection,
 		...otherProps
 	} = useContextSystem( props, 'BorderControlDropdown' );
@@ -65,17 +65,13 @@ export function useBorderControlDropdown(
 	}, [ border, cx ] );
 
 	const popoverClassName = useMemo( () => {
-		return cx( styles.borderControlPopover, contentClassName );
-	}, [ cx, contentClassName ] );
+		return cx( styles.borderControlPopover, popoverProps?.className );
+	}, [ cx, popoverProps?.className ] );
 
 	const popoverControlsClassName = useMemo( () => {
 		return cx( styles.borderControlPopoverControls );
 	}, [ cx ] );
 
-	const popoverContentClassName = useMemo( () => {
-		return cx( styles.borderControlPopoverContent );
-	}, [ cx ] );
-
 	const resetButtonClassName = useMemo( () => {
 		return cx( styles.resetButton );
 	}, [ cx ] );
@@ -90,8 +86,7 @@ export function useBorderControlDropdown(
 		onColorChange,
 		onStyleChange,
 		onReset,
-		popoverClassName,
-		popoverContentClassName,
+		popoverProps: { ...popoverProps, className: popoverClassName },
 		popoverControlsClassName,
 		resetButtonClassName,
 	};

packages/components/src/border-control/border-control/README.md

@@ -113,10 +113,10 @@ _Note: the value may be `undefined` if a user clears all border properties._
 
 - Required: Yes
 
-### `popoverContentClassName`: `string`
+### `popoverProps`: `Object`
 
-A custom CSS class name to be assigned to the `BorderControl`'s dropdown
-popover content.
+Properties of the `popoverProps` object will be passed as props to the border
+control's dropdown popover.
 
 - Required: No
 

packages/components/src/border-control/border-control/component.tsx

@@ -43,7 +43,7 @@ const BorderControl = (
 		onSliderChange,
 		onWidthChange,
 		placeholder,
-		popoverContentClassName,
+		popoverProps,
 		previousStyleSelection,
 		showDropdownHeader,
 		sliderClassName,
@@ -68,11 +68,11 @@ const BorderControl = (
 					<BorderControlDropdown
 						border={ border }
 						colors={ colors }
-						contentClassName={ popoverContentClassName }
 						disableCustomColors={ disableCustomColors }
 						enableAlpha={ enableAlpha }
 						enableStyle={ enableStyle }
 						onChange={ onBorderChange }
+						popoverProps={ popoverProps }
 						previousStyleSelection={ previousStyleSelection }
 						showDropdownHeader={ showDropdownHeader }
 						__experimentalHasMultipleOrigins={

packages/components/src/border-control/styles.ts

@@ -136,7 +136,6 @@ export const borderControlPopoverControls = css`
 	}
 `;
 
-export const borderControlPopoverContent = css``;
 export const borderColorIndicator = css``;
 
 export const resetButton = css`

packages/components/src/border-control/types.ts

@@ -21,6 +21,24 @@ export type ColorOrigin = {
 
 export type Colors = ColorOrigin[] | Color[];
 
+/**
+ * Represents the available props that can be passed through the border control
+ * dropdown's `popoverProps`. This should be replaced once the Dropdown or
+ * Popover components are typed.
+ */
+export type DropdownPopoverProps = {
+	className?: string;
+	focusOnMount?: boolean;
+	position?: string;
+	onClose?: () => void;
+	onFocusOutside?: () => void;
+	expandOnMobile?: boolean;
+	headerTitle?: string;
+	noArrow?: boolean;
+	anchorRect?: DOMRect;
+	getAnchorRect?: ( ref: HTMLAnchorElement ) => DOMRect;
+};
+
 export type ColorProps = {
 	/**
 	 * An array of color definitions. This may also be a multi-dimensional array
@@ -81,10 +99,10 @@ export type BorderControlProps = ColorProps &
 		 */
 		onChange: ( value?: Border ) => void;
 		/**
-		 * A custom CSS class name to be assigned to the border control's
-		 * dropdown popover content.
+		 * Properties of the `popoverProps` object will be passed as props to
+		 * the border control's dropdown popover.
 		 */
-		popoverContentClassName?: string;
+		popoverProps?: DropdownPopoverProps;
 		/**
 		 * If opted into, sanitizing the border means that if no width or color
 		 * have been selected, the border style is also cleared and `undefined`
@@ -123,11 +141,6 @@ export type DropdownProps = ColorProps & {
 	 * values for its popover controls.
 	 */
 	border?: Border;
-	/**
-	 * A custom CSS class name to be assigned to the border control's
-	 * dropdown popover content.
-	 */
-	contentClassName?: string;
 	/**
 	 * This controls whether to render border style options.
 	 *
@@ -138,6 +151,11 @@ export type DropdownProps = ColorProps & {
 	 * A callback invoked when the border color or style selections change.
 	 */
 	onChange: ( newBorder?: Border ) => void;
+	/**
+	 * Properties of the `popoverProps` object will be passed as props to the
+	 * border control's dropdown popover.
+	 */
+	popoverProps?: DropdownPopoverProps;
 	/**
 	 * Any previous style selection made by the user. This can be used to
 	 * reapply that previous selection when, for example, a zero border width is