feat(MegaMenu): layout iteration in breakpoint between 800 - 1055px #4021
Conversation
annawen1
added
package: react
|
Deploy preview created for package Built with commit: 6ce38afe3f7932e4a997514bd1d5762330544450 |
|
Deploy preview created for package Built with commit: 6ce38afe3f7932e4a997514bd1d5762330544450 |
|
Deploy preview created for package Built with commit: 6ce38afe3f7932e4a997514bd1d5762330544450 |
annawen1
requested review from
raphaelamadeu-zz,
andysherman2121,
ariellalgilmore,
asudoh,
jeffchew,
kennylam and
oliviaflory
kennylam
added
the
Ready to merge
|
@annawen1 this looks great! One small thing @wonilsuhibm and I noticed is the hover state for the items within the mega menu is rendering at 36px tall, and they should be 32px.
From the inspect tool I'd guess that adjusting the top and bottom padding to 7px would fix it. Not sure if it's appropriate to fix in this PR, so I'm happy to write a new issue if that's the correct way to go about that update. |
|
This layout is workign pretty well. Thank you everyone! One thing I observed on an iPad Pro 12.9 inch 2020 model (iOS 13.7) and in both Chrome and Safari: This is weird because I can't reproduce this on my desktop. |
|
And the same on iPad 11 inch in Browser Stack: |
Found that the latest breakpoint introduced for React masthead (carbon-design-system#4021) does not fit well with non-megamenu environment (like what our Web Components codebase is as of today). Reverted the breakpoint only for Web Components styles, to fix that problem.
### Description Found that the latest breakpoint introduced for React masthead (#4021) does not fit well with non-megamenu environment (like what our Web Components codebase is as of today). Reverted the breakpoint only for Web Components styles, to fix that problem. ### Changelog **Changed** - Change the breakpoint of narrow mode masthead back to `lg`.
### Description Found that the latest breakpoint introduced for React masthead (carbon-design-system#4021) does not fit well with non-megamenu environment (like what our Web Components codebase is as of today). Reverted the breakpoint only for Web Components styles, to fix that problem. ### Changelog **Changed** - Change the breakpoint of narrow mode masthead back to `lg`.
Related Ticket(s)
React: MegaMenu iteration 1 breakpoint and layout updates #3948
Description
New layout for Megamenu at 800px - 1055px.
NOTE: The L0 nav items will appear squished in the lower breakpoints (~800px). We will need the new overflow feature to the Masthead (React: Add the overflow feature to the Masthead #3875) for this to be fixed.
EXPECTED:
Changelog
Changed
Removed