Fix: Double border on palette editor. (#38035)

Author: jorgefilipecosta

packages/components/src/palette-edit/index.js

@@ -39,7 +39,6 @@ import {
 import { NavigableMenu } from '../navigable-container';
 import { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';
 import CustomGradientPicker from '../custom-gradient-picker';
-import { COLORS } from '../utils';
 
 const DEFAULT_COLOR = '#000';
 
@@ -78,16 +77,16 @@ function Option( {
 
 	return (
 		<PaletteItem
+			className={ isEditing ? 'is-selected' : undefined }
 			as="div"
 			onClick={ onStartEditing }
 			{ ...( isEditing
-				? {
-						...focusOutsideProps,
+				? { ...focusOutsideProps }
+				: {
 						style: {
-							border: `1px solid ${ COLORS.blue.wordpress[ 700 ] }`,
+							cursor: 'pointer',
 						},
-				  }
-				: { style: { cursor: 'pointer' } } ) }
+				  } ) }
 		>
 			<HStack justify="flex-start">
 				<FlexItem>
@@ -200,7 +199,7 @@ function PaletteEditListView( {
 	}, [] );
 	return (
 		<VStack spacing={ 3 }>
-			<ItemGroup isBordered isSeparated>
+			<ItemGroup isRounded>
 				{ elements.map( ( element, index ) => (
 					<Option
 						isGradient={ isGradient }

packages/components/src/palette-edit/styles.js

@@ -13,7 +13,6 @@ import { space } from '../ui/utils/space';
 import { COLORS, CONFIG } from '../utils';
 import { View } from '../view';
 import InputControl from '../input-control';
-import Item from '../item-group/item';
 import {
 	Container as InputControlContainer,
 	Input,
@@ -41,9 +40,26 @@ export const NameInputControl = styled( InputControl )`
 	}
 `;
 
-export const PaletteItem = styled( Item )`
+export const PaletteItem = styled( View )`
 	padding: 3px 0 3px ${ space( 3 ) };
 	height: calc( 40px - ${ CONFIG.borderWidth } );
+	border: 1px solid ${ CONFIG.surfaceBorderColor };
+	border-bottom-color: transparent;
+	&:first-of-type {
+		border-top-left-radius: ${ CONFIG.controlBorderRadius };
+		border-top-right-radius: ${ CONFIG.controlBorderRadius };
+	}
+	&:last-of-type {
+		border-bottom-left-radius: ${ CONFIG.controlBorderRadius };
+		border-bottom-right-radius: ${ CONFIG.controlBorderRadius };
+		border-bottom-color: ${ CONFIG.surfaceBorderColor };
+	}
+	&.is-selected + & {
+		border-top-color: transparent;
+	}
+	&.is-selected {
+		border-color: ${ COLORS.blue.wordpress[ 700 ] };
+	}
 `;
 
 export const NameContainer = styled.div`