feat(icon): align component with fusion DS - FE-7171 by DipperTheDan · Pull Request #7910 · Sage/carbon

DipperTheDan · 2026-04-17T15:43:44Z

Proposed behaviour

Align component with current Fusion DS

Current behaviour

Component is currently not aligned with Fusion DS

Checklist

QA

Tested in provided StackBlitz sandbox/Storybook
Add new Playwright test coverage if required
Carbon implementation matches Design System/designs
UI Tests GitHub check reviewed if required

Additional context

N/A

Testing instructions

N/A

Copilot

Pull request overview

This PR aligns the Icon component (and dependent tooltip usage across the library) with the current Fusion Design System by removing legacy, internally-rendered icon tooltips, introducing token-based icon colours (including an inverse mode), and updating consuming components/tests/docs to use the dedicated Tooltip component.

Changes:

Remove internal tooltip rendering from Icon and deprecate legacy tooltip-related props (now no-op with warnings).
Introduce size/inverse behaviour and update icon colour usage to DS tokens; refresh stories/docs accordingly.
Update components that previously relied on Icon tooltips (e.g. Help, Button, ValidationIcon) to wrap Icon with Tooltip, and prune/update Playwright/unit tests.

Reviewed changes

Copilot reviewed 25 out of 25 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/components/switch/switch.pw.tsx	Removes tooltip placement prop-test coverage for Switch help tooltip.
src/components/select/simple-select/simple-select.pw.tsx	Removes tooltip placement prop-test coverage for SimpleSelect help tooltip.
src/components/select/multi-select/multi-select.pw.tsx	Removes labelHelp special-char tooltip test + tooltip placement prop-test coverage.
src/components/select/filterable-select/filterable-select.pw.tsx	Removes tooltip placement prop-test coverage for FilterableSelect help tooltip.
src/components/portrait/portrait.style.tsx	Adjusts portrait’s styled icon sizing prop to avoid clashing with new Icon `size`.
src/components/portrait/portrait.component.tsx	Updates Portrait to pass the new portrait sizing prop into the styled Icon wrapper.
src/components/numeral-date/numeral-date.pw.tsx	Removes tooltip positioning prop-test coverage and unused `Box` import.
src/components/number/number.pw.tsx	Removes tooltip positioning prop-test coverage and unused `Box` import.
src/components/menu/menu-full-screen/menu-full-screen.test.tsx	Updates close icon colour expectations to DS token.
src/components/icon/icon.test.tsx	Reworks tests to assert tooltip deprecation/no-render + adds inverse/interactive styling coverage.
src/components/icon/icon.style.ts	Adds `inverse` token-based colour support and centralises selector overrides.
src/components/icon/icon.stories.tsx	Updates stories to `size`/`inverse`, removes tooltip-focused stories, and adjusts icon list layout.
src/components/icon/icon.pw.tsx	Removes tooltip-related Playwright coverage and simplifies component import.
src/components/icon/icon.mdx	Updates docs to remove internal tooltip guidance; adds naming conventions and new examples.
src/components/icon/icon.component.tsx	Removes internal tooltip rendering, introduces `size`, and adds deprecation warnings for legacy props.
src/components/icon/component.test-pw.tsx	Removes the tooltip-specific PW component wrapper; simplifies to default export.
src/components/help/help.pw.tsx	Deletes Help Playwright test suite (tooltip behaviour no longer driven by Icon).
src/components/help/help.component.tsx	Replaces Icon-internal tooltip usage with explicit `Tooltip` wrapping.
src/components/duelling-picklist/duelling-picklist.pw.tsx	Removes Picklist tooltip-related Playwright assertions that depended on legacy icon tooltip behaviour.
src/components/checkbox/checkbox.pw.tsx	Removes tooltip positioning Playwright tests while retaining accessibility hover checks where applicable.
src/components/button/button.component.tsx	Wraps button icons with `Tooltip` when `iconTooltipMessage` is provided (instead of Icon tooltips).
src/components/button-minor/button-minor.pw.tsx	Removes tooltip-related Playwright assertions for icon-only-with-tooltip scenarios.
src/internal/validations/validation-icon.component.tsx	Moves validation messaging to explicit `Tooltip` wrapper around `Icon` and respects tooltip context positioning.
src/internal/label/label.test.tsx	Changes validation tooltip placement assertions to spy on ValidationIcon props rather than DOM tooltip placement.
skills/carbon-react/components/icon.md	Updates icon “skills” docs to include new props and deprecation metadata.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

