Skip to content

Commit bcb6184

Browse files
hczhcz
authored
[ToggleButton] Add fullWidth prop (mui#25585)
1 parent 5801cba commit bcb6184

File tree

11 files changed

+46
-17
lines changed

11 files changed

+46
-17
lines changed

‎docs/pages/api-docs/toggle-button-group.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"default": "'standard'"
1111
},
1212
"exclusive": { "type": { "name": "bool" } },
13+
"fullWidth": { "type": { "name": "bool" } },
1314
"onChange": { "type": { "name": "func" } },
1415
"orientation": {
1516
"type": { "name": "enum", "description": "'horizontal'<br>&#124;&nbsp;'vertical'" },

‎docs/pages/api-docs/toggle-button.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"disabled": { "type": { "name": "bool" } },
1414
"disableFocusRipple": { "type": { "name": "bool" } },
1515
"disableRipple": { "type": { "name": "bool" } },
16+
"fullWidth": { "type": { "name": "bool" } },
1617
"selected": { "type": { "name": "bool" } },
1718
"size": {
1819
"type": {

‎docs/src/modules/components/AppSettingsDrawer.js

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,6 @@ const styles = (theme) => ({
2828
heading: {
2929
margin: '16px 0 8px',
3030
},
31-
toggleButtonGroup: {
32-
width: '100%',
33-
},
34-
toggleButton: {
35-
width: '100%',
36-
},
3731
icon: {
3832
marginRight: 8,
3933
},
@@ -99,14 +93,13 @@ function AppSettingsDrawer(props) {
9993
color="primary"
10094
onChange={handleChangeThemeMode}
10195
aria-labelledby="settings-mode"
102-
className={classes.toggleButtonGroup}
96+
fullWidth
10397
>
10498
<ToggleButton
10599
value="light"
106100
aria-label={t('settings.light')}
107101
data-ga-event-category="settings"
108102
data-ga-event-action="light"
109-
className={classes.toggleButton}
110103
>
111104
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'center' }}>
112105
<Brightness7Icon className={classes.icon} />
@@ -118,7 +111,6 @@ function AppSettingsDrawer(props) {
118111
aria-label={t('settings.system')}
119112
data-ga-event-category="settings"
120113
data-ga-event-action="system"
121-
className={classes.toggleButton}
122114
>
123115
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'center' }}>
124116
<SettingsBrightnessIcon className={classes.icon} />
@@ -130,7 +122,6 @@ function AppSettingsDrawer(props) {
130122
aria-label={t('settings.dark')}
131123
data-ga-event-category="settings"
132124
data-ga-event-action="dark"
133-
className={classes.toggleButton}
134125
>
135126
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'center' }}>
136127
<Brightness4Icon className={classes.icon} />
@@ -147,14 +138,13 @@ function AppSettingsDrawer(props) {
147138
onChange={handleChangeDirection}
148139
aria-labelledby="settings-direction"
149140
color="primary"
150-
className={classes.toggleButtonGroup}
141+
fullWidth
151142
>
152143
<ToggleButton
153144
value="ltr"
154145
aria-label={t('settings.light')}
155146
data-ga-event-category="settings"
156147
data-ga-event-action="ltr"
157-
className={classes.toggleButton}
158148
>
159149
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'center' }}>
160150
<FormatTextdirectionLToRIcon className={classes.icon} />
@@ -166,7 +156,6 @@ function AppSettingsDrawer(props) {
166156
aria-label={t('settings.system')}
167157
data-ga-event-category="settings"
168158
data-ga-event-action="rtl"
169-
className={classes.toggleButton}
170159
>
171160
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'center' }}>
172161
<FormatTextdirectionRToLIcon className={classes.icon} />

‎docs/src/pages/components/toggle-button/ToggleButtons.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export default function ToggleButtons() {
1919
exclusive
2020
onChange={handleAlignment}
2121
aria-label="text alignment"
22+
fullWidth
2223
>
2324
<ToggleButton value="left" aria-label="left aligned">
2425
<FormatAlignLeftIcon />

‎docs/src/pages/components/toggle-button/ToggleButtons.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export default function ToggleButtons() {
2222
exclusive
2323
onChange={handleAlignment}
2424
aria-label="text alignment"
25+
fullWidth
2526
>
2627
<ToggleButton value="left" aria-label="left aligned">
2728
<FormatAlignLeftIcon />

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
66
"color": "The color of a button when it is selected.",
77
"exclusive": "If <code>true</code>, only allow one of the child ToggleButton values to be selected.",
8+
"fullWidth": "If <code>true</code>, the button group will take up the full width of its container.",
89
"onChange": "Callback fired when the value changes.<br><br><strong>Signature:</strong><br><code>function(event: object, value: any) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>value:</em> of the selected buttons. When <code>exclusive</code> is true this is a single value; when false an array of selected values. If no value is selected and <code>exclusive</code> is true the value is null; when false an empty array.",
910
"orientation": "The component orientation (layout flow direction).",
1011
"size": "The size of the component.",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"disabled": "If <code>true</code>, the component is disabled.",
88
"disableFocusRipple": "If <code>true</code>, the keyboard focus ripple is disabled.",
99
"disableRipple": "If <code>true</code>, the ripple effect is disabled.<br>⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the <code>.Mui-focusedVisible</code> class.",
10+
"fullWidth": "If <code>true</code>, the button will take up the full width of its container.",
1011
"selected": "If <code>true</code>, the button is rendered in an active state.",
1112
"size": "The size of the component. The prop defaults to the value inherited from the parent ToggleButtonGroup component.",
1213
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details.",

‎packages/material-ui/src/ToggleButton/ToggleButton.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,11 @@ export type ToggleButtonTypeMap<
5252
* @default false
5353
*/
5454
disableFocusRipple?: boolean;
55+
/**
56+
* If `true`, the button will take up the full width of its container.
57+
* @default false
58+
*/
59+
fullWidth?: boolean;
5560
/**
5661
* If `true`, the button is rendered in an active state.
5762
*/

‎packages/material-ui/src/ToggleButton/ToggleButton.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,14 @@ const overridesResolver = (props, styles) => {
2424
};
2525

2626
const useUtilityClasses = (styleProps) => {
27-
const { classes, selected, disabled, size, color } = styleProps;
27+
const { classes, fullWidth, selected, disabled, size, color } = styleProps;
2828

2929
const slots = {
3030
root: [
3131
'root',
3232
selected && 'selected',
3333
disabled && 'disabled',
34+
fullWidth && 'fullWidth',
3435
`size${capitalize(size)}`,
3536
color,
3637
],
@@ -55,6 +56,10 @@ const ToggleButtonRoot = experimentalStyled(
5556
padding: 11,
5657
border: `1px solid ${theme.palette.divider}`,
5758
color: theme.palette.action.active,
59+
/* Styles applied to the root element if `fullWidth={true}`. */
60+
...(styleProps.fullWidth && {
61+
width: '100%',
62+
}),
5863
'&.Mui-disabled': {
5964
color: theme.palette.action.disabled,
6065
border: `1px solid ${theme.palette.action.disabledBackground}`,
@@ -142,6 +147,7 @@ const ToggleButton = React.forwardRef(function ToggleButton(inProps, ref) {
142147
color = 'standard',
143148
disabled = false,
144149
disableFocusRipple = false,
150+
fullWidth = false,
145151
onChange,
146152
onClick,
147153
selected,
@@ -155,6 +161,7 @@ const ToggleButton = React.forwardRef(function ToggleButton(inProps, ref) {
155161
color,
156162
disabled,
157163
disableFocusRipple,
164+
fullWidth,
158165
size,
159166
};
160167

@@ -237,6 +244,11 @@ ToggleButton.propTypes /* remove-proptypes */ = {
237244
* @default false
238245
*/
239246
disableRipple: PropTypes.bool,
247+
/**
248+
* If `true`, the button will take up the full width of its container.
249+
* @default false
250+
*/
251+
fullWidth: PropTypes.bool,
240252
/**
241253
* @ignore
242254
*/

‎packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,11 @@ export interface ToggleButtonGroupProps
3434
* @default false
3535
*/
3636
exclusive?: boolean;
37+
/**
38+
* If `true`, the button group will take up the full width of its container.
39+
* @default false
40+
*/
41+
fullWidth?: boolean;
3742
/**
3843
* Callback fired when the value changes.
3944
*

‎packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const overridesResolver = (props, styles) => {
1818
return deepmerge(
1919
{
2020
...(styleProps.orientation === 'vertical' && styles.vertical),
21+
...(styleProps.fullWidth && styles.fullWidth),
2122
[`& .${toggleButtonGroupClasses.grouped}`]: {
2223
...styles.grouped,
2324
...styles[`grouped${capitalize(styleProps.orientation)}`],
@@ -28,10 +29,10 @@ const overridesResolver = (props, styles) => {
2829
};
2930

3031
const useUtilityClasses = (styleProps) => {
31-
const { classes, orientation } = styleProps;
32+
const { classes, orientation, fullWidth } = styleProps;
3233

3334
const slots = {
34-
root: ['root', orientation === 'vertical' && 'vertical'],
35+
root: ['root', orientation === 'vertical' && 'vertical', fullWidth && 'fullWidth'],
3536
grouped: ['grouped', `grouped${capitalize(orientation)}`],
3637
};
3738

@@ -54,6 +55,10 @@ const ToggleButtonGroupRoot = experimentalStyled(
5455
...(styleProps.orientation === 'vertical' && {
5556
flexDirection: 'column',
5657
}),
58+
/* Styles applied to the root element if `fullWidth={true}`. */
59+
...(styleProps.fullWidth && {
60+
width: '100%',
61+
}),
5762
/* Styles applied to the children. */
5863
[`& .${toggleButtonGroupClasses.grouped}`]: {
5964
/* Styles applied to the children if `orientation="horizontal"`. */
@@ -101,13 +106,14 @@ const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup(inProps, r
101106
className,
102107
color = 'standard',
103108
exclusive = false,
109+
fullWidth = false,
104110
onChange,
105111
orientation = 'horizontal',
106112
size = 'medium',
107113
value,
108114
...other
109115
} = props;
110-
const styleProps = { ...props, orientation, size };
116+
const styleProps = { ...props, fullWidth, orientation, size };
111117
const classes = useUtilityClasses(styleProps);
112118

113119
const handleChange = (event, buttonValue) => {
@@ -168,6 +174,7 @@ const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup(inProps, r
168174
? isValueSelected(child.props.value, value)
169175
: child.props.selected,
170176
size: child.props.size || size,
177+
fullWidth,
171178
color: child.props.color || color,
172179
});
173180
})}
@@ -202,6 +209,11 @@ ToggleButtonGroup.propTypes /* remove-proptypes */ = {
202209
* @default false
203210
*/
204211
exclusive: PropTypes.bool,
212+
/**
213+
* If `true`, the button group will take up the full width of its container.
214+
* @default false
215+
*/
216+
fullWidth: PropTypes.bool,
205217
/**
206218
* Callback fired when the value changes.
207219
*

0 commit comments

Comments
 (0)