Update color palette popover style (#41900)

Increases padding on the popover, and calculates a total width based on swatch dimensions to eliminate whitespace. Co-authored-by: Lena Morita <lena@jaguchi.com>
WordPress · Jul 26, 2022 · 2f1e1dc · 2f1e1dc
1 parent 570230d
commit 2f1e1dc
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 73 deletions.
diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -6,10 +6,6 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   font-size: 13px;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }

diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
@@ -115,6 +115,7 @@ function ColorGradientControlInner( {
 
 	return (
 		<BaseControl
+			__nextHasNoMarginBottom
 			className={ classnames(
 				'block-editor-color-gradient-control',
 				className

diff --git a/packages/block-editor/src/components/colors-gradients/dropdown.js b/packages/block-editor/src/components/colors-gradients/dropdown.js
@@ -11,6 +11,7 @@ import {
 	ColorIndicator,
 	Dropdown,
 	FlexItem,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	__experimentalHStack as HStack,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -155,10 +156,15 @@ export default function ColorGradientSettingsDropdown( {
 							<Dropdown
 								popoverProps={ popoverProps }
 								className="block-editor-tools-panel-color-gradient-settings__dropdown"
-								contentClassName="block-editor-panel-color-gradient-settings__dropdown-content"
 								renderToggle={ renderToggle( toggleSettings ) }
 								renderContent={ () => (
-									<ColorGradientControl { ...controlProps } />
+									<DropdownContentWrapper paddingSize="medium">
+										<div className="block-editor-panel-color-gradient-settings__dropdown-content">
+											<ColorGradientControl
+												{ ...controlProps }
+											/>
+										</div>
+									</DropdownContentWrapper>
 								) }
 							/>
 						</WithToolsPanelItem>

diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -1,3 +1,8 @@
+// Must equal $color-palette-circle-size from:
+// @wordpress/components/src/circular-option-picker/style.scss
+$swatch-size: 28px;
+$swatch-gap: 12px;
+
 .block-editor-color-gradient-control {
 	.block-editor-color-gradient-control__color-indicator {
 		margin-bottom: $grid-unit-15;
@@ -18,11 +23,6 @@
 }
 
 .block-editor-panel-color-gradient-settings {
-
-	// Must equal $color-palette-circle-size from:
-	// @wordpress/components/src/circular-option-picker/style.scss
-	$swatch-size: 28px;
-
 	@media screen and (min-width: $break-medium) {
 		.components-circular-option-picker__swatches {
 			display: grid;
@@ -40,11 +40,10 @@
 
 }
 
-.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
-	width: $sidebar-width;
+.block-editor-panel-color-gradient-settings__dropdown-content {
+	width: ( $swatch-size * 6 ) + ( $swatch-gap * 5 ); // Ensure the popover perfectly wraps the swatches.
 }
 
-
 .block-editor-panel-color-gradient-settings__color-indicator {
 	// Show a diagonal line (crossed out) for empty swatches.
 	background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);

diff --git a/packages/components/src/border-control/border-control-dropdown/component.tsx b/packages/components/src/border-control/border-control-dropdown/component.tsx
@@ -22,6 +22,7 @@ import { VStack } from '../../v-stack';
 import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { useBorderControlDropdown } from './hook';
 import { StyledLabel } from '../../base-control/styles/base-control-styles';
+import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';
 
 import type {
 	Color,
@@ -141,7 +142,6 @@ const BorderControlDropdown = (
 		onReset,
 		onColorChange,
 		onStyleChange,
-		popoverClassName,
 		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonClassName,
@@ -190,51 +190,55 @@ const BorderControlDropdown = (
 
 	const renderContent = ( { onClose }: PopoverProps ) => (
 		<>
-			<VStack className={ popoverControlsClassName } spacing={ 6 }>
-				{ showDropdownHeader ? (
-					<HStack>
-						<StyledLabel>{ __( 'Border color' ) }</StyledLabel>
-						<Button
-							isSmall
-							label={ __( 'Close border color' ) }
-							icon={ closeSmall }
-							onClick={ onClose }
-						/>
-					</HStack>
-				) : undefined }
-				<ColorPalette
-					className={ popoverContentClassName }
-					value={ color }
-					onChange={ onColorChange }
-					{ ...{ colors, disableCustomColors } }
-					__experimentalHasMultipleOrigins={
-						__experimentalHasMultipleOrigins
-					}
-					__experimentalIsRenderedInSidebar={
-						__experimentalIsRenderedInSidebar
-					}
-					clearable={ false }
-					enableAlpha={ enableAlpha }
-				/>
-				{ enableStyle && (
-					<BorderControlStylePicker
-						label={ __( 'Style' ) }
-						value={ style }
-						onChange={ onStyleChange }
+			<DropdownContentWrapper paddingSize="medium">
+				<VStack className={ popoverControlsClassName } spacing={ 6 }>
+					{ showDropdownHeader ? (
+						<HStack>
+							<StyledLabel>{ __( 'Border color' ) }</StyledLabel>
+							<Button
+								isSmall
+								label={ __( 'Close border color' ) }
+								icon={ closeSmall }
+								onClick={ onClose }
+							/>
+						</HStack>
+					) : undefined }
+					<ColorPalette
+						className={ popoverContentClassName }
+						value={ color }
+						onChange={ onColorChange }
+						{ ...{ colors, disableCustomColors } }
+						__experimentalHasMultipleOrigins={
+							__experimentalHasMultipleOrigins
+						}
+						__experimentalIsRenderedInSidebar={
+							__experimentalIsRenderedInSidebar
+						}
+						clearable={ false }
+						enableAlpha={ enableAlpha }
 					/>
-				) }
-			</VStack>
+					{ enableStyle && (
+						<BorderControlStylePicker
+							label={ __( 'Style' ) }
+							value={ style }
+							onChange={ onStyleChange }
+						/>
+					) }
+				</VStack>
+			</DropdownContentWrapper>
 			{ showResetButton && (
-				<Button
-					className={ resetButtonClassName }
-					variant="tertiary"
-					onClick={ () => {
-						onReset();
-						onClose();
-					} }
-				>
-					{ __( 'Reset to default' ) }
-				</Button>
+				<DropdownContentWrapper paddingSize="none">
+					<Button
+						className={ resetButtonClassName }
+						variant="tertiary"
+						onClick={ () => {
+							onReset();
+							onClose();
+						} }
+					>
+						{ __( 'Reset to default' ) }
+					</Button>
+				</DropdownContentWrapper>
 			) }
 		</>
 	);
@@ -245,7 +249,6 @@ const BorderControlDropdown = (
 			renderContent={ renderContent }
 			popoverProps={ {
 				...__unstablePopoverProps,
-				className: popoverClassName,
 			} }
 			{ ...otherProps }
 			ref={ forwardedRef }

diff --git a/packages/components/src/border-control/border-control-dropdown/hook.ts b/packages/components/src/border-control/border-control-dropdown/hook.ts
@@ -66,10 +66,6 @@ export function useBorderControlDropdown(
 		);
 	}, [ border, cx, __next36pxDefaultSize ] );
 
-	const popoverClassName = useMemo( () => {
-		return cx( styles.borderControlPopover );
-	}, [ cx ] );
-
 	const popoverControlsClassName = useMemo( () => {
 		return cx( styles.borderControlPopoverControls );
 	}, [ cx ] );
@@ -92,7 +88,6 @@ export function useBorderControlDropdown(
 		onColorChange,
 		onStyleChange,
 		onReset,
-		popoverClassName,
 		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonClassName,

diff --git a/packages/components/src/border-control/stories/index.tsx b/packages/components/src/border-control/stories/index.tsx
@@ -39,6 +39,9 @@ const colors = [
 	{ name: 'Blue', color: '#72aee6' },
 	{ name: 'Red', color: '#e65054' },
 	{ name: 'Yellow', color: '#f2d675' },
+	{ name: 'Blue', color: '#72aee6' },
+	{ name: 'Red', color: '#e65054' },
+	{ name: 'Yellow', color: '#f2d675' },
 ];
 
 // Multiple origin colors.

diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts
@@ -142,16 +142,13 @@ export const colorIndicatorWrapper = (
 	`;
 };
 
-export const borderControlPopover = css`
-	/* Remove padding from content, this will be re-added via inner elements*/
-	&& .components-popover__content {
-		padding: 0;
-		width: 264px;
-	}
-`;
+// Must equal $color-palette-circle-size from:
+// @wordpress/components/src/circular-option-picker/style.scss
+const swatchSize = 28;
+const swatchGap = 12;
 
 export const borderControlPopoverControls = css`
-	padding: ${ space( 2 ) };
+	width: ${ swatchSize * 6 + swatchGap * 5 }px;
 
 	> div:first-of-type > ${ StyledLabel } {
 		margin-bottom: 0;
@@ -174,6 +171,8 @@ export const resetButton = css`
 	/* Override button component styling */
 	&& {
 		border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 200 ] };
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
 		height: 46px;
 	}
 `;

diff --git a/packages/components/src/dropdown/styles.ts b/packages/components/src/dropdown/styles.ts
@@ -25,7 +25,14 @@ const padding = ( { paddingSize = 'small' }: DropdownContentWrapperProps ) => {
 
 export const DropdownContentWrapperDiv = styled.div< DropdownContentWrapperProps >`
 	// Negative margin to reset (offset) the default padding on .components-popover__content
-	margin: ${ space( -2 ) };
+	margin-left: ${ space( -2 ) };
+	margin-right: ${ space( -2 ) };
+	&:first-of-type {
+		margin-top: ${ space( -2 ) };
+	}
+	&:last-of-type {
+		margin-bottom: ${ space( -2 ) };
+	}
 
 	${ padding };
 `;