@wordpress/components 28.1.0 → 28.3.0

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -10,113 +9,196 @@ import styled from '@emotion/styled';
  */
 import { COLORS, CONFIG } from '../utils';
 import { space } from '../utils/space';
+import { chevronIconSize } from '../select-control/styles/select-control-styles';
+import { fontSizeStyles } from '../input-control/styles/input-control-styles';
 import type { CustomSelectButtonSize } from './types';
 
-const ITEM_PADDING = space( 2 );
+const INLINE_PADDING = {
+	compact: 8, // space(2)
+	small: 8, // space(2)
+	default: 16, // space(4)
+};
 
-export const WithHintWrapper = styled.div`
-	display: flex;
-	justify-content: space-between;
-	flex: 1;
-`;
+const getSelectSize = (
+	size: NonNullable< CustomSelectButtonSize[ 'size' ] >,
+	heightProperty: 'minHeight' | 'height'
+) => {
+	const sizes = {
+		compact: {
+			[ heightProperty ]: 32,
+			paddingInlineStart: INLINE_PADDING.compact,
+			paddingInlineEnd: INLINE_PADDING.compact + chevronIconSize,
+		},
+		default: {
+			[ heightProperty ]: 40,
+			paddingInlineStart: INLINE_PADDING.default,
+			paddingInlineEnd: INLINE_PADDING.default + chevronIconSize,
+		},
+		small: {
+			[ heightProperty ]: 24,
+			paddingInlineStart: INLINE_PADDING.small,
+			paddingInlineEnd: INLINE_PADDING.small + chevronIconSize,
+		},
+	};
 
-export const SelectedExperimentalHintItem = styled.span`
-	color: ${ COLORS.theme.gray[ 600 ] };
-	margin-inline-start: ${ space( 2 ) };
-`;
+	return sizes[ size ] || sizes.default;
+};
 
