@wordpress/components 17.0.0 → 19.0.2

package/src/ui/control-label/component.js

@@ -1,9 +1,20 @@
 /**
  * Internal dependencies
  */
-import { createComponent } from '../utils';
+import { contextConnect } from '../context';
+import { View } from '../../view';
 import { useControlLabel } from './hook';
 
+/**
+ * @param {import('../context').WordPressComponentProps<import('./types').Props, 'label', false>} props
+ * @param {import('react').Ref<any>}                                                              forwardedRef
+ */
+function ControlLabel( props, forwardedRef ) {
+	const controlLabelProps = useControlLabel( props );
+
+	return <View as="label" { ...controlLabelProps } ref={ forwardedRef } />;
+}
+
 /**
  * `ControlLabel` is a form component that works with `FormGroup` to provide a
  * label for form elements (e.g. `Switch` or `TextInput`).
@@ -21,10 +32,6 @@ import { useControlLabel } from './hook';
  * }
  * ```
  */
-const ControlLabel = createComponent( {
-	as: 'label',
-	useHook: useControlLabel,
-	name: 'ControlLabel',
-} );
+const ConnectedControlLabel = contextConnect( ControlLabel, 'ControlLabel' );
 
-export default ControlLabel;
+export default ConnectedControlLabel;

package/src/ui/control-label/hook.js

