Skip to content

feat(tooltip): add iconVariant for the default trigger icon - #3238

Open
Niznikr wants to merge 2 commits into
masterfrom
feat/tooltip-icon-variant
Open

Niznikr wants to merge 2 commits into
masterfrom
feat/tooltip-icon-variant

Conversation

@Niznikr

@Niznikr Niznikr commented Oct 12, 2026 •

Copy link
Copy Markdown
Collaborator

Additional description

Adds an iconVariant prop to Tooltip, matching icon-variant on lightning-helptext. It styles the info icon that Tooltip renders when no children are passed. Field-level help (fieldLevelHelpTooltip on Input, Combobox, and so on) uses that trigger too, so it gets the prop. I checked the class logic against the helptext and buttonIcon source in lightning-base-components and the lightning-helptext reference.

iconVariant Default button trigger onClickTrigger link trigger
bare (default) No change No change
inverse slds-button_icon-bare slds-button_icon-inverse (same classes as LWC's bare-inverse) Icon with inverse
warning slds-icon-text-warning on the icon Icon with colorVariant="warning"
error slds-icon-text-error on the icon Icon with colorVariant="error"

For inverse, Tooltip passes iconVariant="bare" along with inverse to Button. With inverse alone, Button drops slds-button_icon from an icon button, and the markup would no longer match LWC's. Button itself is unchanged.

iconVariant has no effect when children are passed; a custom trigger keeps its own styling.

Not a breaking change: the prop is new and optional, and the bare default renders the same markup as before. The only snapshot change is the new story.

Commits: style(tooltip) is formatting only. The pre-commit hook formats whole files, and these three weren't formatted on master. It changes only whitespace and punctuation. The feat commit has the functional diff.

Tests and stories

  • jsdom (tooltip.test.jsx): classes for each variant on the button trigger and the onClickTrigger link trigger, the unchanged default, and custom children being left alone.
  • New IconVariants story shows all four values (inverse on a slds-theme_inverse background), plus an iconVariant Storybook control.
  • Checked with the SLDS 2 Lightning Blue stylesheet in Chromium: the icon fill is rgb(117,117,117) for default, rgb(130,81,1) for warning, rgb(186,5,23) for error, and rgb(255,255,255) for inverse, on both trigger types. This was a one-off script, not a committed test.

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.

Niznikr and others added 2 commits October 12, 2026 16:28
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Adds `iconVariant` (`bare` | `error` | `inverse` | `warning`) to match
`icon-variant` on `lightning-helptext`. It styles the info icon that
Tooltip renders when no children are passed, including field-level help:

- `inverse`: `slds-button_icon-bare slds-button_icon-inverse`, the same
  classes LWC emits for `bare-inverse`
- `warning` / `error`: `slds-icon-text-warning` / `slds-icon-text-error`
  on the icon

Defaults to `bare`, which renders the same markup as before.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

This branch has not been deployed

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant