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

[carrillo-erik]

Description 📝

This PR refactors the Label component to the new Akamai Design System. Since we do not have an actual <Label /> component, the work in this PR addresses instances in which we utilize the <TextField /> component and take advantage of the label prop to assign a label for the form control.

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.
• Introduces two (2) new props which will grant the developer more flexibility.
  • labelTooltipIconPosition allows developers to set where the <TooltipIcon /> is positioned relative to its label.
    • right is the default value.
  • labelTooltipIconSize allows developers to set the size of the <TooltipIcon />, it also sets the font size for the label.
    • small is the default value.
• Replaces theme.palette.primary.main with icon token styles for the various states.

Preview 📷

Before	After

How to test 🧪

Verification steps

• Play with passing different values for labelTooltipIconPosition and labelTooltipIconSize
• Verify that elements are aligned properly within surrounding elements.
• There might be some minor spacing inconsistencies, these should be expected given that new sizes are introduced for the icon component and its label.
• Verify that no visual regressions are observed in both light and dark mode styles.

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

[abailly-akamai]

Thanks this seems to work as expected where tested and no regressions spotted on overall styles ✅

Approving pending addressing the token specificity comment

[abailly-akamai]

use icon tokens for the various states

[bill-akamai]

Looks good, Erik - didn't observe any regressions.

[linode-gh-bot]

Cloud Manager UI test results

🎉 605 passing tests on test run #10 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
0 Failing	605 Passing	4 Skipped	114m 38s