Replace custom Button styles by using HStack component

WordPress · Aug 9, 2022 · 7c23528 · 7c23528
1 parent 1d30a2a
commit 7c23528
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 27 deletions.
diff --git a/packages/components/src/custom-gradient-bar/control-points.js b/packages/components/src/custom-gradient-bar/control-points.js
@@ -17,6 +17,7 @@ import { LEFT, RIGHT } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import Button from '../button';
+import { HStack } from '../h-stack';
 import { ColorPicker } from '../color-picker';
 import { VisuallyHidden } from '../visually-hidden';
 import { CustomColorPickerDropdown } from '../color-palette';
@@ -74,17 +75,9 @@ function ControlPointButton( { isOpen, position, color, ...additionalProps } ) {
 }
 
 function GradientColorPickerDropdown( { isRenderedInSidebar, ...props } ) {
-	const popoverProps = useMemo(
-		() => ( {
-			className:
-				'components-custom-gradient-picker__color-picker-popover',
-		} ),
-		[]
-	);
 	return (
 		<CustomColorPickerDropdown
 			isRenderedInSidebar={ isRenderedInSidebar }
-			popoverProps={ popoverProps }
 			{ ...props }
 		/>
 	);
@@ -246,21 +239,25 @@ function ControlPoints( {
 								} }
 							/>
 							{ ! disableRemove && controlPoints.length > 2 && (
-								<Button
-									className="components-custom-gradient-picker__remove-control-point"
-									onClick={ () => {
-										onChange(
-											removeControlPoint(
-												controlPoints,
-												index
-											)
-										);
-										onClose();
-									} }
-									variant="link"
+								<HStack
+									className="components-custom-gradient-picker__remove-control-point-wrapper"
+									alignment="center"
 								>
-									{ __( 'Remove Control Point' ) }
-								</Button>
+									<Button
+										onClick={ () => {
+											onChange(
+												removeControlPoint(
+													controlPoints,
+													index
+												)
+											);
+											onClose();
+										} }
+										variant="link"
+									>
+										{ __( 'Remove Control Point' ) }
+									</Button>
+								</HStack>
 							) }
 						</>
 					) }

diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss
@@ -59,11 +59,8 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 	}
 }
 
-.components-custom-gradient-picker__color-picker-popover .components-custom-gradient-picker__remove-control-point {
-	margin-left: auto;
-	margin-right: auto;
-	display: block;
-	margin-bottom: $grid-unit-10;
+.components-custom-gradient-picker__remove-control-point-wrapper {
+	padding-bottom: $grid-unit-10;
 }
 
 .components-custom-gradient-picker__inserter {