[Feature]: Popover component

[cschmatzler]

Prerequisites

• I have searched existing issues to ensure this feature hasn't been requested already
• I have checked the documentation to confirm this feature doesn't exist
• This feature aligns with the project's goals and would benefit the community

Feature type

New Component

Component name

Popover

Feature description

This, but styled in a way that fits the rest of the design system: https://react-spectrum.adobe.com/react-aria/Popover.html

Problem statement

Building a data filter that needs a popover triggered by a button.

Proposed solution

No response

Proposed API design

<Popover
    open={open}
    onOpenChange={async value => {
      setOpen(value);
      if (!value) setTimeout(() => setProperty(undefined), 100);
    }}
  >
    <PopoverTrigger asChild>
      <Button variant="outline" className={cx("h-7", hasFilters && "w-fit !px-2")}>
        <FunnelIcon className="size-4" />
        {!hasFilters && <span>{t("Filter")}</span>}
      </Button>
    </PopoverTrigger>
    <PopoverContent align="start" side="bottom" className="w-fit p-0">
      {content}
    </PopoverContent>
  </Popover>

Use cases

No response

Alternatives considered

No response

Examples from other libraries

https://ui.shadcn.com/docs/components/popover

Priority level

Medium - Would improve my workflow

Requirements

• Must be accessible (WCAG 2.1 AA compliant)
• Must be responsive (mobile-first)
• Must follow existing design patterns
• Must be TypeScript compatible
• Must work with keyboard navigation
• Must work with screen readers
• Must have comprehensive documentation
• Must include Storybook stories

Contribution

• I'm willing to implement this feature
• I'm willing to help with design/specification
• I'm willing to help with testing
• I'm willing to help with documentation

[deebov]

Hey @cschmatzler, thanks for the idea. We already have a popover component as part of the select component. Does this answer your question?

[cschmatzler]

Ah, great! I'd definitely surface it in the documentation as its own component, since I've been searching for it outside of Select.
Thanks for the quick reply!

[deebov]

Thanks for the suggestion! I'll look if we can make a generic popover component that can be re-used in other places.