@wordpress/components 28.6.0 → 28.8.0

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

@@ -7,17 +7,15 @@ import type { Meta, StoryObj } from '@storybook/react';
  * Internal dependencies
  */
 import Button from '../../button';
-import { Card, CardBody, CardFooter, CardHeader } from '../../card';
 import { VStack } from '../../v-stack';
-import Dropdown from '../../dropdown';
 import {
 	NavigatorProvider,
 	NavigatorScreen,
 	NavigatorButton,
 	NavigatorBackButton,
-	NavigatorToParentButton,
 	useNavigator,
 } from '..';
+import { HStack } from '../../h-stack';
 
 const meta: Meta< typeof NavigatorProvider > = {
 	component: NavigatorProvider,
@@ -33,268 +31,106 @@ const meta: Meta< typeof NavigatorProvider > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},
+	decorators: [
+		( Story ) => {
+			return (
+				<>
+					<style>{ `
+					  /* These attributes are a private implementation detail of the
+						  Navigator component. Do not use outside of its source code. */
+						[data-wp-component="NavigatorProvider"] {
+							height: calc(100vh - 2rem);
+							max-height: 250px;
+
+						}
+						[data-wp-component="NavigatorScreen"]:not([data-sticky]) {
+							padding: 8px;
+						}
+					` }</style>
+					<Story />
+				</>
+			);
+		},
+	],
 };
 export default meta;
 
 export const Default: StoryObj< typeof NavigatorProvider > = {
 	args: {
 		initialPath: '/',
-		style: { height: '100vh', maxHeight: '450px' },
 		children: (
 			<>
 				<NavigatorScreen path="/">
-					<Card>
-						<CardBody>
-							<p>This is the home screen.</p>
+					<h2>This is the home screen.</h2>
 
-							<VStack alignment="left">
-								<NavigatorButton
-									variant="secondary"
-									path="/child"
-								>
-									Navigate to child screen.
-								</NavigatorButton>
-
-								<NavigatorButton
-									variant="secondary"
-									path="/overflow-child"
-								>
-									Navigate to screen with horizontal overflow.
-								</NavigatorButton>
-
-								<NavigatorButton
-									variant="secondary"
-									path="/stickies"
-								>
-									Navigate to screen with sticky content.
-								</NavigatorButton>
+					<VStack alignment="left">
+						<NavigatorButton variant="primary" path="/child">
+							Go to child screen.
+						</NavigatorButton>
 
-								<NavigatorButton
-									variant="secondary"
-									path="/product/1"
-								>
-									Navigate to product screen with id 1.
-								</NavigatorButton>
+						<NavigatorButton variant="primary" path="/product/1">
+							Go to dynamic path screen with id 1.
+						</NavigatorButton>
 
-								<Dropdown
-									renderToggle={ ( {
-										isOpen,
-										onToggle,
-									}: {
-										// TODO: remove once `Dropdown` is refactored to TypeScript
-										isOpen: boolean;
-										onToggle: () => void;
-									} ) => (
-										<Button
-											onClick={ onToggle }
-											aria-expanded={ isOpen }
-											variant="primary"
-										>
-											Open test dialog
-										</Button>
-									) }
-									renderContent={ () => (
-										<Card>
-											<CardHeader>Go</CardHeader>
-											<CardBody>Stuff</CardBody>
-										</Card>
-									) }
-								/>
-							</VStack>
-						</CardBody>
-					</Card>
+						<NavigatorButton variant="primary" path="/product/2">
+							Go to dynamic path screen with id 2.
+						</NavigatorButton>
+					</VStack>
 				</NavigatorScreen>
 
 				<NavigatorScreen path="/child">
-					<Card>
-						<CardBody>
-							<p>This is the child screen.</p>
-							<NavigatorBackButton variant="secondary">
-								Go back
-							</NavigatorBackButton>
-						</CardBody>
-					</Card>
-				</NavigatorScreen>
-
-				<NavigatorScreen path="/overflow-child">
-					<Card>
-						<CardBody>
-							<NavigatorBackButton variant="secondary">
-								Go back
-							</NavigatorBackButton>
-							<div
-								style={ {
-									display: 'inline-block',
-									background: 'papayawhip',
-								} }
-							>
-								<span
-									style={ {
-										color: 'palevioletred',
-										whiteSpace: 'nowrap',
-										fontSize: '42vw',
-									} }
-								>
-									¯\_(ツ)_/¯
-								</span>
-							</div>
-						</CardBody>
-					</Card>
+					<h2>This is the child screen.</h2>
+					<HStack spacing={ 2 } alignment="left">
+						<NavigatorBackButton variant="secondary">
+							Go back
+						</NavigatorBackButton>
+
+						<NavigatorButton
+							variant="primary"
+							path="/child/grandchild"
+						>
+							Go to grand child screen.
+						</NavigatorButton>
+					</HStack>
 				</NavigatorScreen>
 
-				<NavigatorScreen path="/stickies">
-					<Card>
-						<CardHeader style={ getStickyStyles( { zIndex: 2 } ) }>
-							<NavigatorBackButton variant="secondary">
-								Go back
-							</NavigatorBackButton>
-						</CardHeader>
-						<CardBody>
-							<div
-								style={ getStickyStyles( {
-									top: 69,
-									bgColor: 'peachpuff',
-								} ) }
-							>
-								<h2>A wild sticky element appears</h2>
-							</div>
-							<MetaphorIpsum quantity={ 3 } />
-						</CardBody>
-						<CardBody>
-							<div
-								style={ getStickyStyles( {
-									top: 69,
-									bgColor: 'paleturquoise',
-								} ) }
-							>
-								<h2>Another wild sticky element appears</h2>
-							</div>
-							<MetaphorIpsum quantity={ 3 } />
-						</CardBody>
-						<CardFooter
-							style={ getStickyStyles( {
-								bgColor: 'mistyrose',
-							} ) }
-						>
-							<Button variant="primary">Primary noop</Button>
-						</CardFooter>
-					</Card>
+				<NavigatorScreen path="/child/grandchild">
+					<h2>This is the grand child screen.</h2>
+					<NavigatorBackButton variant="secondary">
+						Go back
+					</NavigatorBackButton>
 				</NavigatorScreen>
 
 				<NavigatorScreen path="/product/:id">
-					<ProductDetails />
+					<DynamicScreen />
 				</NavigatorScreen>
 			</>
 		),
 	},
 };
 
