Skip to content

[MenuItem] Selected menu items (with checkmarks) are misaligned with unselected menu items for large scale #3396

Open
@lehelen19

Description

Description

Selected menu items with checkmarks are not aligned with unselected menu items on large screen sizes. This causes a visible shift in menu item content when we select and unselect it.

Steps to reproduce

  1. Go to https://opensource.adobe.com/spectrum-css/preview/index.html?path=/story/components-menu--default&args=selectionMode:single;size:l&globals=context:express;scale:large
  2. Remove the is-selected class from one of the selected menu items
  3. Observe the shift in the menu item

Expected behavior

The menu item should not shift horizontally when we are selecting or unselecting it.

Screenshots

Screen.Recording.2024-11-13.at.11.37.10.AM.mov

Environment

  • Version of the impacted component(s):
  • Browser(s) and OS(s):

Additional context

Please see this thread with a proposed solution by Nikki Massaro: https://cclight.slack.com/archives/CESK60MQD/p1731527118225569?thread_ts=1731520846.411549&cid=CESK60MQD

The checkmark icon has margin that isn't accounted for when we are calculating the computed size of the menu items.

Metadata

Labels

bugResults from a bug in the CSS implementation

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions