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;