@wordpress/components 17.0.0 → 19.0.2

package/src/custom-gradient-bar/control-points.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { colord } from 'colord';
 
 /**
  * WordPress dependencies
@@ -16,7 +17,7 @@ import { LEFT, RIGHT } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import Button from '../button';
-import ColorPicker from '../color-picker';
+import { ColorPicker } from '../color-picker';
 import Dropdown from '../dropdown';
 import { VisuallyHidden } from '../visually-hidden';
 
@@ -212,14 +213,14 @@ function ControlPoints( {
 					renderContent={ ( { onClose } ) => (
 						<>
 							<ColorPicker
-								disableAlpha={ disableAlpha }
+								enableAlpha={ ! disableAlpha }
 								color={ point.color }
-								onChangeComplete={ ( { color } ) => {
+								onChange={ ( color ) => {
 									onChange(
 										updateControlPointColor(
 											controlPoints,
 											index,
-											color.toRgbString()
+											colord( color ).toRgbString()
 										)
 									);
 								} }
@@ -290,14 +291,14 @@ function InsertPoint( {
 			) }
 			renderContent={ () => (
 				<ColorPicker
-					disableAlpha={ disableAlpha }
-					onChangeComplete={ ( { color } ) => {
+					enableAlpha={ ! disableAlpha }
+					onChange={ ( color ) => {
 						if ( ! alreadyInsertedPoint ) {
 							onChange(
 								addControlPoint(
 									controlPoints,
 									insertPosition,
-									color.toRgbString()
+									colord( color ).toRgbString()
 								)
 							);
 							setAlreadyInsertedPoint( true );
@@ -306,7 +307,7 @@ function InsertPoint( {
 								updateControlPointColorByPosition(
 									controlPoints,
 									insertPosition,
-									color.toRgbString()
+									colord( color ).toRgbString()
 								)
 							);
 						}

package/src/custom-gradient-picker/index.js

@@ -17,7 +17,7 @@ import { Flex } from '../flex';
 import SelectControl from '../select-control';
 import {
 	getGradientAstWithDefault,
-	getLinearGradientRepresentationOfARadial,
+	getLinearGradientRepresentation,
 	getGradientAstWithControlPoints,
 	getStopCssColor,
 } from './utils';
@@ -52,8 +52,8 @@ const GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {
 	};
 	return (
 		<AnglePickerControl
-			hideLabelFromVision
 			onChange={ onAngleChange }
+			labelPosition="top"
 			value={ hasGradient ? angle : '' }
 		/>
 	);
@@ -95,7 +95,7 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
 		<SelectControl
 			className="components-custom-gradient-picker__type-picker"
 			label={ __( 'Type' ) }
-			labelPosition={ 'side' }
+			labelPosition="top"
 			onChange={ handleOnChange }
 			options={ GRADIENT_OPTIONS }
 			value={ hasGradient && type }
@@ -107,10 +107,8 @@ export default function CustomGradientPicker( { value, onChange } ) {
 	const gradientAST = getGradientAstWithDefault( value );
 	// On radial gradients the bar should display a linear gradient.
 	// On radial gradients the bar represents a slice of the gradient from the center until the outside.
-	const background =
-		gradientAST.type === 'radial-gradient'
-			? getLinearGradientRepresentationOfARadial( gradientAST )
-			: gradientAST.value;
+	// On liner gradients the bar represents the color stops from left to right independently of the angle.
+	const background = getLinearGradientRepresentation( gradientAST );
 	const hasGradient = gradientAST.value !== DEFAULT_GRADIENT;
 	// Control points color option may be hex from presets, custom colors will be rgb.
 	// The position should always be a percentage.

package/src/custom-gradient-picker/style.scss

@@ -1,22 +1,23 @@
-$components-custom-gradient-picker__padding: 6px; // 36px container, 24px handles inside, that leaves 12px padding, half of which is 6.
+$components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 16px handles inside, that leaves 32px padding, half of which is 1å6.
 
 .components-custom-gradient-picker__gradient-bar:not(.has-gradient) {
 	opacity: 0.4;
 }
 
 .components-custom-gradient-picker__gradient-bar {
+	border-radius: $radius-block-ui;
 	margin-top: $grid-unit-15;
 	width: 100%;
-	height: $button-size;
-	border-radius: $button-size;
-	margin-bottom: $grid-unit-15;
+	height: $grid-unit-60;
+	margin-bottom: $grid-unit-20+$grid-unit-05;
 	/*rtl:ignore*/
-	padding-left: $components-custom-gradient-picker__padding;
-	/*rtl:ignore*/
-	padding-right: $button-size - $components-custom-gradient-picker__padding;
+	padding-right: $components-custom-gradient-picker__padding;
 
 	.components-custom-gradient-picker__markers-container {
 		position: relative;
+		width: calc(100% - #{ $grid-unit-40 });
+		margin-left: auto;
+		margin-right: auto;
 	}
 
 	.components-custom-gradient-picker__insert-point {
@@ -24,9 +25,9 @@ $components-custom-gradient-picker__padding: 6px; // 36px container, 24px handle
 		background: $white;
 		padding: 2px;
 		top: $components-custom-gradient-picker__padding;
-		min-width: $button-size-small;
-		width: $button-size-small;
-		height: $button-size-small;
+		min-width: $grid-unit-20;
+		width: $grid-unit-20;
+		height: $grid-unit-20;
 		position: relative;
 		color: $gray-900;
 
@@ -37,20 +38,25 @@ $components-custom-gradient-picker__padding: 6px; // 36px container, 24px handle
 	}
 
 	.components-custom-gradient-picker__control-point-button {
-		border: 2px solid transparent;
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white;
 		border-radius: 50%;
-		height: $button-size-small;
-		width: $button-size-small;
+		height: $grid-unit-20;
+		width: $grid-unit-20;
 		padding: 0;
 		position: absolute;
 		top: $components-custom-gradient-picker__padding;
 
+		// Shadow and stroke.
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white, 0 0 $border-width-focus 0 rgba($black, 0.25);
+
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 2px solid transparent;
+
 		&:focus,
 		&.is-active {
-			box-shadow:
-				0 0 0 1px $white,
-				0 0 0 3px $gray-900;
+			box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) $white, 0 0 $border-width-focus 0 rgba($black, 0.25);
+
+			// Windows High Contrast mode will show this outline, but not the box-shadow.
+			outline: $border-width-tab solid transparent;
 		}
 	}
 }
@@ -59,7 +65,7 @@ $components-custom-gradient-picker__padding: 6px; // 36px container, 24px handle
 	margin-left: auto;
 	margin-right: auto;
 	display: block;
-	margin-bottom: 8px;
+	margin-bottom: $grid-unit-10;
 }
 
 .components-custom-gradient-picker__inserter {
@@ -102,3 +108,20 @@ $components-custom-gradient-picker__padding: 6px; // 36px container, 24px handle
 		}
 	}
 }
+
+// All these styles should be made generic and changed on the inputs for all components.
+.components-custom-gradient-picker {
+	.components-select-control__input,
+	.components-input-control__input {
+		height: 40px !important;
+	}
+	.components-input-control__label {
+		line-height: 1;
+		padding-bottom: $grid-unit-10 !important;
+	}
+	label {
+		text-transform: uppercase;
+		font-size: 11px;
+		font-weight: 500;
+	}
+}

package/src/custom-gradient-picker/styles/custom-gradient-picker-styles.js

@@ -12,5 +12,5 @@ export const SelectWrapper = styled( FlexBlock )`
 `;
 
 export const AccessoryWrapper = styled( FlexBlock )`
-	flex-grow: 4;
+	flex-grow: 5;
 `;

package/src/custom-gradient-picker/utils.js

@@ -2,7 +2,8 @@
  * External dependencies
  */
 import gradientParser from 'gradient-parser';
