refactor: [M3-9431] [Akamai Design System] Radio Button Component

[bill-akamai]

Description 📝

This PR updates the Radio Button component to conform to the Akamai Design System specifications.

Changes 🔄

• Implemented Akamai Design System radio button theme tokens
• Updated colors, spacing, SVGs, etc to match design specs

Preview 📷

Before	After

Verification steps

• Open Cloud Manager, navigate to different views
• Confirm radio button design matches ADS specs (check different states)
• Also check if Dark Mode theme looks correct

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

[bill-akamai]

It can be a little confusing, but Border is the correct property to use here for color (confirmed with Design). Some aspects of the radio button needed additional handling with Color.Neutrals.

[github-actions]

Coverage Report: ✅
Base Coverage: 79.96%
Current Coverage: 79.96%

[abailly-akamai]

@bill-akamai I believe those e2e failures are relevant to these changes. You may have to adjust a few things in those tests (or the ui util) - please let me know if you need help with this!

edit: maybe only some of them - I see some firewall tests failing on other PRs

[abailly-akamai]

@bill-akamai you also need to address the changes made to our tokens by rebasing/merging this PR with develop

[bill-akamai]

@bill-akamai I believe those e2e failures are relevant to these changes. You may have to adjust a few things in those tests (or the ui util) - please let me know if you need help with this!

edit: maybe only some of them - I see some firewall tests failing on other PRs

@abailly-akamai I was able to get these to pass (locally) by adding a longer timeout to the Boots a config test in linode-config.spec.ts:

    it('Boots a config', () => {
      cy.defer(
        () =>
          createLinodeAndGetConfig(
            { booted: true },
            { securityMethod: 'vlan_no_internet', waitForBoot: true },
          ),
          {
            label: 'Creating and booting test Linode',
            timeout: 120000 
          }
      )

Should we make this change in a separate PR?

[abailly-akamai]

@bill-akamai if that's unrelated to your PR then we should probably let @jdamore-linode handle it 👍

Will review!

[abailly-akamai]

Great work! clean code and accurate usage of tokens. 🥇

Confirmed styles and behavior of Radios in app and storybook, both light and dark themes. ✅

[hana-akamai]

It seems like the radio icons are slightly larger in dark mode (also existing issue in dev) - not sure if this is intentional 🤔

Preview

Screen.Recording.2025-03-21.at.2.32.27.PM.mov

[bill-akamai]

It seems like the radio icons are slightly larger in dark mode (also existing issue in dev) - not sure if this is intentional 🤔

Preview
Screen.Recording.2025-03-21.at.2.32.27.PM.mov

Great pick up @hana-akamai - just addressed this.

[hana-akamai]

Input size is also slightly different in dark mode but looks good otherwise!

Preview

Screen.Recording.2025-03-21.at.3.39.31.PM.mov

[abailly-akamai]

I think setting the size in light.ts will apply to both

dark.ts inherits light.ts defaults via deep merge (dark.ts is basically an override)

[bill-akamai]

@hana-akamai input size updated, thanks!
@abailly-akamai something might be incorrect in our implementation here. I had to explicitly add the adjustments in dark.ts to see that change take effect. The deep merge doesn't seem to be carrying over all style properties as expected. I'll look to see why.

[abailly-akamai]

Ah I see. Maybe something has changed recently. perhaps @jaalah-akamai has input?

I still find the theme setup quite mysterious in many aspects

[bill-akamai]

@abailly-akamai I'm a bit new to this setup myself but I've found that the theme inheritance works differently based on how styles are defined. Static styles defined as objects (like MuiSvgIcon) get inherited between themes, but functional styles (like the MuiRadio styles that use ({ theme }) => ({})) don't do this inheritance. So no prob when light.ts defines the shared style as the static object but the functional styles would need a shared constant or utility function to avoid duplication if I'm understanding things correctly.

[linode-gh-bot]

Cloud Manager UI test results

🔺 1 failing test on test run #9 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
1 Failing	539 Passing	3 Skipped	132m 51s

Details

Failing Tests
	Spec	Test
❌	linode-config.spec.ts	End-to-End » Clones a config

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/linodes/linode-config.spec.ts"