refactor: [M3-9656] - [Akamai Design System] Label Component

[carrillo-erik]

Description 📝

This PR refactors the Label component to the new Akamai Design System.

Changes 🔄

• Label component supports two size variants:
  1. Typography.Label.Bold.L
  2. Typography.Label.Bold.S
• Labels can display optional icons positioned either to the left or right of the text.
• Large label (L) uses 20x20px icons
• Small label (S) uses 16x16px icons

Preview 📷

Before	After

How to test 🧪

Verification steps

• Play with passing different values for labelTooltipIconPosition and labelTooltipIconSize

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

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

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

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

[linode-gh-bot]

Cloud Manager UI test results

🔺 6 failing tests on test run #3 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
6 Failing	540 Passing	7 Skipped	160m 5s

Details

Failing Tests
	Spec	Test
❌	resize-linode.spec.ts	Cloud Manager Cypress Tests→resize linode » resize linode
❌	edit-user-alert.spec.ts	Cloud Manager Cypress Tests→Integration Tests for Edit Alert » Integration Tests for Edit Alert
❌	object-storage.e2e.spec.ts	Cloud Manager Cypress Tests→object storage end-to-end tests » object storage end-to-end tests
❌	rebuild-linode.spec.ts	Cloud Manager Cypress Tests→rebuild linode » rebuild linode
❌	access-key.e2e.spec.ts	Cloud Manager Cypress Tests→object storage access key end-to-end tests » object storage access key end-to-end tests
❌	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/linodes/resize-linode.spec.ts,cypress/e2e/core/cloudpulse/edit-user-alert.spec.ts,cypress/e2e/core/objectStorage/object-storage.e2e.spec.ts,cypress/e2e/core/linodes/rebuild-linode.spec.ts,cypress/e2e/core/objectStorage/access-key.e2e.spec.ts,cypress/e2e/core/objectStorageMulticluster/object-storage-objects-multicluster.spec.ts"

[davyd-akamai]

@jaalah-akamai Not sure that I can run it locally, but if you could attach screenshots into "Before/After" section to review, that's will be enough.

[carrillo-erik]

@davyd-akamai Here are some screen shots. As this is still in Draft, I will wait for the Before and After images in the PR description until I can open this up for Review.

Current Label and Icon size and placement

Label with Icon on right side

Changes Introduced in this PR

Large Label with Large Icon on right side


Small Label with Small Icon on left side

[davyd-akamai]

Looks great!

[davyd-akamai]

@tzmiivsk-akamai could you take a look as well?

[tzmiivsk-akamai]

Hi! @carrillo-erik @davyd-akamai Based on the screenshots, I can see that the text color differs from the tokens I see in Figma. I'd also like to point out that in Figma, the default colors for the icons on the left and right are different (the info icon always uses a secondary color).
Unfortunately, I can’t be sure about the padding between the icon and the label just from the screenshot, but it looks okay to me. Thanks!