@wordpress/components 28.3.0 → 28.4.0

package/src/popover/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { StoryFn, Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -79,174 +79,176 @@ const PopoverWithAnchor = ( args: PopoverProps ) => {
 	);
 };
 
-const Template: StoryFn< typeof Popover > = ( args ) => {
-	const [ isVisible, setIsVisible ] = useState( false );
-	const toggleVisible = () => {
-		setIsVisible( ( state ) => ! state );
-	};
-	const buttonRef = useRef< HTMLButtonElement | undefined >();
-	useEffect( () => {
-		buttonRef.current?.scrollIntoView?.( {
-			block: 'center',
-			inline: 'center',
-		} );
-	}, [] );
+export const Default: StoryObj< typeof Popover > = {
+	decorators: [
+		( Story ) => {
+			const [ isVisible, setIsVisible ] = useState( false );
+			const toggleVisible = () => {
+				setIsVisible( ( state ) => ! state );
+			};
+			const buttonRef = useRef< HTMLButtonElement | undefined >();
+			useEffect( () => {
+				buttonRef.current?.scrollIntoView?.( {
+					block: 'center',
+					inline: 'center',
+				} );
+			}, [] );
+
+			return (
+				<div
+					style={ {
+						width: '300vw',
+						height: '300vh',
+						display: 'flex',
+						alignItems: 'center',
+						justifyContent: 'center',
+					} }
+				>
+					<Button
+						variant="secondary"
+						onClick={ toggleVisible }
+						ref={ buttonRef }
+					>
+						Toggle Popover
+						{ isVisible && <Story /> }
+					</Button>
+				</div>
+			);
+		},
+	],
+	args: {
+		children: (
+			<div style={ { width: '280px', whiteSpace: 'normal' } }>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+				eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+				enim ad minim veniam, quis nostrud exercitation ullamco laboris
+				nisi ut aliquip ex ea commodo consequat.
+			</div>
+		),
+	},
+};
 
-	return (
+export const Unstyled: StoryObj< typeof Popover > = {
+	...Default,
+	args: {
+		...Default.args,
+
+		variant: 'unstyled',
+	},
+};
+
+export const AllPlacements: StoryObj< typeof Popover > = {
+	render: ( { children, ...args } ) => (
 		<div
 			style={ {
-				width: '300vw',
-				height: '300vh',
-				display: 'flex',
-				alignItems: 'center',
-				justifyContent: 'center',
+				minWidth: '600px',
+				marginLeft: 'auto',
+				marginRight: 'auto',
 			} }
 		>
-			<Button
-				variant="secondary"
-				onClick={ toggleVisible }
-				ref={ buttonRef }
-			>
-				Toggle Popover
-				{ isVisible && <Popover { ...args } /> }
-			</Button>
-		</div>
-	);
-};
-
-export const Default: StoryFn< typeof Popover > = Template.bind( {} );
-Default.args = {
-	children: (
-		<div style={ { width: '280px', whiteSpace: 'normal' } }>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-			eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-			ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-			aliquip ex ea commodo consequat.
+			<h2>
+				Resize / scroll the viewport to test the behavior of the
+				popovers when they reach the viewport boundaries.
+			</h2>
+			<div>
+				{ AVAILABLE_PLACEMENTS.map( ( p ) => (
+					<PopoverWithAnchor
+						key={ p }
+						placement={ p }
+						{ ...args }
+						resize={ p === 'overlay' ? true : args.resize }
+					>
+						{ children }
+						<div>
+							<small>(placement: { p })</small>
+						</div>
+					</PopoverWithAnchor>
+				) ) }
+			</div>
 		</div>
 	),
+	// Excluding placement and position since they all possible values
+	// are passed directly in code.
+	parameters: {
+		controls: {
+			exclude: [ 'placement', 'position' ],
+		},
+	},
+	args: {
+		...Default.args,
+		children: (
+			<div style={ { width: '280px', whiteSpace: 'normal' } }>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+				eiusmod tempor incididunt ut labore et dolore magna aliqua.
+			</div>
+		),
+		noArrow: false,
+		offset: 10,
+		resize: false,
+		flip: false,
+	},
 };
 
-export const Unstyled: StoryFn< typeof Popover > = Template.bind( {} );
-Unstyled.args = {
-	children: (
-		<div style={ { width: '280px', whiteSpace: 'normal' } }>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-			eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-			ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-			aliquip ex ea commodo consequat.
-		</div>
-	),
-	variant: 'unstyled',
-};
+export const DynamicHeight: StoryObj< typeof Popover > = {
+	decorators: [
+		( Story ) => {
+			const [ height, setHeight ] = useState( 200 );
+			const increase = () => setHeight( height + 100 );
+			const decrease = () => setHeight( height - 100 );
 
-export const AllPlacements: StoryFn< typeof Popover > = ( {
-	children,
-	...args
-} ) => (
-	<div
-		style={ {
-			minWidth: '600px',
-			marginLeft: 'auto',
-			marginRight: 'auto',
-		} }
-	>
-		<h2>
-			Resize / scroll the viewport to test the behavior of the popovers
-			when they reach the viewport boundaries.
-		</h2>
-		<div>
-			{ AVAILABLE_PLACEMENTS.map( ( p ) => (
-				<PopoverWithAnchor
-					key={ p }
-					placement={ p }
-					{ ...args }
-					resize={ p === 'overlay' ? true : args.resize }
-				>
-					{ children }
+			return (
+				<div style={ { padding: '20px' } }>
 					<div>
-						<small>(placement: { p })</small>
+						<Button
+							variant="primary"
+							onClick={ increase }
+							style={ {
+								marginRight: '20px',
+							} }
+						>
+							Increase Size
+						</Button>
+
+						<Button variant="primary" onClick={ decrease }>
+							Decrease Size
+						</Button>
 					</div>
-				</PopoverWithAnchor>
-			) ) }
-		</div>
-	</div>
-);
-// Excluding placement and position since they all possible values
-// are passed directly in code.
-AllPlacements.parameters = {
-	controls: {
-		exclude: [ 'placement', 'position' ],
-	},
-};
-AllPlacements.args = {
-	...Default.args,
-	children: (
-		<div style={ { width: '280px', whiteSpace: 'normal' } }>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-			eiusmod tempor incididunt ut labore et dolore magna aliqua.
-		</div>
-	),
-	noArrow: false,
-	offset: 10,
-	resize: false,
-	flip: false,
-};
 
-export const DynamicHeight: StoryFn< typeof Popover > = ( {
-	children,
-	...args
-} ) => {
-	const [ height, setHeight ] = useState( 200 );
-	const increase = () => setHeight( height + 100 );
-	const decrease = () => setHeight( height - 100 );
-
-	return (
-		<div style={ { padding: '20px' } }>
-			<div>
-				<Button
-					variant="primary"
-					onClick={ increase }
-					style={ {
-						marginRight: '20px',
-					} }
-				>
-					Increase Size
-				</Button>
-
-				<Button variant="primary" onClick={ decrease }>
-					Decrease Size
-				</Button>
-			</div>
+					<p>
+						When the height of the popover exceeds the available
+						space in the canvas, a scrollbar inside the popover
+						should appear.
+					</p>
 
-			<p>
-				When the height of the popover exceeds the available space in
-				the canvas, a scrollbar inside the popover should appear.
-			</p>
-
-			<div>
-				<Popover { ...args }>
-					<div
-						style={ {
-							height,
-							background: '#eee',
-							padding: '20px',
-						} }
-					>
-						{ children }
+					<div>
+						<style>{ `.components-popover { --dynamic-height: ${ height }px; }` }</style>
+						<Story />
 					</div>
-				</Popover>
+				</div>
+			);
+		},
+	],
+	args: {
+		...Default.args,
+		children: (
+			<div
+				style={ {
+					height: 'var(--dynamic-height)',
+					background: '#eee',
+					padding: '20px',
+				} }
+			>
+				Content with dynamic height
 			</div>
-		</div>
-	);
-};
-DynamicHeight.args = {
-	...Default.args,
-	children: 'Content with dynamic height',
+		),
+	},
 };
 
-export const WithSlotOutsideIframe: StoryFn< typeof Popover > = ( args ) => {
-	return <PopoverInsideIframeRenderedInExternalSlot { ...args } />;
-};
-WithSlotOutsideIframe.args = {
-	...Default.args,
+export const WithSlotOutsideIframe: StoryObj< typeof Popover > = {
+	render: ( args ) => (
+		<PopoverInsideIframeRenderedInExternalSlot { ...args } />
+	),
+	args: {
+		...Default.args,
+	},
 };

package/src/private-apis.ts

@@ -8,8 +8,6 @@ import {
 	CompositeRow as CompositeRowV2,
 	useCompositeStore as useCompositeStoreV2,
 } from './composite/v2';
-import { default as CustomSelectControl } from './custom-select-control';
-import { default as CustomSelectControlV2Legacy } from './custom-select-control-v2/legacy-component';
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
 import { createPrivateSlotFill } from './slot-fill';
 import {
@@ -35,8 +33,6 @@ lock( privateApis, {
 	CompositeItemV2,
 	CompositeRowV2,
 	useCompositeStoreV2,
-	CustomSelectControlV2Legacy,
-	CustomSelectControl,
 	__experimentalPopoverLegacyPositionToPlacement,
 	createPrivateSlotFill,
 	ComponentsContext,

package/src/radio-control/index.tsx

@@ -73,7 +73,7 @@ export function RadioControl(
 			help={ help }
 			className={ clsx( className, 'components-radio-control' ) }
 		>
-			<VStack spacing={ 3 }>
+			<VStack spacing={ 2 }>
 				{ options.map( ( option, index ) => (
 					<div
 						key={ `${ id }-${ index }` }

package/src/radio-control/style.scss

@@ -13,7 +13,7 @@
 	cursor: pointer;
 
 	&:focus {
-		box-shadow: 0 0 0 ($border-width * 2) $components-color-background, 0 0 0 ($border-width * 2 + $border-width-focus-fallback) $components-color-accent;
+		@include button-style-outset__focus(var(--wp-admin-theme-color));
 	}
 
 	&:checked {
@@ -29,4 +29,9 @@
 
 .components-radio-control__label {
 	cursor: pointer;
+	line-height: $radio-input-size-sm;
+
+	@include break-small() {
+		line-height: $radio-input-size;
+	}
 }

package/src/range-control/README.md

@@ -90,6 +90,7 @@ const MyRangeControl = () => {
 
 	return(
 		<RangeControl
+			__nextHasNoMarginBottom
 			label="Columns"
 			value={ columns }
 			onChange={ ( value ) => setColumns( value ) }
@@ -361,6 +362,13 @@ Determines if the `input` number field will render next to the RangeControl. Thi
 -   Required: No
 -   Platform: Web
 
+### `__nextHasNoMarginBottom`: `boolean`
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Required: No
+-   Default: `false`
+
 ## Related components
 
 -   To collect a numerical input in a text field, use the `TextControl` component.

package/src/range-control/index.tsx

@@ -353,6 +353,7 @@ function UnforwardedRangeControl(
  *   const [ isChecked, setChecked ] = useState( true );
  *   return (
  *     <RangeControl
+ *       __nextHasNoMarginBottom
  *       help="Please select how transparent you would like this."
  *       initialPosition={50}
  *       label="Opacity"

package/src/resizable-box/resize-tooltip/README.md

@@ -60,7 +60,7 @@ Determines if the label can render.
 
 ### labelRef
 
-Callback [Ref](https://reactjs.org/docs/forwarding-refs.html) for the label element.
+Callback [Ref](https://react.dev/learn/manipulating-the-dom-with-refs) for the label element.
 
 -   Type: `Function`
 -   Required: No

package/src/select-control/README.md

@@ -214,6 +214,14 @@ If multiple is false the value received is a single value with the new selected
 -   Type: `function`
 -   Required: Yes
 
+#### variant
+
+The style variant of the control.
+
+-   Type: `'default' | 'minimal'`
+-   Required: No
+-   Default: `'default'`
+
 ### __nextHasNoMarginBottom
 
 Start opting into the new margin-free styles that will become the default in a future version.

package/src/select-control/index.tsx

@@ -46,6 +46,7 @@ function UnforwardedSelectControl(
 		children,
 		prefix,
 		suffix,
+		variant = 'default',
 		__next40pxDefaultSize = false,
 		__nextHasNoMarginBottom = false,
 		...restProps
@@ -86,6 +87,7 @@ function UnforwardedSelectControl(
 				disabled={ disabled }
 				hideLabelFromVision={ hideLabelFromVision }
 				id={ id }
+				isBorderless={ variant === 'minimal' }
 				label={ label }
 				size={ size }
 				suffix={
@@ -93,6 +95,10 @@ function UnforwardedSelectControl(
 				}
 				prefix={ prefix }
 				labelPosition={ labelPosition }
+				__unstableInputWidth={
+					variant === 'minimal' ? 'auto' : undefined
+				}
+				variant={ variant }
 				__next40pxDefaultSize={ __next40pxDefaultSize }
 			>
 				<Select
@@ -107,6 +113,7 @@ function UnforwardedSelectControl(
 					ref={ ref }
 					selectSize={ size }
 					value={ valueProp }
+					variant={ variant }
 				>
 					{ children ||
 						options.map( ( option, index ) => {

package/src/select-control/stories/index.story.tsx

@@ -100,3 +100,9 @@ export const WithCustomChildren: StoryFn< typeof SelectControl > = ( args ) => {
 		</SelectControlWithState>
 	);
 };
+
+export const Minimal = SelectControlWithState.bind( {} );
+Minimal.args = {
+	...Default.args,
+	variant: 'minimal',
+};

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

@@ -17,7 +17,7 @@ import InputBase from '../../input-control/input-base';
 interface SelectProps
 	extends Pick<
 		SelectControlProps,
-		'__next40pxDefaultSize' | 'disabled' | 'multiple'
+		'__next40pxDefaultSize' | 'disabled' | 'multiple' | 'variant'
 	> {
 	// Using `selectSize` instead of `size` to avoid a type conflict with the
 	// `size` HTML attribute of the `select` element.
@@ -35,11 +35,22 @@ const disabledStyles = ( { disabled }: SelectProps ) => {
 	`;
 };
 
+const inputBaseVariantStyles = ( { variant }: SelectProps ) => {
+	if ( variant === 'minimal' ) {
+		return css`
+			display: inline-flex;
+		`;
+	}
+
+	return '';
+};
+
 export const StyledInputBase = styled( InputBase )`
 	color: ${ COLORS.theme.foreground };
 	cursor: pointer;
 
 	${ disabledStyles }
+	${ inputBaseVariantStyles }
 `;
 
 const sizeStyles = ( {
@@ -127,6 +138,16 @@ const overflowStyles = ( { multiple }: SelectProps ) => {
 	};
 };
 
+const variantStyles = ( { variant }: SelectProps ) => {
+	if ( variant === 'minimal' ) {
+		return css( {
+			fieldSizing: 'content',
+		} );
+	}
+
+	return '';
+};
+
 // TODO: Resolve need to use &&& to increase specificity
 // https://github.com/WordPress/gutenberg/issues/18483
 
@@ -137,6 +158,7 @@ export const Select = styled.select< SelectProps >`
 		box-sizing: border-box;
 		border: none;
 		box-shadow: none !important;
+		color: currentColor; // Overrides hover/focus styles in forms.css
 		cursor: inherit;
 		display: block;
 		font-family: inherit;
@@ -150,6 +172,7 @@ export const Select = styled.select< SelectProps >`
 		${ sizeStyles };
 		${ sizePaddings };
 		${ overflowStyles }
+		${ variantStyles }
 	}
 `;
 

package/src/select-control/types.ts

@@ -53,6 +53,12 @@ type SelectControlBaseProps = Pick<
 		 * passed in as `children` for more customizability.
 		 */
 		children?: ReactNode;
+		/**
+		 * The style variant of the control.
+		 *
+		 * @default 'default'
+		 */
+		variant?: 'default' | 'minimal';
 	};
 
 export type SelectControlSingleSelectionProps = SelectControlBaseProps & {

package/src/style.scss

@@ -19,7 +19,6 @@
 @import "./combobox-control/style.scss";
 @import "./color-palette/style.scss";
 @import "./custom-gradient-picker/style.scss";
-@import "./custom-select-control/style.scss";
 @import "./dimension-control/style.scss";
 @import "./draggable/style.scss";
 @import "./drop-zone/style.scss";
@@ -50,6 +49,7 @@
 @import "./tab-panel/style.scss";
 @import "./text-control/style.scss";
 @import "./tip/style.scss";
+@import "./toggle-control/style.scss";
 @import "./toolbar/toolbar/style.scss";
 @import "./toolbar/toolbar-button/style.scss";
 @import "./toolbar/toolbar-group/style.scss";

package/src/tabs/styles.ts

@@ -75,13 +75,15 @@ export const Tab = styled( Ariakit.Tab )`
 		margin-left: 0;
 		font-weight: 500;
 		text-align: inherit;
+		hyphens: auto;
+		color: ${ COLORS.theme.foreground };
 
 		&[aria-disabled='true'] {
 			cursor: default;
-			opacity: 0.3;
+			color: ${ COLORS.ui.textDisabled };
 		}
 
-		&:hover {
+		&:not( [aria-disabled='true'] ):hover {
 			color: ${ COLORS.theme.accent };
 		}
 
@@ -119,6 +121,12 @@ export const Tab = styled( Ariakit.Tab )`
 			opacity: 1;
 		}
 	}
+
+	[aria-orientation='vertical'] & {
+		min-height: ${ space(
+			10
+		) }; // Avoid fixed height to allow for long strings that go in multiple lines.
+	}
 `;
 
 export const TabPanel = styled( Ariakit.TabPanel )`