Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bill-akamai merged 13 commits into from
Mar 24, 2025
Merged

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

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
92df40b
Tokenize radio button styles
bill-akamai Mar 10, 2025
c06ca7f
Add RadioButtonTypes
bill-akamai Mar 10, 2025
f1afdb8
Fix viewbox size
bill-akamai Mar 10, 2025
ac52448
Add dark Radio Button types and object
bill-akamai Mar 12, 2025
917baab
Remove hardcoded color fill for disabled button
bill-akamai Mar 14, 2025
50e483a
Added changeset: Updated Radio Button component to conform to Akamai …
bill-akamai Mar 18, 2025
6241f69
Fix Radio component test to match updated SVG structure
bill-akamai Mar 18, 2025
16d173c
Merge branch 'develop' into M3-9431-akamai-design-system-radio-button…
bill-akamai Mar 20, 2025
224de3c
Use new tokens accessors
bill-akamai Mar 20, 2025
64edd68
Add correct font-size to dark mode
bill-akamai Mar 21, 2025
b43e60b
Create consistent padding b/t light and dark themes
bill-akamai Mar 21, 2025
fe41ec2
Share fontSize prop b/t light and dark
bill-akamai Mar 21, 2025
cdd1766
Merge branch 'develop' into M3-9431-akamai-design-system-radio-button…
bill-akamai Mar 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/manager/.changeset/pr-11878-changed-1742325899299.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@linode/manager": Changed
---

Updated Radio Button component to conform to Akamai Design System specs ([#11878](https://github.com/linode/manager/pull/11878))
7 changes: 2 additions & 5 deletions packages/ui/src/assets/icons/radio.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 2 additions & 15 deletions packages/ui/src/assets/icons/radioRadioed.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 5 additions & 2 deletions packages/ui/src/components/Radio/Radio.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,13 @@ describe('Radio', () => {

const radio = screen.getByRole('radio');
expect(radio).toBeInTheDocument();
const notFilled = screen.container.querySelector('[id="Oval-2"]');

const notFilled = screen.container.querySelector('#radio-inner');
expect(notFilled).not.toBeInTheDocument();

fireEvent.click(radio);
const filled = screen.container.querySelector('[id="Oval-2"]');

const filled = screen.container.querySelector('#radio-inner');
expect(filled).toBeInTheDocument();
});

Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/components/Radio/Radio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,14 @@ export const Radio = (props: RadioProps) => {
<SvgIcon
component={RadioIconRadioed}
fontSize={props.size}
viewBox="0 0 25 25"
viewBox="0 0 20 20"
/>
}
icon={
<SvgIcon
component={RadioIcon}
fontSize={props.size}
viewBox="0 0 25 25"
viewBox="0 0 20 20"
/>
}
data-qa-radio={props.checked || false}
Expand Down
5 changes: 5 additions & 0 deletions packages/ui/src/foundations/themes/dark.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -754,6 +754,11 @@ export const darkTheme: ThemeOptions = {
opacity: 0.15,
},
},
'&.MuiRadio-root': {
'.MuiSvgIcon-fontSizeMedium': {
fontSize: '20px',
},
},
Copy link
Copy Markdown
Contributor

@abailly-akamai abailly-akamai Mar 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)

Copy link
Copy Markdown
Contributor Author

@bill-akamai bill-akamai Mar 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

Copy link
Copy Markdown
Contributor

@abailly-akamai abailly-akamai Mar 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

I still find the theme setup quite mysterious in many aspects

Copy link
Copy Markdown
Contributor Author

@bill-akamai bill-akamai Mar 21, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

'&:hover': {
color: theme.palette.primary.main,
},
Expand Down
29 changes: 22 additions & 7 deletions packages/ui/src/foundations/themes/light.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1124,19 +1124,34 @@ export const lightTheme: ThemeOptions = {
color: primaryColors.main,
},
root: ({ theme }) => ({
'& $checked': {
color: primaryColors.main,
'&:active': {
color: theme.tokens.component.RadioButton.Active.Active.Border,
},
'&.Mui-checked': {
color: theme.tokens.component.RadioButton.Active.Default.Border,
'&:active': {
color: theme.tokens.component.RadioButton.Active.Active.Border,
},
},
'& .defaultFill': {
fill: theme.color.white,
transition: theme.transitions.create(['fill']),
},
'& svg circle': {
fill: Color.Neutrals.White,
},
'&.Mui-disabled': {
'& .defaultFill': {
fill: Color.Neutrals[5],
},
color: `${Color.Neutrals[40]} !important`,
fill: `${Color.Neutrals[5]} !important`,
'&:not(.Mui-checked) svg circle': {
fill: Color.Neutrals[20],
},
'&:not(.Mui-checked)': {
color:
theme.tokens.component.RadioButton.Inactive.Disabled.Border,
},
color: theme.tokens.component.RadioButton.Active.Disabled.Border,
pointerEvents: 'none',
},
'&.MuiRadio-root': {
Expand All @@ -1153,10 +1168,10 @@ export const lightTheme: ThemeOptions = {
'& .defaultFill': {
fill: theme.color.white,
},
color: theme.palette.primary.main,
fill: theme.color.white,
color: theme.tokens.component.RadioButton.Active.Hover.Border,
fill: theme.tokens.component.RadioButton.Active.Hover.Background,
},
color: Color.Neutrals[40],
color: theme.tokens.alias.Action.Neutral,
padding: '10px 10px',
transition: theme.transitions.create(['color']),
}),
Expand Down