feat(odd): radio button component #12539
Conversation
Codecov Report
@@ Coverage Diff @@
## edge #12539 +/- ##
==========================================
- Coverage 73.68% 73.37% -0.32%
==========================================
Files 2262 1503 -759
Lines 62125 49168 -12957
Branches 6580 2997 -3583
==========================================
- Hits 45779 36075 -9704
+ Misses 14782 12636 -2146
+ Partials 1564 457 -1107
Flags with carried forward coverage won't be shown. Click here to find out more. |
ewagoner
force-pushed
the
RAUT-366-odd-radio-button
branch
from
ab39eb6 to
81c8d17
Compare
| ${disabled && disabledButtonStyles} | ||
|
|
||
| &:focus-visible { | ||
| box-shadow: 0 0 0 ${SPACING.spacingS} ${COLORS.fundamentalsFocus}; |
There was a problem hiding this comment.
Just noticed that 👇
https://www.figma.com/file/OIdG64Q5cgvEw82ish5Eee/Design-System-(Flex)?node-id=1224-61431&t=40X6Wfql6XIyqtAl-0
export const ODD_FOCUS_VISIBLE = `0 0 0 ${SPACING.spacing1} ${COLORS.fundamentalsFocus}`But still not sure that why Mel sees the different visual 🤔
| box-shadow: 0 0 0 ${SPACING.spacingS} ${COLORS.fundamentalsFocus}; | |
| box-shadow: 0 0 0 ${SPACING.spacing2} ${COLORS.fundamentalsFocus}; |
There was a problem hiding this comment.
Oh that's odd. All the button focus borders in figma are 4px, not 2px. I'll change the constant to 0.25rem and use that.
There was a problem hiding this comment.
thanks.
But still not sure why Mel saw the difference between SmallButton and CardButton.
Actually I was tunneling my localhost:6060 via ngrok since s3 has a cache issue.
There was a problem hiding this comment.
Pretty sure she was looking at MediumButton, not SmallButton. It had the issue she was seeing, and I fixed that last night.
| buttonLabel={radio.label} | ||
| buttonValue={radio.value} | ||
| onChange={handleChange} | ||
| isSelected={radio.value === sleepMs} |
There was a problem hiding this comment.
The current size is 68px but the height in Figma is 84px (5.25rem)
https://www.figma.com/file/AoTLAYuWawlaWItB1umOjr/Release%3A-Opentrons-Flex-Touchscreen-Designs?node-id=7808-158040&t=YUW2iGF5OAks9tpZ-0
| isSelected={radio.value === sleepMs} | |
| isSelected={radio.value === sleepMs} | |
| height="5.25rem" |
There was a problem hiding this comment.
Figma says the height should hug, so we do not want a fixed height. In my storybook, the large button is 84px and the small is 68px, same as the designs.
There was a problem hiding this comment.
Okay, got it.
I think the issue will be solved by adding radioButtonType='large' or setting radioBtuttonType = 'large'
Overview
This PR adds a radio button component for use on the ODD.
Design: https://www.figma.com/file/OIdG64Q5cgvEw82ish5Eee/Design-System-(Flex)?node-id=1108-58731&t=40X6Wfql6XIyqtAl-0
Closes RAUT-366
Test Plan
I created both unit tests and storybook stories for the different sizes and states of the radio button.
Changelog
Review requests
Verify storybook matches design and that sleep settings screen still functions and matches design.
Risk assessment
Low. The only existing screen using this component is the sleep settings.