[zigzagdev]

Fixes #

Additional description

Symptom

Badge applies style to the icon container instead of the badge itself. Without icon, style is silently ignored, so there is no way to style the badge element through its own style prop.

Root cause

style was passed to the icon container span in components/badge/index.tsx.
The prop is documented as custom styles for the badge, and the class component before the rewrite described it as "Custom styles to be passed to the component", but it had the same bug. So this is not a regression from #3195.
This is also listed in the v11 prop API freeze review in ROADMAP.md ("style currently lands on the icon span, not the root").

Change

• style now goes on the root badge span.
• New styleIcon prop styles the icon container, so callers that relied on the old behavior have a direct replacement.

Breaking change

style now styles the badge element instead of the icon container. To keep styling the icon container, pass those styles as styleIcon. The fix commit has a BREAKING CHANGE footer.
The ROADMAP prefers className* for parts other than the root. If you would rather not add a new style* prop, I can switch styleIcon to classNameIcon or drop it.

Tests

• Added three cases to badge.test.jsx, next to the tests from feat(badge): add info color variant for SLDS parity #3229.

  • style lands on the badge when there is no icon.
  • style lands on the badge and not on the icon container when there is an icon.
  • styleIcon lands on the icon container.

• No story uses style, so there is no snapshot change.

---

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.