components: Add new ColorPicker (#33714)

* components: InputControl to TypeScript

* Add back event to onChange

* Convert select-control to TS and ts-nocheck the rest of color picker dependencies

* components: Add new ColorPicker

* Fix various visual issues and rapid color change stuttering

* Rename to `enableAlpha` and add a README

* Add copy format and better defaults

* More closely mimic "half-controlled" values

* Fix misaligned value display in Chrome

* Update react-colorful styles to better match designs

* Add CHANGELOG entry for RangeControl prop update

* Fix bad rebase and bad types

* Fix html number arrows showing on Chrome

* Switch to HSL(A) based input and output to fix HSL UX

* Move styled components and get rid of unnecessary ones

* Fix onChange parameter name

* Add missing labels

packages/components/CHANGELOG.md

@@ -10,6 +10,10 @@
 
 -	Updated the visual styles of the RangeControl component ([#33824](https://github.com/WordPress/gutenberg/pull/33824))
 
+### New Feature
+
+-	Add `hideLabelFromVision` prop to `RangeControl` ([#33714](https://github.com/WordPress/gutenberg/pull/33714))
+
 ## 15.0.0 (2021-07-29)
 
 ### Breaking Change

packages/components/package.json

@@ -59,6 +59,7 @@
 		"memize": "^1.1.0",
 		"moment": "^2.22.1",
 		"re-resizable": "^6.4.0",
+		"react-colorful": "^5.3.0",
 		"react-dates": "^17.1.1",
 		"react-resize-aware": "^3.1.0",
 		"react-use-gesture": "^9.0.0",

packages/components/src/button/deprecated.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * WordPress dependencies
  */

packages/components/src/button/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */

packages/components/src/input-control/input-field.tsx

@@ -105,7 +105,7 @@ function InputField(
 
 	const handleOnBlur = ( event: FocusEvent< HTMLInputElement > ) => {
 		onBlur( event );
-		setIsFocused( false );
+		setIsFocused?.( false );
 
 		/**
 		 * If isPressEnterToChange is set, this commits the value to
@@ -123,7 +123,7 @@ function InputField(
 
 	const handleOnFocus = ( event: FocusEvent< HTMLInputElement > ) => {
 		onFocus( event );
-		setIsFocused( true );
+		setIsFocused?.( true );
 	};
 
 	const handleOnChange = ( event: ChangeEvent< HTMLInputElement > ) => {
@@ -135,7 +135,7 @@ function InputField(
 		const nextValue = event.currentTarget.value;
 
 		try {
-			onValidate( nextValue, event );
+			onValidate( nextValue );
 			commit( nextValue, event );
 		} catch ( err ) {
 			invalidate( err, event );

packages/components/src/input-control/reducer/reducer.ts

@@ -36,7 +36,7 @@ function mergeInitialState(
 		...initialInputControlState,
 		...initialState,
 		initialValue: value,
-	};
+	} as InputState;
 }
 
 /**

packages/components/src/input-control/types.ts

@@ -63,17 +63,20 @@ export interface InputBaseProps extends BaseProps, FlexProps {
 }
 
 export interface InputControlProps
-	extends Omit< InputBaseProps, 'children' >,
+	extends Omit< InputBaseProps, 'children' | 'isFocused' >,
 		/**
 		 * The `prefix` prop in `PolymorphicComponentProps< InputFieldProps, 'input', false >` comes from the
 		 * `HTMLInputAttributes` and clashes with the one from `InputBaseProps`. So we have to omit it from
 		 * `PolymorphicComponentProps< InputFieldProps, 'input', false >` in order that `InputBaseProps[ 'prefix' ]`
 		 * be the only prefix prop. Otherwise it tries to do a union of the two prefix properties and you end up
 		 * with an unresolvable type.
+		 *
+		 * `isFocused` and `setIsFocused` are managed internally by the InputControl, but the rest of the props
+		 * for InputField are passed through.
 		 */
 		Omit<
 			PolymorphicComponentProps< InputFieldProps, 'input', false >,
-			'stateReducer' | 'prefix'
+			'stateReducer' | 'prefix' | 'isFocused' | 'setIsFocused'
 		> {
 	__unstableStateReducer?: InputFieldProps[ 'stateReducer' ];
 }

packages/components/src/number-control/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */

packages/components/src/number-control/styles/number-control-styles.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */
@@ -12,11 +13,15 @@ const htmlArrowStyles = ( { hideHTMLArrows } ) => {
 	if ( ! hideHTMLArrows ) return ``;
 
 	return css`
-		&::-webkit-outer-spin-button,
-		&::-webkit-inner-spin-button {
+		input[type='number']::-webkit-outer-spin-button,
+		input[type='number']::-webkit-inner-spin-button {
 			-webkit-appearance: none !important;
 			margin: 0 !important;
 		}
+
+		input[type='number'] {
+			-moz-appearance: textfield;
+		}
 	`;
 };
 

packages/components/src/popover/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */

packages/components/src/popover/utils.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * WordPress dependencies
  */

packages/components/src/range-control/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */
@@ -47,6 +48,7 @@ function RangeControl(
 		initialPosition,
 		isShiftStepEnabled = true,
 		label,
+		hideLabelFromVision = false,
 		marks = false,
 		max = 100,
 		min = 0,
@@ -194,6 +196,7 @@ function RangeControl(
 		<BaseControl
 			className={ classes }
 			label={ label }
+			hideLabelFromVision={ hideLabelFromVision }
 			id={ id }
 			help={ help }
 		>

packages/components/src/range-control/input-range.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */

packages/components/src/range-control/mark.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */

packages/components/src/range-control/rail.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * WordPress dependencies
  */

packages/components/src/range-control/styles/range-control-styles.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */

packages/components/src/range-control/tooltip.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */

packages/components/src/range-control/utils.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */

packages/components/src/select-control/index.tsx

@@ -30,7 +30,8 @@ function useUniqueId( idProp?: string ) {
 	return idProp || id;
 }
 
-export interface SelectControlProps extends Omit< InputBaseProps, 'children' > {
+export interface SelectControlProps
+	extends Omit< InputBaseProps, 'children' | 'isFocused' > {
 	help?: string;
 	hideLabelFromVision?: boolean;
 	multiple?: boolean;
@@ -92,7 +93,7 @@ function SelectControl(
 
 	const handleOnChange = ( event: ChangeEvent< HTMLSelectElement > ) => {
 		if ( multiple ) {
-			const selectedOptions = [ ...event.target.options ].filter(
+			const selectedOptions = Array.from( event.target.options ).filter(
 				( { selected } ) => selected
 			);
 			const newValues = selectedOptions.map( ( { value } ) => value );

packages/components/src/select-control/styles/select-control-styles.ts

@@ -29,7 +29,7 @@ const fontSizeStyles = ( { selectSize }: SelectProps ) => {
 		small: '11px',
 	};
 
-	const fontSize = sizes[ selectSize ];
+	const fontSize = sizes[ selectSize as Size ];
 	const fontSizeMobile = '16px';
 
 	if ( ! fontSize ) return '';
@@ -57,7 +57,7 @@ const sizeStyles = ( { selectSize }: SelectProps ) => {
 		},
 	};
 
-	const style = sizes[ selectSize ] || sizes.default;
+	const style = sizes[ selectSize as Size ] || sizes.default;
 
 	return css( style );
 };

packages/components/src/slot-fill/bubbles-virtually/fill.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * WordPress dependencies
  */

packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * WordPress dependencies
  */

packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * WordPress dependencies
  */

packages/components/src/slot-fill/bubbles-virtually/slot.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * WordPress dependencies
  */

packages/components/src/slot-fill/bubbles-virtually/use-slot.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * WordPress dependencies
  */

packages/components/src/slot-fill/context.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * WordPress dependencies
  */

packages/components/src/slot-fill/fill.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */

packages/components/src/slot-fill/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * WordPress dependencies
  */

packages/components/src/slot-fill/provider.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */

packages/components/src/slot-fill/slot.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */

packages/components/src/slot-fill/use-slot.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * WordPress dependencies
  */

packages/components/src/tooltip/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */

packages/components/src/ui/color-picker/README.md

@@ -0,0 +1,57 @@
+# 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.
+
+### `defaultValue`
+
+**Type**: `string | undefined`
+
+An optional default value to use for the color picker.
+
+### `copyFormat`
+
+**Type**: `'hex' | 'hsl' | 'rgb' | undefined`
+
+The format to copy when clicking the displayed color format.