Rename to enableAlpha and add a README

WordPress · sarayourfriend · Aug 10, 2021 · Jul 23, 2021 · Jul 26, 2021 · Jul 27, 2021
commit f81bcbc93b64a9b7d2f6b8b8c27bbd3effede541
@@ -0,0 +1,51 @@
+# ColorPicker
+
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
+`ColorPicker` is a color picking component based on `react-colorful`. It lets you pick a color visually or by manipulating the individual RGB(A), HSL(A) and Hex(8) color values.
+
+## Usage
+
+```jsx
+import { ColorPicker } from '@wordpress/components/ui';
+
+function Example() {
+	const [color, setColor] = useState();
+	return (
+		<ColorPicker
+			color={color}
+			onChange={setColor}
+			enableAlpha
+			defaultValue="#000"
+		/>
+	);
+}
+```
+
+## Props
+
+### `color`
+
+**Type**: `string`
+
+The current color value to display in the picker. Must be a hex or hex8 string.
+
+### `onChange`
+
+**Type**: `(hex8Color: string) => void`
+
+Fired when the color changes. Always passes a hex8 color string.
+
+### `enableAlpha`
+
+**Type**: `boolean`
+
+Defaults to `false`. When `true` the color picker will display the alpha channel both in the bottom inputs as well as in the color picker itself.
-### `enableAlpha`
-
-**Type**: `boolean`
-
-Defaults to `false`. When `true` the color picker will display the alpha channel both in the bottom inputs as well as in the color picker itself.
+### `enableAlpha`: `boolean`
+
+ When `true` the color picker will display the alpha channel both in the bottom inputs as well as in the color picker itself.
+ 
+- Required: No
+- Default: `false`
-### `enableAlpha`
-
-**Type**: `boolean`
-
-Defaults to `false`. When `true` the color picker will display the alpha channel both in the bottom inputs as well as in the color picker itself.
+### `enableAlpha`: `boolean`
+
+ When `true` the color picker will display the alpha channel both in the bottom inputs as well as in the color picker itself.
+ 
+- Required: No
+- Default: `false`
+
+### `defaultValue`
+
+**Type**: `string | undefined`
+
+An optional default value to use for the color picker.
@@ -22,12 +22,12 @@ import { space } from '../utils/space';
 interface ColorDisplayProps {
 	color: string;
 	colorType: ColorType;
-	disableAlpha: boolean;
+	enableAlpha: boolean;
 }
 
 interface DisplayProps {
 	color: string;
-	disableAlpha: boolean;
+	enableAlpha: boolean;
 }
 
 type Values = [ number, string ][];
@@ -49,22 +49,22 @@ const ValueDisplay = ( { values }: ValueDisplayProps ) => (
 	</>
 );
 
-const HslDisplay = ( { color, disableAlpha }: DisplayProps ) => {
+const HslDisplay = ( { color, enableAlpha }: DisplayProps ) => {
 	const { h, s, l, a } = colorize( color ).toHsl();
 
 	const values: Values = [
 		[ Math.floor( h ), 'H' ],
 		[ Math.round( s * 100 ), 'S' ],
 		[ Math.round( l * 100 ), 'L' ],
 	];
-	if ( ! disableAlpha ) {
+	if ( enableAlpha ) {
 		values.push( [ Math.round( a * 100 ), 'A' ] );
 	}
 
 	return <ValueDisplay values={ values } />;
 };
 
-const RgbDisplay = ( { color, disableAlpha }: DisplayProps ) => {
+const RgbDisplay = ( { color, enableAlpha }: DisplayProps ) => {
 	const { r, g, b, a } = colorize( color ).toRgb();
 
 	const values: Values = [
@@ -73,7 +73,7 @@ const RgbDisplay = ( { color, disableAlpha }: DisplayProps ) => {
 		[ b, 'B' ],
 	];
 
-	if ( ! disableAlpha ) {
+	if ( enableAlpha ) {
 		values.push( [ Math.round( a * 100 ), 'A' ] );
 	}
 
@@ -105,10 +105,10 @@ const getComponent = ( colorType: ColorType ) => {
 export const ColorDisplay = ( {
 	color,
 	colorType,
-	disableAlpha,
+	enableAlpha,
 }: ColorDisplayProps ) => {
 	const [ copiedColor, setCopiedColor ] = useState< string | null >( null );
-	const props = { color, disableAlpha };
+	const props = { color, enableAlpha };
 	const Component = getComponent( colorType );
 	const copyRef = useCopyToClipboard< HTMLDivElement >( color, () =>
 		setCopiedColor( color )

@@ -9,16 +9,16 @@ interface ColorInputProps {
 	colorType: 'hsl' | 'hex' | 'rgb';
 	color: string;
 	onChange: ( value: string ) => void;
-	disableAlpha: boolean;
+	enableAlpha: boolean;
 }
 
 export const ColorInput = ( {
 	colorType,
 	color,
 	onChange,
-	disableAlpha,
+	enableAlpha,
 }: ColorInputProps ) => {
-	const props = { color, onChange, disableAlpha };
+	const props = { color, onChange, enableAlpha };
 	switch ( colorType ) {
 		case 'hsl':
 			return <HslInput { ...props } />;

@@ -31,7 +31,7 @@ import { useControlledValue } from '../../utils/hooks';
 
 import type { ColorType } from './types';
 interface ColorPickerProps {
-	disableAlpha?: boolean;
+	enableAlpha?: boolean;
 	color?: string;
 	onChange?: ( hex8Color: string ) => void;
 	defaultValue?: string;
@@ -48,7 +48,7 @@ const ColorPicker = (
 	forwardedRef: Ref< any >
 ) => {
 	const {
-		disableAlpha = true,
+		enableAlpha = false,
 		color: colorProp,
 		onChange,
 		defaultValue,
@@ -69,7 +69,7 @@ const ColorPicker = (
 	const [ showInputs, setShowInputs ] = useState< boolean >( false );
 	const [ colorType, setColorType ] = useState< ColorType >( 'rgb' );
 
-	const Picker = disableAlpha ? HexColorPicker : RgbaColorPicker;
+	const Picker = enableAlpha ? RgbaColorPicker : HexColorPicker;
 
 	return (
 		<ColorfulWrapper ref={ forwardedRef }>
@@ -87,7 +87,7 @@ const ColorPicker = (
 					<ColorDisplay
 						color={ safeColor }
 						colorType={ colorType }
-						disableAlpha={ disableAlpha }
+						enableAlpha={ enableAlpha }
 					/>
 				) }
 				<Button
@@ -102,7 +102,7 @@ const ColorPicker = (
 					colorType={ colorType }
 					color={ safeColor }
 					onChange={ debouncedSetColor }
-					disableAlpha={ disableAlpha }
+					enableAlpha={ enableAlpha }
 				/>
 			) }
 		</ColorfulWrapper>

@@ -14,14 +14,10 @@ import { space } from '../utils/space';
 interface HexInputProps {
 	color: string;
 	onChange: ( value: string ) => void;
-	disableAlpha: boolean;
+	enableAlpha: boolean;
 }
 
-export const HexInput = ( {
-	color,
-	onChange,
-	disableAlpha,
-}: HexInputProps ) => {
+export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 	const handleValidate = ( value: string ) => {
 		if ( ! colorize( value ).isValid() ) {
 			throw new Error( 'Invalid hex color input' );
@@ -41,7 +37,7 @@ export const HexInput = ( {
 				onChange( colorize( nextValue ).toHex8String() )
 			}
 			onValidate={ handleValidate }
-			maxLength={ disableAlpha ? 6 : 8 }
+			maxLength={ enableAlpha ? 8 : 6 }
 		/>
 	);
 };
@@ -11,14 +11,10 @@ import { InputWithSlider } from './input-with-slider';
 interface HslInputProps {
 	color: string;
 	onChange: ( color: string ) => void;
-	disableAlpha: boolean;
+	enableAlpha: boolean;
 }
 
-export const HslInput = ( {
-	color,
-	onChange,
-	disableAlpha,
-}: HslInputProps ) => {
+export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 	const { h, s, l, a } = colorize( color ).toHsl();
 
 	return (
@@ -57,7 +53,7 @@ export const HslInput = ( {
 					)
 				}
 			/>
-			{ ! disableAlpha && (
+			{ enableAlpha && (
 				<InputWithSlider
 					min={ 0 }
 					max={ 100 }

@@ -11,14 +11,10 @@ import { InputWithSlider } from './input-with-slider';
 interface RgbInputProps {
 	color: string;
 	onChange: ( color: string ) => void;
-	disableAlpha: boolean;
+	enableAlpha: boolean;
 }
 
-export const RgbInput = ( {
-	color,
-	onChange,
-	disableAlpha,
-}: RgbInputProps ) => {
+export const RgbInput = ( { color, onChange, enableAlpha }: RgbInputProps ) => {
 	const { r, g, b, a } = colorize( color ).toRgb();
 
 	return (
@@ -53,7 +49,7 @@ export const RgbInput = ( {
 					onChange( colorize( { r, g, b: nextB, a } ).toHex8String() )
 				}
 			/>
-			{ ! disableAlpha && (
+			{ enableAlpha && (
 				<InputWithSlider
 					min={ 0 }
 					max={ 100 }

@@ -13,6 +13,8 @@ import { useState } from '@wordpress/element';
  */
 import { ColorPicker } from '..';
 import { Flex } from '../../../flex';
+import { Spacer } from '../../../spacer';
+import { space } from '../../utils/space';
 
 export default {
 	component: ColorPicker,
@@ -22,11 +24,17 @@ export default {
 const Example = () => {
 	const [ color, setColor ] = useState( '#fff' );
 	const props = {
-		disableAlpha: boolean( 'disableAlpha', true ),
+		enableAlpha: boolean( 'enableAlpha', false ),
 	};
 
 	return (
-		<Flex gap={ 8 } align="flex-start">
+		<Flex
+			as={ Spacer }
+			gap={ space( 2 ) }
+			justify="space-around"
+			align="flex-start"
+			marginTop={ space( 10 ) }
+		>
 			<ColorPicker { ...props } color={ color } onChange={ setColor } />
 			<ColorPicker { ...props } color={ color } onChange={ setColor } />
 		</Flex>