diff --git a/docs/pages/material-ui/api/toggle-button-group.json b/docs/pages/material-ui/api/toggle-button-group.json
index 36f167b40f2ef5..e16f5f8a19f37f 100644
--- a/docs/pages/material-ui/api/toggle-button-group.json
+++ b/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"
},
diff --git a/docs/pages/material-ui/api/toggle-button.json b/docs/pages/material-ui/api/toggle-button.json
index 588eb0109ff772..09cd5fda600aca 100644
--- a/docs/pages/material-ui/api/toggle-button.json
+++ b/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"
diff --git a/docs/translations/api-docs/toggle-button-group/toggle-button-group.json b/docs/translations/api-docs/toggle-button-group/toggle-button-group.json
index 9c75960719d569..8f8e9f1a482964 100644
--- a/docs/translations/api-docs/toggle-button-group/toggle-button-group.json
+++ b/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": "orientation=\"vertical\"
"
+ },
+ "fullWidth": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "fullWidth={true}
"
}
}
}
diff --git a/docs/translations/api-docs/toggle-button/toggle-button.json b/docs/translations/api-docs/toggle-button/toggle-button.json
index d16bbfddcae69d..aeb1c6064c6206 100644
--- a/docs/translations/api-docs/toggle-button/toggle-button.json
+++ b/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": "size=\"large\"
"
+ },
+ "fullWidth": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "fullWidth={true}
"
}
}
}
diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js
index 809ad92a059cd4..1e30bcdad74ff5 100644
--- a/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js
+++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js
@@ -136,7 +136,7 @@ describe('', () => {
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('', () => {
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', () => {
diff --git a/packages/mui-material/src/ToggleButton/toggleButtonClasses.ts b/packages/mui-material/src/ToggleButton/toggleButtonClasses.ts
index 6ef6c053a1ecc6..16e1756429f04b 100644
--- a/packages/mui-material/src/ToggleButton/toggleButtonClasses.ts
+++ b/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;
diff --git a/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.test.js b/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.test.js
index a5e64d27e0a8c4..5bfca3c6004acb 100644
--- a/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.test.js
+++ b/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('', () => {
const { render } = createRenderer();
@@ -197,4 +197,30 @@ describe('', () => {
});
});
});
+
+ it('should not be fullWidth by default', () => {
+ const { container, getAllByRole } = render(
+
+ 1
+ 2
+ ,
+ );
+ 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(
+
+ 1
+ 2
+ ,
+ );
+ const buttonGroup = container.firstChild;
+ const button = getAllByRole('button')[1];
+ expect(buttonGroup).to.have.class(classes.fullWidth);
+ expect(button).to.have.class(toggleButtonClasses.fullWidth);
+ });
});
diff --git a/packages/mui-material/src/ToggleButtonGroup/toggleButtonGroupClasses.ts b/packages/mui-material/src/ToggleButtonGroup/toggleButtonGroupClasses.ts
index c14fdf8c15c818..ef4b714f78713e 100644
--- a/packages/mui-material/src/ToggleButtonGroup/toggleButtonGroupClasses.ts
+++ b/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;