fix label not being passed through for mo.ui.tabs#9187
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Fixes mo.ui.tabs(..., label=...) not rendering its label in the frontend by ensuring the plugin’s validated data includes label and wrapping the rendered tabs with the shared Labeled component.
Changes:
- Extend
TabsPlugindata/validator schema to includelabel. - Render the label via
Labeledwith top alignment around the tabs UI.
| return <TabsContent value={index.toString()}>{child}</TabsContent>; | ||
| })} | ||
| </Tabs> | ||
| <Labeled label={label} align="top"> |
There was a problem hiding this comment.
Wrapping Tabs with Labeled without fullWidth causes the labeled container to render as inline-flex with w-fit (see Labeled), which can shrink the tabs width when a label is present and potentially change layout/overflow behavior compared to the unlabeled case. Consider setting fullWidth={true} (or otherwise ensuring the wrapper is w-full/block) so adding a label doesn’t alter the tabs’ sizing.
| <Labeled label={label} align="top"> | |
| <Labeled label={label} align="top" fullWidth={true}> |
kirangadhave
left a comment
There was a problem hiding this comment.
not the biggest fan of the tabs being labeled, it just looks weird. But it's consistent.
do we know if the label get's passed aria-labelledby?
The nice thing is you can use markdown in the label, so can do
Under the hood Labeled uses Radix's Label, so yeah I think it does |
📝 Summary
Closes #9186
📋 Pre-Review Checklist
✅ Merge Checklist