Global Styles: fix icon vertical alignment in palette panel

WordPress · Apr 1, 2022 · ba0e353 · ba0e353
1 parent e0a4b40
commit ba0e353
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/packages/components/src/z-stack/styles.ts b/packages/components/src/z-stack/styles.ts
@@ -19,6 +19,9 @@ export const ZStackChildView = styled.div< {
 	offsetAmount: number;
 	zIndex: number;
 } >`
+	/* TODO: split this change to a separate PR */
+	display: flex;
+
 	${ ( { isLayered, offsetAmount } ) =>
 		isLayered
 			? css( rtl( { marginLeft: offsetAmount } )() )

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,
-	FlexBlock,
 	ColorIndicator,
 } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
@@ -64,16 +63,22 @@ function Palette( { name } ) {
 							colors.length === 0 ? 'row-reverse' : 'row'
 						}
 					>
-						<FlexBlock>
-							<ZStack isLayered={ false } offset={ -8 }>
-								{ colors.slice( 0, 5 ).map( ( { color } ) => (
-									<ColorIndicator
-										key={ color }
-										colorValue={ color }
-									/>
-								) ) }
-							</ZStack>
-						</FlexBlock>
+						<ZStack
+							isLayered={ false }
+							offset={ -8 }
+							// TODO:
+							// - move to SCSS code + classname
+							// - consider using grid scss variables
+							// - consider adding a size prop to `ColorIndicator` ?
+							style={ { marginTop: '2px', marginBottom: '2px' } }
+						>
+							{ colors.slice( 0, 5 ).map( ( { color } ) => (
+								<ColorIndicator
+									key={ color }
+									colorValue={ color }
+								/>
+							) ) }
+						</ZStack>
 						<FlexItem>{ paletteButtonText }</FlexItem>
 					</HStack>
 				</NavigationButton>