Storybook: add global preview styles for @wordpress/ui overlays#77451
Conversation
Inject scoped styles so layered portals (for example Dialog backdrops) behave consistently when viewing @wordpress/ui stories. Extracted from #76837. Made-with: Cursor
Made-with: Cursor
- Add HTML comments for intentional canvas-wide scope, PR provenance, Storybook 10 #storybook-root coupling, and isolation stacking note. - Clarify CHANGELOG: shared monorepo preview iframe, not npm package assets. Made-with: Cursor
Made-with: Cursor
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
mirka
left a comment
mirka
left a comment
There was a problem hiding this comment.
Preexisting, but the z-index: 1 on the "Show code" buttons are quite annoying, aren't they 🙁 I wonder if we should just override those, even if a bit hacky. A quick google search seems to show that it's a common pain point.
I noticed in #77382 that the design of "Show code" buttons has changed in Storybook 10.3. They on longer show above the preview, they show below it. (I don't have a screenshot handy) |
Do you have this in mind? 
|
|
Yes, that 😄 Thanks @jsnajdr |
Related: #76837 (source PR this was extracted from)
What?
Adds global styles in
storybook/preview-head.htmlso the Storybook preview iframe gives portaled@wordpress/uioverlays (dialogs, popovers, etc.) a predictable positioning and stacking context. Records the change under@wordpress/uiInternal changelog as dev-preview documentation.Why?
#76837 introduced the same rules while migrating modals. Splitting them out lets the Storybook canvas fix land without the rest of that PR, and keeps overlay stories closer to the documented “host” setup for
@wordpress/ui.How?
body { position: relative; }— positioning context for portaled layers.#storybook-root { isolation: isolate; }— stacking boundary at the Storybook preview root (SB 10.x convention in this repo).Implementation notes (optional read)
These rules apply to every story in the monorepo Storybook build (see
storybook/main.tsglobs), not onlypackages/ui. That is intentional for a single shared canvas: the same stacking behavior benefits any story using portaled overlays. If we ever need package-specific behavior, a narrower approach (e.g. decorators) would be a follow-up.Testing Instructions
npm install(if needed), then runnpm run storybook:dev(watches packages and starts@wordpress/storybook; seeCONTRIBUTING.mdfor alternatives).Which stories to prioritize: in the Storybook sidebar, open
Design System/Components/Dialog,Design System/Components/AlertDialog, andDesign System/Components/Popover. Then optionallyComponents/Overlays/Modal(or another overlay-heavy story outside@wordpress/ui).Confirm backdrops and layered content stack and cover the canvas as expected (no “bleed” behind the wrong ancestor).
Accessibility smoke: with Dialog or AlertDialog open, tab through focusable controls and confirm focus rings stay visible and usable (no overlay hiding focus unexpectedly).
CI: the repository Storybook build and Smoke Tests workflow covers Storybook build smoke; stacking and focus still need the manual steps above before merge.
Testing Instructions for Keyboard
Use step 3 above in Storybook only (focus visibility inside open overlays). This PR does not change WordPress editor UI or production keyboard behavior.
Screenshots or screencast
@wordpress/uiDialog story showing correct backdrop coverage after mergeUse of AI Tools
Pull request description drafted with assistance from Cursor (GPT-based agent). Commits were authored with Cursor for the extraction; changes were reviewed locally before opening the draft PR.