@wordpress/components 25.0.0 → 25.1.0

package/src/color-palette/test/__snapshots__/index.tsx.snap

@@ -127,45 +127,52 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
 }
 
 .emotion-2>* {
-  min-width: 0;
+  min-height: 0;
 }
 
-.emotion-5 {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: calc(4px * 0.5);
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.emotion-4>* {
   min-height: 0;
-  min-width: 0;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
 }
 
-.emotion-7 {
+.emotion-6 {
   display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 <div>
@@ -178,30 +185,39 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
       class="components-dropdown"
       tabindex="-1"
     >
-      <button
-        aria-expanded="false"
-        aria-haspopup="true"
-        aria-label="Custom color picker. The currently selected color is called "red" and has a value of "f00"."
-        class="components-flex components-color-palette__custom-color emotion-2 emotion-1"
+      <div
+        class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-wrapper emotion-2 emotion-1"
         data-wp-c16t="true"
-        data-wp-component="Flex"
-        style="background: rgb(255, 0, 0); color: rgb(0, 0, 0);"
+        data-wp-component="VStack"
       >
-        <span
-          class="components-truncate components-flex-item components-color-palette__custom-color-name emotion-1 emotion-5 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="FlexItem"
-        >
-          red
-        </span>
-        <span
-          class="components-flex-item components-color-palette__custom-color-value emotion-7 emotion-1"
+        <button
+          aria-expanded="false"
+          aria-haspopup="true"
+          aria-label="Custom color picker. The currently selected color is called "red" and has a value of "#-f-0-0"."
+          class="components-color-palette__custom-color-button"
+          style="background: rgb(255, 0, 0);"
+        />
+        <div
+          class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-text-wrapper emotion-4 emotion-1"
           data-wp-c16t="true"
-          data-wp-component="FlexItem"
+          data-wp-component="VStack"
         >
-          f00
-        </span>
-      </button>
+          <span
+            class="components-truncate components-color-palette__custom-color-name emotion-6 emotion-1"
+            data-wp-c16t="true"
+            data-wp-component="Truncate"
+          >
+            red
+          </span>
+          <span
+            class="components-truncate components-color-palette__custom-color-value components-color-palette__custom-color-value--is-hex emotion-6 emotion-1"
+            data-wp-c16t="true"
+            data-wp-component="Truncate"
+          >
+            #f00
+          </span>
+        </div>
+      </div>
     </div>
     <div
       class="components-circular-option-picker"

package/src/color-palette/test/index.tsx

@@ -1,9 +1,12 @@
 /**
  * External dependencies
  */
-import { render, screen, within, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -20,6 +23,25 @@ function getWrappingPopoverElement( element: HTMLElement ) {
 	return element.closest( '.components-popover' );
 }
 
+const ControlledColorPalette = ( {
+	onChange,
+}: {
+	onChange?: ( newColor?: string ) => void;
+} ) => {
+	const [ color, setColor ] = useState< string | undefined >( undefined );
+
+	return (
+		<ColorPalette
+			value={ color }
+			colors={ EXAMPLE_COLORS }
+			onChange={ ( newColor ) => {
+				setColor( newColor );
+				onChange?.( newColor );
+			} }
+		/>
+	);
+};
+
 describe( 'ColorPalette', () => {
 	it( 'should render a dynamic toolbar of colors', () => {
 		const onChange = jest.fn();
@@ -142,6 +164,12 @@ describe( 'ColorPalette', () => {
 			/>
 		);
 
+		// Check that custom color popover is not visible by default.
+		expect(
+			screen.queryByLabelText( 'Hex color' )
+		).not.toBeInTheDocument();
+
+		// Click the dropdown button while the dropdown is not expanded.
 		await user.click(
 			screen.getByRole( 'button', {
 				name: /^Custom color picker/,
@@ -149,23 +177,13 @@ describe( 'ColorPalette', () => {
 			} )
 		);
 
+		// Confirm the dropdown is now expanded, and the button is still visible.
 		const dropdownButton = screen.getByRole( 'button', {
 			name: /^Custom color picker/,
 			expanded: true,
 		} );
-
 		expect( dropdownButton ).toBeVisible();
 
-		expect(
-			within( dropdownButton ).getByText( EXAMPLE_COLORS[ 0 ].name )
-		).toBeVisible();
-
-		expect(
-			within( dropdownButton ).getByText(
-				EXAMPLE_COLORS[ 0 ].color.replace( '#', '' )
-			)
-		).toBeVisible();
-
 		// Check that the popover with custom color input has appeared.
 		const dropdownColorInput = screen.getByLabelText( 'Hex color' );
 
@@ -201,4 +219,49 @@ describe( 'ColorPalette', () => {
 			screen.getByRole( 'button', { name: 'Clear' } )
 		).toBeInTheDocument();
 	} );
+
+	it( 'should display the selected color name and value', async () => {
+		const user = userEvent.setup();
+
+		render( <ControlledColorPalette /> );
+
+		expect( screen.getByText( 'No color selected' ) ).toBeVisible();
+
+		// Click the first unpressed button
+		await user.click(
+			screen.getAllByRole( 'button', {
+				name: /^Color:/,
+				pressed: false,
+			} )[ 0 ]
+		);
+
+		// Confirm the correct color name, color value, and button label are used
+		expect( screen.getByText( EXAMPLE_COLORS[ 0 ].name ) ).toBeVisible();
+		expect( screen.getByText( EXAMPLE_COLORS[ 0 ].color ) ).toBeVisible();
+		expect(
+			screen.getByRole( 'button', {
+				name: `Custom color picker. The currently selected color is called "${
+					EXAMPLE_COLORS[ 0 ].name
+				}" and has a value of "${ EXAMPLE_COLORS[ 0 ].color
+					.split( '' )
+					.join( '-' ) }".`,
+				expanded: false,
+			} )
+		).toBeInTheDocument();
+
+		// Clear the color, confirm that the relative values are cleared/updated.
+		await user.click( screen.getByRole( 'button', { name: 'Clear' } ) );
+		expect( screen.getByText( 'No color selected' ) ).toBeVisible();
+		expect(
+			screen.queryByText( EXAMPLE_COLORS[ 0 ].name )
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByText( EXAMPLE_COLORS[ 0 ].color )
+		).not.toBeInTheDocument();
+		expect(
+			screen.getByRole( 'button', {
+				name: /^Custom color picker.$/,
+			} )
+		).toBeInTheDocument();
+	} );
 } );

package/src/dropdown-menu-v2/README.md

@@ -110,7 +110,7 @@ The distance in pixels from the trigger.
 The preferred alignment against the trigger. May change when collisions occur.
 
 - Required: no
-- Default: `"center"`
+- Default: `"start"`
 
 ##### `alignOffset`: `number`
 

package/src/dropdown-menu-v2/index.tsx

@@ -6,7 +6,12 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 /**
  * WordPress dependencies
  */
-import { forwardRef } from '@wordpress/element';
+import {
+	forwardRef,
+	createContext,
+	useContext,
+	useMemo,
+} from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
 import { check, chevronRightSmall, lineSolid } from '@wordpress/icons';
 import { SVG, Circle } from '@wordpress/primitives';
@@ -14,7 +19,10 @@ import { SVG, Circle } from '@wordpress/primitives';
 /**
  * Internal dependencies
  */
+import { useContextSystem, contextConnectWithoutRef } from '../ui/context';
+import { useSlot } from '../slot-fill';
 import Icon from '../icon';
+import { SLOT_NAME as POPOVER_DEFAULT_SLOT_NAME } from '../popover';
 import * as DropdownMenuStyled from './styles';
 import type {
 	DropdownMenuProps,
@@ -27,32 +35,56 @@ import type {
 	DropdownMenuRadioItemProps,
 	DropdownMenuSeparatorProps,
 	DropdownSubMenuTriggerProps,
+	DropdownMenuContext,
+	DropdownMenuPrivateContext as DropdownMenuPrivateContextType,
 } from './types';
 
 // Menu content's side padding + 4px
-const SUB_MENU_OFFSET_SIDE = 12;
+const SUB_MENU_OFFSET_SIDE = 16;
 // Opposite amount of the top padding of the menu item
 const SUB_MENU_OFFSET_ALIGN = -8;
 
-/**
- * `DropdownMenu` displays a menu to the user (such as a set of actions
- * or functions) triggered by a button.
- */
-export const DropdownMenu = ( {
-	// Root props
-	defaultOpen,
-	open,
-	onOpenChange,
-	modal = true,
-	// Content positioning props
-	side = 'bottom',
-	sideOffset = 0,
-	align = 'center',
-	alignOffset = 0,
-	// Render props
-	children,
-	trigger,
-}: DropdownMenuProps ) => {
+const DropdownMenuPrivateContext =
+	createContext< DropdownMenuPrivateContextType >( {
+		variant: undefined,
+		portalContainer: null,
+	} );
+
+const UnconnectedDropdownMenu = ( props: DropdownMenuProps ) => {
+	const {
+		// Root props
+		defaultOpen,
+		open,
+		onOpenChange,
+		modal = true,
+		// Content positioning props
+		side = 'bottom',
+		sideOffset = 0,
+		align = 'center',
+		alignOffset = 0,
+		// Render props
+		children,
+		trigger,
+
+		// From internal components context
+		variant,
+	} = useContextSystem<
+		// Adding `className` to the context type to avoid a TS error
+		DropdownMenuProps & DropdownMenuContext & { className?: string }
+	>( props, 'DropdownMenu' );
+
+	// Render the portal in the default slot used by the legacy Popover component.
+	const slot = useSlot( POPOVER_DEFAULT_SLOT_NAME );
+	const portalContainer = slot.ref?.current;
+
+	const privateContextValue = useMemo(
+		() => ( {
+			variant,
+			portalContainer,
+		} ),
+		[ variant, portalContainer ]
+	);
+
 	return (
 		<DropdownMenuPrimitive.Root
 			defaultOpen={ defaultOpen }
@@ -64,21 +96,35 @@ export const DropdownMenu = ( {
 			<DropdownMenuPrimitive.Trigger asChild>
 				{ trigger }
 			</DropdownMenuPrimitive.Trigger>
-			<DropdownMenuPrimitive.Portal>
+			<DropdownMenuPrimitive.Portal container={ portalContainer }>
 				<DropdownMenuStyled.Content
 					side={ side }
 					align={ align }
 					sideOffset={ sideOffset }
 					alignOffset={ alignOffset }
 					loop={ true }
+					variant={ variant }
 				>
-					{ children }
+					<DropdownMenuPrivateContext.Provider
+						value={ privateContextValue }
+					>
+						{ children }
+					</DropdownMenuPrivateContext.Provider>
 				</DropdownMenuStyled.Content>
 			</DropdownMenuPrimitive.Portal>
 		</DropdownMenuPrimitive.Root>
 	);
 };
 
+/**
+ * `DropdownMenu` displays a menu to the user (such as a set of actions
+ * or functions) triggered by a button.
+ */
+export const DropdownMenu = contextConnectWithoutRef(
+	UnconnectedDropdownMenu,
+	'DropdownMenu'
+);
+
 export const DropdownSubMenuTrigger = ( {
 	prefix,
 	suffix = (
@@ -118,6 +164,10 @@ export const DropdownSubMenu = ( {
 	children,
 	trigger,
 }: DropdownSubMenuProps ) => {
+	const { variant, portalContainer } = useContext(
+		DropdownMenuPrivateContext
+	);
+
 	return (
 		<DropdownMenuPrimitive.Sub
 			defaultOpen={ defaultOpen }
@@ -130,11 +180,12 @@ export const DropdownSubMenu = ( {
 			>
 				{ trigger }
 			</DropdownMenuStyled.SubTrigger>
-			<DropdownMenuPrimitive.Portal>
+			<DropdownMenuPrimitive.Portal container={ portalContainer }>
 				<DropdownMenuStyled.SubContent
 					loop
 					sideOffset={ SUB_MENU_OFFSET_SIDE }
 					alignOffset={ SUB_MENU_OFFSET_ALIGN }
+					variant={ variant }
 				>
 					{ children }
 				</DropdownMenuStyled.SubContent>
@@ -236,6 +287,7 @@ export const DropdownMenuRadioItem = ( {
 	);
 };
 
-export const DropdownMenuSeparator = ( props: DropdownMenuSeparatorProps ) => (
-	<DropdownMenuStyled.Separator { ...props } />
-);
+export const DropdownMenuSeparator = ( props: DropdownMenuSeparatorProps ) => {
+	const { variant } = useContext( DropdownMenuPrivateContext );
+	return <DropdownMenuStyled.Separator { ...props } variant={ variant } />;
+};

package/src/dropdown-menu-v2/stories/index.tsx

@@ -7,6 +7,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
+import { COLORS } from '../../utils';
 import {
 	DropdownMenu,
 	DropdownMenuItem,
@@ -20,6 +21,8 @@ import {
 	DropdownSubMenuTrigger,
 } from '..';
 import Button from '../../button';
+import Popover from '../../popover';
+import { Provider as SlotFillProvider } from '../../slot-fill';
 
 /**
  * WordPress dependencies
@@ -31,6 +34,7 @@ import { menu, wordpress } from '@wordpress/icons';
  * Internal dependencies
  */
 import Icon from '../../icon';
+import { ContextSystemProvider } from '../../ui/context';
 
 const meta: ComponentMeta< typeof DropdownMenu > = {
 	title: 'Components (Experimental)/DropdownMenu v2',
@@ -71,8 +75,8 @@ const meta: ComponentMeta< typeof DropdownMenu > = {
 export default meta;
 
 const ItemHelpText = styled.span`
-	font-size: 10px;
-	color: #777;
+	font-size: 12px;
+	color: ${ COLORS.gray[ '700' ] };
 
 	/* "> * > &" syntax is to target only immediate parent menu item */
 	[data-highlighted] > * > &,
@@ -127,7 +131,11 @@ const RadioItemsGroup = () => {
 };
 
 const Template: ComponentStory< typeof DropdownMenu > = ( props ) => (
-	<DropdownMenu { ...props } />
+	<SlotFillProvider>
+		<DropdownMenu { ...props } />
+		{ /* @ts-expect-error Slot is not currently typed on Popover */ }
+		<Popover.Slot />
+	</SlotFillProvider>
 );
 export const Default = Template.bind( {} );
 Default.args = {
@@ -138,7 +146,7 @@ Default.args = {
 			<DropdownMenuGroup>
 				<DropdownMenuItem>Menu item</DropdownMenuItem>
 				<DropdownMenuItem
-					prefix={ <Icon icon={ wordpress } size={ 18 } /> }
+					prefix={ <Icon icon={ wordpress } size={ 24 } /> }
 				>
 					Menu item with prefix
 				</DropdownMenuItem>
@@ -191,3 +199,19 @@ Default.args = {
 		</>
 	),
 };
+
+const toolbarVariantContextValue = {
+	DropdownMenu: {
+		variant: 'toolbar',
+	},
+};
+export const ToolbarVariant: ComponentStory< typeof DropdownMenu > = (
+	props
+) => (
+	<ContextSystemProvider value={ toolbarVariantContextValue }>
+		<DropdownMenu { ...props } />
+	</ContextSystemProvider>
+);
+ToolbarVariant.args = {
+	...Default.args,
+};

package/src/dropdown-menu-v2/styles.ts

@@ -8,9 +8,10 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 /**
  * Internal dependencies
  */
-import { COLORS, font, rtl } from '../utils';
+import { COLORS, font, rtl, CONFIG } from '../utils';
 import { space } from '../ui/utils/space';
 import Icon from '../icon';
+import type { DropdownMenuContext } from './types';
 
 const ANIMATION_PARAMS = {
 	SLIDE_AMOUNT: '2px',
@@ -18,10 +19,17 @@ const ANIMATION_PARAMS = {
 	EASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )',
 };
 
+const CONTENT_WRAPPER_PADDING = space( 2 );
 const ITEM_PREFIX_WIDTH = space( 7 );
 const ITEM_PADDING_INLINE_START = space( 2 );
 const ITEM_PADDING_INLINE_END = space( 2.5 );
 
+// TODO: should bring this into the config, and make themeable
+const DEFAULT_BORDER_COLOR = COLORS.ui.borderDisabled;
+const TOOLBAR_VARIANT_BORDER_COLOR = COLORS.gray[ '900' ];
+const DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.popoverShadow }`;
+const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VARIANT_BORDER_COLOR }`;
+
 const slideUpAndFade = keyframes( {
 	'0%': {
 		opacity: 0,
@@ -54,15 +62,14 @@ const slideLeftAndFade = keyframes( {
 	'100%': { opacity: 1, transform: 'translateX(0)' },
 } );
 
-const baseContent = css`
+const baseContent = ( variant: DropdownMenuContext[ 'variant' ] ) => css`
 	min-width: 220px;
 	background-color: ${ COLORS.ui.background };
-	border-radius: 6px;
-	padding: ${ space( 2 ) };
-	box-shadow: 0.1px 4px 16.4px -0.5px rgba( 0, 0, 0, 0.1 ),
-		0px 5.5px 7.8px -0.3px rgba( 0, 0, 0, 0.1 ),
-		0px 2.7px 3.8px -0.2px rgba( 0, 0, 0, 0.1 ),
-		0px 0.7px 1px rgba( 0, 0, 0, 0.1 );
+	border-radius: ${ CONFIG.radiusBlockUi };
+	padding: ${ CONTENT_WRAPPER_PADDING };
+	box-shadow: ${ variant === 'toolbar'
+		? TOOLBAR_VARIANT_BOX_SHADOW
+		: DEFAULT_BOX_SHADOW };
 	animation-duration: ${ ANIMATION_PARAMS.DURATION };
 	animation-timing-function: ${ ANIMATION_PARAMS.EASING };
 	will-change: transform, opacity;
@@ -155,7 +162,7 @@ const baseItem = css`
 	font-weight: normal;
 	line-height: 20px;
 	color: ${ COLORS.gray[ 900 ] };
-	border-radius: 3px;
+	border-radius: ${ CONFIG.radiusBlockUi };
 	display: flex;
 	align-items: center;
 	padding: ${ space( 2 ) } ${ ITEM_PADDING_INLINE_END } ${ space( 2 ) }
@@ -174,14 +181,13 @@ const baseItem = css`
 		pointer-events: none;
 	}
 
+	/* Hover and Focus styles */
 	&[data-highlighted] {
-		/*
-			TODO: reconcile with global focus styles
-			(incl high contrast mode fallbacks)
-		 */
+		/* TODO: reconcile with global focus styles */
+		background-color: ${ COLORS.gray[ '100' ] };
 
-		background-color: ${ COLORS.ui.theme };
-		color: white;
+		/* Only visible in Windows High Contrast mode */
+		outline: 2px solid transparent;
 	}
 
 	svg {
@@ -193,11 +199,15 @@ const baseItem = css`
 	}
 `;
 
-export const Content = styled( DropdownMenu.Content )`
-	${ baseContent }
+export const Content = styled( DropdownMenu.Content )<
+	Pick< DropdownMenuContext, 'variant' >
+>`
+	${ ( props ) => baseContent( props.variant ) }
 `;
-export const SubContent = styled( DropdownMenu.SubContent )`
-	${ baseContent }
+export const SubContent = styled( DropdownMenu.SubContent )<
+	Pick< DropdownMenuContext, 'variant' >
+>`
+	${ ( props ) => baseContent( props.variant ) }
 `;
 
 export const Item = styled( DropdownMenu.Item )`
@@ -210,13 +220,11 @@ export const RadioItem = styled( DropdownMenu.RadioItem )`
 	${ baseItem }
 `;
 export const SubTrigger = styled( DropdownMenu.SubTrigger )`
-	&[data-state='open']:not( [data-highlighted] ) {
-		/* TODO: use variable */
-		background-color: rgba( 56, 88, 233, 0.04 );
-		color: ${ COLORS.ui.theme };
-	}
-
 	${ baseItem }
+
+	&[data-state='open'] {
+		background-color: ${ COLORS.gray[ '100' ] };
+	}
 `;
 
 export const Label = styled( DropdownMenu.Label )`
@@ -237,12 +245,17 @@ export const Label = styled( DropdownMenu.Label )`
 	text-transform: uppercase;
 `;
 
-export const Separator = styled( DropdownMenu.Separator )`
-	height: 1px;
+export const Separator = styled( DropdownMenu.Separator )<
+	Pick< DropdownMenuContext, 'variant' >
+>`
+	height: ${ CONFIG.borderWidth };
 	/* TODO: doesn't match border color from variables */
-	background-color: ${ COLORS.ui.borderDisabled };
+	background-color: ${ ( props ) =>
+		props.variant === 'toolbar'
+			? TOOLBAR_VARIANT_BORDER_COLOR
+			: DEFAULT_BORDER_COLOR };
 	/* Negative horizontal margin to make separator go from side to side */
-	margin: ${ space( 2 ) } 0;
+	margin: ${ space( 2 ) } calc( -1 * ${ CONTENT_WRAPPER_PADDING } );
 `;
 
 export const ItemIndicator = styled( DropdownMenu.ItemIndicator )`