Merge pull request #5852 from SelenaAungst/LPD-32529-2

feat(@clayui/color-picker)
liferay · Aug 12, 2024 · 7a90ec5 · 7a90ec5
2 parents a1503fa + 3fbe7ac
commit 7a90ec5
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 55 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
@@ -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
@@ -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>
 					)}

diff --git 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',
 };