Menu pills changes height when navigating with keyboard

[miroslavstastny]

Bug Report

Steps

<Menu pills items={items} vertical />

• Focus the first button with tab
• Keyboard up and down with arrow keys
• Observe the text in the pills move up and down

Actual Result

When keyboarding through a vertical, pills menu on Chrome, there is a margin below the pills that disappears when the focus styling is applied, causing the height of the list to change.

Version

0.33.0

Testcase

https://codesandbox.io/s/menu-pills-focus-g2gov

[sophieH29]

I believe it's a duplicate of #1338

[levithomason]

@codepretty Could you please address this one since it is in the Teams theme and not part of the core lib.

[codepretty]

We don't support the pills prop in Teams theme. If you remove that prop, the keyboard nav looks fine