spark icon indicating copy to clipboard operation
spark copied to clipboard

feat(components): add popups to Tabs

Open Abibibi opened this issue 4 weeks ago • 1 comments

TYPE(COMPONENTS): ADD POPUPS TO TABS

#2873

Description, Motivation and Context

Add popups to tabs

Types of changes

  • [x] ✨ New feature (non-breaking change which adds functionality)

Abibibi avatar Nov 14 '25 11:11 Abibibi

Thank you very much for contributing. This is indeed a missing feature of the component, and the tabs pattern says it should be supported.

Suggestion: More Composable API for Tabs Popups

The current popups prop works, but aligning it with Spark's compound component pattern could improve consistency and developer experience.

Current approach

The popups prop requires mapping tabs twice and separates triggers from their popups:

<Tabs.List popups={tabs.map(tab => <Tabs.Popup ... />)}>
    {tabs.map(tab => <Tabs.Trigger ... />)}
</Tabs.List>

Proposed improvement

Allow Tabs.Popup to be placed directly in Tabs.List alongside Tabs.Trigger, similar to other compound components:

<Tabs.List>
    <Tabs.Trigger value="tab1">Inbox</Tabs.Trigger>
    <Tabs.Popup tabValue="tab1" isTabActive={activeTab === 'tab1'}>
        <Popover>...</Popover>
    </Tabs.Popup>
    <Tabs.Trigger value="tab2">Today</Tabs.Trigger>
    <Tabs.Popup tabValue="tab2" isTabActive={activeTab === 'tab2'}>    <Popover>...</Popover>  </Tabs.Popup></Tabs.List>

Benefits

  • Aligns with Spark's compound component pattern (Dialog, Popover, etc.)
  • Makes the trigger/popup relationship explicit in the markup
  • Reduces duplication by removing the need for double mapping
  • Improves readability and maintainability
  • Keeps the API flexible and composable

Implementation notes

TabsList would filter children to separate Tabs.Trigger and Tabs.Popup, render triggers in RadixTabs.List, and render popups in the absolute container (as currently done). This maintains backward compatibility if we keep the popups prop as a fallback. This would make the API more consistent with Spark's design principles while maintaining the same functionality.

Powerplex avatar Nov 14 '25 16:11 Powerplex