feat(components): add popups to Tabs
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)
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.