-import tinycolor from 'tinycolor2';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
 
 /**
  * Internal dependencies
@@ -14,7 +15,9 @@ import {
 } from './constants';
 import { serializeGradient } from './serializer';
 
-export function getLinearGradientRepresentationOfARadial( gradientAST ) {
+extend( [ namesPlugin ] );
+
+export function getLinearGradientRepresentation( gradientAST ) {
 	return serializeGradient( {
 		type: 'linear-gradient',
 		orientation: HORIZONTAL_GRADIENT_ORIENTATION,
@@ -68,7 +71,7 @@ export function getGradientAstWithControlPoints(
 	return {
 		...gradientAST,
 		colorStops: newControlPoints.map( ( { position, color } ) => {
-			const { r, g, b, a } = tinycolor( color ).toRgb();
+			const { r, g, b, a } = colord( color ).toRgb();
 			return {
 				length: {
 					type: '%',

package/src/custom-select-control/index.js

@@ -14,7 +14,7 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import { Button, VisuallyHidden } from '../';
 
-const itemToString = ( item ) => item && item.name;
+const itemToString = ( item ) => item?.name;
 // This is needed so that in Windows, where
 // the menu does not necessarily open on
 // key up/down, you can still switch between
@@ -98,14 +98,9 @@ export default function CustomSelectControl( {
 		className: 'components-custom-select-control__menu',
 		'aria-hidden': ! isOpen,
 	} );
-	// We need this here, because the null active descendant is not
-	// fully ARIA compliant.
+	// We need this here, because the null active descendant is not fully ARIA compliant.
 	if (
-		menuProps[ 'aria-activedescendant' ] &&
-		menuProps[ 'aria-activedescendant' ].slice(
-			0,
-			'downshift-null'.length
-		) === 'downshift-null'
+		menuProps[ 'aria-activedescendant' ]?.startsWith( 'downshift-null' )
 	) {
 		delete menuProps[ 'aria-activedescendant' ];
 	}
@@ -161,12 +156,18 @@ export default function CustomSelectControl( {
 									{
 										'is-highlighted':
 											index === highlightedIndex,
+										'has-hint': !! item.__experimentalHint,
 									}
 								),
 								style: item.style,
 							} ) }
 						>
 							{ item.name }
+							{ item.__experimentalHint && (
+								<span className="components-custom-select-control__item-hint">
+									{ item.__experimentalHint }
+								</span>
+							) }
 							{ item === selectedItem && (
 								<Icon
 									icon={ check }

package/src/custom-select-control/style.scss

@@ -58,19 +58,25 @@
 
 .components-custom-select-control__item {
 	align-items: center;
-	display: flex;
+	display: grid;
+	grid-template-columns: auto auto;
 	list-style-type: none;
 	padding: $grid-unit-10;
 	cursor: default;
 	line-height: $icon-size + $grid-unit-05;
 
-
+	&.has-hint {
+		grid-template-columns: auto auto 30px;
+	}
 	&.is-highlighted {
 		background: $gray-300;
 	}
-
+	.components-custom-select-control__item-hint {
+		color: $gray-700;
+		text-align: right;
+		padding-right: $grid-unit-05;
+	}
 	.components-custom-select-control__item-icon {
-		margin-right: 0;
 		margin-left: auto;
 	}
 

package/src/dashicon/index.native.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { Icon } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import * as dashicons from '../mobile/dashicons';
+
+// A predefined SVG icon is rendered instead of Dashicon because it's not supported in the native version.
+function Dashicon( { icon, ...extraProps } ) {
+	return (
+		<Icon icon={ dashicons[ icon ] || dashicons.empty } { ...extraProps } />
+	);
+}
+
+export default Dashicon;

package/src/date-time/README.md

@@ -64,12 +64,3 @@ A callback function which receives a Date object representing a day as an argume
 
 -   Type: `Function`
 -   Required: No
-
-### isDayHighlighted
-
-A callback function which receives a moment object representing a day as an argument, and should return a Boolean to signify if the day is visually highlighted in the calendar.
-
-This function will be called on each day, every time user browses into a different month. If you want to force an update to highlights, pass a new reference to your function. Otherwise, make sure the reference does not change between renders to fully leverage the caching.
-
--   Type: `Function`
--   Required: No

package/src/date-time/index.js

@@ -129,13 +129,14 @@ function DateTimePicker(
 							</li>
 							<li>
 								<abbr aria-label={ __( 'Home and End' ) }>
+									{ /* Translators: Home/End reffer to the 'Home' and 'End' buttons on the keyboard.*/ }
 									{ __( 'Home/End' ) }
 								</abbr>
 								{
 									' ' /* JSX removes whitespace, but a space is required for screen readers. */
 								}
 								{ __(
-									'Go to the first (home) or last (end) day of a week.'
+									'Go to the first (Home) or last (End) day of a week.'
 								) }
 							</li>
 						</ul>

package/src/date-time/stories/index.js

@@ -16,6 +16,9 @@ import DateTimePicker from '../';
 export default {
 	title: 'Components/DateTimePicker',
 	component: DateTimePicker,
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 const DateTimePickerWithState = ( { is12Hour } ) => {

package/src/date-time/stories/time.js

@@ -9,7 +9,13 @@ import TimePicker from '../time';
 import { date, boolean } from '@storybook/addon-knobs';
 import { noop } from 'lodash';
 
-export default { title: 'Components/TimePicker', component: TimePicker };
+export default {
+	title: 'Components/TimePicker',
+	component: TimePicker,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
 
 export const _default = () => {
 	return (

package/src/divider/stories/index.js

@@ -11,6 +11,9 @@ import { Divider } from '..';
 export default {
 	component: Divider,
 	title: 'Components (Experimental)/Divider',
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 const BlackDivider = ( props ) => (

package/src/drop-zone/index.js

@@ -11,7 +11,18 @@ import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { upload, Icon } from '@wordpress/icons';
 import { getFilesFromDataTransfer } from '@wordpress/dom';
-import { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';
+import {
+	__experimentalUseDropZone as useDropZone,
+	useReducedMotion,
+} from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import {
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '../animation';
 
 export default function DropZoneComponent( {
 	className,
@@ -65,20 +76,57 @@ export default function DropZoneComponent( {
 			setIsDraggingOverElement( false );
 		},
 	} );
+	const disableMotion = useReducedMotion();
 
 	let children;
 
+	const backdrop = {
+		hidden: { scaleY: 0, opacity: 0 },
+		show: {
+			scaleY: 1,
+			opacity: 1,
+			transition: {
+				type: 'tween',
+				duration: 0.2,
+				delay: 0.1,
+				delayChildren: 0.2,
+			},
+		},
+		exit: {
+			scaleY: 1,
+			opacity: 0,
+			transition: {
+				duration: 0.3,
+				delayChildren: 0,
+			},
+		},
+	};
+
+	const foreground = {
+		hidden: { opacity: 0, scale: 0.75 },
+		show: { opacity: 1, scale: 1 },
+		exit: { opacity: 0, scale: 0.9 },
+	};
+
 	if ( isDraggingOverElement ) {
 		children = (
-			<div className="components-drop-zone__content">
-				<Icon
-					icon={ upload }
-					className="components-drop-zone__content-icon"
-				/>
-				<span className="components-drop-zone__content-text">
-					{ label ? label : __( 'Drop files to upload' ) }
-				</span>
-			</div>
+			<motion.div
+				variants={ backdrop }
+				initial={ disableMotion ? 'show' : 'hidden' }
+				animate="show"
+				exit={ disableMotion ? 'show' : 'exit' }
+				className="components-drop-zone__content"
+			>
+				<motion.div variants={ foreground }>
+					<Icon
+						icon={ upload }
+						className="components-drop-zone__content-icon"
+					/>
+					<span className="components-drop-zone__content-text">
+						{ label ? label : __( 'Drop files to upload' ) }
+					</span>
+				</motion.div>
+			</motion.div>
 		);
 	}
 
@@ -95,7 +143,11 @@ export default function DropZoneComponent( {
 
 	return (
 		<div ref={ ref } className={ classes }>
-			{ children }
+			{ disableMotion ? (
+				children
+			) : (
+				<AnimatePresence>{ children }</AnimatePresence>
+			) }
 		</div>
 	);
 }

package/src/drop-zone/style.scss

@@ -7,39 +7,29 @@
 	z-index: z-index(".components-drop-zone");
 	visibility: hidden;
 	opacity: 0;
-	transition: 0.3s opacity, 0.3s background-color, 0s visibility 0.3s;
-	@include reduce-motion("transition");
-	border: 2px solid var(--wp-admin-theme-color);
-	border-radius: 2px;
+	border-radius: $radius-block-ui;
 
 	&.is-active {
 		opacity: 1;
 		visibility: visible;
-		transition: 0.3s opacity, 0.3s background-color;
-		@include reduce-motion("transition");
-	}
-
-	&.is-dragging-over-element {
-		background-color: var(--wp-admin-theme-color);
 	}
 }
 
 .components-drop-zone__content {
 	position: absolute;
-	top: 50%;
+	top: 0;
+	bottom: 0;
 	left: 0;
 	right: 0;
-	z-index: z-index(".components-drop-zone__content");
-	transform: translateY(-50%);
+	height: 100%;
 	width: 100%;
+	display: flex;
+	background-color: var(--wp-admin-theme-color);
+	align-items: center;
+	justify-content: center;
+	z-index: z-index(".components-drop-zone__content");
 	text-align: center;
 	color: $white;
-	transition: transform 0.2s ease-in-out;
-	@include reduce-motion("transition");
-}
-
-.components-drop-zone.is-dragging-over-element .components-drop-zone__content {
-	transform: translateY(-50%) scale(1.05);
 }
 
 .components-drop-zone__content-icon,
@@ -51,9 +41,10 @@
 	margin: 0 auto;
 	line-height: 0;
 	fill: currentColor;
+	pointer-events: none;
 }
 
-
 .components-drop-zone__content-text {
 	font-family: $default-font;
+	font-size: $default-font-size;
 }

package/src/dropdown/README.md

@@ -1,8 +1,8 @@
 # Dropdown
 
-Dropdown is a React component to render a button that opens a floating content modal when clicked.
-This components takes care of updating the state of the dropdown menu (opened/closed), handles closing the menu when clicking outside
-and uses render props to render the button and the content.
+Dropdown is a React component to render a button that opens a floating content modal when clicked. 
+
+This component takes care of updating the state of the dropdown menu (opened/closed), handles closing the menu when clicking outside and uses render props to render the button and the content.
 
 ## Usage
 
@@ -41,14 +41,14 @@ className of the global container
 
 ### contentClassName
 
-If you want to target the dropdown menu for styling purposes, you need to provide a contentClassName because it's not being rendered as a children of the container node.
+If you want to target the dropdown menu for styling purposes, you need to provide a contentClassName because it's not being rendered as a child of the container node.
 
 -   Type: `String`
 -   Required: No
 
 ### position
 
-The direction in which the popover should open relative to its parent node. Specify y- and x-axis as a space-separated string. Supports `"top"`, `"bottom"` y axis, and `"left"`, `"center"`, `"right"` x axis.
+The direction in which the popover should open relative to its parent node. Specify a y- and an x-axis as a space-separated string. Supports `"top"`, `"bottom"` y-axis, and `"left"`, `"center"`, `"right"` x-axis.
 
 -   Type: `String`
 -   Required: No
@@ -76,7 +76,7 @@ A callback invoked to render the content of the dropdown menu. Its first argumen
 
 ### expandOnMobile
 
-Opt-in prop to show popovers fullscreen on mobile, pass `false` in this prop to avoid this behavior.
+Opt-in prop to show popovers fullscreen on mobile.
 
 -   Type: `Boolean`
 -   Required: No
@@ -84,17 +84,16 @@ Opt-in prop to show popovers fullscreen on mobile, pass `false` in this prop to
 
 ### headerTitle
 
-Set this to customize the text that is shown in the dropdown's header when
-it is fullscreen on mobile.
+Set this to customize the text that is shown in the dropdown's header when it is fullscreen on mobile.
 
 -   Type: `String`
 -   Required: No
 
 ### focusOnMount
 
-By default, the _first tabblable element_ in the popover will receive focus when it mounts. This is the same as setting `focusOnMount` to `"firstElement"`. If you want to focus the container instead, you can set `focusOnMount` to `"container"`.
+By default, the _first tabbable element_ in the popover will receive focus when it mounts. This is the same as setting `focusOnMount` to `"firstElement"`. If you want to focus the container instead, you can set `focusOnMount` to `"container"`.
 
-Set this prop to `false` to disable focus changing entirely. This should only be set when an appropriately accessible substitute behavior exists.
+Set this prop to `false` to disable focus switching entirely. This should only be set when an appropriately accessible substitute behavior exists.
 
 -   Type: `String` or `Boolean`
 -   Required: No
@@ -103,7 +102,8 @@ Set this prop to `false` to disable focus changing entirely. This should only be
 ### popoverProps
 
 Properties of popoverProps object will be passed as props to the `Popover` component.
-Use this o object to access properties/feature if the `Popover` component that are not already exposed in the `Dropdown`component, e.g.: the hability to have the popover without an arrow.
+
+Use this object to access properties/features of the `Popover` component that are not already exposed in the `Dropdown` component, e.g.: the ability to have the popover without an arrow.
 
 -   Type: `Object`
 -   Required: No
@@ -118,7 +118,8 @@ A callback invoked when the popover should be closed.
 ### onToggle
 
 A callback invoked when the state of the popover changes from open to closed and vice versa.
-Function receives a boolean as a parameter. If `true`, the popover will open. If `false`, the popover will close.
+
+The callback receives a boolean as a parameter. If `true`, the popover will open. If `false`, the popover will close.
 
 -   Type: `Function`
 -   Required: No

package/src/dropdown/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */
@@ -85,6 +86,10 @@ export default function Dropdown( {
 		<div
 			className={ classnames( 'components-dropdown', className ) }
 			ref={ containerRef }
+			// Some UAs focus the closest focusable parent when the toggle is
+			// clicked. Making this div focusable ensures such UAs will focus
+			// it and `closeIfFocusOutside` can tell if the toggle was clicked.
+			tabIndex="-1"
 		>
 			{ renderToggle( args ) }
 			{ isOpen && (