feat(popover): add Popover component#1748
Draft
te6-in wants to merge 8 commits into
Draft
Conversation
|
Contributor
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
Alpha Preview (Stackflow SPA)
|
Contributor
Alpha Preview (Storybook)
|
Contributor
Alpha Preview (Docs)
|
te6-in
changed the title
Floating container Popover anchored to a trigger, with Header/Body/Footer modeled on Side Panel and Menu-style safe-area/viewport clamping. Built on the existing @seed-design/react-popover headless. - rootage: popover + popover-close-button component specs (no size variant; content min-width 320, max-width 480, max-height 600) - css/qvism-preset: popover slot recipe; content shrinks to the available viewport height, body owns the scroll divider + fog - react-floating: emit --seed-popover-available-height and add an opt-in safeAreaAware collision padding (ported from useMenu); off by default so Tooltip/HelpBubble placement is unchanged - react: styled Popover compound (Root/Trigger/Anchor/Positioner/Content/ Header/Title/Description/Body/Footer/CloseButton, Arrow placeholder) - docs: registry snippet, examples, mdx; Storybook story; stackflow-spa ActivityPopover Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Add headless PopoverContent/Title/Description parts - Move role="dialog" from the positioner to the content box - Trap and loop focus within the content via Radix FocusScope (Radix/Ark parity), focusing the content container on open and returning focus to the trigger on close; keeps non-modal (no background inert/scroll lock) - Wire presence-aware aria-labelledby/describedby in the hook (useField pattern) so a title-less popover never emits a dangling reference - Add stackflow-spa a11y playground (ActivityPopoverPlayground) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
On WebKit before the guaranteed-invalid fix (Safari <16.4), a custom property chain resolving to guaranteed-invalid inherits the ancestor value instead of resetting (https://webkit.org/b/241433). Same fix as d71f402 applied to side-panel and others; the popover branch predates that sweep. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Wire the width StyleProp on the content slot (auto default through the box responsive vars, still capped by maxWidth/available-width), and drop height/minHeight/maxHeight from PopoverContentProps — they were never read by the recipe, so they type-checked but did nothing. Content height stays governed by the body plus the design cap. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The body is a scroll container, so browsers can give it keyboard focus when it overflows. Same fix as 7127a1f applied to SidePanelBody; the popover branch predates it. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Merge symmetric paddingLeft/paddingRight pairs in the header, body, and footer slots into paddingInline, following the ceec001 sweep the popover branch predates. Asymmetric and single-side declarations stay physical per the same convention. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.