Update BorderBoxControl for new popover positioning and responsive st…

…yles
WordPress · May 6, 2022 · 3aea82f · 3aea82f
1 parent a813973
commit 3aea82f
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 48 deletions.
diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx b/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
@@ -25,7 +25,7 @@ const BorderBoxControlSplitControls = (
 		enableAlpha,
 		enableStyle,
 		onChange,
-		popoverClassNames,
+		rightAlignedClassName,
 		value,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
@@ -50,33 +50,34 @@ const BorderBoxControlSplitControls = (
 				hideLabelFromVision={ true }
 				label={ __( 'Top border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'top' ) }
-				popoverContentClassName={ popoverClassNames?.top }
 				value={ value?.top }
+				__experimentalSide={ 'top' }
 				{ ...sharedBorderControlProps }
 			/>
 			<BorderControl
 				hideLabelFromVision={ true }
 				label={ __( 'Left border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'left' ) }
-				popoverContentClassName={ popoverClassNames?.left }
 				value={ value?.left }
+				__experimentalSide={ 'left' }
 				{ ...sharedBorderControlProps }
 			/>
 			<BorderControl
+				className={ rightAlignedClassName }
 				hideLabelFromVision={ true }
 				label={ __( 'Right border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'right' ) }
-				popoverContentClassName={ popoverClassNames?.right }
 				value={ value?.right }
+				__experimentalSide={ 'right' }
 				{ ...sharedBorderControlProps }
 			/>
 			<BorderControl
 				className={ centeredClassName }
 				hideLabelFromVision={ true }
 				label={ __( 'Bottom border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'bottom' ) }
-				popoverContentClassName={ popoverClassNames?.bottom }
 				value={ value?.bottom }
+				__experimentalSide={ 'bottom' }
 				{ ...sharedBorderControlProps }
 			/>
 		</Grid>

diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts b/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts
@@ -30,5 +30,14 @@ export function useBorderBoxControlSplitControls(
 		return cx( styles.CenteredBorderControl, className );
 	}, [] );
 
-	return { ...otherProps, centeredClassName, className: classes };
+	const rightAlignedClassName = useMemo( () => {
+		return cx( styles.RightBorderControl, className );
+	}, [] );
+
+	return {
+		...otherProps,
+		centeredClassName,
+		className: classes,
+		rightAlignedClassName,
+	};
 }
diff --git a/packages/components/src/border-box-control/border-box-control/README.md b/packages/components/src/border-box-control/border-box-control/README.md
@@ -122,26 +122,6 @@ _Note: The will be `undefined` if a user clears all borders._
 
 - Required: Yes
 
-### `popoverClassNames`: `Object`
-
-An object defining CSS classnames for all the inner `BorderControl` popover
-content.
-
-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',
-}
-```
-
-By default, popovers are displayed relative to the button that initiated the popover. By supplying classnames for each individual popover, it is possible to add styling rules to align the popover positions to an unrelated design element, for example, the sidebar inspector in the block editor.
-
-- Required: No
-
 ### `value`: `Object`
 
 An object representing the current border configuration.
@@ -173,6 +153,7 @@ aware of whether the colors prop contains multiple origins.
 ### `__experimentalIsRenderedInSidebar`: `boolean`
 
 This is passed on to the color related sub-components so they may render more
-effectively when used within a sidebar.
+effectively when used within a sidebar. If `true` this prop will also adjust
+border control popover styles for better sidebar display.
 
 - Required: No
diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx
@@ -51,7 +51,6 @@ const BorderBoxControl = (
 		linkedValue,
 		onLinkedChange,
 		onSplitChange,
-		popoverClassNames,
 		splitValue,
 		toggleLinked,
 		__experimentalHasMultipleOrigins,
@@ -77,7 +76,6 @@ const BorderBoxControl = (
 						placeholder={
 							hasMixedBorders ? __( 'Mixed' ) : undefined
 						}
-						popoverContentClassName={ popoverClassNames?.linked }
 						shouldSanitizeBorder={ false } // This component will handle that.
 						value={ linkedValue }
 						withSlider={ true }
@@ -88,6 +86,7 @@ const BorderBoxControl = (
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
+						__experimentalSide={ 'all' }
 					/>
 				) : (
 					<BorderBoxControlSplitControls
@@ -96,7 +95,6 @@ const BorderBoxControl = (
 						enableAlpha={ enableAlpha }
 						enableStyle={ enableStyle }
 						onChange={ onSplitChange }
-						popoverClassNames={ popoverClassNames }
 						value={ splitValue }
 						__experimentalHasMultipleOrigins={
 							__experimentalHasMultipleOrigins

diff --git a/packages/components/src/border-box-control/styles.ts b/packages/components/src/border-box-control/styles.ts
@@ -67,3 +67,7 @@ export const CenteredBorderControl = css`
 	grid-column: span 2;
 	margin: 0 auto;
 `;
+
+export const RightBorderControl = css`
+	${ rtl( { marginLeft: 'auto' }, { marginRight: 'auto' } )() }
+`;
diff --git a/packages/components/src/border-box-control/types.ts b/packages/components/src/border-box-control/types.ts
@@ -14,14 +14,6 @@ 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;
-};
-
 export type BorderBoxControlProps = ColorProps &
 	LabelProps & {
 		/**
@@ -34,11 +26,6 @@ export type BorderBoxControlProps = ColorProps &
 		 * individual side borders, or `undefined`.
 		 */
 		onChange: ( value: AnyBorder ) => void;
-		/**
-		 * An object defining CSS classnames for all the inner `BorderControl`
-		 * popover content.
-		 */
-		popoverClassNames?: PopoverClassNames;
 		/**
 		 * An object representing the current border configuration.
 		 *
@@ -84,11 +71,6 @@ export type SplitControlsProps = ColorProps & {
 	 * changed.
 	 */
 	onChange: ( value: Border | undefined, side: BorderSide ) => void;
-	/**
-	 * An object defining CSS classnames for the split side `BorderControl`s'
-	 * popover content.
-	 */
-	popoverClassNames?: PopoverClassNames;
 	/**
 	 * An object representing the current border configuration. It contains
 	 * properties for each side, with each side an object reflecting the border