@@ -8,7 +8,7 @@ import * as styles from './styles';
 import { useCx } from '../../utils/hooks/use-cx';
 
 /**
- * @param {import('../context').WordPressComponentProps<import('./types').Props, 'label'>} props
+ * @param {import('../context').WordPressComponentProps<import('./types').Props, 'label', false>} props
  */
 export function useControlLabel( props ) {
 	const {

package/src/ui/control-label/stories/index.js

@@ -5,7 +5,7 @@ import { ControlLabel } from '../index';
 
 export default {
 	component: ControlLabel,
-	title: 'G2 Components (Experimental)/ControlLabel',
+	title: 'Components (Experimental)/ControlLabel',
 };
 
 export const _default = () => {

package/src/ui/control-label/test/__snapshots__/index.js.snap

@@ -14,7 +14,7 @@ exports[`props should render correctly 1`] = `
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: #000;
+  color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
   font-size: calc((13 / 13) * 13px);
@@ -56,7 +56,7 @@ exports[`props should render no truncate 1`] = `
   padding-top: calc((36px - calc(13px * 1.2)) / 2);
   padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
   padding-top: calc((36px - calc(13px * 1.2)) / 2);
-  color: #000;
+  color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
   font-size: calc((13 / 13) * 13px);
@@ -102,7 +102,7 @@ exports[`props should render size 1`] = `
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: #000;
+  color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
   font-size: calc((13 / 13) * 13px);

package/src/ui/form-group/form-group-content.js

@@ -12,7 +12,7 @@ import FormGroupHelp from './form-group-help';
 import FormGroupLabel from './form-group-label';
 
 /**
- * @param {import('../context').WordPressComponentProps<import('./types').FormGroupContentProps, 'label'>} props
+ * @param {import('../context').WordPressComponentProps<import('./types').FormGroupContentProps, 'label', false>} props
  */
 function FormGroupContent( {
 	alignLabel,

package/src/ui/form-group/form-group-label.js

@@ -10,7 +10,7 @@ import { ControlLabel } from '../control-label';
 import { VisuallyHidden } from '../../visually-hidden';
 
 /**
- * @param {import('../context').WordPressComponentProps<import('./types').FormGroupLabelProps, 'label'>} props
+ * @param {import('../context').WordPressComponentProps<import('./types').FormGroupLabelProps, 'label', false>} props
  * @return {JSX.Element | null} The form group's label.
  */
 function FormGroupLabel( { children, id, labelHidden = false, ...props } ) {

package/src/ui/form-group/stories/index.js

@@ -16,7 +16,7 @@ const TextInput = ( { id: idProp, ...props } ) => {
 
 export default {
 	component: FormGroup,
-	title: 'G2 Components (Experimental)/FormGroup',
+	title: 'Components (Experimental)/FormGroup',
 };
 
 export const _default = () => {

package/src/ui/form-group/test/__snapshots__/index.js.snap

@@ -14,7 +14,7 @@ exports[`props should render alignLabel 1`] = `
   padding-top: calc((36px - calc(13px * 1.2)) / 2);
   padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
   padding-top: calc((36px - calc(13px * 1.2)) / 2);
-  color: #000;
+  color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
   font-size: calc((13 / 13) * 13px);
@@ -72,7 +72,7 @@ exports[`props should render vertically 1`] = `
   padding-top: calc((36px - calc(13px * 1.2)) / 2);
   padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
   padding-top: calc((36px - calc(13px * 1.2)) / 2);
-  color: #000;
+  color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
   font-size: calc((13 / 13) * 13px);

package/src/ui/spinner/stories/index.js

@@ -5,7 +5,7 @@ import { Spinner } from '../index';
 
 export default {
 	component: Spinner,
-	title: 'G2 Components (Experimental)/Spinner',
+	title: 'Components (Experimental)/Spinner',
 };
 
 export const _default = () => {

package/src/ui/tooltip/stories/index.js

@@ -6,7 +6,7 @@ import { Tooltip } from '../index';
 
 export default {
 	component: Tooltip,
-	title: 'G2 Components (Experimental)/Tooltip',
+	title: 'Components (Experimental)/Tooltip',
 };
 
 export const _default = () => {

package/src/ui/tooltip/styles.js

@@ -28,7 +28,7 @@ export const TooltipContent = css`
 
 export const TooltipPopoverView = styled.div`
 	background: rgba( 0, 0, 0, 0.8 );
-	border-radius: 6px;
+	border-radius: 2px;
 	box-shadow: 0 0 0 1px rgba( 255, 255, 255, 0.04 );
 	color: ${ COLORS.white };
 	padding: 4px 8px;

package/src/ui/tooltip/test/__snapshots__/index.js.snap

@@ -17,7 +17,7 @@ exports[`props should render correctly 1`] = `
 
 .emotion-2 {
   background: rgba( 0, 0, 0, 0.8 );
-  border-radius: 6px;
+  border-radius: 2px;
   box-shadow: 0 0 0 1px rgba( 255, 255, 255, 0.04 );
   color: #fff;
   padding: 4px 8px;

package/src/ui/utils/colors.js

@@ -2,11 +2,14 @@
  * External dependencies
  */
 import memoize from 'memize';
-import tinycolor from 'tinycolor2';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
 
 /** @type {HTMLDivElement} */
 let colorComputationNode;
 
+extend( [ namesPlugin ] );
+
 /**
  * @return {HTMLDivElement | undefined} The HTML element for color computation.
  */
@@ -32,7 +35,7 @@ function getColorComputationNode() {
  */
 function isColor( value ) {
 	if ( typeof value !== 'string' ) return false;
-	const test = tinycolor( value );
+	const test = colord( value );
 
 	return test.isValid();
 }
@@ -77,12 +80,8 @@ const getComputedBackgroundColor = memoize( _getComputedBackgroundColor );
  */
 export function getOptimalTextColor( backgroundColor ) {
 	const background = getComputedBackgroundColor( backgroundColor );
-	const isReadableWithBlackText = tinycolor.isReadable(
-		background,
-		'#000000'
-	);
 
-	return isReadableWithBlackText ? '#000000' : '#ffffff';
+	return colord( background ).isLight() ? '#000000' : '#ffffff';
 }
 
 /**

package/src/ui/utils/index.js

@@ -1,2 +1 @@
 export { getOptimalTextShade } from './colors';
-export { createComponent } from './create-component';

package/src/unit-control/README.md

@@ -21,70 +21,69 @@ const Example = () => {
 
 ## Props
 
-### disabledUnits
+### `disableUnits`: `boolean`
 
 If true, the unit `<select>` is hidden.
 
--   Type: `Boolean`
 -   Required: No
 -   Default: `false`
 
-### isPressEnterToChange
+### `isPressEnterToChange`: `boolean`
 
-If true, the `ENTER` key press is required in order to trigger an `onChange`. If enabled, a change is also triggered when tabbing away (`onBlur`).
+If `true`, the `ENTER` key press is required in order to trigger an `onChange`. If enabled, a change is also triggered when tabbing away (`onBlur`).
 
--   Type: `Boolean`
 -   Required: No
 -   Default: `false`
 
-### isUnitSelectTabbable
+### `isResetValueOnUnitChange`: `boolean`
+
+If `true`, and the selected unit provides a `default` value, this value is set when changing units.
+
+-   Required: No
+-   Default: `false`
+
+### `isUnitSelectTabbable`: `boolean`
 
 Determines if the unit `<select>` is tabbable.
 
--   Type: `Boolean`
 -   Required: No
 -   Default: `true`
 
-### label
+### `label`: `string`
 
 If this property is added, a label will be generated using label property as the content.
 
--   Type: `String`
 -   Required: No
 
-### labelPosition
+### `labelPosition`: `string`
 
 The position of the label (`top`, `side`, `bottom`, or `edge`).
 
--   Type: `String`
 -   Required: No
 
-### onChange
+### `onChange`: `UnitControlOnChangeCallback`
 
 Callback when the `value` changes.
 
--   Type: `Function`
 -   Required: No
 -   Default: `noop`
 
-### onUnitChange
+### `onUnitChange`: `UnitControlOnChangeCallback`
 
 Callback when the `unit` changes.
 
--   Type: `Function`
 -   Required: No
 -   Default: `noop`
 
-### size
+### `size`: `string`
 
 Adjusts the size of the input.
 Sizes include: `default`, `small`
 
--   Type: `String`
 -   Required: No
 -   Default: `default`
 
-### unit
+### `unit`: `string`
 
 Deprecated: Current unit value.
 Instead, provide a unit with a value through the `value` prop.
@@ -95,14 +94,12 @@ Example:
 <UnitControl value="50%" />
 ```
 
--   Type: `String`
 -   Required: No
 
-### units
+### `units`: `WPUnitControlUnitList`
 
 Collection of available units.
 
--   Type: `Array<Object>`
 -   Required: No
 
 Example:
@@ -126,9 +123,10 @@ const Example = () => {
 
 A `default` value (in the example above, `10` for `%`), if defined, is set as the new `value` when a unit changes. This is helpful in scenarios where changing a unit may cause drastic results, such as changing from `px` to `vh`.
 
-### value
+### `value`: `number | string`
 
-Current value. To set a unit, provide a unit with a value through the `value` prop.
+Current value. If passed as a string, the current unit will be inferred from this value.
+For example, a `value` of `50%` will set the current unit to `%`.
 
 Example:
 
@@ -136,5 +134,4 @@ Example:
 <UnitControl value="50%" />
 ```
 
--   Type: `Number`|`String`
 -   Required: No

package/src/unit-control/{index.js → index.tsx}

@@ -1,25 +1,40 @@
 /**
  * External dependencies
  */
+// eslint-disable-next-line no-restricted-imports
+import type {
+	FocusEventHandler,
+	KeyboardEvent,
+	Ref,
+	SyntheticEvent,
+} from 'react';
 import { noop, omit } from 'lodash';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { forwardRef, useRef } from '@wordpress/element';
+import { forwardRef, useMemo, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { ENTER } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
+import type { WordPressComponentProps } from '../ui/context';
 import * as inputControlActionTypes from '../input-control/reducer/actions';
 import { composeStateReducers } from '../input-control/reducer/reducer';
 import { Root, ValueInput } from './styles/unit-control-styles';
 import UnitSelectControl from './unit-select-control';
-import { CSS_UNITS, getParsedValue, getValidParsedUnit } from './utils';
+import {
+	CSS_UNITS,
+	getParsedValue,
+	getUnitsWithCurrentUnit,
+	getValidParsedUnit,
+} from './utils';
 import { useControlledState } from '../utils/hooks';
+import type { UnitControlProps, UnitControlOnChangeCallback } from './types';
+import type { StateReducer } from '../input-control/reducer/state';
 
 function UnitControl(
 	{
@@ -37,23 +52,34 @@ function UnitControl(
 		size = 'default',
 		style,
 		unit: unitProp,
-		units = CSS_UNITS,
+		units: unitsProp = CSS_UNITS,
 		value: valueProp,
 		...props
-	},
-	ref
+	}: WordPressComponentProps< UnitControlProps, 'input', false >,
+	forwardedRef: Ref< any >
 ) {
+	const units = useMemo(
+		() => getUnitsWithCurrentUnit( valueProp, unitProp, unitsProp ),
+		[ valueProp, unitProp, unitsProp ]
+	);
 	const [ value, initialUnit ] = getParsedValue( valueProp, unitProp, units );
-	const [ unit, setUnit ] = useControlledState( unitProp, {
-		initial: initialUnit,
-	} );
+	const [ unit, setUnit ] = useControlledState< string | undefined >(
+		unitProp,
+		{
+			initial: initialUnit,
+			fallback: '',
+		}
+	);
 
 	// Stores parsed value for hand-off in state reducer
-	const refParsedValue = useRef( null );
+	const refParsedValue = useRef< string | null >( null );
 
 	const classes = classnames( 'components-unit-control', className );
 
-	const handleOnChange = ( next, changeProps ) => {
+	const handleOnChange: UnitControlOnChangeCallback = (
+		next,
+		changeProps
+	) => {
 		if ( next === '' ) {
 			onChange( '', changeProps );
 			return;
@@ -68,7 +94,10 @@ function UnitControl(
 		onChange( next, changeProps );
 	};
 
-	const handleOnUnitChange = ( next, changeProps ) => {
+	const handleOnUnitChange: UnitControlOnChangeCallback = (
+		next,
+		changeProps
+	) => {
 		const { data } = changeProps;
 
 		let nextValue = `${ value }${ next }`;
@@ -83,24 +112,24 @@ function UnitControl(
 		setUnit( next );
 	};
 
-	const mayUpdateUnit = ( event ) => {
-		if ( ! isNaN( event.target.value ) ) {
+	const mayUpdateUnit = ( event: SyntheticEvent< HTMLInputElement > ) => {
+		if ( ! isNaN( Number( event.currentTarget.value ) ) ) {
 			refParsedValue.current = null;
 			return;
 		}
 		const [ parsedValue, parsedUnit ] = getValidParsedUnit(
-			event.target.value,
+			event.currentTarget.value,
 			units,
 			value,
 			unit
 		);
 
-		refParsedValue.current = parsedValue;
+		refParsedValue.current = parsedValue.toString();
 
 		if ( isPressEnterToChange && parsedUnit !== unit ) {
-			const data = units.find(
-				( option ) => option.value === parsedUnit
-			);
+			const data = Array.isArray( units )
+				? units.find( ( option ) => option.value === parsedUnit )
+				: undefined;
 			const changeProps = { event, data };
 
 			onChange( `${ parsedValue }${ parsedUnit }`, changeProps );
@@ -110,9 +139,9 @@ function UnitControl(
 		}
 	};
 
-	const handleOnBlur = mayUpdateUnit;
+	const handleOnBlur: FocusEventHandler< HTMLInputElement > = mayUpdateUnit;
 
-	const handleOnKeyDown = ( event ) => {
+	const handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {
 		const { keyCode } = event;
 		if ( keyCode === ENTER ) {
 			mayUpdateUnit( event );
@@ -124,11 +153,11 @@ function UnitControl(
 	 * This allows us to tap into actions to transform the (next) state for
 	 * InputControl.
 	 *
-	 * @param {Object} state  State from InputControl
-	 * @param {Object} action Action triggering state change
-	 * @return {Object} The updated state to apply to InputControl
+	 * @param  state  State from InputControl
+	 * @param  action Action triggering state change
+	 * @return The updated state to apply to InputControl
 	 */
-	const unitControlStateReducer = ( state, action ) => {
+	const unitControlStateReducer: StateReducer = ( state, action ) => {
 		/*
 		 * On commits (when pressing ENTER and on blur if
 		 * isPressEnterToChange is true), if a parse has been performed
@@ -148,11 +177,11 @@ function UnitControl(
 		<UnitSelectControl
 			aria-label={ __( 'Select unit' ) }
 			disabled={ disabled }
-			isTabbable={ isUnitSelectTabbable }
-			options={ units }
+			isUnitSelectTabbable={ isUnitSelectTabbable }
 			onChange={ handleOnUnitChange }
 			size={ size }
-			value={ unit }
+			unit={ unit }
+			units={ units }
 		/>
 	) : null;
 
@@ -182,7 +211,7 @@ function UnitControl(
 				onBlur={ handleOnBlur }
 				onKeyDown={ handleOnKeyDown }
 				onChange={ handleOnChange }
-				ref={ ref }
+				ref={ forwardedRef }
 				size={ size }
 				suffix={ inputSuffix }
 				value={ value }
@@ -196,6 +225,22 @@ function UnitControl(
 	);
 }
 
+/**
+ * `UnitControl` allows the user to set a value as well as a unit (e.g. `px`).
+ *
+ *
+ * @example
+ * ```jsx
+ * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const Example = () => {
+ *   const [ value, setValue ] = useState( '10px' );
+ *
+ *   return <UnitControl onChange={ setValue } value={ value } />;
+ * };
+ * ```
+ */
 const ForwardedUnitControl = forwardRef( UnitControl );
 
 export { parseUnit, useCustomUnits } from './utils';

package/src/unit-control/stories/index.js

@@ -18,8 +18,15 @@ import { CSS_UNITS } from '../utils';
 export default {
 	title: 'Components/UnitControl',
 	component: UnitControl,
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
+const ControlWrapperView = styled.div`
+	max-width: 80px;
+`;
+
 function Example() {
 	const [ value, setValue ] = useState( '10px' );
 
@@ -60,6 +67,43 @@ export const _default = () => {
 	return <Example />;
 };
 
-const ControlWrapperView = styled.div`
-	max-width: 80px;
-`;
+export function WithCustomUnits() {
+	const [ value, setValue ] = useState( '10km' );
+
+	const props = {
+		isResetValueOnUnitChange: boolean( 'isResetValueOnUnitChange', true ),
+		label: text( 'label', 'Distance' ),
+		units: object( 'units', [
+			{
+				value: 'km',
+				label: 'km',
+				default: 1,
+			},
+			{
+				value: 'mi',
+				label: 'mi',
+				default: 1,
+			},
+			{
+				value: 'm',
+				label: 'm',
+				default: 1000,
+			},
+			{
+				value: 'yd',
+				label: 'yd',
+				default: 1760,
+			},
+		] ),
+	};
+
+	return (
+		<ControlWrapperView>
+			<UnitControl
+				{ ...props }
+				value={ value }
+				onChange={ ( v ) => setValue( v ) }
+			/>
+		</ControlWrapperView>
+	);
+}

package/src/unit-control/styles/{unit-control-styles.js → unit-control-styles.ts}

@@ -8,13 +8,24 @@ import styled from '@emotion/styled';
  */
 import { COLORS, rtl } from '../../utils';
 import NumberControl from '../../number-control';
+import type { SelectSize } from '../types';
+
+// Using `selectSize` instead of `size` to avoid a type conflict with the
+// `size` HTML attribute of the `select` element.
+type SelectProps = {
+	selectSize: SelectSize;
+};
+
+type InputProps = {
+	disableUnits?: boolean;
+};
 
 export const Root = styled.div`
 	box-sizing: border-box;
 	position: relative;
 `;
 
-const paddingStyles = ( { disableUnits } ) => {
+const paddingStyles = ( { disableUnits }: InputProps ) => {
 	const value = disableUnits ? 3 : 24;
 
 	return css`
@@ -22,7 +33,7 @@ const paddingStyles = ( { disableUnits } ) => {
 	`;
 };
 
-const arrowStyles = ( { disableUnits } ) => {
+const arrowStyles = ( { disableUnits }: InputProps ) => {
 	if ( disableUnits ) return '';
 
 	return css`
@@ -51,7 +62,7 @@ export const ValueInput = styled( NumberControl )`
 	}
 `;
 
-const unitSizeStyles = ( { size } ) => {
+const unitSizeStyles = ( { selectSize }: SelectProps ) => {
 	const sizes = {
 		default: {
 			height: 28,
@@ -67,10 +78,10 @@ const unitSizeStyles = ( { size } ) => {
 		},
 	};
 
-	return css( sizes[ size ] );
+	return css( sizes[ selectSize ] );
 };
 
-const baseUnitLabelStyles = ( props ) => {
+const baseUnitLabelStyles = ( props: SelectProps ) => {
 	return css`
 		appearance: none;
 		background: transparent;
@@ -95,7 +106,7 @@ const baseUnitLabelStyles = ( props ) => {
 	`;
 };
 
-export const UnitLabel = styled.div`
+export const UnitLabel = styled.div< SelectProps >`
 	&&& {
 		pointer-events: none;
 
@@ -103,7 +114,7 @@ export const UnitLabel = styled.div`
 	}
 `;
 
-export const UnitSelect = styled.select`
+export const UnitSelect = styled.select< SelectProps >`
 	&&& {
 		${ baseUnitLabelStyles };
 		cursor: pointer;