@wordpress/components 28.2.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/popover/utils.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { MotionProps } from 'framer-motion';
 import type { Placement, ReferenceType } from '@floating-ui/react-dom';
 

package/src/private-apis.ts

@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
-
 /**
  * Internal dependencies
  */
@@ -13,7 +8,6 @@ import {
 	CompositeRow as CompositeRowV2,
 	useCompositeStore as useCompositeStoreV2,
 } from './composite/v2';
-import { default as CustomSelectControl } from './custom-select-control';
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
 import { createPrivateSlotFill } from './slot-fill';
 import {
@@ -39,7 +33,6 @@ lock( privateApis, {
 	CompositeItemV2,
 	CompositeRowV2,
 	useCompositeStoreV2,
-	CustomSelectControl,
 	__experimentalPopoverLegacyPositionToPlacement,
 	createPrivateSlotFill,
 	ComponentsContext,

package/src/progress-bar/styles.ts

@@ -4,19 +4,28 @@
 import styled from '@emotion/styled';
 import { css, keyframes } from '@emotion/react';
 
+/**
+ * WordPress dependencies
+ */
+import { isRTL } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
 import { COLORS, CONFIG } from '../utils';
 
-const animateProgressBar = keyframes( {
-	'0%': {
-		left: '-50%',
-	},
-	'100%': {
-		left: '100%',
-	},
-} );
+function animateProgressBar( isRtl = false ) {
+	const animationDirection = isRtl ? 'right' : 'left';
+
+	return keyframes( {
+		'0%': {
+			[ animationDirection ]: '-50%',
+		},
+		'100%': {
+			[ animationDirection ]: '100%',
+		},
+	} );
+}
 
 // Width of the indicator for the indeterminate progress bar
 export const INDETERMINATE_TRACK_WIDTH = 50;
@@ -67,7 +76,7 @@ export const Indicator = styled.div< {
 					animationDuration: '1.5s',
 					animationTimingFunction: 'ease-in-out',
 					animationIterationCount: 'infinite',
-					animationName: animateProgressBar,
+					animationName: animateProgressBar( isRTL() ),
 					width: `${ INDETERMINATE_TRACK_WIDTH }%`,
 			  } )
 			: css( {

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/radio-group/context.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type * as Ariakit from '@ariakit/react';
 
 /**

package/src/radio-group/index.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 
 /**

package/src/radio-group/radio.tsx

@@ -6,7 +6,6 @@ import { forwardRef, useContext } from '@wordpress/element';
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 
 /**

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

@@ -326,6 +326,8 @@ function UnforwardedRangeControl(
 					<ActionRightWrapper>
 						<Button
 							className="components-range-control__reset"
+							// If the RangeControl itself is disabled, the reset button shouldn't be in the tab sequence.
+							accessibleWhenDisabled={ ! disabled }
 							disabled={ disabled || value === undefined }
 							variant="secondary"
 							size="small"
@@ -351,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/range-control/styles/range-control-styles.ts

@@ -168,13 +168,17 @@ const markLabelFill = ( { isFilled }: RangeMarkProps ) => {
 
 export const MarkLabel = styled.span`
 	color: ${ COLORS.gray[ 300 ] };
-	left: 0;
 	font-size: 11px;
 	position: absolute;
 	top: 12px;
-	transform: translateX( -50% );
 	white-space: nowrap;
 
+	${ rtl( { left: 0 } ) };
+	${ rtl(
+		{ transform: 'translateX( -50% )' },
+		{ transform: 'translateX( 50% )' }
+	) };
+
 	${ markLabelFill };
 `;
 

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/resizable-box/resize-tooltip/utils.ts

@@ -25,7 +25,7 @@ interface UseResizeLabelProps {
 interface UseResizeLabelArgs {
 	axis?: Axis;
 	fadeTimeout: number;
-	onResize( data: { width: number | null; height: number | null } ): void;
+	onResize: ( data: { width: number | null; height: number | null } ) => void;
 	position: Position;
 	showPx: boolean;
 }

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

@@ -13,8 +13,7 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import BaseControl from '../base-control';
-import InputBase from '../input-control/input-base';
-import { Select } from './styles/select-control-styles';
+import { Select, StyledInputBase } from './styles/select-control-styles';
 import type { WordPressComponentProps } from '../context';
 import type { SelectControlProps } from './types';
 import SelectControlChevronDown from './chevron-down';
@@ -47,6 +46,7 @@ function UnforwardedSelectControl(
 		children,
 		prefix,
 		suffix,
+		variant = 'default',
 		__next40pxDefaultSize = false,
 		__nextHasNoMarginBottom = false,
 		...restProps
@@ -82,11 +82,12 @@ function UnforwardedSelectControl(
 			id={ id }
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 		>
-			<InputBase
+			<StyledInputBase
 				className={ classes }
 				disabled={ disabled }
 				hideLabelFromVision={ hideLabelFromVision }
 				id={ id }
+				isBorderless={ variant === 'minimal' }
 				label={ label }
 				size={ size }
 				suffix={
@@ -94,6 +95,10 @@ function UnforwardedSelectControl(
 				}
 				prefix={ prefix }
 				labelPosition={ labelPosition }
+				__unstableInputWidth={
+					variant === 'minimal' ? 'auto' : undefined
+				}
+				variant={ variant }
 				__next40pxDefaultSize={ __next40pxDefaultSize }
 			>
 				<Select
@@ -108,6 +113,7 @@ function UnforwardedSelectControl(
 					ref={ ref }
 					selectSize={ size }
 					value={ valueProp }
+					variant={ variant }
 				>
 					{ children ||
 						options.map( ( option, index ) => {
@@ -127,7 +133,7 @@ function UnforwardedSelectControl(
 							);
 						} ) }
 				</Select>
-			</InputBase>
+			</StyledInputBase>
 		</BaseControl>
 	);
 }

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',
+};