Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revert "DropdownMenu V2: add support for rendering in legacy popover slot" #56484

Merged
merged 1 commit into from
Nov 23, 2023
Merged

Revert "DropdownMenu V2: add support for rendering in legacy popover slot" #56484

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@

### Internal

- `DropdownMenuV2`: add support for rendering in legacy popover slot ([#56342](https://github.com/WordPress/gutenberg/pull/56342)).
- `Slot`: add `style` prop to `bubblesVirtually` version ([#56428](https://github.com/WordPress/gutenberg/pull/56428))

## 25.12.0 (2023-11-16)
Expand Down
14 changes: 0 additions & 14 deletions packages/components/src/dropdown-menu-v2-ariakit/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,6 @@ import { SVG, Circle } from '@wordpress/primitives';
import { useContextSystem, contextConnect } from '../context';
import type { WordPressComponentProps } from '../context';
import Icon from '../icon';
import { useSlot } from '../slot-fill';
import {
SLOT_NAME as POPOVER_DEFAULT_SLOT_NAME,
slotNameContext,
} from '../popover';
import type {
DropdownMenuContext as DropdownMenuContextType,
DropdownMenuProps,
Expand Down Expand Up @@ -187,9 +182,6 @@ const UnconnectedDropdownMenu = (
shift,
modal = true,

// Other props
slotName: slotNameProp = POPOVER_DEFAULT_SLOT_NAME,

// From internal components context
variant,

Expand Down Expand Up @@ -278,11 +270,6 @@ const UnconnectedDropdownMenu = (
[ computedDirection ]
);

// Render the portal in the default slot used by the legacy Popover component.
const slotName = useContext( slotNameContext ) || slotNameProp;
const slot = useSlot( slotName );
const portalContainer = slot.ref?.current;

return (
<>
{ /* Menu trigger */ }
Expand Down Expand Up @@ -318,7 +305,6 @@ const UnconnectedDropdownMenu = (
wrapperProps={ wrapperProps }
hideOnEscape={ hideOnEscape }
unmountOnHide
portalElement={ portalContainer }
>
<DropdownMenuContext.Provider value={ contextValue }>
{ children }
Expand Down
66 changes: 0 additions & 66 deletions packages/components/src/dropdown-menu-v2-ariakit/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ import {
import Icon from '../../icon';
import Button from '../../button';
import Modal from '../../modal';
import Popover from '../../popover';
import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
import { ContextSystemProvider } from '../../context';

Expand Down Expand Up @@ -502,68 +501,3 @@ InsideModal.parameters = {
source: { type: 'code' },
},
};

export const WithDefaultSlotFill: StoryFn< typeof DropdownMenu > = (
props
) => (
<SlotFillProvider>
{ /* @ts-expect-error Slot is not currently typed on Popover */ }
<Popover.Slot />
<DropdownMenu { ...props }>
<DropdownMenuItem>Top level item</DropdownMenuItem>
<DropdownMenu
trigger={ <DropdownMenuItem>Open submenu</DropdownMenuItem> }
>
<DropdownMenuItem>Nested item</DropdownMenuItem>
</DropdownMenu>
</DropdownMenu>
</SlotFillProvider>
);
WithDefaultSlotFill.args = {
...Default.args,
};

export const WithNamedSlotFill: StoryFn< typeof DropdownMenu > = ( props ) => (
<SlotFillProvider>
{ /* @ts-expect-error Slot is not currently typed on Popover */ }
<Popover.Slot name="dropdown-menu-slot-with-name" />
<DropdownMenu { ...props }>
<DropdownMenuItem>Top level item</DropdownMenuItem>
<DropdownMenu
trigger={ <DropdownMenuItem>Open submenu</DropdownMenuItem> }
>
<DropdownMenuItem>Nested item</DropdownMenuItem>
</DropdownMenu>
</DropdownMenu>
</SlotFillProvider>
);
WithNamedSlotFill.args = {
...Default.args,
slotName: 'dropdown-menu-slot-with-name',
};

// @ts-expect-error __unstableSlotNameProvider is not currently typed on Popover
const SlotNameProvider = Popover.__unstableSlotNameProvider;
export const WithSlotFillViaContext: StoryFn< typeof DropdownMenu > = (
props
) => (
<SlotFillProvider>
<SlotNameProvider value="dropdown-menu-slot-via-context">
{ /* @ts-expect-error Slot is not currently typed on Popover */ }
<Popover.Slot name="dropdown-menu-slot-via-context" />
<DropdownMenu { ...props }>
<DropdownMenuItem>Top level item</DropdownMenuItem>
<DropdownMenu
trigger={
<DropdownMenuItem>Open submenu</DropdownMenuItem>
}
>
<DropdownMenuItem>Nested item</DropdownMenuItem>
</DropdownMenu>
</DropdownMenu>
</SlotNameProvider>
</SlotFillProvider>
);
WithSlotFillViaContext.args = {
...Default.args,
};
7 changes: 0 additions & 7 deletions packages/components/src/dropdown-menu-v2-ariakit/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,13 +79,6 @@ export interface DropdownMenuProps {
| ( (
event: KeyboardEvent | React.KeyboardEvent< Element >
) => boolean );
/**
* The name of the Slot in which the popover should be rendered. It should
* be also passed to the corresponding `PopoverSlot` component.
*
* @default 'Popover'
*/
slotName?: string;
}

export interface DropdownMenuGroupProps {
Expand Down
52 changes: 0 additions & 52 deletions packages/components/src/dropdown-menu/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ import type { Meta, StoryFn } from '@storybook/react';
import { DropdownMenu } from '..';
import MenuItem from '../../menu-item';
import MenuGroup from '../../menu-group';
import Popover from '../../popover';
import { Provider as SlotFillProvider } from '../../slot-fill';

/**
* WordPress dependencies
Expand Down Expand Up @@ -118,53 +116,3 @@ WithChildren.args = {
</>
),
};

export const WithDefaultSlotFill: StoryFn< typeof DropdownMenu > = (
props
) => (
<SlotFillProvider>
<div style={ { height: 150 } }>
{ /* @ts-expect-error Slot is not currently typed on Popover */ }
<Popover.Slot />
<DropdownMenu { ...props } />
</div>
</SlotFillProvider>
);
WithDefaultSlotFill.args = {
...Default.args,
};

export const WithNamedSlotFill: StoryFn< typeof DropdownMenu > = ( props ) => (
<SlotFillProvider>
<div style={ { height: 150 } }>
{ /* @ts-expect-error Slot is not currently typed on Popover */ }
<Popover.Slot name="dropdown-menu-slot-with-name" />
<DropdownMenu { ...props } />
</div>
</SlotFillProvider>
);
WithNamedSlotFill.args = {
...Default.args,
popoverProps: {
__unstableSlotName: 'dropdown-menu-slot-with-name',
},
};

// @ts-expect-error __unstableSlotNameProvider is not currently typed on Popover
const SlotNameProvider = Popover.__unstableSlotNameProvider;
export const WithSlotFillViaContext: StoryFn< typeof DropdownMenu > = (
props
) => (
<SlotFillProvider>
<SlotNameProvider value="dropdown-menu-slot-via-context">
{ /* @ts-expect-error Slot is not currently typed on Popover */ }
<Popover.Slot name="dropdown-menu-slot-via-context" />
<div style={ { height: 150 } }>
<DropdownMenu { ...props } />
</div>
</SlotNameProvider>
</SlotFillProvider>
);
WithSlotFillViaContext.args = {
...Default.args,
};
2 changes: 1 addition & 1 deletion packages/components/src/popover/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ const ArrowTriangle = () => (
</SVG>
);

export const slotNameContext = createContext< string | undefined >( undefined );
const slotNameContext = createContext< string | undefined >( undefined );

const fallbackContainerClassname = 'components-popover__fallback-container';
const getPopoverFallbackContainer = () => {
Expand Down
Loading