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

packages/manager/.changeset/pr-11878-changed-1742325899299.md

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

packages/ui/src/components/Radio/Radio.test.tsx

@@ -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();
   });
 

packages/ui/src/components/Radio/Radio.tsx

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

packages/ui/src/foundations/themes/dark.ts

@@ -14,6 +14,7 @@ import {
   GlobalHeader,
   Interaction,
   NotificationToast,
+  RadioButton,
   Search,
   Select,
   SideNavigation,
@@ -1046,6 +1047,7 @@ export const darkTheme: ThemeOptions = {
     elevation: Elevation,
     footer: GlobalFooter,
     interaction: Interaction,
+    radio: RadioButton,
     search: Search,
     sideNavigation: SideNavigation,
     table: Table,

packages/ui/src/foundations/themes/index.ts

@@ -34,6 +34,7 @@ import type {
   GlobalFooterTypes as GlobalFooterTypesLight,
   GlobalHeaderTypes,
   InteractionTypes as InteractionTypesLight,
+  RadioButtonTypes as RadioButtonTypesLight,
   RadiusTypes,
   SearchTypes as SearchTypesLight,
   SideNavigationTypes as SideNavigationTypesLight,
@@ -53,6 +54,7 @@ import type {
   ElevationTypes as ElevationTypesDark,
   GlobalFooterTypes as GlobalFooterTypesDark,
   InteractionTypes as InteractionTypesDark,
+  RadioButtonTypes as RadioButtonTypesDark,
   SearchTypes as SearchTypesDark,
   SideNavigationTypes as SideNavigationTypesDark,
   TableTypes as TableTypesDark,
@@ -71,6 +73,7 @@ type ContentTypes = MergeTypes<ContentTypesLight, ContentTypesDark>;
 type ElevationTypes = MergeTypes<ElevationTypesLight, ElevationTypesDark>;
 type CalendarTypes = MergeTypes<CalendarTypesLight, CalendarTypesDark>;
 type InteractionTypes = MergeTypes<InteractionTypesLight, InteractionTypesDark>;
+type RadioButtonTypes = MergeTypes<RadioButtonTypesLight, RadioButtonTypesDark>;
 type SideNavigationTypes = MergeTypes<
   SideNavigationTypesLight,
   SideNavigationTypesDark
@@ -157,6 +160,7 @@ declare module '@mui/material/styles/createTheme' {
       footer: FooterTypes;
       header: GlobalHeaderTypes;
       interaction: InteractionTypes;
+      radio: RadioButtonTypes;
       radius: RadiusTypes;
       search: SearchTypes;
       sideNavigation: SideNavigationTypes;
@@ -203,6 +207,7 @@ declare module '@mui/material/styles/createTheme' {
       footer?: FooterTypes;
       header?: GlobalHeaderTypes;
       interaction?: InteractionTypes;
+      radio?: RadioButtonTypes;
       radius?: RadiusTypes;
       search?: SearchTypes;
       sideNavigation?: SideNavigationTypes;

packages/ui/src/foundations/themes/light.ts

@@ -16,6 +16,7 @@ import {
   GlobalHeader,
   Interaction,
   NotificationToast,
+  RadioButton,
   Radius,
   Search,
   Select,
@@ -1130,19 +1131,33 @@ export const lightTheme: ThemeOptions = {
           color: primaryColors.main,
         },
         root: ({ theme }) => ({
-          '& $checked': {
-            color: primaryColors.main,
+          '&:active': {
+            color: theme.tokens.radio.Active.Active.Border,
+          },
+          '&.Mui-checked': {
+            color: theme.tokens.radio.Active.Default.Border,
+            '&:active': {
+              color: theme.tokens.radio.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.radio.Inactive.Disabled.Border,
+            },
+            color: theme.tokens.radio.Active.Disabled.Border,
             pointerEvents: 'none',
           },
           '&.MuiRadio-root': {
@@ -1159,10 +1174,10 @@ export const lightTheme: ThemeOptions = {
             '& .defaultFill': {
               fill: theme.color.white,
             },
-            color: theme.palette.primary.main,
-            fill: theme.color.white,
+            color: theme.tokens.radio.Active.Hover.Border,
+            fill: theme.tokens.radio.Active.Hover.Background,
           },
-          color: Color.Neutrals[40],
+          color: theme.tokens.action.Neutral,
           padding: '10px 10px',
           transition: theme.transitions.create(['color']),
         }),
@@ -1814,6 +1829,7 @@ export const lightTheme: ThemeOptions = {
     footer: GlobalFooter,
     header: GlobalHeader,
     interaction: Interaction,
+    radio: RadioButton,
     radius: Radius,
     search: Search,
     sideNavigation: SideNavigation,