[ButtonGroup] Should not retain divider color when it is disabled and…

… variant is `text` (mui#36967) Co-authored-by: FeCurtain <[email protected]> Co-authored-by: ZeeshanTamboli <[email protected]>
binh1298 · May 17, 2023 · 4c09c2a · 4c09c2a
1 parent ba95821
commit 4c09c2a
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 0 deletions.
diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js
@@ -114,6 +114,9 @@ const ButtonGroupRoot = styled('div', {
             : `1px solid ${
                 theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
               }`,
+          [`&.${buttonGroupClasses.disabled}`]: {
+            borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`,
+          },
         }),
       ...(ownerState.variant === 'text' &&
         ownerState.orientation === 'vertical' && {
@@ -122,6 +125,9 @@ const ButtonGroupRoot = styled('div', {
             : `1px solid ${
                 theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
               }`,
+          [`&.${buttonGroupClasses.disabled}`]: {
+            borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`,
+          },
         }),
       ...(ownerState.variant === 'text' &&
         ownerState.color !== 'inherit' && {

diff --git a/test/regressions/fixtures/ButtonGroup/DisabledButtonGroup.js b/test/regressions/fixtures/ButtonGroup/DisabledButtonGroup.js
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+import ButtonGroup from '@mui/material/ButtonGroup';
+
+const buttons = [
+  <Button key="one">One</Button>,
+  <Button key="two">Two</Button>,
+  <Button key="three">Three</Button>,
+];
+
+export default function DisabledButtonGroup() {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        '& > *': {
+          m: 1,
+        },
+      }}
+    >
+      {/* variant="text" */}
+      <ButtonGroup
+        color="error"
+        orientation="horizontal"
+        aria-label="horizontal text button group"
+        variant="text"
+        disabled
+      >
+        {buttons}
+      </ButtonGroup>
+      {/* variant="text" */}
+      <ButtonGroup
+        color="error"
+        orientation="vertical"
+        aria-label="vertical text button group"
+        variant="text"
+        disabled
+      >
+        {buttons}
+      </ButtonGroup>
+    </Box>
+  );
+}