change: [M3-7205] - Dark theme Radio & Toggle improvements #10020
Conversation
abailly-akamai
force-pushed
the
M3-7205
branch
from
0d46b40
to
a419dae
Compare
| <Typography fontFamily={theme.font.bold} sx={{ mt: 1 }}> | ||
| Your Linode must be powered on to select a warm resize. | ||
| </Typography> | ||
| )} |
There was a problem hiding this comment.
It bothered me that the radio group was disabled without an explanation as to why so I added this helper text - also improved the typography for the label ("recommended")
| Before | After |
|---|---|
 |
 |
abailly-akamai
requested review from
dwiley-akamai and
hana-akamai
and removed request for
a team
|
Coverage Report: ✅ |
dwiley-akamai
changed the title
| render: () => <Toggle interactive={true} tooltipText={EXAMPLE_TEXT} />, | ||
| export const WithTooltip: StoryObj<ToggleProps> = { | ||
| render: (args) => ( | ||
| <Toggle {...args} interactive={true} tooltipText={EXAMPLE_TEXT} /> |
There was a problem hiding this comment.
In Storybook on this branch, it doesn't seem like toggling interactive actually makes a difference in the behavior now: once the tooltip pops up, you're always able to hover over it without it disappearing. In prod Storybook, "Tooltip Toggle" has a non-interactive tooltip (it disappears when you try to hover over it) and "Interactable Tooltip Toggle" has an interactive tooltip.
There was a problem hiding this comment.
Good catch! unfortunately that behavior can't be toggled in storybook easily cause it would have to be remounted for the prop to take effect. That being said I added the tooltip on the first story so that the behavior remains consistent with the previous rendition of this component in Storybook
abailly-akamai
force-pushed
the
M3-7205
branch
from
15b63e8
to
2f96f4d
Compare
|
Dark mode changes LGTM. I did notice a weird bug with the resize modal though (seems to also exist in prod). If you click out of the resize modal, the Auto Resize Disk box gets unchecked and the Radio check moves to Warm resize (if Cold was checked) Screen.Recording.2024-01-03.at.5.02.14.PM.mov(IP addresses redacted) |
|
@hana-linode the state management in this component is pretty complex and brittle so since it is a small visual bug that does not affect the user experience I will leave it like this for now but created a ticket to look at it further: M3-7590 |
hana-akamai
added
Approved
|
Confirmed |
Description 📝
This PR improves the styling of the Radio and Toggle components in dark mode (only). It aims to handle default and disabled states styling when the dark mode is turned on.
It does not modify the light theme styling.
Changes 🔄
Preview 📷
(note: the "Before" screenshot for the Resize modal is for a Linode that is powered off)
How to test 🧪
Verification steps
yarn storybookas wellToggleandRadiocomponent stories and the styling with the dark modeAs an Author I have considered 🤔
Check all that apply