Repository navigation
feat(badge): add info color variant for SLDS parity - #3229
Conversation
|
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.
7651913 to
35cb020
Compare
|
@interactivellama Can you review and approve PR ? |
|
@interactivellama Gentle remindet , Can you review and approve PR ? |
|
Congrats on merging your first pull request to Design System React! 🎉 |

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 indocs/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 lintpasses with 0 errors (npm run lint:fixto auto-fix). Warnings are the tracked gradual-migration backlog; do not add new errors.npm run typecheckis clean (tsc --noEmit).npm test -- --runpasses — this runs both Vitest projects (jsdomunit+ real-browserbrowser) and the story HTML snapshots. If you changed rendered markup on purpose, update snapshots withnpm test -- --run -uand review the diff.npm run buildsucceeds (type-check + Vite library build +.d.ts+ entry shims).Behavior & docs:
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.jsxfile (thebrowserproject); everything else is jsdom.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).onRenderContent/onRenderVisualPicker,iconprops,events), not assumptions — a common source of "component looks broken" reports has been stories authored against the wrong API. Cross-check againstcomponents/<name>/__examples__..d.ts(they're generated by the build); JS consumers rely on them via editor type-acquisition.REVIEWER checklist (do not remove)
CIworkflow: lint, typecheck, test, build). Chromatic visual review, if configured, has been checked.components/__tests__/__snapshots__/story-snapshots.test.jsx.snap).@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.