Skip to content

Fix gap token on MenuList - #3945

Merged
Ruriko Araki (rurikoaraki) merged 3 commits into
microsoft:mainfrom
rurikoaraki:user/ruaraki/menulist_gap
Jul 22, 2025
Merged

Fix gap token on MenuList#3945
Ruriko Araki (rurikoaraki) merged 3 commits into
microsoft:mainfrom
rurikoaraki:user/ruaraki/menulist_gap

Conversation

@rurikoaraki

Copy link
Copy Markdown
Collaborator

Platforms Impacted

  • iOS
  • macOS
  • win32 (Office)
  • windows
  • android

Description of changes

gap token wasn't working on MenuList component. Turns out it was being applied to the wrong component, the outer root View which only has one child, instead of the focusZone slot which actually wraps the menu items.

Apply the gap token to the focus zone instead. If no focus zone is present then make it a View.

Verification

Used the customized Menu test which applies a noticeable gap to the MenuList

Before After
image image

Pull request checklist

This PR has considered (when applicable):

  • Automated Tests
  • Documentation and examples
  • Keyboard Accessibility
  • Voiceover
  • Internationalization and Right-to-left Layouts

@rurikoaraki
Ruriko Araki (rurikoaraki) requested a review from a team as a code owner July 22, 2025 20:06
Comment thread packages/components/Menu/src/MenuList/MenuList.styling.ts Outdated
@rurikoaraki
Ruriko Araki (rurikoaraki) merged commit 86eabb9 into microsoft:main Jul 22, 2025
11 checks passed
@rurikoaraki
Ruriko Araki (rurikoaraki) deleted the user/ruaraki/menulist_gap branch July 22, 2025 21:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants