@wordpress/components 19.17.0 → 20.0.2-next.957ca95e4c.0

package/src/{custom-gradient-bar → custom-gradient-picker/gradient-bar}/control-points.js

@@ -11,15 +11,15 @@ import { useInstanceId } from '@wordpress/compose';
 import { useEffect, useRef, useState, useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { plus } from '@wordpress/icons';
-import { LEFT, RIGHT } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
-import Button from '../button';
-import { ColorPicker } from '../color-picker';
-import { VisuallyHidden } from '../visually-hidden';
-import { CustomColorPickerDropdown } from '../color-palette';
+import Button from '../../button';
+import { HStack } from '../../h-stack';
+import { ColorPicker } from '../../color-picker';
+import { VisuallyHidden } from '../../visually-hidden';
+import { CustomColorPickerDropdown } from '../../color-palette';
 
 import {
 	addControlPoint,
@@ -58,10 +58,6 @@ function ControlPointButton( { isOpen, position, color, ...additionalProps } ) {
 						'is-active': isOpen,
 					}
 				) }
-				style={ {
-					left: `${ position }%`,
-					transform: 'translateX( -50% )',
-				} }
 				{ ...additionalProps }
 			/>
 			<VisuallyHidden id={ descriptionId }>
@@ -75,25 +71,28 @@ function ControlPointButton( { isOpen, position, color, ...additionalProps } ) {
 
 function GradientColorPickerDropdown( {
 	isRenderedInSidebar,
-	gradientPickerDomRef,
+	className,
 	...props
 } ) {
-	const popoverProps = useMemo( () => {
-		const result = {
-			className:
-				'components-custom-gradient-picker__color-picker-popover',
-			position: 'top',
-		};
-		if ( isRenderedInSidebar ) {
-			result.anchorRef = gradientPickerDomRef.current;
-			result.position = 'bottom left';
-		}
-		return result;
-	}, [ gradientPickerDomRef, isRenderedInSidebar ] );
+	// Open the popover below the gradient control/insertion point
+	const popoverProps = useMemo(
+		() => ( {
+			placement: 'bottom',
+			offset: 8,
+		} ),
+		[]
+	);
+
+	const mergedClassName = classnames(
+		'components-custom-gradient-picker__control-point-dropdown',
+		className
+	);
+
 	return (
 		<CustomColorPickerDropdown
 			isRenderedInSidebar={ isRenderedInSidebar }
 			popoverProps={ popoverProps }
+			className={ mergedClassName }
 			{ ...props }
 		/>
 	);
@@ -163,7 +162,6 @@ function ControlPoints( {
 		return (
 			ignoreMarkerPosition !== initialPosition && (
 				<GradientColorPickerDropdown
-					gradientPickerDomRef={ gradientPickerDomRef }
 					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 					key={ index }
 					onClose={ onStopControlPointChange }
@@ -205,7 +203,7 @@ function ControlPoints( {
 								}
 							} }
 							onKeyDown={ ( event ) => {
-								if ( event.keyCode === LEFT ) {
+								if ( event.code === 'ArrowLeft' ) {
 									// Stop propagation of the key press event to avoid focus moving
 									// to another editor area.
 									event.stopPropagation();
@@ -219,7 +217,7 @@ function ControlPoints( {
 											)
 										)
 									);
-								} else if ( event.keyCode === RIGHT ) {
+								} else if ( event.code === 'ArrowRight' ) {
 									// Stop propagation of the key press event to avoid focus moving
 									// to another editor area.
 									event.stopPropagation();
@@ -256,24 +254,32 @@ function ControlPoints( {
 								} }
 							/>
 							{ ! disableRemove && controlPoints.length > 2 && (
-								<Button
-									className="components-custom-gradient-picker__remove-control-point"
-									onClick={ () => {
-										onChange(
-											removeControlPoint(
-												controlPoints,
-												index
-											)
-										);
-										onClose();
-									} }
-									variant="link"
+								<HStack
+									className="components-custom-gradient-picker__remove-control-point-wrapper"
+									alignment="center"
 								>
-									{ __( 'Remove Control Point' ) }
-								</Button>
+									<Button
+										onClick={ () => {
+											onChange(
+												removeControlPoint(
+													controlPoints,
+													index
+												)
+											);
+											onClose();
+										} }
+										variant="link"
+									>
+										{ __( 'Remove Control Point' ) }
+									</Button>
+								</HStack>
 							) }
 						</>
 					) }
+					style={ {
+						left: `${ point.position }%`,
+						transform: 'translateX( -50% )',
+					} }
 				/>
 			)
 		);
@@ -288,12 +294,10 @@ function InsertPoint( {
 	insertPosition,
 	disableAlpha,
 	__experimentalIsRenderedInSidebar,
-	gradientPickerDomRef,
 } ) {
 	const [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );
 	return (
 		<GradientColorPickerDropdown
-			gradientPickerDomRef={ gradientPickerDomRef }
 			isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 			className="components-custom-gradient-picker__inserter"
 			onClose={ () => {
@@ -312,16 +316,8 @@ function InsertPoint( {
 						}
 						onToggle();
 					} }
-					className="components-custom-gradient-picker__insert-point"
+					className="components-custom-gradient-picker__insert-point-dropdown"
 					icon={ plus }
-					style={
-						insertPosition !== null
-							? {
-									left: `${ insertPosition }%`,
-									transform: 'translateX( -50% )',
-							  }
-							: undefined
-					}
 				/>
 			) }
 			renderContent={ () => (
@@ -349,6 +345,14 @@ function InsertPoint( {
 					} }
 				/>
 			) }
+			style={
+				insertPosition !== null
+					? {
+							left: `${ insertPosition }%`,
+							transform: 'translateX( -50% )',
+					  }
+					: undefined
+			}
 		/>
 	);
 }

package/src/{custom-gradient-bar → custom-gradient-picker/gradient-bar}/index.js

@@ -136,9 +136,6 @@ export default function CustomGradientBar( {
 							__experimentalIsRenderedInSidebar={
 								__experimentalIsRenderedInSidebar
 							}
-							gradientPickerDomRef={
-								gradientMarkersContainerDomRef
-							}
 							disableAlpha={ disableAlpha }
 							insertPosition={ gradientBarState.insertPosition }
 							value={ controlPoints }

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

@@ -1,15 +1,22 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
+import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import AnglePickerControl from '../angle-picker-control';
-import CustomGradientBar from '../custom-gradient-bar';
+import CustomGradientBar from './gradient-bar';
 import { Flex } from '../flex';
 import SelectControl from '../select-control';
+import { VStack } from '../v-stack';
 import {
 	getGradientAstWithDefault,
 	getLinearGradientRepresentation,
@@ -44,6 +51,7 @@ const GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {
 	};
 	return (
 		<AnglePickerControl
+			__nextHasNoMarginBottom
 			onChange={ onAngleChange }
 			labelPosition="top"
 			value={ hasGradient ? angle : '' }
@@ -86,6 +94,7 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
 
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
 			className="components-custom-gradient-picker__type-picker"
 			label={ __( 'Type' ) }
 			labelPosition="top"
@@ -98,6 +107,8 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
 };
 
 export default function CustomGradientPicker( {
+	/** Start opting into the new margin-free styles that will become the default in a future version. */
+	__nextHasNoMargin = false,
 	value,
 	onChange,
 	__experimentalIsRenderedInSidebar,
@@ -115,8 +126,24 @@ export default function CustomGradientPicker( {
 		position: parseInt( colorStop.length.value ),
 	} ) );
 
+	if ( ! __nextHasNoMargin ) {
+		deprecated(
+			'Outer margin styles for wp.components.CustomGradientPicker',
+			{
+				since: '6.1',
+				version: '6.4',
+				hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version',
+			}
+		);
+	}
+
 	return (
-		<div className="components-custom-gradient-picker">
+		<VStack
+			spacing={ 5 }
+			className={ classnames( 'components-custom-gradient-picker', {
+				'is-next-has-no-margin': __nextHasNoMargin,
+			} ) }
+		>
 			<CustomGradientBar
 				__experimentalIsRenderedInSidebar={
 					__experimentalIsRenderedInSidebar
@@ -156,6 +183,6 @@ export default function CustomGradientPicker( {
 					) }
 				</AccessoryWrapper>
 			</Flex>
-		</div>
+		</VStack>
 	);
 }

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

@@ -11,6 +11,9 @@ import CustomGradientPicker from '../';
 export default {
 	title: 'Components/CustomGradientPicker',
 	component: CustomGradientPicker,
+	argTypes: {
+		__nextHasNoMargin: { control: { type: 'boolean' } },
+	},
 };
 
 const CustomGradientPickerWithState = ( props ) => {
@@ -24,6 +27,7 @@ const CustomGradientPickerWithState = ( props ) => {
 	);
 };
 
-export const _default = () => {
-	return <CustomGradientPickerWithState />;
+export const Default = CustomGradientPickerWithState.bind( {} );
+Default.args = {
+	__nextHasNoMargin: true,
 };

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

@@ -1,15 +1,20 @@
 $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 {
+	&:not(.is-next-has-no-margin) {
+		margin-top: $grid-unit-15;
+		margin-bottom: $grid-unit-30;
+	}
+}
+
 .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: $grid-unit-60;
-	margin-bottom: $grid-unit-20+$grid-unit-05;
 
 	.components-custom-gradient-picker__markers-container {
 		position: relative;
@@ -18,15 +23,27 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 		margin-right: auto;
 	}
 
-	.components-custom-gradient-picker__insert-point {
+	.components-custom-gradient-picker__control-point-dropdown {
+		position: absolute;
+		height: $grid-unit-20;
+		width: $grid-unit-20;
+		top: $components-custom-gradient-picker__padding;
+		// Trim any internal white spacing that would be cause d by inline positioned elements
+		display: flex;
+	}
+
+	.components-custom-gradient-picker__insert-point-dropdown {
+		position: relative;
+
+		// Same size as the .components-custom-gradient-picker__control-point-dropdown parent
+		height: inherit;
+		width: inherit;
+		min-width: $grid-unit-20;
 		border-radius: 50%;
+
 		background: $white;
 		padding: 2px;
-		top: $components-custom-gradient-picker__padding;
-		min-width: $grid-unit-20;
-		width: $grid-unit-20;
-		height: $grid-unit-20;
-		position: relative;
+
 		color: $gray-900;
 
 		svg {
@@ -36,12 +53,11 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 	}
 
 	.components-custom-gradient-picker__control-point-button {
+		// Same size as the .components-custom-gradient-picker__control-point-dropdown parent
+		height: inherit;
+		width: inherit;
 		border-radius: 50%;
-		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);
@@ -59,17 +75,13 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 	}
 }
 
-.components-custom-gradient-picker__color-picker-popover .components-custom-gradient-picker__remove-control-point {
-	margin-left: auto;
-	margin-right: auto;
-	display: block;
-	margin-bottom: $grid-unit-10;
+.components-custom-gradient-picker__remove-control-point-wrapper {
+	padding-bottom: $grid-unit-10;
 }
 
 .components-custom-gradient-picker__inserter {
 	/*rtl:ignore*/
 	direction: ltr;
-	width: 100%;
 }
 
 .components-custom-gradient-picker__liner-gradient-indicator {
@@ -79,15 +91,6 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 	height: 20px;
 }
 
-.components-custom-gradient-picker .components-custom-gradient-picker__ui-line {
-	margin-bottom: $grid-unit-20;
-
-	.components-base-control.components-angle-picker,
-	.components-base-control.components-custom-gradient-picker__type-picker {
-		margin-bottom: 0;
-	}
-}
-
 .components-custom-gradient-picker .components-custom-gradient-picker__toolbar {
 	border: none;
 

package/src/custom-select-control/README.md

@@ -50,6 +50,7 @@ function MyCustomSelectControl() {
 	const [ , setFontSize ] = useState();
 	return (
 		<CustomSelectControl
+			__nextUnconstrainedWidth
 			label="Font Size"
 			options={ options }
 			onChange={ ( { selectedItem } ) => setFontSize( selectedItem ) }
@@ -61,6 +62,7 @@ function MyControlledCustomSelectControl() {
 	const [ fontSize, setFontSize ] = useState( options[ 0 ] );
 	return (
 		<CustomSelectControl
+			__nextUnconstrainedWidth
 			label="Font Size"
 			options={ options }
 			onChange={ ( { selectedItem } ) => setFontSize( selectedItem ) }
@@ -121,6 +123,14 @@ Can be used to externally control the value of the control, like in the `MyContr
 -   Type: `Object`
 -   Required: No
 
+#### __nextUnconstrainedWidth
+
+Start opting into the unconstrained width style that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
 ## Related components
 
 -   Like this component, but implemented using a native `<select>` for when custom styling is not necessary, the `SelectControl` component.

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

@@ -7,16 +7,18 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Icon, check, chevronDown } from '@wordpress/icons';
+import { Icon, check } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { useCallback, useState } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
 import { VisuallyHidden } from '../';
 import { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';
-import InputBase from '../input-control/input-base';
+import SelectControlChevronDown from '../select-control/chevron-down';
+import { InputBaseWithBackCompatMinWidth } from './styles';
 import { StyledLabel } from '../base-control/styles/base-control-styles';
 
 const itemToString = ( item ) => item?.name;
@@ -94,6 +96,17 @@ export default function CustomSelectControl( {
 
 	const [ isFocused, setIsFocused ] = useState( false );
 
+	if ( ! __nextUnconstrainedWidth ) {
+		deprecated(
+			'Constrained width styles for wp.components.CustomSelectControl',
+			{
+				since: '6.1',
+				version: '6.4',
+				hint: 'Set the `__nextUnconstrainedWidth` prop to true to start opting into the new styles, which will become the default in a future version',
+			}
+		);
+	}
+
 	function getDescribedBy() {
 		if ( describedBy ) {
 			return describedBy;
@@ -147,12 +160,16 @@ export default function CustomSelectControl( {
 					{ label }
 				</StyledLabel>
 			) }
-			<InputBase
+			<InputBaseWithBackCompatMinWidth
+				__next36pxDefaultSize={ __next36pxDefaultSize }
+				__nextUnconstrainedWidth={ __nextUnconstrainedWidth }
 				isFocused={ isOpen || isFocused }
 				__unstableInputWidth={
 					__nextUnconstrainedWidth ? undefined : 'auto'
 				}
 				labelPosition={ __nextUnconstrainedWidth ? undefined : 'top' }
+				size={ size }
+				suffix={ <SelectControlChevronDown /> }
 			>
 				<SelectControlSelect
 					as="button"
@@ -164,24 +181,13 @@ export default function CustomSelectControl( {
 						// This is needed because some speech recognition software don't support `aria-labelledby`.
 						'aria-label': label,
 						'aria-labelledby': undefined,
-						className: classnames(
-							'components-custom-select-control__button',
-							{
-								'is-next-unconstrained-width':
-									__nextUnconstrainedWidth,
-							}
-						),
+						className: 'components-custom-select-control__button',
 						describedBy: getDescribedBy(),
 					} ) }
 				>
 					{ itemToString( selectedItem ) }
-					<Icon
-						icon={ chevronDown }
-						className="components-custom-select-control__button-icon"
-						size={ 18 }
-					/>
 				</SelectControlSelect>
-			</InputBase>
+			</InputBaseWithBackCompatMinWidth>
 			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
 			<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>
 				{ isOpen &&

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

@@ -8,7 +8,6 @@ export default {
 	component: CustomSelectControl,
 	argTypes: {
 		__next36pxDefaultSize: { control: { type: 'boolean' } },
-		__nextUnconstrainedWidth: { control: { type: 'boolean' } },
 		size: {
 			control: {
 				type: 'radio',
@@ -20,6 +19,7 @@ export default {
 
 export const Default = CustomSelectControl.bind( {} );
 Default.args = {
+	__nextUnconstrainedWidth: true,
 	label: 'Label',
 	options: [
 		{

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

@@ -7,18 +7,6 @@
 	position: relative;
 	text-align: left;
 	outline: 0; // focus ring is handled elsewhere
-
-	&:not(.is-next-unconstrained-width) {
-		min-width: 130px;
-	}
-
-	.components-custom-select-control__button-icon {
-		height: 100%;
-		padding: 0;
-		position: absolute;
-		right: $grid-unit-05;
-		top: 0;
-	}
 }
 
 .components-custom-select-control__menu {

package/src/custom-select-control/styles.ts

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import InputBase from '../input-control/input-base';
+import { Container as InputControlContainer } from '../input-control/styles/input-control-styles';
+
+type BackCompatMinWidthProps = {
+	__nextUnconstrainedWidth: boolean;
+};
+
+const backCompatMinWidth = ( props: BackCompatMinWidthProps ) =>
+	! props.__nextUnconstrainedWidth
+		? css`
+				${ InputControlContainer } {
+					min-width: 130px;
+				}
+		  `
+		: '';
+
+export const InputBaseWithBackCompatMinWidth = styled( InputBase )`
+	${ backCompatMinWidth }
+`;

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

@@ -32,7 +32,10 @@ describe( 'CustomSelectControl', () => {
 				role="none"
 				onKeyDown={ onKeyDown }
 			>
-				<CustomSelectControl options={ options } />
+				<CustomSelectControl
+					options={ options }
+					__nextUnconstrainedWidth
+				/>
 			</div>
 		);
 		const toggleButton = screen.getByRole( 'button' );

package/src/date-time/constants.ts

@@ -0,0 +1 @@
+export const TIMEZONELESS_FORMAT = "yyyy-MM-dd'T'HH:mm:ss";