Skip to content

feat(badge): add info color variant for SLDS parity - #3229

Merged
interactivellama merged 1 commit into
salesforce:masterfrom
rediga:feature/badge-info-color
Oct 19, 2026
Merged

interactivellama merged 1 commit into
salesforce:masterfrom
rediga:feature/badge-info-color

Conversation

@rediga

@rediga rediga commented Oct 6, 2026 •

Copy link
Copy Markdown
Contributor

Fixes #

Additional description

Adds color="info" to Badge so it matches the SLDS 2 feedback color set (default / inverse / light / info / success / warning / error). This was called out as a React gap vs SLDS 2 in docs/superpowers/specs/2026-08-07-slds2-vs-react-comparison.md.

Markup uses the existing SLDS theme class slds-theme_info, consistent with how Badge already maps success/warning/error.

Also adds the first Vitest suite for Badge (listed under ROADMAP P2 test gaps).


CONTRIBUTOR checklist (do not remove)

Please complete for every pull request.

Green gate — all of these must pass locally (CI runs the same):

  • npm run lint passes with 0 errors (npm run lint:fix to auto-fix). Warnings are the tracked gradual-migration backlog; do not add new errors.
  • npm run typecheck is clean (tsc --noEmit).
  • npm test -- --run passes — this runs both Vitest projects (jsdom unit + real-browser browser) and the story HTML snapshots. If you changed rendered markup on purpose, update snapshots with npm test -- --run -u and review the diff.
  • npm run build succeeds (type-check + Vite library build + .d.ts + entry shims).

Behavior & docs:

  • First-time contributors: sign the CLA (a bot will comment with instructions).
  • Added/updated Vitest + React Testing Library tests for the change (template: components/button/__tests__). New props and bug fixes should get a regression test. Tests that genuinely need a real browser (focus traversal, layout/measurement, canvas) go in a *.browser.test.jsx file (the browser project); everything else is jsdom.
  • Reviewed the component's Storybook stories: npm run storybook → http://localhost:6007/. Confirm the story actually renders and behaves (deprecated Storyshots/Karma are gone; there is no separate browser-tests server).
  • Story/example code uses the component's real prop API (e.g. render-props like onRenderContent / onRenderVisualPicker, icon props, events), not assumptions — a common source of "component looks broken" reports has been stories authored against the wrong API. Cross-check against components/<name>/__examples__.
  • Storybook Accessibility (a11y) panel shows no new violations for the affected stories.
  • If you added or changed a type, remember runtime PropTypes were removed in the TS migration — types are the contract. Ship accurate .d.ts (they're generated by the build); JS consumers rely on them via editor type-acquisition.

REVIEWER checklist (do not remove)

  • CI is green (GitHub Actions CI workflow: lint, typecheck, test, build). Chromatic visual review, if configured, has been checked.
  • Change has adequate test coverage; bug fixes include a regression test.
  • Reviewed the affected Storybook stories and their a11y panels.
  • Rendered markup still conforms to SLDS — check the story HTML snapshot diff (components/__tests__/__snapshots__/story-snapshots.test.jsx.snap).
  • Public API / package surface: if exports changed, the deep-import contract still holds (@salesforce/design-system-react/components/<name> and nested paths resolve for ESM, CJS, and types). Removing/renaming a public component or export is a breaking change → feat!:/BREAKING CHANGE: and a major version bump.

@salesforce-cla

salesforce-cla Bot commented Oct 6, 2026

Copy link
Copy Markdown

Thanks for the contribution! Unfortunately we can't verify the commit author(s): Ediga, Rajesh (AGILISIUM CONSULTING LLC) <r***@A***.com>. One possible solution is to add that email to your GitHub account. Alternatively you can change your commits to another email and force push the change. After getting your commits associated with your GitHub account, sign the Salesforce Inc. Contributor License Agreement and this Pull Request will be revalidated.

Expose color="info" (slds-theme_info) so Badge matches SLDS 2
feedback colors, with Storybook coverage and Vitest tests.
@rediga
rediga force-pushed the feature/badge-info-color branch from 7651913 to 35cb020 Compare October 6, 2026 01:58
@rediga

rediga commented Oct 12, 2026

Copy link
Copy Markdown
Contributor Author

@interactivellama Can you review and approve PR ?

@rediga

rediga commented Oct 14, 2026

Copy link
Copy Markdown
Contributor Author

@interactivellama Gentle remindet , Can you review and approve PR ?

@interactivellama
interactivellama merged commit 5b789f0 into salesforce:master Oct 19, 2026
8 checks passed
@welcome

welcome Bot commented Oct 19, 2026

Copy link
Copy Markdown

Congrats on merging your first pull request to Design System React! 🎉
If you have a moment, please fill out this five question survey, we would appreciate it.
On behalf of Salesforce's customers, partners, product specialists and employees, we would like offer sincere thanks and appreciation for helping make our user experience better. We look forward to working with you more in the future.
This definitely calls for a high five! Alt High Five

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants