[material-ui][ToggleButton] Add fullWidth to toggleButtonClasses …

…and `toggleButtonGroupClasses` (#39536)

Co-authored-by: ZeeshanTamboli <[email protected]>

docs/pages/material-ui/api/toggle-button-group.json

@@ -45,7 +45,15 @@
     "import { ToggleButtonGroup } from '@mui/material';"
   ],
   "styles": {
-    "classes": ["root", "vertical", "disabled", "grouped", "groupedHorizontal", "groupedVertical"],
+    "classes": [
+      "root",
+      "vertical",
+      "disabled",
+      "grouped",
+      "groupedHorizontal",
+      "groupedVertical",
+      "fullWidth"
+    ],
     "globalClasses": { "disabled": "Mui-disabled" },
     "name": "MuiToggleButtonGroup"
   },

docs/pages/material-ui/api/toggle-button.json

@@ -59,7 +59,8 @@
       "secondary",
       "sizeSmall",
       "sizeMedium",
-      "sizeLarge"
+      "sizeLarge",
+      "fullWidth"
     ],
     "globalClasses": { "disabled": "Mui-disabled", "selected": "Mui-selected" },
     "name": "MuiToggleButton"

docs/translations/api-docs/toggle-button-group/toggle-button-group.json

@@ -53,6 +53,11 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the children",
       "conditions": "<code>orientation=\"vertical\"</code>"
+    },
+    "fullWidth": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>fullWidth={true}</code>"
     }
   }
 }

docs/translations/api-docs/toggle-button/toggle-button.json

@@ -84,6 +84,11 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>size=\"large\"</code>"
+    },
+    "fullWidth": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>fullWidth={true}</code>"
     }
   }
 }

packages/mui-material/src/ButtonGroup/ButtonGroup.test.js

@@ -136,7 +136,7 @@ describe('<ButtonGroup />', () => {
     const button = getByRole('button');
     const buttonGroup = container.firstChild;
     expect(buttonGroup).not.to.have.class(classes.fullWidth);
-    expect(button).not.to.have.class('MuiButton-fullWidth');
+    expect(button).not.to.have.class(buttonClasses.fullWidth);
   });
 
   it('can pass fullWidth to Button', () => {
@@ -148,7 +148,7 @@ describe('<ButtonGroup />', () => {
     const buttonGroup = container.firstChild;
     const button = getByRole('button');
     expect(buttonGroup).to.have.class(classes.fullWidth);
-    expect(button).to.have.class('MuiButton-fullWidth');
+    expect(button).to.have.class(buttonClasses.fullWidth);
   });
 
   it('classes.grouped should be merged with Button className', () => {

packages/mui-material/src/ToggleButton/toggleButtonClasses.ts

@@ -20,6 +20,8 @@ export interface ToggleButtonClasses {
   sizeMedium: string;
   /** Styles applied to the root element if `size="large"`. */
   sizeLarge: string;
+  /** Styles applied to the root element if `fullWidth={true}`. */
+  fullWidth: string;
 }
 
 export type ToggleButtonClassKey = keyof ToggleButtonClasses;
@@ -38,6 +40,7 @@ const toggleButtonClasses: ToggleButtonClasses = generateUtilityClasses('MuiTogg
   'sizeSmall',
   'sizeMedium',
   'sizeLarge',
+  'fullWidth',
 ]);
 
 export default toggleButtonClasses;

packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.test.js

@@ -5,7 +5,7 @@ import { describeConformance, createRenderer, screen } from '@mui-internal/test-
 import ToggleButtonGroup, {
   toggleButtonGroupClasses as classes,
 } from '@mui/material/ToggleButtonGroup';
-import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton';
 
 describe('<ToggleButtonGroup />', () => {
   const { render } = createRenderer();
@@ -197,4 +197,30 @@ describe('<ToggleButtonGroup />', () => {
       });
     });
   });
+
+  it('should not be fullWidth by default', () => {
+    const { container, getAllByRole } = render(
+      <ToggleButtonGroup>
+        <ToggleButton value="one">1</ToggleButton>
+        <ToggleButton value="two">2</ToggleButton>
+      </ToggleButtonGroup>,
+    );
+    const button = getAllByRole('button')[1];
+    const buttonGroup = container.firstChild;
+    expect(buttonGroup).not.to.have.class(classes.fullWidth);
+    expect(button).not.to.have.class(toggleButtonClasses.fullWidth);
+  });
+
+  it('can pass fullWidth to Button', () => {
+    const { container, getAllByRole } = render(
+      <ToggleButtonGroup fullWidth>
+        <ToggleButton value="one">1</ToggleButton>
+        <ToggleButton value="two">2</ToggleButton>
+      </ToggleButtonGroup>,
+    );
+    const buttonGroup = container.firstChild;
+    const button = getAllByRole('button')[1];
+    expect(buttonGroup).to.have.class(classes.fullWidth);
+    expect(button).to.have.class(toggleButtonClasses.fullWidth);
+  });
 });

packages/mui-material/src/ToggleButtonGroup/toggleButtonGroupClasses.ts

@@ -14,6 +14,8 @@ export interface ToggleButtonGroupClasses {
   groupedHorizontal: string;
   /** Styles applied to the children if `orientation="vertical"`. */
   groupedVertical: string;
+  /** Styles applied to the root element if `fullWidth={true}`. */
+  fullWidth: string;
 }
 
 export type ToggleButtonGroupClassKey = keyof ToggleButtonGroupClasses;
@@ -24,7 +26,16 @@ export function getToggleButtonGroupUtilityClass(slot: string): string {
 
 const toggleButtonGroupClasses: ToggleButtonGroupClasses = generateUtilityClasses(
   'MuiToggleButtonGroup',
-  ['root', 'selected', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical'],
+  [
+    'root',
+    'selected',
+    'vertical',
+    'disabled',
+    'grouped',
+    'groupedHorizontal',
+    'groupedVertical',
+    'fullWidth',
+  ],
 );
 
 export default toggleButtonGroupClasses;