@wordpress/components 19.15.0 → 20.0.0

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;
 
@@ -106,15 +109,3 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 		}
 	}
 }
-
-// All these styles should be made generic and changed on the inputs for all components.
-.components-custom-gradient-picker {
-	.components-input-control__label {
-		line-height: 1;
-	}
-	label {
-		text-transform: uppercase;
-		font-size: 11px;
-		font-weight: 500;
-	}
-}

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,14 +7,19 @@ 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 } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
-import { Button, VisuallyHidden } from '../';
+import { VisuallyHidden } from '../';
+import { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';
+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;
 // This is needed so that in Windows, where
@@ -58,12 +63,16 @@ const stateReducer = (
 export default function CustomSelectControl( {
 	/** Start opting into the larger default height that will become the default size in a future version. */
 	__next36pxDefaultSize = false,
+	/** Start opting into the unconstrained width that will become the default in a future version. */
+	__nextUnconstrainedWidth = false,
 	className,
 	hideLabelFromVision,
 	label,
 	describedBy,
 	options: items,
 	onChange: onSelectedItemChange,
+	/** @type {import('../select-control/types').SelectControlProps.size} */
+	size = 'default',
 	value: _selectedItem,
 } ) {
 	const {
@@ -85,6 +94,19 @@ export default function CustomSelectControl( {
 		stateReducer,
 	} );
 
+	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;
@@ -130,39 +152,42 @@ export default function CustomSelectControl( {
 				</VisuallyHidden>
 			) : (
 				/* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
-				<label
+				<StyledLabel
 					{ ...getLabelProps( {
 						className: 'components-custom-select-control__label',
 					} ) }
 				>
 					{ label }
-				</label>
+				</StyledLabel>
 			) }
-			<Button
-				{ ...getToggleButtonProps( {
-					// 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-36px-default-size': __next36pxDefaultSize }
-					),
-					isSmall: ! __next36pxDefaultSize,
-					describedBy: getDescribedBy(),
-				} ) }
+			<InputBaseWithBackCompatMinWidth
+				__next36pxDefaultSize={ __next36pxDefaultSize }
+				__nextUnconstrainedWidth={ __nextUnconstrainedWidth }
+				isFocused={ isOpen || isFocused }
+				__unstableInputWidth={
+					__nextUnconstrainedWidth ? undefined : 'auto'
+				}
+				labelPosition={ __nextUnconstrainedWidth ? undefined : 'top' }
+				size={ size }
+				suffix={ <SelectControlChevronDown /> }
 			>
-				{ itemToString( selectedItem ) }
-				<Icon
-					icon={ chevronDown }
-					className={ classnames(
-						'components-custom-select-control__button-icon',
-						{
-							'is-next-36px-default-size': __next36pxDefaultSize,
-						}
-					) }
-					size={ 18 }
-				/>
-			</Button>
+				<SelectControlSelect
+					as="button"
+					onFocus={ () => setIsFocused( true ) }
+					onBlur={ () => setIsFocused( false ) }
+					selectSize={ size }
+					__next36pxDefaultSize={ __next36pxDefaultSize }
+					{ ...getToggleButtonProps( {
+						// This is needed because some speech recognition software don't support `aria-labelledby`.
+						'aria-label': label,
+						'aria-labelledby': undefined,
+						className: 'components-custom-select-control__button',
+						describedBy: getDescribedBy(),
+					} ) }
+				>
+					{ itemToString( selectedItem ) }
+				</SelectControlSelect>
+			</InputBaseWithBackCompatMinWidth>
 			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
 			<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>
 				{ isOpen &&

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

@@ -7,14 +7,19 @@ export default {
 	title: 'Components/CustomSelectControl',
 	component: CustomSelectControl,
 	argTypes: {
-		__next36pxDefaultSize: {
-			control: { type: 'boolean' },
+		__next36pxDefaultSize: { control: { type: 'boolean' } },
+		size: {
+			control: {
+				type: 'radio',
+				options: [ 'small', 'default', '__unstable-large' ],
+			},
 		},
 	},
 };
 
 export const Default = CustomSelectControl.bind( {} );
 Default.args = {
+	__nextUnconstrainedWidth: true,
 	label: 'Label',
 	options: [
 		{

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

@@ -1,53 +1,12 @@
 .components-custom-select-control {
 	position: relative;
-}
-
-.components-custom-select-control__label {
-	display: block;
-	margin-bottom: $grid-unit-10;
+	font-size: $default-font-size;
 }
 
 .components-custom-select-control__button {
-	border: 1px solid $gray-700;
-	border-radius: $radius-block-ui;
-	min-width: 130px;
 	position: relative;
 	text-align: left;
-
-	&:not(.is-next-36px-default-size) {
-		min-height: 30px;
-	}
-
-	// For all button sizes allow sufficient space for the
-	// dropdown "arrow" icon to display.
-	&.components-custom-select-control__button {
-		// TODO: Some of these can be removed after some internal inconsistencies are addressed, such as the chevron
-		// (https://github.com/WordPress/gutenberg/issues/39400) and Button padding (https://github.com/WordPress/gutenberg/issues/39431)
-		padding-left: $grid-unit-20;
-		padding-right: $icon-size + $grid-unit-10;
-
-		&:not(.is-next-36px-default-size) {
-			padding-left: $grid-unit-10;
-			padding-right: $icon-size;
-		}
-	}
-
-	&:focus:not(:disabled) {
-		border-color: var(--wp-admin-theme-color);
-		box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-admin-theme-color);
-	}
-
-	.components-custom-select-control__button-icon {
-		height: 100%;
-		padding: 0;
-		position: absolute;
-		right: $grid-unit-10;
-		top: 0;
-
-		&:not(.is-next-36px-default-size) {
-			right: $grid-unit-05;
-		}
-	}
+	outline: 0; // focus ring is handled elsewhere
 }
 
 .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";