Badge cut off when added to MenuItem

[fzaninotto]

When adding a <Badge> to a <MenuItem>, it appears cut off:

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Badge is cut off

Expected Behavior 🤔

Badge isn't cut off

Steps to Reproduce 🕹

<MenuItem>
    <Badge badgeContent={1} color="error">Posts</Badge>
</MenuItem>

Context 🔦

Adding notifications to a navigation menu is a common use case

Your Environment 🌎

Tech	Version
Material-UI	v4.4.0
React	Latest
Browser	Chrome
TypeScript	Yes

[oliviertassinari]

Reproduction on https://codesandbox.io/s/material-demo-0p6l3?file=/demo.tsx. It seems that we can simply remove the overflow style. I don't see any good motivation for this style. Git blame doesn't yield any useful information, the style come from: 9a9ea7e#diff-97d43fceafba5d21cb2646aaa9483e54R16.

diff --git a/packages/material-ui/src/MenuItem/MenuItem.js b/packages/material-ui/src/MenuItem/MenuItem.js
index 2f44f7a75..f0faeedfb 100644
--- a/packages/material-ui/src/MenuItem/MenuItem.js
+++ b/packages/material-ui/src/MenuItem/MenuItem.js
@@ -13,7 +13,6 @@ export const styles = (theme) => ({
     paddingBottom: 6,
     boxSizing: 'border-box',
     width: 'auto',
-    overflow: 'hidden',
     whiteSpace: 'nowrap',
     [theme.breakpoints.up('sm')]: {
       minHeight: 'auto',

[tj3407]

I would like to work on this issue if no one else has started

[fzaninotto]

You guys rock, thanks a lot! 💯

[oliviertassinari]

It will be released in v5.0.0-alpha.2 this weekend