ColorPicker: Update sizes of format select and copy button

WordPress · Nov 18, 2024 · cf5a13d · cf5a13d
1 parent 89cba32
commit cf5a13d
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 16 deletions.
diff --git a/packages/components/src/color-picker/color-copy-button.tsx b/packages/components/src/color-picker/color-copy-button.tsx
@@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { CopyButton } from './styles';
+import { Button } from '../button';
 import Tooltip from '../tooltip';
 
 import type { ColorCopyButtonProps } from './types';
@@ -63,8 +63,8 @@ export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
 				copiedColor === color.toHex() ? __( 'Copied!' ) : __( 'Copy' )
 			}
 		>
-			<CopyButton
-				size="small"
+			<Button
+				size="compact"
 				ref={ copyRef }
 				icon={ copy }
 				showTooltip={ false }

diff --git a/packages/components/src/color-picker/component.tsx b/packages/components/src/color-picker/component.tsx
@@ -87,6 +87,7 @@ const UnconnectedColorPicker = (
 				<AuxiliaryColorArtefactHStackHeader justify="space-between">
 					<SelectControl
 						__nextHasNoMarginBottom
+						size="compact"
 						options={ options }
 						value={ colorType }
 						onChange={ ( nextColorType ) =>

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 CONFIG from '../utils/config-values';
@@ -22,7 +21,6 @@ export const NumberControlWrapper = styled( NumberControl )`
 
 export const SelectControl = styled( InnerSelectControl )`
 	margin-left: ${ space( -2 ) };
-	width: 5em;
 `;
 
 export const RangeControl = styled( InnerRangeControl )`
@@ -101,14 +99,3 @@ export const ColorfulWrapper = styled.div`
 
 	${ interactiveHueStyles }
 `;
-
-export const CopyButton = styled( Button )`
-	&&&&& {
-		min-width: ${ space( 6 ) };
-		padding: 0;
-
-		> svg {
-			margin-right: 0;
-		}
-	}
-`;