added disabledAlpha prop to ColorPicker component

.changeset/good-flies-hunt.md

@@ -0,0 +1,6 @@
+---
+"@wpmudev/sui-color-picker": patch
+"@wpmudev/sui-css": patch
+---
+
+✨ feat(color-picker): add disabeAlpha prop in color-picker (THC-438)

packages/assets/css/src/scss/_components/_color-picker/_elements/_build-color-picker.scss

@@ -62,12 +62,13 @@
 					margin: 0;
 				}
 
-				@include modifier(hex) {
+				@include modifier(has-alpha) {
 					flex: 0 0 $colorpicker-size-width-md;
 				}
 
 				@include modifier(input) {
 					display: flex;
+					width: 100%;
 
 					&:focus-within {
 						box-shadow: 0px 0px 0px $shadow-offset-xs $color-primary-50;

packages/assets/css/src/scss/_components/_color-picker/_elements/_build-popover.scss

@@ -24,7 +24,7 @@
 					0 $shadow-offset-lg $shadow-offset-xl 0 $color-shadow-dark;
 				padding: $spacing-default;
 				margin-top: $colorpicker-spacing-xs;
-				max-width: $colorpicker-size-width-xl;
+				width: $colorpicker-size-width-xl;
 			}
 		}
 	}

packages/assets/css/src/scss/_utils/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 15 May 2024 05:28:27 GMT
+// Generated on Fri, 17 May 2024 10:05:30 GMT
 
 $accordion-border-radius-sm: 10px;
 $advanced-banner-background: linear-gradient(90deg, #222 0%, #383323 48.96%, #514524 100%);

packages/ui/color-picker/src/color-picker.tsx

@@ -33,6 +33,7 @@ const ColorPicker: React.FC<ColorPickerProps> = ({
 	onReset = () => null,
 	onColorChange = () => null,
 	ariaAttrs = {},
+	disableAlpha = true,
 	_htmlProps,
 	_style = {},
 }: ColorPickerProps): JSX.Element => {
@@ -198,6 +199,7 @@ const ColorPicker: React.FC<ColorPickerProps> = ({
 					color={tempColor}
 					onColorChange={handleColorChange}
 					onApplyButton={handleColorApply}
+					disableAlpha={disableAlpha}
 					type={type}
 				/>
 			)}

packages/ui/color-picker/src/color-picker.types.ts

@@ -51,6 +51,10 @@ interface ColorPickerProps
 	 * callback when the color changes but not applied yet
 	 */
 	onColorChange?: (color: string) => void
+	/**
+	 * Whether the color picker should allow for transperncy selection
+	 */
+	disableAlpha?: boolean
 }
 
 interface ColorPickerColorProps {
@@ -60,6 +64,7 @@ interface ColorPickerColorProps {
 interface ColorPickerPickerProps {
 	color: ColorPickerProps["color"]
 	type: ColorPickerProps["type"]
+	disableAlpha: ColorPickerProps["disableAlpha"]
 	onColorChange: ColorPickerProps["onColorChange"]
 	onApplyButton: () => void
 }

packages/ui/color-picker/src/elements/picker.tsx

@@ -15,6 +15,7 @@ import {
 } from "react-color/lib/components/common/index.js"
 import tinycolor from "tinycolor2"
 import { Button } from "@wpmudev/sui-button"
+import { generateCN } from "@wpmudev/sui-utils"
 
 // convert color format to supported object.
 const colorToColorObject = (
@@ -38,6 +39,7 @@ const Picker: React.FC<ColorPickerPickerProps> = ({
 	type = "hex",
 	onColorChange = () => null,
 	onApplyButton,
+	disableAlpha,
 }) => {
 	// selected color value
 	const [selectedColor, setSelectedColor] = useState<ColorResult>(
@@ -66,11 +68,11 @@ const Picker: React.FC<ColorPickerPickerProps> = ({
 		setBlue(selectedColor?.rgb?.b)
 		setAlpha(selectedColor?.rgb?.a)
 		const colorCode =
-			"hex" === selectedFormat
+			"hex" === selectedFormat || disableAlpha
 				? selectedColor.hex
-				: `rgba(${selectedColor.rgb.r}, ${selectedColor.rgb.g}, ${selectedColor.rgb.b}, ${selectedColor.rgb.a})`
+				: `rgba(${selectedColor.rgb.r}, ${selectedColor.rgb.g}, ${selectedColor.rgb.b} , ${selectedColor.rgb.a})`
 		onColorChange(colorCode)
-	}, [onColorChange, selectedColor, selectedFormat])
+	}, [onColorChange, selectedColor, selectedFormat, disableAlpha])
 
 	// useCallback to memoize the event handlers
 	const handleColorChange = useCallback((newColor: ColorResult) => {
@@ -85,6 +87,20 @@ const Picker: React.FC<ColorPickerPickerProps> = ({
 		[],
 	)
 
+	const handleHueChange = (_color: Record<string, any>) => {
+		// Fix for the hue slider not updating the color when color is #ffffff or #000000
+		if (
+			(_color.s === 0 && _color.l === 1) ||
+			(_color.s === 0 && _color.l === 0)
+		) {
+			_color.s = 0.99
+			_color.l = 0.99
+		}
+
+		// @ts-ignore
+		handleColorChange(_color)
+	}
+
 	const handleHexInputChange = useCallback(
 		(event: React.ChangeEvent<HTMLInputElement>) => {
 			const { value } = event.target
@@ -105,12 +121,14 @@ const Picker: React.FC<ColorPickerPickerProps> = ({
 			} else if (inputVal > 255) {
 				inputVal = 255
 			}
+			const rgb = { ...selectedColor.rgb, [name]: inputVal }
 			setSelectedColor((prevColor: ColorResult) => ({
 				...prevColor,
-				rgb: { ...prevColor.rgb, [name]: inputVal },
+				rgb,
+				hex: tinycolor(rgb).toHexString(),
 			}))
 		},
-		[],
+		[selectedColor],
 	)
 
 	const handleAlphaChange = useCallback(
@@ -193,21 +211,23 @@ const Picker: React.FC<ColorPickerPickerProps> = ({
 						hsl={selectedColor.hsl}
 						//@ts-ignore
 						pointer={customPointer}
-						onChange={handleColorChange}
-					/>
-				</div>
-				<div className="sui-color-picker__alpha">
-					<Alpha
-						//@ts-ignore
-						rgb={selectedColor.rgb}
-						hsl={selectedColor.hsl}
-						//@ts-ignore
-						hsv={selectedColor.hsv}
-						//@ts-ignore
-						pointer={customPointer}
-						onChange={handleColorChange}
+						onChange={handleHueChange}
 					/>
 				</div>
+				{!disableAlpha && (
+					<div className="sui-color-picker__alpha">
+						<Alpha
+							//@ts-ignore
+							rgb={selectedColor.rgb}
+							hsl={selectedColor.hsl}
+							//@ts-ignore
+							hsv={selectedColor.hsv}
+							//@ts-ignore
+							pointer={customPointer}
+							onChange={handleColorChange}
+						/>
+					</div>
+				)}
 				<div className="sui-color-picker__fields">
 					<div>
 						<select
@@ -228,7 +248,10 @@ const Picker: React.FC<ColorPickerPickerProps> = ({
 						{selectedFormat === "hex" && (
 							<input
 								type="text"
-								className="sui-color-picker__fields--hex"
+								className={generateCN("sui-color-picker__fields", {
+									hex: true,
+									"has-alpha": !disableAlpha,
+								})}
 								aria-label="Hex code"
 								value={hex}
 								onChange={handleHexInputChange}
@@ -265,20 +288,22 @@ const Picker: React.FC<ColorPickerPickerProps> = ({
 								/>
 							</React.Fragment>
 						)}
-						<input
-							ref={inputRef}
-							type="text"
-							min="1"
-							step="1"
-							max="100"
-							aria-label="Color opacity"
-							pattern="[0-9]+"
-							value={`${Math.round(
-								(alpha !== undefined ? alpha : 100) * 100,
-							)}%`}
-							onChange={handleAlphaChange}
-							onKeyDown={handleInputKeyDown}
-						/>
+						{!disableAlpha && (
+							<input
+								ref={inputRef}
+								type="text"
+								min="1"
+								step="1"
+								max="100"
+								aria-label="Color opacity"
+								pattern="[0-9]+"
+								value={`${Math.round(
+									(alpha !== undefined ? alpha : 100) * 100,
+								)}%`}
+								onChange={handleAlphaChange}
+								onKeyDown={handleInputKeyDown}
+							/>
+						)}
 					</div>
 				</div>
 				<div>

packages/ui/color-picker/stories/ReactColorPicker.stories.tsx

@@ -33,7 +33,6 @@ const ColorPicker = ({
 	error: string
 }) => {
 	const [currentColor, setCurrentColor] = useState<string>(color)
-	const [savedColor, setSavedColor] = useState("#ffffff")
 
 	useEffect(() => {
 		setCurrentColor(color)
@@ -58,7 +57,6 @@ const ColorPicker = ({
 					>
 						<SuiColorPicker
 							color={currentColor}
-							onApply={setSavedColor}
 							onColorChange={setCurrentColor}
 							onReset={() => setCurrentColor("#ffffff")}
 							{...props}
@@ -79,6 +77,7 @@ ColorPicker.args = {
 	isFluid: false,
 	error: "",
 	placeholder: "Select color",
+	disableAlpha: true,
 }
 
 // Set controls for story arguments.

packages/ui/color-picker/stories/tabs/TabCode.mdx

@@ -61,6 +61,10 @@ import { buttonCode } from "@wpmudev/sui-tooltip/stories/tabs/Examples/Types.mdx
     	<p>Whether the ColorPicker is disabled or not</p>
     </PropSection>
 
+	<PropSection title="disableAlpha" type="boolean" defaultValue="true">
+    	<p>Whether to allow transparency or not</p>
+    </PropSection>
+
 </Section>
 
 <CommonPropsNotice />

packages/ui/color-picker/stories/tabs/TabExamples.mdx

@@ -15,6 +15,12 @@ export const RgbTypeCode = dedent`
     </FormField>
 `
 
+export const enabledAlphaCode = dedent`
+    <FormField id="color-picker" label="Select colour">
+       <ColorPicker type="rgb" color="rgba(128, 38, 38, 1)" disableAlpha={false} />
+    </FormField>
+`
+
 <Section contained={true} style={{ paddingTop: 0 }}>
 	<p>Below is the default form of a Color Picker with <Code isSmall={true}> hex</Code> Type:</p>
 	<div className="sui-wrap sui-theme--light" style={{marginBottom: "30px"}}>
@@ -23,7 +29,6 @@ export const RgbTypeCode = dedent`
 		</FormField>
 	</div>
     <Snippet language="js">{sampleCode}</Snippet>
-
 </Section>
 
 <Section title="RGB Type" contained={true} style={{ paddingTop: 0 }}>
@@ -35,3 +40,13 @@ export const RgbTypeCode = dedent`
     <Snippet language="js">{RgbTypeCode}</Snippet>
 
 </Section>
+
+<Section title="Enabled Alpha" contained={true} style={{ paddingTop: 0 }}>
+    <div className="sui-wrap sui-theme--light" style={{marginBottom: "30px"}}>
+		<FormField id="color-picker" label="Select colour">
+    		<ColorPicker type="rgb" color="rgba(128, 38, 38, 1)" disableAlpha={false} />
+		</FormField>
+    </div>
+    <Snippet language="js">{enabledAlphaCode}</Snippet>
+</Section>
+