Skip to content

fix label not being passed through for mo.ui.tabs#9187

Merged
Light2Dark merged 1 commit intomainfrom
sham/pass-label-through
Apr 15, 2026
Merged

fix label not being passed through for mo.ui.tabs#9187
Light2Dark merged 1 commit intomainfrom
sham/pass-label-through

Conversation

@Light2Dark
Copy link
Copy Markdown
Collaborator

@Light2Dark Light2Dark commented Apr 14, 2026

📝 Summary

Closes #9186

image

📋 Pre-Review Checklist

  • For large changes, or changes that affect the public API: this change was discussed or approved through an issue, on Discord, or the community discussions (Please provide a link if applicable).
  • Any AI generated code has been reviewed line-by-line by the human PR author, who stands by it.
  • Video or media evidence is provided for any visual changes (optional).

✅ Merge Checklist

  • I have read the contributor guidelines.
  • Documentation has been updated where applicable, including docstrings for API changes.
  • Tests have been added for the changes made.

Copilot AI review requested due to automatic review settings April 14, 2026 10:25
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 14, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
marimo-docs Ready Ready Preview, Comment Apr 14, 2026 10:25am

Request Review

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 TabsPlugin data/validator schema to include label.
  • Render the label via Labeled with top alignment around the tabs UI.

return <TabsContent value={index.toString()}>{child}</TabsContent>;
})}
</Tabs>
<Labeled label={label} align="top">
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
<Labeled label={label} align="top">
<Labeled label={label} align="top" fullWidth={true}>

Copilot uses AI. Check for mistakes.
@mscolnick mscolnick requested a review from kirangadhave April 15, 2026 14:04
Copy link
Copy Markdown
Member

@kirangadhave kirangadhave left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

@Light2Dark
Copy link
Copy Markdown
Collaborator Author

Light2Dark commented Apr 15, 2026

not the biggest fan of the tabs being labeled, it just looks weird. But it's consistent.

The nice thing is you can use markdown in the label, so can do label="## Label" and stuff, but yeah I get it feels weird.

do we know if the label get's passed aria-labelledby?

Under the hood Labeled uses Radix's Label, so yeah I think it does

@Light2Dark Light2Dark merged commit 0a2ccf2 into main Apr 15, 2026
35 of 37 checks passed
@Light2Dark Light2Dark deleted the sham/pass-label-through branch April 15, 2026 17:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

label of mo.ui.tabs is unused

3 participants