Use default popover slot instead of exposing a slotName prop, update …

…Storybook
WordPress · May 29, 2023 · 32346be · 32346be
1 parent e492792
commit 32346be
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 22 deletions.
diff --git a/packages/components/src/dropdown-menu-v2/index.tsx b/packages/components/src/dropdown-menu-v2/index.tsx
@@ -16,6 +16,7 @@ import { SVG, Circle } from '@wordpress/primitives';
  */
 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,
@@ -59,10 +60,10 @@ export const DropdownMenu = ( {
 	// Render props
 	children,
 	trigger,
-	// Other props
-	slotName,
 }: DropdownMenuProps ) => {
-	const slot = useSlot( slotName );
+	// 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;
 
 	return (
 		<DropdownMenuPrimitive.Root
@@ -75,7 +76,7 @@ export const DropdownMenu = ( {
 			<DropdownMenuPrimitive.Trigger asChild>
 				{ trigger }
 			</DropdownMenuPrimitive.Trigger>
-			<DropdownMenuPrimitive.Portal container={ slot.ref?.current }>
+			<DropdownMenuPrimitive.Portal container={ portalContainer }>
 				<DropdownMenuStyled.Content
 					side={ side }
 					align={ align }
@@ -84,7 +85,7 @@ export const DropdownMenu = ( {
 					loop={ true }
 				>
 					<DropdownMenuPrivateContext.Provider
-						value={ { portalContainer: slot.ref?.current } }
+						value={ { portalContainer } }
 					>
 						{ children }
 					</DropdownMenuPrivateContext.Provider>

diff --git a/packages/components/src/dropdown-menu-v2/stories/index.tsx b/packages/components/src/dropdown-menu-v2/stories/index.tsx
@@ -34,8 +34,6 @@ import { menu, wordpress } from '@wordpress/icons';
  */
 import Icon from '../../icon';
 
-const SLOT_NAME = 'dropdown-storybook-popover-slot';
-
 const meta: ComponentMeta< typeof DropdownMenu > = {
 	title: 'Components (Experimental)/DropdownMenu v2',
 	component: DropdownMenu,
@@ -132,9 +130,9 @@ const RadioItemsGroup = () => {
 
 const Template: ComponentStory< typeof DropdownMenu > = ( props ) => (
 	<SlotFillProvider>
-		{ /* @ts-expect-error Slot is not currently typed on Popover */ }
-		<Popover.Slot name={ SLOT_NAME } />
 		<DropdownMenu { ...props } />
+		{ /* @ts-expect-error Slot is not currently typed on Popover */ }
+		<Popover.Slot />
 	</SlotFillProvider>
 );
 export const Default = Template.bind( {} );
@@ -199,9 +197,3 @@ Default.args = {
 		</>
 	),
 };
-
-export const WithCustomSlot = Template.bind( {} );
-WithCustomSlot.args = {
-	...Default.args,
-	slotName: SLOT_NAME,
-};
diff --git a/packages/components/src/dropdown-menu-v2/types.ts b/packages/components/src/dropdown-menu-v2/types.ts
@@ -61,12 +61,6 @@ export type DropdownMenuProps = {
 	 * The contents of the dropdown
 	 */
 	children: React.ReactNode;
-	/**
-	 * The name of the slot where the dropdown content should render.
-	 *
-	 * @default TODO
-	 */
-	slotName?: string;
 };
 
 export type DropdownSubMenuTriggerProps = {

diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
@@ -74,7 +74,7 @@ import { overlayMiddlewares } from './overlay-middlewares';
  *
  * @type {string}
  */
-const SLOT_NAME = 'Popover';
+export const SLOT_NAME = 'Popover';
 
 // An SVG displaying a triangle facing down, filled with a solid
 // color and bordered in such a way to create an arrow-like effect.