change: [M3-9778] - TooltipIcon modifications

[abailly-akamai]

Description 📝

Apply Tooltip Icons guidelines Replace current Tooltip icon types: , combine 'help' & 'info' to ' info', and 'error' & 'warning' to 'warning'

Apply Tooltip icon style to other icons without labels or with tooltips/popovers
Replace 'error' (warning) icon with ADS warning icon

Changes 🔄

• Get rid of the old info icons (question mark) and update them to the new CDS version (info icon)
  • help => info
• Get rid of error and replace with warning
• Get rig of 'success' (no instance)

Preview 📷

How to test 🧪

Verification steps

In both light and dark modes, verify

• Behavior and styling of info icons
• Behavior and styling of Buttons with info icons
• Behavior and styling of Cloud Icons in images landing (use MSW legacy)

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review ❔ Our contribution guidelines 🤏 Splitting feature into small PRs ➕ Adding a changeset 🧪 Providing/improving test coverage 🔐 Removing all sensitive information from the code and PR description 🚩 Using a feature flag to protect the release 👣 Providing comprehensive reproduction steps 📑 Providing or updating our documentation 🕛 Scheduling a pair reviewing session 📱 Providing mobile support ♿ Providing accessibility support

• [x] I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

• [x] All unit tests are passing
• [x] TypeScript compilation succeeded without errors
• [x] Code passes all linting rules

[hana-akamai]

I think we should keep some kind of red tooltip error icon instead of just replacing across the board with a warning icon as there are semantic differences

For example, the payment method drawer use case is to indicate that the action failed or can't be taken instead of warning the user about an action. What are your thoughts?

[abailly-akamai]

@hana-akamai those were the CDS recommendations.

In general to denote an action failing we should use a notice.

[tzmiivsk-akamai]

The default info icon color looks different (should be icon/secondary) and the color is not changing on hover

[tzmiivsk-akamai]

I think we should keep some kind of red tooltip error icon instead of just replacing across the board with a warning icon as there are semantic differences

For example, the payment method drawer use case is to indicate that the action failed or can't be taken instead of warning the user about an action. What are your thoughts?

We discussed that currently we don’t have any error cases (i.e. errors that would prevent saving changes, etc.), only warnings with tooltips - and that's why we decided to change it to the warning CDS icon. Is that still the case?

[hana-akamai]

@tzmiivsk-akamai I think the only case where we use the error Tooltip icon was in the Add Payment Drawer (seen in the description screenshot). Since it's a one-off we can disregard my comment

[tzmiivsk-akamai]

It would be great to also fix the spacing around the info icon across different elements – like table cells and checkboxes (based on what I noticed – adding a screenshot).

I also spotted a wrong style for the disabled button in IAM.

Other than that, everything looks good!

[abailly-akamai]

@harsh-akamai please review the assigned PR, thanks

[jaalah-akamai]

I'm going to give this a quick check this morning due to the rebase 👀

[abailly-akamai]

@jaalah-akamai but are you ;)

[linode-gh-bot]

Cloud Manager UI test results

:small_red_triangle: 2 failing tests on test run #25 ↗︎

:x: Failing	:white_check_mark: Passing	:arrow_right_hook: Skipped	:clock1: Duration
2 Failing	668 Passing	4 Skipped	125m 46s

Details

Failing Tests
	Spec	Test
:x:	advanced-configuration.spec.ts	Cloud Manager Cypress Tests→Update database clusters→Advanced configurations for a g6-nanode-1 MySQL v8.x 1-node cluster » Update database clusters→Advanced configurations for a g6-nanode-1 MySQL v8.x 1-node cluster
:x:	object-storage-objects-multicluster.spec.ts	Cloud Manager Cypress Tests→Object Storage Multicluster objects » Object Storage Multicluster objects

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/databases/advanced-configuration.spec.ts,cypress/e2e/core/objectStorageMulticluster/object-storage-objects-multicluster.spec.ts"