Skip to content

[docs][popover] Add close button to demos - #6095

Merged
aarongarciah merged 3 commits into
mui:masterfrom
aarongarciah:claude/popover-docs-examples-5c6d8a
Nov 10, 2026
Merged

[docs][popover] Add close button to demos#6095
aarongarciah merged 3 commits into
mui:masterfrom
aarongarciah:claude/popover-docs-examples-5c6d8a

Conversation

@aarongarciah

@aarongarciah aarongarciah commented Oct 23, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Preview: https://deploy-preview-6095--base-ui.netlify.app/react/components/popover

The Popover demos looked like tooltips or toasts and never rendered Popover.Close, so screen reader users could only dismiss them with Escape. Every demo now has an X close button, last in the DOM.

@aarongarciah @claude
[docs][popover] Add a close button and a link to the demos
a59f4c5 
The demos looked like tooltips or toasts and never rendered
Popover.Close, so screen reader users could only dismiss them with
Escape. Every demo now has an X close button, the hero-based demos use
shipping copy with a link, and the animating demo's panels are renamed
to Shipping, Returns and Profile.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@pkg-pr-new

pkg-pr-new Bot commented Oct 23, 2026 •
edited
Loading

Copy link
Copy Markdown

commit: 51784ef

@code-infra-dashboard

code-infra-dashboard Bot commented Oct 23, 2026 •
edited
Loading

Copy link
Copy Markdown

Bundle size

Bundle Parsed size Gzip size
@base-ui/react 0B(0.00%) 0B(0.00%)

Details of bundle changes

Performance

Total duration: 398.48 ms -21.33 ms(-5.1%) | Renders: 75 (+0) | Paint: 734.44 ms -39.22 ms(-5.1%)

Test Duration Renders
Menu open (500 items) 17.86 ms ▼-4.61 ms(-20.5%) 10 (+0)
Combobox open — 500 items 10.29 ms ▼-3.59 ms(-25.8%) 4 (+0)

13 tests within noise — details

Check out the code infra dashboard for more information about this PR.

@aarongarciah aarongarciah added docs Improvements or additions to the documentation. component: popover Changes related to the popover component. labels Oct 23, 2026
@netlify

netlify Bot commented Oct 23, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit 51784ef
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/6af2f188e4b2b51b46a39114
😎 Deploy Preview https://deploy-preview-6095--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@aarongarciah
aarongarciah requested a review from jjenzz October 23, 2026 16:48
@aarongarciah

aarongarciah commented Oct 23, 2026

Copy link
Copy Markdown
Member Author

@jjenzz how does this feel? I tried to keep it simple and avoid a form inside the popover by having a link.

@aarongarciah aarongarciah changed the title [docs][popover] Add a close button and a link to the demos [docs][popover] Add close button to demos Oct 23, 2026
@jjenzz

jjenzz commented Oct 23, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

@aarongarciah much better !! thank you :) this has made me wonder if we should make the button an "info" icon button which is a really common use-case for these?

also, have you tried opening it with a keyboard? it autofocuses the link atm which felt a bit jarring at first (focus outline). I understand why, but dno, should we make it focus the popover on open instead?

@aarongarciah

aarongarciah commented Nov 2, 2026

Copy link
Copy Markdown
Member Author

this has made me wonder if we should make the button an "info" icon button which is a really common use-case for these?

@jjenzz Yes, it's probably better, although it gets closer to a Tooltip demo. I'll apply it.

it autofocuses the link atm which felt a bit jarring at first (focus outline). I understand why, but dno, should we make it focus the popover on open instead?

My reasoning was to keep demos with the default behavior. If I'm not mistaken, overriding it means every demo needs a ref + initialFocus?

@aarongarciah @claude
[docs][popover] Use an info icon trigger in the hero demos
74d4615 
The hero, open-on-hover and detached-trigger demos now open from an
info icon button, a common popover use case. The icon button styles
match the Menu detached-trigger demo.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@aarongarciah
aarongarciah marked this pull request as ready for review November 10, 2026 10:20
@aarongarciah @claude
[docs][popover] Add a close button to the payload snippet
51784ef 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@aarongarciah
aarongarciah merged commit 5aacdbb into mui:master Nov 10, 2026
22 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jjenzz jjenzz jjenzz approved these changes
@atomiks atomiks Awaiting requested review from atomiks atomiks is a code owner
@colmtuite colmtuite Awaiting requested review from colmtuite colmtuite is a code owner
@michaldudak michaldudak Awaiting requested review from michaldudak michaldudak is a code owner
@flaviendelangle flaviendelangle Awaiting requested review from flaviendelangle flaviendelangle is a code owner

Assignees

No one assigned

Labels

component: popover Changes related to the popover component. docs Improvements or additions to the documentation.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@aarongarciah @jjenzz