Replace color copy icon with visible text.

WordPress · Dec 18, 2023 · ec46152 · ec46152
1 parent df9f857
commit ec46152
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 30 deletions.
diff --git 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
@@ -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 {
@@ -115,14 +114,3 @@ export const ColorfulWrapper = styled.div`
 
 	${ interactiveHueStyles }
 `;
-
-export const CopyButton = styled( Button )`
-	&&&&& {
-		min-width: ${ space( 6 ) };
-		padding: 0;
-
-		> svg {
-			margin-right: 0;
-		}
-	}
-`;