Skip to content

feat(Badge): add label prop for API consistency - #709

Merged
cixzhang merged 2 commits into
mainfrom
navi/feat/badge-label-prop
Mar 19, 2026
Merged

feat(Badge): add label prop for API consistency#709
cixzhang merged 2 commits into
mainfrom
navi/feat/badge-label-prop

Conversation

@cixzhang

@cixzhang cixzhang commented Mar 19, 2026

Copy link
Copy Markdown
Contributor

Problem

Vibe testing: LLMs write <XDSBadge label="Active" /> 100% of the time without docs, because Button, Token, and ListItem all use label. With docs they use children correctly — but the API shouldn't fight developer expectations.

Condition children (current) label (hallucinated)
With docs 8/8 ✅ 0/8
Without docs 0/8 8/8 ❌

Fix

Add label prop to XDSBadge. Both work:

<XDSBadge variant="success" label="Active" />    // new — matches Button/Token pattern
<XDSBadge variant="success">Active</XDSBadge>     // still works  for advanced cases

children overrides label when both are provided.

Changes

  • XDSBadge: new label prop, children deprecated for simple text
  • All usages updated across example apps, storybook, doc files
  • Codemod: migrate-badge-children-to-label in v0.0.5 transforms
  • 7/7 Badge tests pass

Closes #706


@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label Mar 19, 2026
@cixzhang
cixzhang force-pushed the navi/feat/badge-label-prop branch from f09e80f to 3e562e1 Compare March 19, 2026 02:59
@github-actions

github-actions Bot commented Mar 19, 2026

Copy link
Copy Markdown
Contributor

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

Modified Components

Badge · View in Storybook
Metric Before After Delta
Bundle Size (ESM) N/A 203B N/A
Lines of Code N/A 132 -
Complexity N/A Low (3) -
Button · View in Storybook
Metric Before After Delta
Bundle Size (ESM) N/A 333B N/A
Lines of Code N/A 292 -
Complexity N/A High (22) -
SideNav · View in Storybook
Metric Before After Delta
Bundle Size (ESM) N/A 1.1KB N/A
Lines of Code N/A 1338 -
Complexity N/A Very High (133) -
Table · View in Storybook
Metric Before After Delta
Bundle Size (ESM) N/A 863B N/A
Lines of Code N/A 847 -
Complexity N/A Very High (54) -

Bundle Size Summary

Package Size (ESM) Size (CJS) Gzipped
@xds/core 10.7KB 17.0KB 2.6KB

Accessibility Audit

Status: 2 accessibility violation(s) found — 2 serious.

XDSSideNav - 1 issue(s)
  • 🟠 serious: Ensure links have discernible text
    • Rule: link-name · Affects 1/8 stories · Learn more
    • WCAG: 2.4.4, 4.1.2 (Level A)
Selection - 1 issue(s)
  • 🟠 serious: Ensure ARIA attributes are used as described in the specification of the element's role
    • Rule: aria-conditional-attr · Affects 1/7 stories · Learn more
    • WCAG: 4.1.2 (Level A)

Generated by PR Enrichment workflow | Storybook | Sandbox | View full report

@cixzhang
cixzhang force-pushed the navi/feat/badge-label-prop branch 3 times, most recently from 9848913 to e055509 Compare March 19, 2026 03:18
cixzhang and others added 2 commits March 19, 2026 18:45
XDSBadge now accepts a `label` prop as the primary way to set text content,
matching the pattern used by XDSButton, XDSToken, and XDSListItem.

Vibe testing showed that without docs, LLMs hallucinate `label` on Badge
100% of the time because surrounding components all use `label`. With docs,
they use `children` correctly — but the API shouldn't fight the ecosystem.

Changes:
- Add `label` prop to XDSBadge (string, optional)
- `children` still works (for advanced cases like mixed icon+text)
- `label` takes precedence when both are provided
- Updated all usages across example apps, storybook, and doc files
- Added codemod: migrate-badge-children-to-label (v0.0.5)

