[ButtonGroup] Disable Button <span> wrapper + Tooltip incompatibility

[qkdreyer]

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

Current Behavior 😯

• A disabled Button in a ButtonGroup button is unstyled.
• Multiple React warnings are generated.

Expected Behavior 🤔

• A disabled Button in a ButtonGroup button should keep its style.
• No React warnings errors should be generated.

Steps to Reproduce 🕹

https://codesandbox.io/s/old-night-n2z35

Steps:

1. Check the disabled button is missing its style from ButtonGroup
2. Open the console and view React warnings

Context 🔦

Just using multiple Mui components

Your Environment 🌎

Tech	Version
Material-UI	v4.10.1
React	v16.13.1
Browser	Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36

[oliviertassinari]

@qkdreyer We can't do much better than:

import React from "react";
import { ButtonGroup, Tooltip, Button } from "@material-ui/core";

function Wire({ children, ...other }) {
  return children(other);
}

/**
 * how you used the components
 */
export default function Demo() {
  return (
    <ButtonGroup>
      <Wire>
        {props => (
          <Tooltip title="You don't have permission to do this">
            <span>
              <Button {...props} disabled>
                A Disabled Button
              </Button>
            </span>
          </Tooltip>
        )}
      </Wire>
      <Button>A Button</Button>
    </ButtonGroup>
  );
}

https://codesandbox.io/s/busy-poitras-rh26y?file=/src/Demo.js:0-606

Closing as we are technically limited. If not enough, you would need to rewrite the component, changing the design tradeoff.

[qkdreyer]

That's a great fix for the unwired props, but we're still missing some style from the ButtonGroup children (look at the missing border-radius) :

Is there any workaround about that ?

[oliviertassinari]

It's what I meant by "limited".