fix(menu): place submenu on left when no room on right#22261
Conversation
Also fix alignment of menu when on the left. IMO we want the left submenu and right submenu to appear in mirror positions. According to https://floating-ui.com/docs/offset a simple setting like this should do that, regardless of which side the menu appears on: middleware: [offset({ mainAxis: 6, crossAxis: -6 })], But for some reason that doesn't work. I needed to adjust the mainAxis setting depending on whether the menu is to the left or right. Fixes #22252.
✅ Deploy Preview for v11-carbon-react ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for v11-carbon-web-components ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #22261 +/- ##
=======================================
Coverage 95.49% 95.49%
=======================================
Files 582 582
Lines 50389 50391 +2
Branches 6787 6786 -1
=======================================
+ Hits 48119 48121 +2
Misses 2138 2138
Partials 132 132
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
✅ Deploy Preview for carbon-elements ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
OK thanks. It's too bad that this isn't covered in https://carbondesignsystem.com/components/menu/usage/#submenus (neither how it should look in RTL nor how it should look in LTR but when you just have to put the submenu on the left because there's no space on the right). |
|
Yeah, the only info is in https://carbondesignsystem.com/components/menu/usage/#submenus:~:text=and%20selected%20items-,Right%20to%20left%20(RTL),-For%20RTL%20(right @wkeese it seems a test is failing, could you check this? I’ll update the branch again just to check if it’s not a false failure. |
|
Hmm, are you talking about this? I'm assuming that's an issue with the CI system as I didn't touch Combobox or accessibility stuff. It runs correctly for me locally: |
|
Looks like is this: https://github.com/carbon-design-system/carbon/actions/runs/25914187255/job/76166599813?pr=22261 
We could also add some tests to avoid this happening in the future. |
Presumably, another spurious failure unrelated to my change. I'm not sure how to trigger a rebuild besides waiting for someone else to merge a PR and then clicking the update button. |
|
Yeah, the test failure is unrelated to this PR. The ModalWrapper test has been having flakiness issues in some other PRs as well. |
84de066
Closes #22252.
Description
Place submenu on left when no room on right.
Also fix alignment of menu when on the left. IMO we want the left submenu and right submenu to appear in mirror positions. According to https://floating-ui.com/docs/offset a simple setting like this should do that, regardless of which side the menu appears on:
But for some reason that doesn't work. I needed to adjust the
mainAxissetting depending on whether the menu is to the left or right.Before:
After:
Changelog
Changed
Testing / Reviewing
You can check the alignment on Storybook in RTL mode (https://react.carbondesignsystem.com/?path=/story/components-menu--default&globals=dir:rtl), and you can also use Storybook (or my Stackblitz) to check the flipping behavior by tweaking the main menu to appear at the right of the viewport.
PR Checklist
As the author of this PR, before marking ready for review, confirm you:
More details can be found in the pull request guide