adobe
`Keyboard` components within `MenuItem`s do not keep same alignment across `MenuSection`s
Provide a general summary of the issue here
This is a minor visual bug/inconsistency, but I couldn't find anybody else who had brought this up. I discovered it while using S2, but it appears like this is a problem in the current RSP as well (^3.40.1).
This is regarding the spacing of the Keyboard component in a MenuItem (or Item in non-S2) grid across menu sections. Within a single menu section, all of the Keyboard components keep the same alignment with all of the other items. But when moving to the next menu section, the alignment is changed to only reference to the items in that same section.
Important note: this is only visually significant when the length of the Keyboard text is not the same across menu sections.
🤔 Expected Behavior?
The Keyboard component keeps the same horizontal alignment across all menu sections.
😯 Current Behavior
The Keyboard component is not aligned across menu sections.
💁 Possible Solution
Something we've done is to right-align the text of the Keyboard component so they are all aligned to the right, at least. This requires adding style({ textAlign: 'end' }) to the Keyboard styles prop.
🔦 Context
No response
🖥️ Steps to Reproduce
Code Sandbox: https://codesandbox.io/p/devbox/s2-menu-alignment-bug-mpxffr
Note that if you edit the content of the Keyboard components to have the same amount of characters in each of the sections, it isn't as noticeable.
Version
0.9.0
What browsers are you seeing the problem on?
Firefox
If other, please specify.
No response
What operating system are you using?
MacOS Sequoia 15.5 (M2)
🧢 Your Company/Team
Adobe Analytics
🕷 Tracking Issue
No response
Thanks for reporting! seems reasonable to expect the align end, will need to consult design as well
Sorry for the delay, design would like them right aligned as well. Would you be interested in submitting a PR to address this?
I certainly could, though I'm pretty busy with other tasks for the next few sprints at least.