[ButtonGroup][joy] Fix style for single Button

[MaybePixem]

[ButtonGroup][joy-ui] fix style for single child

• I have followed (at least) the [PR section of the contributing guide] #(https://github.com/mui/material-ui/blob/HEAD/CONTRIBUTING.md#sending-a-pull-request).

Fixes #37687

Single buttons are now properly styled

Before: https://codesandbox.io/s/exciting-black-y2glhj
After: https://codesandbox.io/s/amazing-sid-pth57n?file=/demo.tsx

[mui-bot]

Netlify deploy preview

https://deploy-preview-37692--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 8859155

[ZeeshanTamboli]

Thank you for the pull request!

Unfortunately, it doesn't work for the second demo. You can find it at https://codesandbox.io/s/new-hooks-dmz3t2?file=/demo.tsx. The issue might be that the React.Children.count(children) count for the wrapped Button component could be two.

[siriwatknp]

I think you can use CSS selector :only-child instead of a new data-single-child. Here is the change I propose:

diff --git a/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx b/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx
index 3c9109e89f..8e07fcfd71 100644
--- a/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx
+++ b/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx
@@ -84,7 +84,7 @@ const ButtonGroupRoot = styled('div', {
       borderRadius: 'var(--ButtonGroup-radius)',
       flexDirection: ownerState.orientation === 'vertical' ? 'column' : 'row',
       // first Button or IconButton
-      [`& > [data-first-child]`]: {
+      [`& > [data-first-child]:not([data-last-child])`]: {
         '--Button-radius': firstChildRadius,
         '--IconButton-radius': firstChildRadius,
         ...(ownerState.orientation === 'horizontal' && {
@@ -109,7 +109,7 @@ const ButtonGroupRoot = styled('div', {
         }),
       },
       // last Button or IconButton
-      [`& > [data-last-child]`]: {
+      [`& > [data-last-child]:not([data-first-child]`]: {
         '--Button-radius': lastChildRadius,
         '--IconButton-radius': lastChildRadius,
         ...(ownerState.orientation === 'horizontal' && {
@@ -119,7 +119,7 @@ const ButtonGroupRoot = styled('div', {
           borderTop: 'var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)',
         }),
       },
-      [`& > :not([data-first-child])`]: {
+      [`& > :not([data-first-child]):not(:only-child)`]: {
         '--Button-margin': margin,
         '--IconButton-margin': margin,
       },

[siriwatknp]

Thank you for the pull request!

Unfortunately, it doesn't work for the second demo. You can find it at https://codesandbox.io/s/new-hooks-dmz3t2?file=/demo.tsx. The issue might be that the React.Children.count(children) count for the wrapped Button component could be two.

For the second demo, I'd say we should add a doc for Custom button and explain that we use React.cloneElement() so developers should spread the props to the button.

[MaybePixem]

Good idea with the :only-child. Will add the changes

[ZeeshanTamboli]

I am not very familiar with Joy UI code but your logic also seems to make sense compared to #37692 (review) and even custom button works without the need of spreading props because the data-attributes are not added for a single button.

[ZeeshanTamboli]

Looks good to me!

Addressed

[siriwatknp]

👍 Awesome!