Introduce local ColorIndicatorWithSpacer component, refactor `Color…

…Indicator` usages
WordPress · Apr 5, 2022 · 27887aa · 27887aa
1 parent 3ad77e4
commit 27887aa
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 21 deletions.
diff --git a/packages/edit-site/src/components/global-styles/color-indicator-spacer.js b/packages/edit-site/src/components/global-styles/color-indicator-spacer.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	ColorIndicator,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+
+// Compensate for the fact that `ColorIndicator` has a height of 20px,
+// while all other icons have a height of 24px.
+function ColorIndicatorWithSpacer( colorIndicatorProps ) {
+	return (
+		<Spacer
+			paddingY={ 0.5 }
+			marginBottom={ 0 }
+			// Necessary to avoid extra vertical white space, since `ColorIndicator`
+			// is a `display: inline-block` component.
+			style={ { fontSize: 0 } }
+		>
+			<ColorIndicator { ...colorIndicatorProps } />
+		</Spacer>
+	);
+}
+
+export default ColorIndicatorWithSpacer;
diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
@@ -7,7 +7,6 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
 	__experimentalVStack as VStack,
-	ColorIndicator,
 } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
@@ -18,6 +17,7 @@ import { useMemo } from '@wordpress/element';
 import Subtitle from './subtitle';
 import { NavigationButton } from './navigation-button';
 import { useSetting } from './hooks';
+import ColorIndicatorWithSpacer from './color-indicator-spacer';
 
 const EMPTY_COLORS = [];
 
@@ -65,10 +65,9 @@ function Palette( { name } ) {
 					>
 						<ZStack isLayered={ false } offset={ -8 }>
 							{ colors.slice( 0, 5 ).map( ( { color } ) => (
-								<ColorIndicator
+								<ColorIndicatorWithSpacer
 									key={ color }
 									colorValue={ color }
-									className="edit-site-global-styles__color-indicator-with-margin"
 								/>
 							) ) }
 						</ZStack>

diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -7,7 +7,6 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	FlexItem,
-	ColorIndicator,
 } from '@wordpress/components';
 
 /**
@@ -18,6 +17,7 @@ import Palette from './palette';
 import { NavigationButton } from './navigation-button';
 import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
 import Subtitle from './subtitle';
+import ColorIndicatorWithSpacer from './color-indicator-spacer';
 
 function BackgroundColorItem( { name, parentMenu } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
@@ -34,9 +34,8 @@ function BackgroundColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/background' }>
 			<HStack justify="flex-start">
-				<ColorIndicator
+				<ColorIndicatorWithSpacer
 					colorValue={ gradientValue ?? backgroundColor }
-					className="edit-site-global-styles__color-indicator-with-margin"
 				/>
 				<FlexItem>{ __( 'Background' ) }</FlexItem>
 			</HStack>
@@ -56,10 +55,7 @@ function TextColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/text' }>
 			<HStack justify="flex-start">
-				<ColorIndicator
-					colorValue={ color }
-					className="edit-site-global-styles__color-indicator-with-margin"
-				/>
+				<ColorIndicatorWithSpacer colorValue={ color } />
 				<FlexItem>{ __( 'Text' ) }</FlexItem>
 			</HStack>
 		</NavigationButton>
@@ -78,10 +74,7 @@ function LinkColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/link' }>
 			<HStack justify="flex-start">
-				<ColorIndicator
-					colorValue={ color }
-					className="edit-site-global-styles__color-indicator-with-margin"
-				/>
+				<ColorIndicatorWithSpacer colorValue={ color } />
 				<FlexItem>{ __( 'Links' ) }</FlexItem>
 			</HStack>
 		</NavigationButton>

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -92,10 +92,3 @@
 		border: var(--wp-admin-theme-color) $border-width solid;
 	}
 }
-
-.edit-site-global-styles__color-indicator-with-margin {
-	// Add 4px to compensate for the fact that `ColorIndicator` has a height
-	// of 20px, while all other icons have a height of 24px.
-	margin-top: $grid-unit * 0.25;
-	margin-bottom: $grid-unit * 0.25;
-}