feat(odd): menuList and MenuItem ODD support #12511
Conversation
jerader
requested review from
koji,
ewagoner and
a team
and removed request for
a team
Codecov Report
@@ Coverage Diff @@
## edge #12511 +/- ##
==========================================
+ Coverage 73.43% 73.70% +0.27%
==========================================
Files 1498 2255 +757
Lines 49066 61974 +12908
Branches 2991 6581 +3590
==========================================
+ Hits 36030 45678 +9648
- Misses 12580 14733 +2153
- Partials 456 1563 +1107
Flags with carried forward coverage won't be shown. Click here to find out more.
|
app/src/atoms/MenuList/MenuItem.tsx
Outdated
| color: ${COLORS.darkBlackEnabled}; | ||
| padding: ${SPACING.spacing3} 0.75rem ${SPACING.spacing3} 0.75rem; | ||
| export const MenuItem: BtnComponent = styled.button<ButtonProps>` | ||
| align-items: ${props => (props.isOnDevice ? ALIGN_CENTER : 'auto')}; |
There was a problem hiding this comment.
maybe
| align-items: ${props => (props.isOnDevice ? ALIGN_CENTER : 'auto')}; | |
| align-items: ${({isOnDevice}) => (isOnDevice ? ALIGN_CENTER : 'auto')}; |
| background-color: ${COLORS.transparent}; | ||
| color: ${COLORS.black}${COLORS.opacity50HexCode}; | ||
| } | ||
|
|
||
| @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { |
There was a problem hiding this comment.
no idea how to get hover:none on storybook, i guess to test this in storybook, you have to change this const to remove the (hover:none)
|
The styling on the ODD does not match the design: https://www.figma.com/file/AoTLAYuWawlaWItB1umOjr/Release%3A-Opentrons-Flex-Touchscreen-Designs?node-id=8292-140777&t=JBQTG6cB56MTBzOz-0 |
|
Maybe I had something cached somewhere. Things are looking better for me now. |
@ewagoner, i went ahead and changed |
Wow -- you are on it! Looks great on my dev kit. Thanks! |
closes RAUT-403
Overview
Change
MenuListandMenuItemto be used as the overflow menu in ODDScreen.Recording.2023-04-18.at.3.40.44.PM.mov
Test Plan
Review the storybooks for
MenuListandMenuItemand review the menu buttons in the desktop app to make sure they retain correct UI and review the Navigation menu in the ODD to make sure it has correct Ui.Changelog
MenuItemto take inisAlertprop and use media query, modify storybook and testMenuListto take inisOnDeviceandOnClickprops, changebuttonprop to bechildrenand fix all usages of it in the desktop (it was only used in Module overflow menu). Modify storybook and testNavigationMenuto useMenuItemandMenuListstorybook/previewReview requests
Risk assessment
low