From add961beeb14928d3ee40df9ac0edcc9b7c716e6 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Mon, 18 Dec 2023 16:14:32 +0100
Subject: [PATCH 1/3] Replace color copy icon with visible text.

---
 .../src/color-picker/color-copy-button.tsx    | 22 ++++---------------
 .../components/src/color-picker/styles.ts     | 12 ----------
 2 files changed, 4 insertions(+), 30 deletions(-)

diff --git a/packages/components/src/color-picker/color-copy-button.tsx b/packages/components/src/color-picker/color-copy-button.tsx
index 11ff7ca52de78..8d4e4b90d2624 100644
--- a/packages/components/src/color-picker/color-copy-button.tsx
+++ b/packages/components/src/color-picker/color-copy-button.tsx
@@ -3,16 +3,13 @@
  */
 import { useCopyToClipboard } from '@wordpress/compose';
 import { useState, useEffect, useRef } from '@wordpress/element';
-import { copy } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { CopyButton } from './styles';
-import Tooltip from '../tooltip';
-
 import type { ColorCopyButtonProps } from './types';
+import { Button } from '../button';
 
 export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
 	const { color, colorType } = props;
@@ -54,19 +51,8 @@ export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
 	}, [] );
 
 	return (
-		<Tooltip
-			delay={ 0 }
-			hideOnClick={ false }
-			text={
-				copiedColor === color.toHex() ? __( 'Copied!' ) : __( 'Copy' )
-			}
-		>
-			<CopyButton
-				size="small"
-				ref={ copyRef }
-				icon={ copy }
-				showTooltip={ false }
-			/>
-		</Tooltip>
+		<Button variant="secondary" size="small" ref={ copyRef }>
+			{ copiedColor === color.toHex() ? __( 'Copied!' ) : __( 'Copy' ) }
+		</Button>
 	);
 };
diff --git a/packages/components/src/color-picker/styles.ts b/packages/components/src/color-picker/styles.ts
index ecc75f5157625..5a5e50fb26baa 100644
--- a/packages/components/src/color-picker/styles.ts
+++ b/packages/components/src/color-picker/styles.ts
@@ -11,7 +11,6 @@ import InnerSelectControl from '../select-control';
 import InnerRangeControl from '../range-control';
 import { space } from '../utils/space';
 import { boxSizingReset } from '../utils';
-import Button from '../button';
 import { Flex } from '../flex';
 import { HStack } from '../h-stack';
 import CONFIG from '../utils/config-values';
@@ -101,14 +100,3 @@ export const ColorfulWrapper = styled.div`
 
 	${ interactiveHueStyles }
 `;
-
-export const CopyButton = styled( Button )`
-	&&&&& {
-		min-width: ${ space( 6 ) };
-		padding: 0;
-
-		> svg {
-			margin-right: 0;
-		}
-	}
-`;

From 0328d29fd0aaa56db7559b59f9fca2c451bb9f88 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 19 Dec 2023 10:11:08 +0100
Subject: [PATCH 2/3] Add changelog entry.

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 46e357a008b3f..01db0d16c4e2b 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -8,6 +8,7 @@
 
 ### Bug Fixes
 
+-   `ColorPicker`: Replace color copy button icon with visible text ([#57168](https://github.com/WordPress/gutenberg/pull/57168)).
 -   `ComboboxControl`: Fix ComboboxControl reset button when using the keyboard. ([#63410](https://github.com/WordPress/gutenberg/pull/63410))
 -   `Button`: Never apply `aria-disabled` to anchor ([#63376](https://github.com/WordPress/gutenberg/pull/63376)).
 

From 7ecb4500040faa91b791fb9434a4486588910e01 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Fri, 19 Jul 2024 11:29:34 +0200
Subject: [PATCH 3/3] Move the Copy button after the value that is being
 copied.

---
 .../src/color-picker/color-copy-button.tsx         |  2 +-
 packages/components/src/color-picker/component.tsx | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/color-picker/color-copy-button.tsx b/packages/components/src/color-picker/color-copy-button.tsx
index 8d4e4b90d2624..927ab57544e9b 100644
--- a/packages/components/src/color-picker/color-copy-button.tsx
+++ b/packages/components/src/color-picker/color-copy-button.tsx
@@ -51,7 +51,7 @@ export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
 	}, [] );
 
 	return (
-		<Button variant="secondary" size="small" ref={ copyRef }>
+		<Button variant="secondary" ref={ copyRef } __next40pxDefaultSize>
 			{ copiedColor === color.toHex() ? __( 'Copied!' ) : __( 'Copy' ) }
 		</Button>
 	);
diff --git a/packages/components/src/color-picker/component.tsx b/packages/components/src/color-picker/component.tsx
index a1112d2e1ecd2..4e2e2258cfac2 100644
--- a/packages/components/src/color-picker/component.tsx
+++ b/packages/components/src/color-picker/component.tsx
@@ -96,18 +96,22 @@ const UnconnectedColorPicker = (
 						hideLabelFromVision
 						variant="minimal"
 					/>
-					<ColorCopyButton
-						color={ safeColordColor }
-						colorType={ copyFormat || colorType }
-					/>
 				</AuxiliaryColorArtefactHStackHeader>
-				<ColorInputWrapper direction="column" gap={ 2 }>
+				<ColorInputWrapper
+					direction={ colorType === 'hex' ? 'row' : 'column' }
+					align="flex-start"
+					gap={ 2 }
+				>
 					<ColorInput
 						colorType={ colorType }
 						color={ safeColordColor }
 						onChange={ handleChange }
 						enableAlpha={ enableAlpha }
 					/>
+					<ColorCopyButton
+						color={ safeColordColor }
+						colorType={ copyFormat || colorType }
+					/>
 				</ColorInputWrapper>
 			</AuxiliaryColorArtefactWrapper>
 		</ColorfulWrapper>