From dab0864c53db6e143aa71454ebbe052f6856e0e5 Mon Sep 17 00:00:00 2001
From: Glen Davies <glendaviesnz@users.noreply.github.com>
Date: Mon, 13 Dec 2021 13:42:21 +1300
Subject: [PATCH] Global Styles: Move the 'Edit colors' button to a standard
 menu item (#36842)

* Move changes to the new palette edit component

* Remove redundant style

* Change class name to match existing

Co-authored-by: Glen Davies <glen.davies@a8c.com>
---
 packages/components/src/palette-edit/index.js | 30 +++++++++----------
 .../components/src/palette-edit/style.scss    |  5 ++++
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/components/src/palette-edit/index.js b/packages/components/src/palette-edit/index.js
index b4de9800c9ece..0ed6b805cfb13 100644
--- a/packages/components/src/palette-edit/index.js
+++ b/packages/components/src/palette-edit/index.js
@@ -292,22 +292,8 @@ export default function PaletteEdit( {
 							} }
 						/>
 					) }
-					{ ! isEditing && (
-						<Button
-							disabled={ ! hasElements }
-							isSmall
-							icon={ moreVertical }
-							label={
-								isGradient
-									? __( 'Edit gradients' )
-									: __( 'Edit colors' )
-							}
-							onClick={ () => {
-								setIsEditing( true );
-							} }
-						/>
-					) }
-					{ isEditing && ( canReset || ! canOnlyChangeValues ) && (
+
+					{ hasElements && ( canReset || ! canOnlyChangeValues ) && (
 						<DropdownMenu
 							icon={ moreVertical }
 							label={
@@ -322,6 +308,17 @@ export default function PaletteEdit( {
 							{ ( { onClose } ) => (
 								<>
 									<NavigableMenu role="menu">
+										<Button
+											variant="tertiary"
+											disabled={ isEditing }
+											onClick={ () => {
+												setIsEditing( true );
+												onClose();
+											} }
+											className="components-palette-edit__menu-button"
+										>
+											{ __( 'Edit custom colors' ) }
+										</Button>
 										{ ! canOnlyChangeValues && (
 											<Button
 												variant="tertiary"
@@ -331,6 +328,7 @@ export default function PaletteEdit( {
 													onChange();
 													onClose();
 												} }
+												className="components-palette-edit__menu-button"
 											>
 												{ isGradient
 													? __(
diff --git a/packages/components/src/palette-edit/style.scss b/packages/components/src/palette-edit/style.scss
index 748937b649f28..ef78dd30fe925 100644
--- a/packages/components/src/palette-edit/style.scss
+++ b/packages/components/src/palette-edit/style.scss
@@ -17,3 +17,8 @@
 		padding: 8px;
 	}
 }
+.components-dropdown-menu__menu {
+	.components-palette-edit__menu-button {
+		width: 100%;
+	}
+}