[joy-ui][Button] Broken styles with custom button elements that return null

[phillip-winder]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

https://codesandbox.io/p/sandbox/friendly-jennings-cmj2zw?file=%2FDemo.tsx

1. Create custom Button that conditionally returns null:

const A = (props) => {
  if (props.null)
    return null;
  return <Button {...props}>hi</Button>;
};

2. Use Button in ButtonGroup:

<ButtonGroup>
  <A/>
  <A/>
  <A null/>
</ButtonGroup>

Current behavior 😯

The borders of the ButtonGroup are not rounded.

Expected behavior 🤔

The borders of the ButtonGroup should be rounded.

Context 🔦

Might be related to #39372

Your environment 🌎

@mui/joy 5.0.0-beta.15

[ZeeshanTamboli]

Yes, it' related to #39372.

[1CUNHA1]

hey is this bug still open?

[phillip-winder]

Yes, still not fixed

[aacevski]

Hey y'all - I have created a proposal pull request here:
#41456

Let me know if it's good, cc @siriwatknp 🙌🏼