-function getStickyStyles( {
-	bottom = 0,
-	bgColor = 'whitesmoke',
-	top = 0,
-	zIndex = 1,
-} ): React.CSSProperties {
-	return {
-		display: 'flex',
-		position: 'sticky',
-		top,
-		bottom,
-		zIndex,
-		backgroundColor: bgColor,
-	};
-}
+function DynamicScreen() {
+	const { params } = useNavigator();
 
-function MetaphorIpsum( { quantity }: { quantity: number } ) {
-	const list = [
-		'A loopy clarinet’s year comes with it the thought that the fenny step-son is an ophthalmologist. The literature would have us believe that a glabrate country is not but a rhythm. A beech is a rub from the right perspective. In ancient times few can name an unglossed walrus that isn’t an unspilt trial.',
-		'Authors often misinterpret the afterthought as a roseless mother-in-law, when in actuality it feels more like an uncapped thunderstorm. In recent years, some posit the tarry bottle to be less than acerb. They were lost without the unkissed timbale that composed their customer. A donna is a springtime breath.',
-		'It’s an undeniable fact, really; their museum was, in this moment, a snotty beef. The swordfishes could be said to resemble prowessed lasagnas. However, the rainier authority comes from a cureless soup. Unfortunately, that is wrong; on the contrary, the cover is a powder.',
-	];
-	quantity = Math.min( list.length, quantity );
 	return (
 		<>
-			{ list.slice( 0, quantity ).map( ( text, key ) => (
-				<p style={ { maxWidth: '20em' } } key={ key }>
-					{ text }
-				</p>
-			) ) }
+			<h2>This is the dynamic screen</h2>
+			<p>
+				This screen can parse params dynamically. The current id is:{ ' ' }
+				{ params.id }
+			</p>
+			<NavigatorBackButton variant="secondary">
+				Go back
+			</NavigatorBackButton>
 		</>
 	);
 }
 
-function ProductDetails() {
-	const { params } = useNavigator();
-
-	return (
-		<Card>
-			<CardBody>
-				<NavigatorBackButton variant="secondary">
-					Go back
-				</NavigatorBackButton>
-				<p>This is the screen for the product with id: { params.id }</p>
-			</CardBody>
-		</Card>
-	);
-}
-
-export const NestedNavigator: StoryObj< typeof NavigatorProvider > = {
+export const WithNestedInitialPath: StoryObj< typeof NavigatorProvider > = {
 	...Default,
 	args: {
 		...Default.args,
-		initialPath: '/child2/grandchild',
-		children: (
-			<>
-				<NavigatorScreen path="/">
-					<Card>
-						<CardBody>
-							<NavigatorButton variant="secondary" path="/child1">
-								Go to first child.
-							</NavigatorButton>
-							<NavigatorButton variant="secondary" path="/child2">
-								Go to second child.
-							</NavigatorButton>
-						</CardBody>
-					</Card>
-				</NavigatorScreen>
-				<NavigatorScreen path="/child1">
-					<Card>
-						<CardBody>
-							This is the first child
-							<NavigatorToParentButton variant="secondary">
-								Go back to parent
-							</NavigatorToParentButton>
-						</CardBody>
-					</Card>
-				</NavigatorScreen>
-				<NavigatorScreen path="/child2">
-					<Card>
-						<CardBody>
-							This is the second child
-							<NavigatorToParentButton variant="secondary">
-								Go back to parent
-							</NavigatorToParentButton>
-							<NavigatorButton
-								variant="secondary"
-								path="/child2/grandchild"
-							>
-								Go to grand child.
-							</NavigatorButton>
-						</CardBody>
-					</Card>
-				</NavigatorScreen>
-				<NavigatorScreen path="/child2/grandchild">
-					<Card>
-						<CardBody>
-							This is the grand child
-							<NavigatorToParentButton variant="secondary">
-								Go back to parent
-							</NavigatorToParentButton>
-						</CardBody>
-					</Card>
-				</NavigatorScreen>
-			</>
-		),
+		initialPath: '/child/grandchild',
 	},
 };
 
@@ -308,6 +144,10 @@ const NavigatorButtonWithSkipFocus = ( {
 	return (
 		<Button
 			{ ...props }
+			style={ {
+				marginInline: '8px',
+				...props.style,
+			} }
 			onClick={ ( e: React.MouseEvent< HTMLButtonElement > ) => {
 				goTo( path, { skipFocus: true } );
 				onClick?.( e );
@@ -323,39 +163,28 @@ export const SkipFocus: StoryObj< typeof NavigatorProvider > = {
 			<>
 				<div
 					style={ {
-						height: 250,
-						border: '1px solid black',
+						height: 150,
+						outline: '1px solid black',
+						outlineOffset: '-1px',
+						marginBlockEnd: '1rem',
 					} }
 				>
-					<NavigatorScreen
-						path="/"
-						style={ {
-							height: '100%',
-						} }
-					>
-						<h1>Home screen</h1>
-						<NavigatorButton variant="secondary" path="/child">
+					<NavigatorScreen path="/">
+						<h2>Home screen</h2>
+						<NavigatorButton variant="primary" path="/child">
 							Go to child screen.
 						</NavigatorButton>
 					</NavigatorScreen>
-					<NavigatorScreen
-						path="/child"
-						style={ {
-							height: '100%',
-						} }
-					>
+
+					<NavigatorScreen path="/child">
 						<h2>Child screen</h2>
-						<NavigatorToParentButton variant="secondary">
-							Go to parent screen.
-						</NavigatorToParentButton>
+						<NavigatorBackButton variant="secondary">
+							Go back to home screen
+						</NavigatorBackButton>
 					</NavigatorScreen>
 				</div>
 
-				<NavigatorButtonWithSkipFocus
-					variant="secondary"
-					path="/child"
-					style={ { margin: '1rem 2rem' } }
-				>
+				<NavigatorButtonWithSkipFocus path="/child">
 					Go to child screen, but keep focus on this button
 				</NavigatorButtonWithSkipFocus>
 			</>

package/src/navigator/test/index.tsx

@@ -642,6 +642,14 @@ describe( 'Navigator', () => {
 		).toHaveAttribute( 'id', INVALID_HTML_ATTRIBUTE.escaped );
 	} );
 
+	it( 'should warn if the `path` prop does not follow the required format', () => {
+		render( <NavigatorScreen path="not-valid">Test</NavigatorScreen> );
+
+		expect( console ).toHaveWarnedWith(
+			'wp.components.NavigatorScreen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.'
+		);
+	} );
+
 	it( 'should match correctly paths with named arguments', async () => {
 		const user = userEvent.setup();
 

package/src/navigator/types.ts

@@ -28,7 +28,9 @@ export type NavigateOptions = {
 	 */
 	skipFocus?: boolean;
 	/**
-	 * Whether the navigation should replace the current location in the stack.
+	 * Note: this option is deprecated and currently doesn't have any effect.
+	 * @deprecated
+	 * @ignore
 	 */
 	replace?: boolean;
 };

package/src/navigator/use-navigator.ts

@@ -12,7 +12,7 @@ import type { Navigator } from './types';
 /**
  * Retrieves a `navigator` instance.
  */
-function useNavigator(): Navigator {
+export function useNavigator(): Navigator {
 	const { location, params, goTo, goBack, goToParent } =
 		useContext( NavigatorContext );
 
@@ -24,5 +24,3 @@ function useNavigator(): Navigator {
 		params,
 	};
 }
-
-export default useNavigator;

package/src/palette-edit/index.tsx

@@ -275,9 +275,9 @@ function PaletteEditListView< T extends Color | Gradient >( {
 	addColorRef,
 }: PaletteEditListViewProps< T > ) {
 	// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
-	const elementsReference = useRef< typeof elements >();
+	const elementsReferenceRef = useRef< typeof elements >();
 	useEffect( () => {
-		elementsReference.current = elements;
+		elementsReferenceRef.current = elements;
 	}, [ elements ] );
 
 	const debounceOnChange = useDebounce( onChange, 100 );

package/src/popover/style.scss

@@ -22,14 +22,15 @@ $shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;
 
 .components-popover__content {
 	background: $white;
-	box-shadow: $shadow-popover-border-default, $elevation-x-small;
+	box-shadow: $shadow-popover-border-default, $elevation-medium;
 	border-radius: $radius-medium;
 	box-sizing: border-box;
 	width: min-content;
 
-	// Alternate treatment for popovers that put them at elevation zero with high contrast.
+	// Alternate treatment for popovers that put them at elevation zero with high contrast and smaller radius.
 	.is-alternate & {
 		box-shadow: $shadow-popover-border-default-alternate;
+		border-radius: $radius-small;
 	}
 
 	// A style that gives the popover no visible ui.

package/src/private-apis.ts

@@ -1,19 +1,9 @@
 /**
  * Internal dependencies
  */
-import { Composite, useCompositeStore } from './composite';
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
 import { createPrivateSlotFill } from './slot-fill';
-import {
-	DropdownMenu as DropdownMenuV2,
-	DropdownMenuGroup as DropdownMenuGroupV2,
-	DropdownMenuItem as DropdownMenuItemV2,
-	DropdownMenuCheckboxItem as DropdownMenuCheckboxItemV2,
-	DropdownMenuRadioItem as DropdownMenuRadioItemV2,
-	DropdownMenuSeparator as DropdownMenuSeparatorV2,
-	DropdownMenuItemLabel as DropdownMenuItemLabelV2,
-	DropdownMenuItemHelpText as DropdownMenuItemHelpTextV2,
-} from './dropdown-menu-v2';
+import { DropdownMenuV2 } from './dropdown-menu-v2';
 import { ComponentsContext } from './context/context-system-provider';
 import Theme from './theme';
 import Tabs from './tabs';
@@ -22,23 +12,11 @@ import { lock } from './lock-unlock';
 
 export const privateApis = {};
 lock( privateApis, {
-	CompositeV2: Composite,
-	CompositeGroupV2: Composite.Group,
-	CompositeItemV2: Composite.Item,
-	CompositeRowV2: Composite.Row,
-	useCompositeStoreV2: useCompositeStore,
 	__experimentalPopoverLegacyPositionToPlacement,
 	createPrivateSlotFill,
 	ComponentsContext,
 	Tabs,
 	Theme,
 	DropdownMenuV2,
-	DropdownMenuGroupV2,
-	DropdownMenuItemV2,
-	DropdownMenuCheckboxItemV2,
-	DropdownMenuRadioItemV2,
-	DropdownMenuSeparatorV2,
-	DropdownMenuItemLabelV2,
-	DropdownMenuItemHelpTextV2,
 	kebabCase,
 } );

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

@@ -8,7 +8,7 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import NumberControl from '../../number-control';
-import { COLORS, rtl } from '../../utils';
+import { COLORS, rtl, CONFIG } from '../../utils';
 import { space } from '../../utils/space';
 
 import type {
@@ -102,7 +102,7 @@ export const Rail = styled.span`
 	position: absolute;
 	margin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;
 	top: 0;
-	border-radius: ${ railHeight }px;
+	border-radius: ${ CONFIG.radiusFull };
 
 	${ railBackgroundColor };
 `;
@@ -119,7 +119,7 @@ const trackBackgroundColor = ( { disabled, trackColor }: TrackProps ) => {
 
 export const Track = styled.span`
 	background-color: currentColor;
-	border-radius: ${ railHeight }px;
+	border-radius: ${ CONFIG.radiusFull };
 	height: ${ railHeight }px;
 	pointer-events: none;
 	display: block;
@@ -203,7 +203,7 @@ export const ThumbWrapper = styled.span`
 	top: 0;
 	user-select: none;
 	width: ${ thumbSize }px;
-	border-radius: 50%;
+	border-radius: ${ CONFIG.radiusRound };
 
 	${ thumbColor };
 	${ rtl( { marginLeft: -10 } ) };
@@ -221,7 +221,7 @@ const thumbFocus = ( { isFocused }: ThumbProps ) => {
 					position: absolute;
 					background-color: ${ COLORS.theme.accent };
 					opacity: 0.4;
-					border-radius: 50%;
+					border-radius: ${ CONFIG.radiusRound };
 					height: ${ thumbSize + 8 }px;
 					width: ${ thumbSize + 8 }px;
 					top: -4px;
@@ -233,12 +233,13 @@ const thumbFocus = ( { isFocused }: ThumbProps ) => {
 
 export const Thumb = styled.span< ThumbProps >`
 	align-items: center;
-	border-radius: 50%;
+	border-radius: ${ CONFIG.radiusRound };
 	height: 100%;
 	outline: 0;
 	position: absolute;
 	user-select: none;
 	width: 100%;
+	box-shadow: ${ CONFIG.elevationXSmall };
 
 	${ thumbColor };
 	${ thumbFocus };
@@ -281,7 +282,7 @@ const tooltipPosition = ( { position }: TooltipProps ) => {
 
 export const Tooltip = styled.span< TooltipProps >`
 	background: rgba( 0, 0, 0, 0.8 );
-	border-radius: 2px;
+	border-radius: ${ CONFIG.radiusSmall };
 	color: white;
 	display: inline-block;
 	font-size: 12px;

package/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.ts

@@ -7,7 +7,7 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { Text } from '../../../text';
-import { font, COLORS } from '../../../utils';
+import { font, COLORS, CONFIG } from '../../../utils';
 
 export const Root = styled.div`
 	bottom: 0;
@@ -31,7 +31,7 @@ export const TooltipWrapper = styled.div`
 
 export const Tooltip = styled.div`
 	background: ${ COLORS.theme.foreground };
-	border-radius: 2px;
+	border-radius: ${ CONFIG.radiusSmall };
 	box-sizing: border-box;
 	font-family: ${ font( 'default.fontFamily' ) };
 	font-size: 12px;

package/src/resizable-box/style.scss

@@ -28,14 +28,14 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	content: "";
 	width: $resize-handler-size;
 	height: $resize-handler-size;
-	border-radius: 50%;
+	border-radius: $radius-round;
 	background: $white;
 	cursor: inherit;
 	position: absolute;
 	top: calc(50% - #{ceil($resize-handler-size * 0.5)});
 	right: calc(50% - #{ceil($resize-handler-size * 0.5)});
 
-	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent, $elevation-x-small;
 	// Only visible in Windows High Contrast mode.
 	outline: 2px solid transparent;
 }
@@ -43,7 +43,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 // This is the "visible" resize handle for side handles - the line
 .components-resizable-box__side-handle::before {
 	display: block;
-	border-radius: 2px;
+	border-radius: $radius-full;
 	content: "";
 	width: 3px;
 	height: 3px;

package/src/select-control/README.md

@@ -103,7 +103,7 @@ Render a user interface to select multiple users from a list.
 ```jsx
 <SelectControl
 	multiple
-	label={ __( 'Select some users:' ) }
+	label={ __( 'User' ) }
 	value={ this.state.users } // e.g: value = [ 'a', 'c' ]
 	onChange={ ( users ) => {
 		this.setState( { users } );
@@ -126,7 +126,7 @@ const [ item, setItem ] = useState( '' );
 // ...
 
 <SelectControl
-    label={ __( 'Select an item:' ) }
+    label={ __( 'My dinosaur' ) }
     value={ item } // e.g: value = 'a'
     onChange={ ( selection ) => { setItem( selection ) } }
     __nextHasNoMarginBottom