fix(Banner): expose status on root xdsClassName for theme targeting by cixzhang · Pull Request #810 · facebook/astryx

cixzhang · 2026-03-22T03:39:18Z

Summary

Adds status to the root element's xdsClassName('banner', {variant, status}) call. This lets themes override per-status styles (like background color) via component overrides in defineTheme, eliminating the need for the --banner-status-bg CSS custom property escape hatch.

Before

xdsClassName('banner', {variant})
// Generates: class="xds-banner card"

After

xdsClassName('banner', {variant, status})
// Generates: class="xds-banner card info"

Theme usage

// In defineTheme — override all statuses to use card background
components: {
  banner: {
    'status:info': { backgroundColor: 'var(--color-card)' },
    'status:warning': { backgroundColor: 'var(--color-card)' },
    'status:error': { backgroundColor: 'var(--color-card)' },
    'status:success': { backgroundColor: 'var(--color-card)' },
  },
}

Changes

XDSBanner.tsx: xdsClassName('banner', {variant}) → xdsClassName('banner', {variant, status})
Banner.doc.mjs: Added status to xds-banner theming targets (both en and zh sections)

Ref: PR #692 (Meta Theme) identified this gap — the theme needed --banner-status-bg because status wasn't targetable on the root element.

github-actions · 2026-03-22T03:43:51Z

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

Banner · View in Storybook

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	476B	N/A
Lines of Code	N/A	287	-
Complexity	N/A	High (21)	-

Bundle Size Summary

Package	Size (ESM)	Size (CJS)	Gzipped
@xds/core	11.0KB	17.5KB	2.7KB

Accessibility Audit

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

XDSBanner - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 1/15 stories · Learn more
- WCAG: 1.4.3 (Level AA)

_{Generated by PR Enrichment workflow | Storybook | Sandbox | View full report}

Updates based on Cindy's PR review comments: - Use status:* keys for banner per-status overrides (#810) - Use pseudo-class overrides for radio/checkbox/switch hover (#811) instead of component-owned CSS vars (--radio-border, etc.) - Remove all duplicate token declarations - Remove --banner-status-bg var, use status:* class targeting instead - Remove --radio/checkbox/switch CSS vars not present on main - Add fonts field for Figtree font loading via XDSTheme - Add @xds/theme-meta to transpilePackages in next.config.mjs - Add @xds/theme-meta to root build script - Clean up component overrides to be more concise

* feat: add Meta Theme to sandbox (rebased on main) - Add @xds/theme-meta package with updated token names matching main's naming convention - Wire Meta theme into sandbox: providers, layout CSS, SandboxNav selector - Use --xds-card-padding / --xds-section-padding instead of raw --container-padding vars - Meta theme is sandbox-only (not in Storybook) * refactor: align Meta theme with latest theming infrastructure Updates based on Cindy's PR review comments: - Use status:* keys for banner per-status overrides (#810) - Use pseudo-class overrides for radio/checkbox/switch hover (#811) instead of component-owned CSS vars (--radio-border, etc.) - Remove all duplicate token declarations - Remove --banner-status-bg var, use status:* class targeting instead - Remove --radio/checkbox/switch CSS vars not present on main - Add fonts field for Figtree font loading via XDSTheme - Add @xds/theme-meta to transpilePackages in next.config.mjs - Add @xds/theme-meta to root build script - Clean up component overrides to be more concise * refactor: move illustrations from theme package to sandbox app Illustrations are consumed by the sandbox, not by the theme itself. Keeps the theme package lean (tokens + icons + component overrides). Sandbox imports them directly from src/components/MetaIllustrations. * fix: resolve build errors — remove fonts field, move variants into components - fonts field doesn't exist on XDSDefineThemeInput; use url on typography roles instead (body.url) for font loading - variants field was removed from defineTheme; declare custom variants as variant:name keys inside components.button instead

…810)

* feat: add Meta Theme to sandbox (rebased on main) - Add @xds/theme-meta package with updated token names matching main's naming convention - Wire Meta theme into sandbox: providers, layout CSS, SandboxNav selector - Use --xds-card-padding / --xds-section-padding instead of raw --container-padding vars - Meta theme is sandbox-only (not in Storybook) * refactor: align Meta theme with latest theming infrastructure Updates based on Cindy's PR review comments: - Use status:* keys for banner per-status overrides (#810) - Use pseudo-class overrides for radio/checkbox/switch hover (#811) instead of component-owned CSS vars (--radio-border, etc.) - Remove all duplicate token declarations - Remove --banner-status-bg var, use status:* class targeting instead - Remove --radio/checkbox/switch CSS vars not present on main - Add fonts field for Figtree font loading via XDSTheme - Add @xds/theme-meta to transpilePackages in next.config.mjs - Add @xds/theme-meta to root build script - Clean up component overrides to be more concise * refactor: move illustrations from theme package to sandbox app Illustrations are consumed by the sandbox, not by the theme itself. Keeps the theme package lean (tokens + icons + component overrides). Sandbox imports them directly from src/components/MetaIllustrations. * fix: resolve build errors — remove fonts field, move variants into components - fonts field doesn't exist on XDSDefineThemeInput; use url on typography roles instead (body.url) for font loading - variants field was removed from defineTheme; declare custom variants as variant:name keys inside components.button instead

…810)