-export const ExperimentalHintItem = styled.span`
-	color: ${ COLORS.theme.gray[ 600 ] };
-	text-align: right;
-	margin-inline-end: ${ space( 1 ) };
-`;
+const getSelectItemSize = (
+	size: NonNullable< CustomSelectButtonSize[ 'size' ] >
+) => {
+	// Used to visually align the checkmark with the chevron
+	const checkmarkCorrection = 6;
+	const sizes = {
+		compact: {
+			paddingInlineStart: INLINE_PADDING.compact,
+			paddingInlineEnd: INLINE_PADDING.compact - checkmarkCorrection,
+		},
+		default: {
+			paddingInlineStart: INLINE_PADDING.default,
+			paddingInlineEnd: INLINE_PADDING.default - checkmarkCorrection,
+		},
+		small: {
+			paddingInlineStart: INLINE_PADDING.small,
+			paddingInlineEnd: INLINE_PADDING.small - checkmarkCorrection,
+		},
+	};
 
-export const SelectLabel = styled( Ariakit.SelectLabel )`
-	font-size: 11px;
-	font-weight: 500;
-	line-height: 1.4;
-	text-transform: uppercase;
-	margin-bottom: ${ space( 2 ) };
-`;
+	return sizes[ size ] || sizes.default;
+};
 
 export const Select = styled( Ariakit.Select, {
 	// Do not forward `hasCustomRenderProp` to the underlying Ariakit.Select component
 	shouldForwardProp: ( prop ) => prop !== 'hasCustomRenderProp',
-} )( ( {
-	size,
-	hasCustomRenderProp,
-}: {
-	size: NonNullable< CustomSelectButtonSize[ 'size' ] >;
-	hasCustomRenderProp: boolean;
-} ) => {
-	const heightProperty = hasCustomRenderProp ? 'minHeight' : 'height';
-
-	const getSize = () => {
-		const sizes = {
-			compact: {
-				[ heightProperty ]: 32,
-				paddingInlineStart: space( 2 ),
-				paddingInlineEnd: space( 1 ),
-			},
-			default: {
-				[ heightProperty ]: 40,
-				paddingInlineStart: space( 4 ),
-				paddingInlineEnd: space( 3 ),
-			},
-			small: {
-				[ heightProperty ]: 24,
-				paddingInlineStart: space( 2 ),
-				paddingInlineEnd: space( 1 ),
-				fontSize: 11,
-			},
-		};
-
-		return sizes[ size ] || sizes.default;
-	};
-
-	return css`
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
+} )(
+	( {
+		size,
+		hasCustomRenderProp,
+	}: {
+		size: NonNullable< CustomSelectButtonSize[ 'size' ] >;
+		hasCustomRenderProp: boolean;
+	} ) => css`
+		display: block;
 		background-color: ${ COLORS.theme.background };
 		border: none;
+		color: ${ COLORS.theme.foreground };
 		cursor: pointer;
-		font-size: ${ CONFIG.fontSize };
+		font-family: inherit;
+		text-align: start;
+		user-select: none;
 		width: 100%;
 
 		&[data-focus-visible] {
 			outline: none; // handled by InputBase component
 		}
 
-		${ getSize() }
-	`;
-} );
+		${ getSelectSize( size, hasCustomRenderProp ? 'minHeight' : 'height' ) }
+		${ ! hasCustomRenderProp && truncateStyles }
+		${ fontSizeStyles( { inputSize: size } ) }
+	`
+);
 
 export const SelectPopover = styled( Ariakit.SelectPopover )`
+	display: flex;
+	flex-direction: column;
+
+	background-color: ${ COLORS.theme.background };
 	border-radius: 2px;
-	background: ${ COLORS.theme.background };
 	border: 1px solid ${ COLORS.theme.foreground };
 
+	/* z-index(".components-popover") */
+	z-index: 1000000;
+
+	max-height: min( var( --popover-available-height, 400px ), 400px );
+	overflow: auto;
+	overscroll-behavior: contain;
+
+	// The smallest size without overflowing the container.
+	min-width: min-content;
+
 	&[data-focus-visible] {
 		outline: none; // outline will be on the trigger, rather than the popover
 	}
 `;
 
-export const SelectItem = styled( Ariakit.SelectItem )`
+export const SelectItem = styled( Ariakit.SelectItem )(
+	( {
+		size,
+	}: {
+		size: NonNullable< CustomSelectButtonSize[ 'size' ] >;
+	} ) => css`
+		cursor: default;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-size: ${ CONFIG.fontSize };
+		// TODO: reassess line-height for non-legacy v2
+		line-height: 28px;
+		padding-block: ${ space( 2 ) };
+		scroll-margin: ${ space( 1 ) };
+		user-select: none;
+
+		&[aria-disabled='true'] {
+			cursor: not-allowed;
+		}
+
+		&[data-active-item] {
+			background-color: ${ COLORS.theme.gray[ 300 ] };
+		}
+
+		${ getSelectItemSize( size ) }
+	`
+);
+
+const truncateStyles = css`
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+`;
+
+export const SelectedExperimentalHintWrapper = styled.div`
+	${ truncateStyles }
+`;
+
+export const SelectedExperimentalHintItem = styled.span`
+	color: ${ COLORS.theme.gray[ 600 ] };
+	margin-inline-start: ${ space( 2 ) };
+`;
+
+export const WithHintItemWrapper = styled.div`
 	display: flex;
-	align-items: center;
 	justify-content: space-between;
-	padding: ${ ITEM_PADDING };
-	font-size: ${ CONFIG.fontSize };
-	line-height: 2.15rem; // TODO: Remove this in default but keep for back-compat in legacy
-	&[data-active-item] {
-		background-color: ${ COLORS.theme.gray[ 300 ] };
-	}
+	align-items: center;
+	flex-wrap: wrap;
+	flex: 1;
+	column-gap: ${ space( 4 ) };
+`;
+
+export const WithHintItemHint = styled.span`
+	color: ${ COLORS.theme.gray[ 600 ] };
+	text-align: initial;
+	line-height: ${ CONFIG.fontLineHeightBase };
+	padding-inline-end: ${ space( 1 ) };
+	margin-block: ${ space( 1 ) };
 `;
 
 export const SelectedItemCheck = styled( Ariakit.SelectItemCheck )`
 	display: flex;
 	align-items: center;
-	margin-inline-start: ${ ITEM_PADDING };
-	font-size: 24px; // Size of checkmark icon
+	margin-inline-start: ${ space( 2 ) };
+
+	// Keep the checkmark vertically aligned at the top. Since the item text has a
+	// 28px line height and the checkmark is 24px tall, a (28-24)/2 = 2px margin
+	// is applied to keep the correct alignment between the text and the checkmark.
+	align-self: start;
+	margin-block-start: 2px;
+
+	// Since the checkmark's dimensions are applied with 'em' units, setting a
+	// font size of 0 allows the space reserved for the checkmark to collapse for
+	// items that are not selected or that don't have an associated item hint.
+	font-size: 0;
+	${ WithHintItemWrapper } ~ &,
+	&:not(:empty) {
+		font-size: 24px; // Size of checkmark icon
+	}
 `;

package/src/custom-select-control-v2/test/index.tsx

@@ -105,14 +105,14 @@ describe.each( [
 		await press.Enter();
 		expect(
 			screen.getByRole( 'listbox', {
-				name: 'label!',
+				name: defaultProps.label,
 			} )
 		).toBeVisible();
 
 		await press.Escape();
 		expect(
 			screen.queryByRole( 'listbox', {
-				name: 'label!',
+				name: defaultProps.label,
 			} )
 		).not.toBeInTheDocument();
 
@@ -134,7 +134,7 @@ describe.each( [
 			await press.Enter();
 			expect(
 				screen.getByRole( 'listbox', {
-					name: 'label!',
+					name: defaultProps.label,
 				} )
 			).toHaveFocus();
 
@@ -156,7 +156,7 @@ describe.each( [
 			await press.Enter();
 			expect(
 				screen.getByRole( 'listbox', {
-					name: 'label!',
+					name: defaultProps.label,
 				} )
 			).toHaveFocus();
 
@@ -182,7 +182,7 @@ describe.each( [
 
 			expect(
 				screen.queryByRole( 'listbox', {
-					name: 'label!',
+					name: defaultProps.label,
 					hidden: true,
 				} )
 			).not.toBeInTheDocument();
@@ -416,4 +416,34 @@ describe.each( [
 			screen.getByRole( 'option', { name: 'july-9' } )
 		).toBeVisible();
 	} );
+
+	it( 'Should open the select popover when focussing the trigger button and pressing arrow down', async () => {
+		render( <Component { ...defaultProps } /> );
+
+		const currentSelectedItem = screen.getByRole( 'combobox', {
+			expanded: false,
+		} );
+
+		await sleep();
+		await press.Tab();
+		expect( currentSelectedItem ).toHaveFocus();
+		expect( currentSelectedItem ).toHaveTextContent( items[ 0 ].value );
+
+		await press.ArrowDown();
+		expect(
+			screen.getByRole( 'listbox', {
+				name: defaultProps.label,
+			} )
+		).toBeVisible();
+	} );
+
+	it( 'Should label the component correctly even when the label is not visible', () => {
+		render( <Component { ...defaultProps } hideLabelFromVision /> );
+
+		expect(
+			screen.getByRole( 'combobox', {
+				name: defaultProps.label,
+			} )
+		).toBeVisible();
+	} );
 } );

package/src/custom-select-control-v2/types.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type * as Ariakit from '@ariakit/react';
 import type { FocusEventHandler, MouseEventHandler } from 'react';
 
@@ -12,8 +11,6 @@ export type CustomSelectStore = {
 	store: Ariakit.SelectStore;
 };
 
-export type CustomSelectContext = CustomSelectStore | undefined;
-
 type CustomSelectSize< Size = 'compact' | 'default' > = {
 	/**
 	 * The size of the control.
@@ -27,6 +24,10 @@ export type CustomSelectButtonSize = CustomSelectSize<
 	'compact' | 'default' | 'small'
 >;
 
+export type CustomSelectContext =
+	| ( CustomSelectStore & CustomSelectButtonSize )
+	| undefined;
+
 export type CustomSelectButtonProps = {
 	/**
 	 * An optional default value for the control when used in uncontrolled mode.
@@ -49,7 +50,20 @@ export type CustomSelectButtonProps = {
 	value?: string | string[];
 };
 
+// Props only exposed on the internal implementation
+export type _CustomSelectInternalProps = {
+	/**
+	 * True if the consumer is emulating the legacy component behavior and look
+	 */
+	isLegacy?: boolean;
+};
+
+// Props that are exposed in exported components
 export type _CustomSelectProps = CustomSelectButtonProps & {
+	/**
+	 * Additional className added to the root wrapper element.
+	 */
+	className?: string;
 	/**
 	 * The child elements. This should be composed of `CustomSelectItem` components.
 	 */
@@ -66,9 +80,7 @@ export type _CustomSelectProps = CustomSelectButtonProps & {
 	label: string;
 };
 
-export type CustomSelectProps = _CustomSelectProps &
-	CustomSelectButtonProps &
-	CustomSelectSize;
+export type CustomSelectProps = _CustomSelectProps & CustomSelectSize;
 
 /**
  * The legacy object structure for the options array.
@@ -79,6 +91,7 @@ type LegacyOption = {
 	style?: React.CSSProperties;
 	className?: string;
 	__experimentalHint?: string;
+	[ key: string ]: any;
 };
 
 /**

package/src/date-time/README.md

@@ -56,6 +56,14 @@ Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is display
 -   Required: No
 -   Default: false
 
+### `dateOrder`: `'dmy' | 'mdy' | 'ymd'`
+
+The order of day, month, and year. This prop overrides the time format determined by `is12Hour` prop.
+
+-   Type: `string`
+-   Required: No
+-   Default: `'dmy'`
+
 ### `isInvalidDate`: `( date: Date ) => boolean`
 
 A callback function which receives a Date object representing a day as an argument, and should return a Boolean to signify if the day is valid or not.

package/src/date-time/date-time/index.tsx

@@ -7,7 +7,6 @@ import type { ForwardedRef } from 'react';
  * WordPress dependencies
  */
 import { forwardRef } from '@wordpress/element';
-import { __, _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -25,6 +24,7 @@ function UnforwardedDateTimePicker(
 	{
 		currentDate,
 		is12Hour,
+		dateOrder,
 		isInvalidDate,
 		onMonthPreviewed = noop,
 		onChange,
@@ -40,6 +40,7 @@ function UnforwardedDateTimePicker(
 					currentTime={ currentDate }
 					onChange={ onChange }
 					is12Hour={ is12Hour }
+					dateOrder={ dateOrder }
 				/>
 				<DatePicker
 					currentDate={ currentDate }

package/src/date-time/index.ts

@@ -3,7 +3,8 @@
  */
 import { default as DatePicker } from './date';
 import { default as TimePicker } from './time';
+import { default as TimeInput } from './time-input';
 import { default as DateTimePicker } from './date-time';
 
-export { DatePicker, TimePicker };
+export { DatePicker, TimePicker, TimeInput };
 export default DateTimePicker;

package/src/date-time/stories/time-input.story.tsx

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+/**
+ * Internal dependencies
+ */
+import { TimeInput } from '../time-input';
+
+const meta: Meta< typeof TimeInput > = {
+	title: 'Components/TimeInput',
+	component: TimeInput,
+	argTypes: {
+		onChange: { action: 'onChange', control: { type: null } },
+	},
+	tags: [ 'status-wip' ],
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+	args: {
+		onChange: action( 'onChange' ),
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof TimeInput > = ( args ) => {
+	return <TimeInput { ...args } />;
+};
+
+export const Default: StoryFn< typeof TimeInput > = Template.bind( {} );
+Default.args = {
+	label: 'Time',
+};