[ButtonGroup] + [Badge]: Wrapping a Button in a badge doesn't work if it's inside a button group

[buob]

• 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 😯

Because ButtonGroup passes the values assuming the direct children are Buttons, it's passing these props to the Badge Element, causing the breakage. The styles and props aren't applied to the descendant Button, and the following errors occur:

Warning: Failed prop type: Invalid prop `variant` of value `outlined` supplied to
   `ForwardRef(Badge)`, expected one of ["dot","standard"].`

`Warning: React does not recognize the fullWidth / disableRipple / disableFocusRipple
    prop on a DOM element.`

This is the same as this person was experiencing: #16156, but while that use case has a reasonable workaround, I don't know that this one does as much (and it seems like a very common use case)

Expected Behavior 🤔

It would be great if there was either:

1. A way to have non-Button children of ButtonGroup (I'd imagine this would be ideal, because it makes sense to wrap ToolTips and other things around buttons in groups?
2. Have a way to have a Badge that doesn't involve wrapping it.

Steps to Reproduce 🕹

https://codesandbox.io/embed/create-react-app-b6odz

<ButtonGroup>
  <Button>foo</Button>
  <Button>bar</Button>
  <Badge badgeContent={4} color="primary">
    <Button>lee</Button>
  </Badge>
</ButtonGroup>

[oliviertassinari]

The closest to a working state I can get is:

import React from "react";
import Container from "@material-ui/core/Container";
import ButtonGroup from "@material-ui/core/ButtonGroup";
import Button from "@material-ui/core/Button";
import Badge from "@material-ui/core/Badge";
import Box from "@material-ui/core/Box";

const Adapt = ({ children, ...other }) => children(other);

export default function App() {
  return (
    <Container maxWidth="sm">
      <Box my={5}>
        <ButtonGroup>
          <Button>Foo</Button>
          <Button>bar</Button>
          <Adapt>
            {({ className, ...props }) => (
              <Badge badgeContent={4} color="primary" className={className}>
                <Button {...props}>lee</Button>
              </Badge>
            )}
          </Adapt>
        </ButtonGroup>
      </Box>

      <Box my={5}>
        <Badge badgeContent={5} color="primary">
          <Button variant="outlined">lee</Button>
        </Badge>
      </Box>
    </Container>
  );
}

I don't see any clear solution for supporting this case, any idea?

[slikts]

I've ran into this in the context of #11601.

[slikts]

The workaround of forwarding the props when nesting buttons doesn't fully work because the .MuiButtonGroup-grouped:not(:first-child) and .MuiButtonGroup-grouped:not(:last-child) selectors aren't matched.

Edit: in case this helps someone, I've ended up opting for a workaround like this:

.button:not(:first-child) {
  :global(.MuiButtonBase-root) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
.button:not(:last-child) {
  :global(.MuiButtonBase-root) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

[Gtes]

Found the same problem recently.
My solution is to wrap the whole ToggleButtonGroup and override zIndex for it.

I hope it will help someone.

<Badge>
  <ToggleButtonGroup
    sx={{
      zIndex: 1,
    }}
  >
    <ToggleButton />
    <ToggleButton />
  </ToggleButtonGroup>
</Badge>