@wordpress/components 19.17.0 → 20.0.0

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,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -7,9 +12,10 @@ 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 +50,7 @@ const GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {
 	};
 	return (
 		<AnglePickerControl
+			__nextHasNoMarginBottom
 			onChange={ onAngleChange }
 			labelPosition="top"
 			value={ hasGradient ? angle : '' }
@@ -86,6 +93,7 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
 
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
 			className="components-custom-gradient-picker__type-picker"
 			label={ __( 'Type' ) }
 			labelPosition="top"
@@ -98,6 +106,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,
@@ -116,7 +126,12 @@ export default function CustomGradientPicker( {
 	} ) );
 
 	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 +171,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,4 @@ const CustomGradientPickerWithState = ( props ) => {
 	);
 };
 
-export const _default = () => {
-	return <CustomGradientPickerWithState />;
-};
+export const Default = CustomGradientPickerWithState.bind( {} );

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";