fix(CDS-2206): support font prop on Tabs - #825
Open
adrienzheng-cb wants to merge 2 commits into
Open
Conversation
Collaborator
🟡 Heimdall Review Status
🟡
|
| Code Owner | Status | Calculation | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ui-systems-eng-team |
🟡
0/1
|
Denominator calculation
|
adrienzheng-cb
requested review from
cb-ekuersch and
hcopp
and removed request for
hcopp
August 5, 2026 17:41
Contributor
|
@adrienzheng-cb code looks great can you bump version? |
adrienzheng-cb
force-pushed
the
adrien/cds-2206-support-font-prop-on-tabs
branch
from
August 5, 2026 17:53
ad11ee3 to
5b18f0a
Compare
Contributor
The `font` prop (and related typography props) surfaced on `Tabs` via `Box`/`HStack` inheritance but landed on the root container instead of the tab labels, which hardcoded `font="headline"`. Thread `font`, `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, `textTransform`, and label alignment (`textAlign` on web, `align` on mobile) from `Tabs` through to the `DefaultTab` label `Text`, matching how `SegmentedTab` already consumes them. `font` still defaults to `headline`. Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
adrienzheng-cb
force-pushed
the
adrien/cds-2206-support-font-prop-on-tabs
branch
from
August 13, 2026 18:11
5b18f0a to
7e91a85
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed? Why?
Tabsexposed afontprop that had no effect on the tab labels (CDS-2206). This PR makes it work (and forwards related typography props) instead of deprecating it, sinceSegmentedTabalready consumes these and the wiring is straightforward.Now threaded from
Tabs→DefaultTab→ labelTexton both web and mobile:font(still defaults toheadline)fontFamily,fontSize,fontWeight,lineHeighttextTransformtextAlign(web) /align(mobile)This matches the exact set
SegmentedTabsupports, so the two tab renderers behave identically. All props are optional and fall back to thefonttoken, so there is no behavior change unless a consumer opts in. As a side effect,fonton<SegmentedTabs>now works too (previously only settable per-SegmentedTab).Root cause (required for bugfixes)
font(and the other typography props) appeared onTabsPropsonly viaHStack/Boxinheritance, so they were applied to the root tablist container.DefaultTabhardcodedfont=\"headline\"on the labelTextand never read them. The fix destructures these props inTabs, forwards them throughrenderedTabProps, and applies them on theDefaultTablabelText(so they no longer leak onto the container).Note on the web/mobile alignment prop name
Label alignment uses each platform's native
TextAPI:textAlignon web andalignon mobile (mobileTextderives alignment fromalignviauseTextAlignand ignores atextAlignstyle prop). This mirrors the existing CDSTextconvention.UI changes
N/A visually by default (defaults unchanged). Opting into
font/typography props now correctly restyles tab labels.Testing
How has it been tested?
Testing instructions
yarn nx run web:test --testPathPattern=\"tabs/__tests__/Tabs.test\"yarn nx run mobile:test --testPathPattern=\"tabs/__tests__/Tabs.test\"headline; aTabs-levelfontreaches every label; granular props (fontFamily/fontWeight),textTransform, and alignment are forwarded.Change management
type=routine
risk=low
impact=sev5
automerge=false
Made with Cursor