* feat: add Meta Theme to sandbox (rebased on main) - Add @xds/theme-meta package with updated token names matching main's naming convention - Wire Meta theme into sandbox: providers, layout CSS, SandboxNav selector - Use --xds-card-padding / --xds-section-padding instead of raw --container-padding vars - Meta theme is sandbox-only (not in Storybook) * refactor: align Meta theme with latest theming infrastructure Updates based on Cindy's PR review comments: - Use status:* keys for banner per-status overrides (#810) - Use pseudo-class overrides for radio/checkbox/switch hover (#811) instead of component-owned CSS vars (--radio-border, etc.) - Remove all duplicate token declarations - Remove --banner-status-bg var, use status:* class targeting instead - Remove --radio/checkbox/switch CSS vars not present on main - Add fonts field for Figtree font loading via XDSTheme - Add @xds/theme-meta to transpilePackages in next.config.mjs - Add @xds/theme-meta to root build script - Clean up component overrides to be more concise * refactor: move illustrations from theme package to sandbox app Illustrations are consumed by the sandbox, not by the theme itself. Keeps the theme package lean (tokens + icons + component overrides). Sandbox imports them directly from src/components/MetaIllustrations. * fix: resolve build errors — remove fonts field, move variants into components - fonts field doesn't exist on XDSDefineThemeInput; use url on typography roles instead (body.url) for font loading - variants field was removed from defineTheme; declare custom variants as variant:name keys inside components.button instead

…810)

* feat: add Meta Theme to sandbox (rebased on main) - Add @xds/theme-meta package with updated token names matching main's naming convention - Wire Meta theme into sandbox: providers, layout CSS, SandboxNav selector - Use --xds-card-padding / --xds-section-padding instead of raw --container-padding vars - Meta theme is sandbox-only (not in Storybook) * refactor: align Meta theme with latest theming infrastructure Updates based on Cindy's PR review comments: - Use status:* keys for banner per-status overrides (#810) - Use pseudo-class overrides for radio/checkbox/switch hover (#811) instead of component-owned CSS vars (--radio-border, etc.) - Remove all duplicate token declarations - Remove --banner-status-bg var, use status:* class targeting instead - Remove --radio/checkbox/switch CSS vars not present on main - Add fonts field for Figtree font loading via XDSTheme - Add @xds/theme-meta to transpilePackages in next.config.mjs - Add @xds/theme-meta to root build script - Clean up component overrides to be more concise * refactor: move illustrations from theme package to sandbox app Illustrations are consumed by the sandbox, not by the theme itself. Keeps the theme package lean (tokens + icons + component overrides). Sandbox imports them directly from src/components/MetaIllustrations. * fix: resolve build errors — remove fonts field, move variants into components - fonts field doesn't exist on XDSDefineThemeInput; use url on typography roles instead (body.url) for font loading - variants field was removed from defineTheme; declare custom variants as variant:name keys inside components.button instead

fix(Banner): expose status on root xdsClassName for theme targeting

680ec69

cixzhang requested a review from josephfarina as a code owner March 22, 2026 03:39

cixzhang added theming Theming system, design tokens, createTheme hardening Component hardening and quality sweep labels Mar 22, 2026

meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label Mar 22, 2026

cixzhang mentioned this pull request Mar 22, 2026

feat: add Meta Theme #692

Merged

cixzhang merged commit 8a00bcc into main Mar 22, 2026
13 checks passed

cixzhang mentioned this pull request Mar 22, 2026

feat(Banner): extensible status axis + rename variant to container #814

Merged

cixzhang deleted the navi/fix/banner-status-xdsclassname branch April 9, 2026 14:32

cixzhang added a commit that referenced this pull request Apr 26, 2026

fix(Banner): expose status on root xdsClassName for theme targeting (#…

ca58ceb

…810)

cixzhang added a commit that referenced this pull request Jun 21, 2026

fix(Banner): expose status on root xdsClassName for theme targeting (#…

c99ffa0

…810)

cixzhang added a commit that referenced this pull request Jun 21, 2026

fix(Banner): expose status on root xdsClassName for theme targeting (#…

b85a5d5

…810)

Navigation Menu

Uh oh!

fix(Banner): expose status on root xdsClassName for theme targeting - #810

fix(Banner): expose status on root xdsClassName for theme targeting#810
cixzhang merged 1 commit into
mainfrom
navi/fix/banner-status-xdsclassname

cixzhang commented Mar 22, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 22, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

cixzhang commented Mar 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Before

After

Theme usage

Changes

Uh oh!

github-actions Bot commented Mar 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Analysis Report

📚 Storybook Preview

🧪 Sandbox Preview

Modified Components

Bundle Size Summary

Accessibility Audit

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

cixzhang commented Mar 22, 2026 •

edited

Loading

github-actions Bot commented Mar 22, 2026 •

edited

Loading