nuria1110

I think the icon-config file may also need to be updated as it seems to be using some had-coded pixel values and old design-tokens. I was also under the assumption that Icons were minimum 20px now, but I could be wrong, I can't seem to find any size information on the DS.

nuria1110 · 2026-04-22T12:34:49Z

-      Array.isArray(tooltipFlipOverrides) &&
-      tooltipFlipOverrides.every((override) =>
-        ICON_TOOLTIP_POSITIONS.includes(override),
+    if (fontSize && !deprecateFontSizeTriggered) {


comment (non-blocking): We have quite a large number of deprecated props here, we could just rely on the IDE and docs to indicate deprecations, it would avoid having to add tests for the console warnings too.

nuria1110 · 2026-04-22T13:00:08Z

+  /**
+   * @deprecated Tooltip support has been removed from `Icon`. Use a dedicated `Tooltip`
+   * component wrapping the `Icon` instead. This prop no longer has any effect.
+   */


nit-pick: I think we could just say we discourage the use of Tooltips in general, since the Tooltip component has been deprecated we would not want to encourage consumers to use it either.

Yeah the advice was if they really need a workaround for tooltips in the meantime, but I'm happy to follow your wording for discouragement.

nuria1110 · 2026-04-22T13:17:27Z

+  extends Omit<
+      StyledIconProps,
+      "type" | "bg" | "bgShape" | "bgSize" | "color" | "disabled" | "fontSize"
+    >,


suggestion: I think we could use Pick<> here instead of Omit<> to avoid props being accidentally added to the component's public interface.

Aware this is probably out of scope for this but just thought it was worth noting that instead of extending StyledIconProps, I think we should keep these interfaces separate and only define props intended for the public interface in IconProps, and StyledIconProps only contain props intended to be passed to the styled component internally.

DipperTheDan · 2026-05-01T12:08:52Z

I've added the margin-bottom to these examples as due to the slight increase in icon size, it looked like a column of 9 dots. To me, this makes it now look like three separate components and gives the focus border room to breathe.

edleeks87 · 2026-05-05T09:25:51Z

-      if (isInTab) {
-        return undefined;
+    const resolvedSize = useMemo((): "small" | "medium" | "large" => {
+      if (fontSize) {


if (fontSize === "extra-large") { Logger.warn( `[Icon] The \`fontSize\` value "extra-large" is no longer supported and has been mapped to "large".`, ); return "large"; } return fontSize ?? size ?? "small";

you could even set a default value on size and remove small here if needed

edleeks87 · 2026-05-07T07:23:49Z

-        tooltipMessage={validationMessage}
-        tooltipPosition={tooltipPosition}
-        tooltipVisible={
+      <Tooltip


comment: Don't mind this approach as Tooltips falling off the legacy validation makes having the legacy validation pointless and we decided to remove piecemeal etc

edleeks87 · 2026-05-07T08:00:31Z

-            tooltipMessage={iconTooltipMessage}
-            tooltipPosition={iconTooltipPosition}
-          />
+          {iconTooltipMessage ? (


comment: I'm less keen on this but I think it's probably fine given it's the legacy button, but let's check with @harpalsingh as we might be able to just drop it as I doubt it's as critical as it is for the legacy validation etc

edleeks87 · 2026-05-07T08:03:22Z

question: are the accessibility tests no longer valid?

Actually they probably are valid. I went a bit wild here and thought we could get rid of a good chunk of Playwright tests. I'll get the accessibility stuff added back in where valid.

edleeks87 · 2026-05-07T08:48:30Z

 });

-test("renders a tooltip, populated with a custom value that is passed to the 'tooltipMessage' prop", async () => {
+test("does not render the `tooltipMessage` prop value", () => {


question: is there any coverage we'd lose without these tooltip test cases? Feels like they're false === false type tests etc so if we can I'd just remove

I'll see if we can, any that we have to keep I'll comment with a coverage required comment.

edleeks87 · 2026-05-07T08:53:10Z

        display: block;
      }

+      // We can remove this fully once we stop supporting tooltips


comment: not sure we'll ever hit this as hasTooltip is never passed. Maybe we set this if tabIndex has been set?

nuria1110 · 2026-05-14T14:20:29Z

-  /** [Legacy] Provides a tooltip message when the icon is hovered. */
-  iconTooltipMessage?: string;
-  /** [Legacy] Provides positioning when the tooltip is displayed. */
-  iconTooltipPosition?: TooltipPositions;


comment: I think we would still need to deprecate these props imo as removing them from the interface would be a breaking change, even if we are removing support.

carbonci · 2026-05-29T14:24:56Z

🎉 This PR is included in version 159.7.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

DipperTheDan self-assigned this Apr 17, 2026

DipperTheDan added Pending Review Pending QA Pending UX QA Squad Front End labels Apr 17, 2026

DipperTheDan force-pushed the FE-7171-icon-ds-audit-updates branch 2 times, most recently from cb4ba03 to 71fedb8 Compare April 17, 2026 15:51

DipperTheDan requested a review from Copilot April 20, 2026 11:24

Copilot started reviewing on behalf of DipperTheDan April 20, 2026 11:25 View session

Copilot AI reviewed Apr 20, 2026

View reviewed changes

Comment thread src/components/icon/icon.style.ts Outdated

Comment thread src/components/icon/icon.style.ts

Comment thread src/components/portrait/portrait.style.tsx Outdated

nuria1110 self-requested a review April 22, 2026 12:16

nuria1110 reviewed Apr 22, 2026

View reviewed changes

DipperTheDan force-pushed the FE-7171-icon-ds-audit-updates branch 2 times, most recently from e171793 to ab7a7fd Compare April 23, 2026 15:38

DipperTheDan marked this pull request as ready for review April 29, 2026 12:42

DipperTheDan requested review from a team as code owners April 29, 2026 12:42

DipperTheDan marked this pull request as draft April 30, 2026 07:28

DipperTheDan marked this pull request as ready for review April 30, 2026 08:36

DipperTheDan marked this pull request as draft April 30, 2026 08:53

DipperTheDan commented May 1, 2026

View reviewed changes

nuria1110 previously approved these changes May 1, 2026

View reviewed changes

edleeks87 reviewed May 7, 2026

View reviewed changes

DipperTheDan dismissed nuria1110’s stale review via 98e14bd May 7, 2026 10:51

DipperTheDan force-pushed the FE-7171-icon-ds-audit-updates branch 4 times, most recently from f9b64c4 to 176aa2d Compare May 13, 2026 14:36

nuria1110 reviewed May 14, 2026

View reviewed changes

nuria1110 previously approved these changes May 14, 2026

View reviewed changes

DipperTheDan force-pushed the FE-7171-icon-ds-audit-updates branch from a7400c5 to 98bb277 Compare May 15, 2026 08:42

edleeks87 previously approved these changes May 15, 2026

View reviewed changes

DipperTheDan marked this pull request as ready for review May 15, 2026 10:47

DipperTheDan dismissed stale reviews from edleeks87 and nuria1110 via e0145d2 May 15, 2026 14:43

harpalsingh added Passed UX QA and removed Pending UX QA labels May 18, 2026

dariusbercea-sage previously approved these changes May 22, 2026

View reviewed changes

dariusbercea-sage added Passed QA and removed Pending QA labels May 22, 2026

DipperTheDan dismissed dariusbercea-sage’s stale review via 85a707d May 29, 2026 09:40

DipperTheDan force-pushed the FE-7171-icon-ds-audit-updates branch from 987e204 to 85a707d Compare May 29, 2026 09:40

DipperTheDan added Passed Review and removed Pending Review labels May 29, 2026

feat(icon): align component with fusion DS

2ec585a

DipperTheDan force-pushed the FE-7171-icon-ds-audit-updates branch from 85a707d to 2ec585a Compare May 29, 2026 09:55

dariusbercea-sage approved these changes May 29, 2026

View reviewed changes

nuria1110 approved these changes May 29, 2026

View reviewed changes

edleeks87 approved these changes May 29, 2026

View reviewed changes

Merge branch 'master' into FE-7171-icon-ds-audit-updates

736de1a

DipperTheDan merged commit 3f9ee4d into master May 29, 2026
54 checks passed

DipperTheDan deleted the FE-7171-icon-ds-audit-updates branch May 29, 2026 14:22

carbonci added the released label May 29, 2026

Conversation

DipperTheDan commented Apr 17, 2026

Proposed behaviour

Current behaviour

Checklist

QA

Additional context

Testing instructions

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nuria1110 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DipperTheDan May 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

edleeks87 May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

carbonci commented May 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

7 participants

DipperTheDan May 1, 2026 •

edited

Loading

edleeks87 May 7, 2026 •

edited

Loading