From 2005ade74c49c7af3962cbdd3fee55de8c6def1d Mon Sep 17 00:00:00 2001
From: Selena Aungst <selena.aungst@liferay.com>
Date: Wed, 7 Aug 2024 18:19:40 -0700
Subject: [PATCH 1/2] feat(@clayui/color-picker): Remove small color-picker
 example and add small toggle for all examples

---
 .../stories/ColorPicker.stories.tsx           | 33 ++++++-------------
 1 file changed, 10 insertions(+), 23 deletions(-)

diff --git a/packages/clay-color-picker/stories/ColorPicker.stories.tsx b/packages/clay-color-picker/stories/ColorPicker.stories.tsx
index 5385e56da7..7984207240 100644
--- a/packages/clay-color-picker/stories/ColorPicker.stories.tsx
+++ b/packages/clay-color-picker/stories/ColorPicker.stories.tsx
@@ -23,6 +23,7 @@ export const Default = (args: any) => {
 			name="colorPicker1"
 			onValueChange={setColor}
 			showHex={args.showHex}
+			small={args.small}
 			title={args.title}
 			value={color}
 		/>
@@ -33,6 +34,7 @@ Default.args = {
 	disabled: false,
 	label: 'Default Colors',
 	showHex: true,
+	small: false,
 	title: 'Default',
 };
 
@@ -57,6 +59,7 @@ export const CustomColors = (args: any) => {
 			onChange={setColor}
 			onColorsChange={setCustoms}
 			showHex={args.showHex}
+			small={args.small}
 			title={args.title}
 			value={color}
 		/>
@@ -67,6 +70,7 @@ CustomColors.args = {
 	disabled: false,
 	label: 'Custom Colors',
 	showHex: true,
+	small: false,
 	title: 'Default',
 };
 
@@ -92,6 +96,7 @@ export const CustomAndPredefinedColors = (args: any) => {
 			onColorsChange={setCustoms}
 			showHex
 			showPredefinedColorsWithCustom
+			small={args.small}
 			title={args.title}
 			value={color}
 		/>
@@ -101,6 +106,7 @@ export const CustomAndPredefinedColors = (args: any) => {
 CustomAndPredefinedColors.args = {
 	disabled: false,
 	label: 'Custom Colors',
+	small: false,
 	title: 'Default',
 };
 
@@ -126,6 +132,7 @@ export const CustomPalette = (args: any) => {
 			onColorsChange={setCustoms}
 			showHex={args.showHex}
 			showPalette={false}
+			small={args.small}
 			title={args.title}
 			value={color}
 		/>
@@ -136,6 +143,7 @@ CustomPalette.args = {
 	disabled: false,
 	label: '',
 	showHex: true,
+	small: false,
 	title: 'Default',
 };
 
@@ -148,6 +156,7 @@ export const Native = (args: any) => {
 			label={args.label}
 			onValueChange={setColor}
 			showHex={args.showHex}
+			small={args.small}
 			title={args.title}
 			useNative
 			value={color}
@@ -159,29 +168,7 @@ Native.args = {
 	disabled: false,
 	label: 'Default Colors',
 	showHex: true,
-	title: 'Default',
-};
-
-export const Small = (args: any) => {
-	const [color, setColor] = React.useState('FFFFFF');
-
-	return (
-		<ClayColorPicker
-			disabled={args.disabled}
-			label={args.label}
-			onChange={setColor}
-			showHex={args.showHex}
-			small
-			title={args.title}
-			value={color}
-		/>
-	);
-};
-
-Small.args = {
-	disabled: false,
-	label: 'Default Colors',
-	showHex: true,
+	small: false,
 	title: 'Default',
 };
 

From 3fbe7ac108c65b580018f148ba9cae28f288b8c0 Mon Sep 17 00:00:00 2001
From: Selena Aungst <selena.aungst@liferay.com>
Date: Thu, 8 Aug 2024 10:53:14 -0700
Subject: [PATCH 2/2] feat(@clayui/color-picker): Remove color-picker icon and
 update tests

---
 .../__tests__/__snapshots__/index.tsx.snap    | 24 ++-----------------
 packages/clay-color-picker/src/index.tsx      | 11 +--------
 2 files changed, 3 insertions(+), 32 deletions(-)

diff --git a/packages/clay-color-picker/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-color-picker/src/__tests__/__snapshots__/index.tsx.snap
index f88f4f5e08..3833930992 100644
--- a/packages/clay-color-picker/src/__tests__/__snapshots__/index.tsx.snap
+++ b/packages/clay-color-picker/src/__tests__/__snapshots__/index.tsx.snap
@@ -1685,17 +1685,7 @@ exports[`Rendering renders w/ var() 1`] = `
           />
           <label
             class="input-group-inset-item input-group-inset-item-before"
-          >
-            <svg
-              class="lexicon-icon lexicon-icon-color-picker"
-              role="presentation"
-              style="width: 10px;"
-            >
-              <use
-                href="/test/path#color-picker"
-              />
-            </svg>
-          </label>
+          />
         </div>
       </div>
     </div>
@@ -2449,17 +2439,7 @@ exports[`Rendering renders with a named color for the value 1`] = `
           />
           <label
             class="input-group-inset-item input-group-inset-item-before"
-          >
-            <svg
-              class="lexicon-icon lexicon-icon-color-picker"
-              role="presentation"
-              style="width: 10px;"
-            >
-              <use
-                href="/test/path#color-picker"
-              />
-            </svg>
-          </label>
+          />
         </div>
       </div>
     </div>
diff --git a/packages/clay-color-picker/src/index.tsx b/packages/clay-color-picker/src/index.tsx
index 31b46fe04a..7ea3e0ab0e 100644
--- a/packages/clay-color-picker/src/index.tsx
+++ b/packages/clay-color-picker/src/index.tsx
@@ -5,7 +5,6 @@
 
 import ClayDropDown from '@clayui/drop-down';
 import {ClayInput} from '@clayui/form';
-import ClayIcon from '@clayui/icon';
 import {
 	FocusScope,
 	InternalDispatch,
@@ -561,15 +560,7 @@ const ClayColorPicker = ({
 							/>
 
 							<ClayInput.GroupInsetItem before tag="label">
-								{isHex ? (
-									'#'
-								) : (
-									<ClayIcon
-										spritemap={spritemap}
-										style={{width: 10}}
-										symbol="color-picker"
-									/>
-								)}
+								{isHex ? '#' : ''}
 							</ClayInput.GroupInsetItem>
 						</ClayInput.GroupItem>
 					)}