@wordpress/ui: Add side sheet variant to Dialog

[jameskoster]

After #75183 lands let's add a side sheet variant. A need for such a variant exists in order to power the recently-updated quick edit experience (see #75173).

I think the spec is relatively straight-forward, but we can discuss details further in this issue.

• Shares the same underlying modal foundation (focus management, overlay, escape handling, props).
• Differs only in placement, motion, and layout constraints.
• Anchored to the right edge of the viewport.
• Full height of viewport.
• Enters by sliding in from the edge.
• Exits by sliding out to the same edge.

The main design decision is whether the sheet should be slightly offset from the viewport edge (like the quick edit panel is currently).

[ciampo]

@jameskoster after discussing it with @mirka , I realised that this could be abstracted into a prop to decide how to "anchor" the dialog:

• no anchor (default): dialog in the middle of the screen
• inline-start / inline-end: side sheet
• block-start / block-end: top/bottom drawer

What do you think?

[jameskoster]

Sounds good!

[vk17-starlord]

This direction makes a lot of sense 👍 The anchor abstraction feels flexible enough to cover side sheets and drawers without introducing additional primitives.

Would it be helpful if I put together a quick prototype of the anchored variant? I’m thinking of exploring it in a similar way to how shadcn’s Sheet (built on top of Radix Dialog) handles side-based placement and motion reusing the dialog foundation while varying only layout and animation.

It could help us validate:

• The right-edge full-height behavior
• The slide-in / slide-out motion

Whether the slight viewport offset feels better baked in or optional

Happy to share something lightweight for discussion before we lock in the API.

[jameskoster]

I think PR's are always welcome! :)

[ciampo]

Hey @vk17-starlord , the idea overall sounds good.

You could take an approach similar to how shadcn/ui's Sheet extends base-ui's Dialog, but use the Dialog from @wordpress/ui instead. Sheet also sounds good as a component name, at least for this exploration.

Please tag @WordPress/gutenberg-components and @WordPress/gutenberg-design in the PR.

[ciampo]

Flagging that the latest release of base UI has a dedicated Drawer/Sheet component (even if still in preview / development). We will be able to use that directly as soon as we update