From 2f8d1ad661490b5635340ffea9d8d8cab51cb134 Mon Sep 17 00:00:00 2001 From: Bill Coloe Date: Tue, 27 May 2025 15:47:08 -0500 Subject: [PATCH 01/10] Replace radio.svg, Clean token styles --- packages/ui/src/assets/icons/radio.svg | 5 +- packages/ui/src/foundations/themes/dark.ts | 19 ------- packages/ui/src/foundations/themes/light.ts | 56 +++++++-------------- 3 files changed, 22 insertions(+), 58 deletions(-) diff --git a/packages/ui/src/assets/icons/radio.svg b/packages/ui/src/assets/icons/radio.svg index ee0ce1fcfcb..edd7538459c 100644 --- a/packages/ui/src/assets/icons/radio.svg +++ b/packages/ui/src/assets/icons/radio.svg @@ -1,3 +1,4 @@ - - + + + \ No newline at end of file diff --git a/packages/ui/src/foundations/themes/dark.ts b/packages/ui/src/foundations/themes/dark.ts index 38bce07501a..27989f0def3 100644 --- a/packages/ui/src/foundations/themes/dark.ts +++ b/packages/ui/src/foundations/themes/dark.ts @@ -773,25 +773,6 @@ export const darkTheme: ThemeOptions = { }, color: primaryColors.main, }, - root: ({ theme }) => ({ - '& .defaultFill': { - '& circle': { - color: Color.Neutrals[40], - }, - color: Color.Neutrals[80], - fill: Color.Neutrals[80], - }, - '&.Mui-disabled': { - '& .defaultFill': { - color: Color.Neutrals[40], - opacity: 0.15, - }, - }, - '&:hover': { - color: theme.palette.primary.main, - }, - padding: '10px 10px', - }), }, }, MuiSelect: { diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts index e7b2e717c56..e8c64d3073c 100644 --- a/packages/ui/src/foundations/themes/light.ts +++ b/packages/ui/src/foundations/themes/light.ts @@ -1191,51 +1191,33 @@ export const lightTheme: ThemeOptions = { color: primaryColors.main, }, root: ({ theme }) => ({ - '&: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, - }, + '& svg circle': { + fill: theme.tokens.component.RadioButton.Inactive.Default + .Background, + stroke: theme.tokens.component.RadioButton.Inactive.Default.Border, }, - '& .defaultFill': { - fill: theme.color.white, - transition: theme.transitions.create(['fill']), + '&.Mui-checked svg circle': { + fill: theme.tokens.component.RadioButton.Active.Default.Background, + stroke: theme.tokens.component.RadioButton.Active.Default.Border, }, - '& svg circle': { - fill: Color.Neutrals.White, + '&.Mui-disabled svg circle': { + fill: theme.tokens.component.RadioButton.Inactive.Disabled + .Background, + stroke: theme.tokens.component.RadioButton.Inactive.Disabled.Border, }, - '&.Mui-disabled': { - '& .defaultFill': { - fill: Color.Neutrals[5], - }, - '&: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', + '&.Mui-checked.Mui-disabled svg circle': { + fill: theme.tokens.component.RadioButton.Active.Disabled.Background, + stroke: theme.tokens.component.RadioButton.Active.Disabled.Border, }, - '&.MuiRadio-sizeSmall': { - '.MuiSvgIcon-fontSizeSmall': { - fontSize: '16px', - }, + '&:hover:not(.Mui-disabled) svg circle': { + fill: theme.tokens.component.RadioButton.Inactive.Hover.Background, + stroke: theme.tokens.component.RadioButton.Inactive.Hover.Border, }, - '&:hover': { - '& .defaultFill': { - fill: theme.color.white, - }, - color: theme.tokens.component.RadioButton.Active.Hover.Border, + '&.Mui-checked:hover:not(.Mui-disabled) svg circle': { fill: theme.tokens.component.RadioButton.Active.Hover.Background, + stroke: theme.tokens.component.RadioButton.Active.Hover.Border, }, - color: theme.tokens.alias.Action.Neutral, padding: '10px 10px', - transition: theme.transitions.create(['color']), }), }, }, From 9e2f092ec3476e5e3929a8d38702de43e329db3a Mon Sep 17 00:00:00 2001 From: Bill Coloe Date: Tue, 27 May 2025 16:32:36 -0500 Subject: [PATCH 02/10] Keep radio button id for testing --- packages/ui/src/assets/icons/radio.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/assets/icons/radio.svg b/packages/ui/src/assets/icons/radio.svg index edd7538459c..ec060ead70f 100644 --- a/packages/ui/src/assets/icons/radio.svg +++ b/packages/ui/src/assets/icons/radio.svg @@ -1,4 +1,4 @@ - + \ No newline at end of file From 4d20e4a1784a9303c4841e917410b44f5cdde2a1 Mon Sep 17 00:00:00 2001 From: Bill Coloe Date: Tue, 27 May 2025 16:34:49 -0500 Subject: [PATCH 03/10] Added changeset: Radio button styling inconsistencies across themes and states --- packages/manager/.changeset/pr-12284-fixed-1748381688201.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-12284-fixed-1748381688201.md diff --git a/packages/manager/.changeset/pr-12284-fixed-1748381688201.md b/packages/manager/.changeset/pr-12284-fixed-1748381688201.md new file mode 100644 index 00000000000..a9da0541a84 --- /dev/null +++ b/packages/manager/.changeset/pr-12284-fixed-1748381688201.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Fixed +--- + +Radio button styling inconsistencies across themes and states ([#12284](https://github.com/linode/manager/pull/12284)) From 26f5d953cf9f092a86fb7535481012b6d5c39bdb Mon Sep 17 00:00:00 2001 From: Bill Coloe Date: Wed, 28 May 2025 11:39:06 -0500 Subject: [PATCH 04/10] Re-add small size style --- packages/ui/src/foundations/themes/light.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts index e8c64d3073c..5c10a0831b5 100644 --- a/packages/ui/src/foundations/themes/light.ts +++ b/packages/ui/src/foundations/themes/light.ts @@ -1218,6 +1218,11 @@ export const lightTheme: ThemeOptions = { stroke: theme.tokens.component.RadioButton.Active.Hover.Border, }, padding: '10px 10px', + '&.MuiRadio-sizeSmall': { + '.MuiSvgIcon-fontSizeSmall': { + fontSize: '16px', + }, + }, }), }, }, From fcc022759a5348c22c947480638e48fa653cf5b9 Mon Sep 17 00:00:00 2001 From: Bill Coloe Date: Fri, 30 May 2025 11:54:08 -0500 Subject: [PATCH 05/10] Prevent disabled radio buttons from blending into row background --- packages/ui/src/foundations/themes/dark.ts | 5 ++++- packages/ui/src/foundations/themes/light.ts | 1 - 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/foundations/themes/dark.ts b/packages/ui/src/foundations/themes/dark.ts index 27989f0def3..1414b991187 100644 --- a/packages/ui/src/foundations/themes/dark.ts +++ b/packages/ui/src/foundations/themes/dark.ts @@ -895,6 +895,10 @@ export const darkTheme: ThemeOptions = { '&.MuiTableRow-hover:hover, &.Mui-selected, &.Mui-selected:hover': { backgroundColor: Table.Row.Background.Hover, }, + '&.MuiTableRow-hover:hover.disabled-row': { + // Exception to make disabled radio buttons not blend into the background + backgroundColor: `color-mix(in srgb, ${Table.Row.Background.Hover} 50%, transparent) !important`, + }, // Disable hover for nested rows (VPC) '&.MuiTableRow-nested, &.MuiTableRow-nested.MuiTableRow-hover:hover': { @@ -902,7 +906,6 @@ export const darkTheme: ThemeOptions = { }, '&.disabled-row .MuiTableCell-root': { // TODO: Use design tokens in future when ready - backgroundColor: Interaction.Background.Disabled, color: Content.Text.Primary.Disabled, }, background: Table.Row.Background.Default, diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts index 5c10a0831b5..41cb3052cd2 100644 --- a/packages/ui/src/foundations/themes/light.ts +++ b/packages/ui/src/foundations/themes/light.ts @@ -1519,7 +1519,6 @@ export const lightTheme: ThemeOptions = { }, '&.disabled-row .MuiTableCell-root': { // TODO: Use design tokens in future when ready - backgroundColor: Interaction.Background.Disabled, color: Content.Text.Primary.Disabled, }, background: Table.Row.Background.Default, From e216e7ef38fcf7b2b787947238d4ebc62a7a486b Mon Sep 17 00:00:00 2001 From: Bill Coloe Date: Mon, 2 Jun 2025 12:03:34 -0500 Subject: [PATCH 06/10] Add UX feedback --- .../src/features/components/PlansPanel/PlanSelectionTable.tsx | 2 +- packages/ui/src/foundations/themes/dark.ts | 4 ---- packages/ui/src/foundations/themes/light.ts | 4 ++++ 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/manager/src/features/components/PlansPanel/PlanSelectionTable.tsx b/packages/manager/src/features/components/PlansPanel/PlanSelectionTable.tsx index 62c8780490e..ee2a60ba701 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanSelectionTable.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlanSelectionTable.tsx @@ -130,7 +130,7 @@ export const PlanSelectionTable = (props: PlanSelectionTableProps) => { isPlanCell={isPlanCell} key={testId} noWrap={noWrap} - sx={isPlanCell ? { paddingLeft: 0.5 } : undefined} + {...(isPlanCell && { sx: { paddingLeft: 0.5 } })} > {isPlanCell && filterOptions?.header ? filterOptions?.header diff --git a/packages/ui/src/foundations/themes/dark.ts b/packages/ui/src/foundations/themes/dark.ts index 1414b991187..a695e301edb 100644 --- a/packages/ui/src/foundations/themes/dark.ts +++ b/packages/ui/src/foundations/themes/dark.ts @@ -895,10 +895,6 @@ export const darkTheme: ThemeOptions = { '&.MuiTableRow-hover:hover, &.Mui-selected, &.Mui-selected:hover': { backgroundColor: Table.Row.Background.Hover, }, - '&.MuiTableRow-hover:hover.disabled-row': { - // Exception to make disabled radio buttons not blend into the background - backgroundColor: `color-mix(in srgb, ${Table.Row.Background.Hover} 50%, transparent) !important`, - }, // Disable hover for nested rows (VPC) '&.MuiTableRow-nested, &.MuiTableRow-nested.MuiTableRow-hover:hover': { diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts index 41cb3052cd2..f945327ff6b 100644 --- a/packages/ui/src/foundations/themes/light.ts +++ b/packages/ui/src/foundations/themes/light.ts @@ -1512,6 +1512,10 @@ export const lightTheme: ThemeOptions = { '&.MuiTableRow-hover:hover, &.Mui-selected, &.Mui-selected:hover': { backgroundColor: Table.Row.Background.Hover, }, + '&.MuiTableRow-hover:hover.disabled-row': { + background: 'none', + cursor: 'not-allowed', + }, // Disable hover for nested rows (VPC) '&.MuiTableRow-nested, &.MuiTableRow-nested.MuiTableRow-hover:hover': { From ddbea6f6b5afb6586471fe1b8a6551772ed8e0ac Mon Sep 17 00:00:00 2001 From: Bill Coloe Date: Mon, 2 Jun 2025 15:07:55 -0500 Subject: [PATCH 07/10] Correct disabled state on rows --- packages/ui/src/foundations/themes/dark.ts | 4 ++++ packages/ui/src/foundations/themes/light.ts | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/foundations/themes/dark.ts b/packages/ui/src/foundations/themes/dark.ts index a695e301edb..86feadcd6f6 100644 --- a/packages/ui/src/foundations/themes/dark.ts +++ b/packages/ui/src/foundations/themes/dark.ts @@ -895,6 +895,9 @@ export const darkTheme: ThemeOptions = { '&.MuiTableRow-hover:hover, &.Mui-selected, &.Mui-selected:hover': { backgroundColor: Table.Row.Background.Hover, }, + '&.MuiTableRow-hover:hover.disabled-row': { + cursor: 'not-allowed', + }, // Disable hover for nested rows (VPC) '&.MuiTableRow-nested, &.MuiTableRow-nested.MuiTableRow-hover:hover': { @@ -902,6 +905,7 @@ export const darkTheme: ThemeOptions = { }, '&.disabled-row .MuiTableCell-root': { // TODO: Use design tokens in future when ready + backgroundColor: Interaction.Background.Disabled, color: Content.Text.Primary.Disabled, }, background: Table.Row.Background.Default, diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts index f945327ff6b..012ed3d39b6 100644 --- a/packages/ui/src/foundations/themes/light.ts +++ b/packages/ui/src/foundations/themes/light.ts @@ -1513,7 +1513,6 @@ export const lightTheme: ThemeOptions = { backgroundColor: Table.Row.Background.Hover, }, '&.MuiTableRow-hover:hover.disabled-row': { - background: 'none', cursor: 'not-allowed', }, // Disable hover for nested rows (VPC) @@ -1523,6 +1522,7 @@ export const lightTheme: ThemeOptions = { }, '&.disabled-row .MuiTableCell-root': { // TODO: Use design tokens in future when ready + backgroundColor: Interaction.Background.Disabled, color: Content.Text.Primary.Disabled, }, background: Table.Row.Background.Default, From 2464c641a4904c6b0a58c08ce378a1916ca94a10 Mon Sep 17 00:00:00 2001 From: Bill Coloe Date: Mon, 2 Jun 2025 15:24:38 -0500 Subject: [PATCH 08/10] Make disabled row background-color exception in dark mode --- packages/ui/src/foundations/themes/dark.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/foundations/themes/dark.ts b/packages/ui/src/foundations/themes/dark.ts index 86feadcd6f6..909bf8c61a9 100644 --- a/packages/ui/src/foundations/themes/dark.ts +++ b/packages/ui/src/foundations/themes/dark.ts @@ -903,9 +903,10 @@ export const darkTheme: ThemeOptions = { { backgroundColor: Table.Row.Background.Default, }, + // TODO: Use design tokens in future when ready '&.disabled-row .MuiTableCell-root': { - // TODO: Use design tokens in future when ready - backgroundColor: Interaction.Background.Disabled, + // Exception to make disabled radio buttons not blend into the background + backgroundColor: `color-mix(in srgb, ${Interaction.Background.Disabled} 80%, ${Background.Black})`, color: Content.Text.Primary.Disabled, }, background: Table.Row.Background.Default, From 31edbc312cf146f5c72fa71cc9b9e4b333ef77d2 Mon Sep 17 00:00:00 2001 From: Bill Coloe Date: Tue, 3 Jun 2025 11:38:50 -0500 Subject: [PATCH 09/10] Add additional UX feedback: remove hover state, remove disabled bg color --- packages/ui/src/foundations/themes/dark.ts | 17 +++++++++-------- packages/ui/src/foundations/themes/light.ts | 16 +++++++++------- 2 files changed, 18 insertions(+), 15 deletions(-) diff --git a/packages/ui/src/foundations/themes/dark.ts b/packages/ui/src/foundations/themes/dark.ts index 808ba30c963..4eac45a5eca 100644 --- a/packages/ui/src/foundations/themes/dark.ts +++ b/packages/ui/src/foundations/themes/dark.ts @@ -203,9 +203,10 @@ const MuiTableHeadSvgStyles = { }; const MuiTableZebraHoverStyles = { - '&.MuiTableRow-hover:hover, &.Mui-selected, &.Mui-selected:hover': { - background: Table.Row.Background.Hover, - }, + '&.MuiTableRow-hover:not(.disabled-row):hover, &.Mui-selected:not(.disabled-row), &.Mui-selected:not(.disabled-row):hover': + { + background: Table.Row.Background.Hover, + }, }; const MuiTableZebraStyles = { @@ -985,11 +986,13 @@ export const darkTheme: ThemeOptions = { backgroundColor: Table.HeaderNested.Background, }, // The `hover` rule isn't implemented correctly in MUI, so we apply it here. - '&.MuiTableRow-hover:hover, &.Mui-selected, &.Mui-selected:hover': { - backgroundColor: Table.Row.Background.Hover, - }, + '&.MuiTableRow-hover:not(.disabled-row):hover, &.Mui-selected:not(.disabled-row), &.Mui-selected:not(.disabled-row):hover': + { + backgroundColor: Table.Row.Background.Hover, + }, '&.MuiTableRow-hover:hover.disabled-row': { cursor: 'not-allowed', + backgroundColor: 'inherit', }, // Disable hover for nested rows (VPC) '&.MuiTableRow-nested, &.MuiTableRow-nested.MuiTableRow-hover:hover': @@ -998,8 +1001,6 @@ export const darkTheme: ThemeOptions = { }, // TODO: Use design tokens in future when ready '&.disabled-row .MuiTableCell-root': { - // Exception to make disabled radio buttons not blend into the background - backgroundColor: `color-mix(in srgb, ${Interaction.Background.Disabled} 80%, ${Background.Black})`, color: Content.Text.Primary.Disabled, }, background: Table.Row.Background.Default, diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts index 20a31755843..74643e79dd5 100644 --- a/packages/ui/src/foundations/themes/light.ts +++ b/packages/ui/src/foundations/themes/light.ts @@ -243,9 +243,10 @@ const MuiTableHeadSvgStyles = { }; const MuiTableZebraHoverStyles = { - '&.MuiTableRow-hover:hover, &.Mui-selected, &.Mui-selected:hover': { - background: Table.Row.Background.Hover, - }, + '&.MuiTableRow-hover:not(.disabled-row):hover, &.Mui-selected:not(.disabled-row), &.Mui-selected:not(.disabled-row):hover': + { + background: Table.Row.Background.Hover, + }, }; const MuiTableZebraStyles = { @@ -1581,11 +1582,13 @@ export const lightTheme: ThemeOptions = { backgroundColor: Table.HeaderNested.Background, }, // The `hover` rule isn't implemented correctly in MUI, so we apply it here. - '&.MuiTableRow-hover:hover, &.Mui-selected, &.Mui-selected:hover': { - backgroundColor: Table.Row.Background.Hover, - }, + '&.MuiTableRow-hover:not(.disabled-row):hover, &.Mui-selected:not(.disabled-row), &.Mui-selected:not(.disabled-row):hover': + { + backgroundColor: Table.Row.Background.Hover, + }, '&.MuiTableRow-hover:hover.disabled-row': { cursor: 'not-allowed', + backgroundColor: 'inherit', }, // Disable hover for nested rows (VPC) '&.MuiTableRow-nested, &.MuiTableRow-nested.MuiTableRow-hover:hover': @@ -1594,7 +1597,6 @@ export const lightTheme: ThemeOptions = { }, '&.disabled-row .MuiTableCell-root': { // TODO: Use design tokens in future when ready - backgroundColor: Interaction.Background.Disabled, color: Content.Text.Primary.Disabled, }, background: Table.Row.Background.Default, From 2334d1ee81d59fd219bd56053689adce5f0ad3d0 Mon Sep 17 00:00:00 2001 From: Bill Coloe Date: Tue, 3 Jun 2025 12:18:12 -0500 Subject: [PATCH 10/10] Add cursor not-allowed on actual radio button in disabled row --- packages/ui/src/foundations/themes/dark.ts | 3 +++ packages/ui/src/foundations/themes/light.ts | 3 +++ 2 files changed, 6 insertions(+) diff --git a/packages/ui/src/foundations/themes/dark.ts b/packages/ui/src/foundations/themes/dark.ts index 4eac45a5eca..ec26d6a0713 100644 --- a/packages/ui/src/foundations/themes/dark.ts +++ b/packages/ui/src/foundations/themes/dark.ts @@ -993,6 +993,9 @@ export const darkTheme: ThemeOptions = { '&.MuiTableRow-hover:hover.disabled-row': { cursor: 'not-allowed', backgroundColor: 'inherit', + '& .MuiFormControlLabel-root.Mui-disabled': { + cursor: 'not-allowed', + }, }, // Disable hover for nested rows (VPC) '&.MuiTableRow-nested, &.MuiTableRow-nested.MuiTableRow-hover:hover': diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts index 74643e79dd5..a63da900653 100644 --- a/packages/ui/src/foundations/themes/light.ts +++ b/packages/ui/src/foundations/themes/light.ts @@ -1589,6 +1589,9 @@ export const lightTheme: ThemeOptions = { '&.MuiTableRow-hover:hover.disabled-row': { cursor: 'not-allowed', backgroundColor: 'inherit', + '& .MuiFormControlLabel-root.Mui-disabled': { + cursor: 'not-allowed', + }, }, // Disable hover for nested rows (VPC) '&.MuiTableRow-nested, &.MuiTableRow-nested.MuiTableRow-hover:hover':