Closes #706

Co-authored-by: Navi <navi@navibot.dev>
Co-authored-by: Navi <navi@navibot.dev>
@cixzhang
cixzhang force-pushed the navi/feat/badge-label-prop branch from 441fc35 to 431ebf9 Compare March 19, 2026 18:45
@cixzhang
cixzhang merged commit 865f2dc into main Mar 19, 2026
11 checks passed
josephfarina added a commit that referenced this pull request Mar 20, 2026
Badge: add label prop (new in #709) to English, Chinese, and dense docs.
Section: add xstyle and padding props (xstyle new in #721) to all translations.
SideNavItem: add collapsible prop (new in #680) with controlled/uncontrolled
mode documentation. Updated nested items example to show collapsible usage.

Found during Night Watch doc review.

Co-authored-by: Navi <navi@multimango.com>
@cixzhang
cixzhang deleted the navi/feat/badge-label-prop branch March 20, 2026 16:58
cixzhang added a commit that referenced this pull request Apr 26, 2026
* feat(Badge): add label prop for API consistency with Button/Token

XDSBadge now accepts a `label` prop as the primary way to set text content,
matching the pattern used by XDSButton, XDSToken, and XDSListItem.

Vibe testing showed that without docs, LLMs hallucinate `label` on Badge
100% of the time because surrounding components all use `label`. With docs,
they use `children` correctly — but the API shouldn't fight the ecosystem.

Changes:
- Add `label` prop to XDSBadge (string, optional)
- `children` still works (for advanced cases like mixed icon+text)
- `label` takes precedence when both are provided
- Updated all usages across example apps, storybook, and doc files
- Added codemod: migrate-badge-children-to-label (v0.0.5)

Closes #706

Co-authored-by: Navi <navi@users.noreply.github.com>

* chore: move codemod from v0.0.5 to v0.0.6

Co-authored-by: Navi <navi@users.noreply.github.com>

---------

Co-authored-by: Navi <navi@users.noreply.github.com>
cixzhang added a commit that referenced this pull request Jun 21, 2026
* feat(Badge): add label prop for API consistency with Button/Token

XDSBadge now accepts a `label` prop as the primary way to set text content,
matching the pattern used by XDSButton, XDSToken, and XDSListItem.

Vibe testing showed that without docs, LLMs hallucinate `label` on Badge
100% of the time because surrounding components all use `label`. With docs,
they use `children` correctly — but the API shouldn't fight the ecosystem.

Changes:
- Add `label` prop to XDSBadge (string, optional)
- `children` still works (for advanced cases like mixed icon+text)
- `label` takes precedence when both are provided
- Updated all usages across example apps, storybook, and doc files
- Added codemod: migrate-badge-children-to-label (v0.0.5)

Closes #706

Co-authored-by: Navi <navi@users.noreply.github.com>

* chore: move codemod from v0.0.5 to v0.0.6

Co-authored-by: Navi <navi@users.noreply.github.com>

---------

Co-authored-by: Navi <navi@users.noreply.github.com>
cixzhang added a commit that referenced this pull request Jun 21, 2026
* feat(Badge): add label prop for API consistency with Button/Token

XDSBadge now accepts a `label` prop as the primary way to set text content,
matching the pattern used by XDSButton, XDSToken, and XDSListItem.

Vibe testing showed that without docs, LLMs hallucinate `label` on Badge
100% of the time because surrounding components all use `label`. With docs,
they use `children` correctly — but the API shouldn't fight the ecosystem.

Changes:
- Add `label` prop to XDSBadge (string, optional)
- `children` still works (for advanced cases like mixed icon+text)
- `label` takes precedence when both are provided
- Updated all usages across example apps, storybook, and doc files
- Added codemod: migrate-badge-children-to-label (v0.0.5)

Closes #706


* chore: move codemod from v0.0.5 to v0.0.6


---------
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Meta Open Source bot.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(Badge): change children to label prop for API consistency

1 participant