diff --git a/docs/src/pages/demos/lists/AlignItemsList.tsx b/docs/src/pages/demos/lists/AlignItemsList.tsx
index 5e3371f8e5925d..e261aafbf86ed1 100644
--- a/docs/src/pages/demos/lists/AlignItemsList.tsx
+++ b/docs/src/pages/demos/lists/AlignItemsList.tsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem, { ListItemProps } from '@material-ui/core/ListItem';
+import Divider from '@material-ui/core/Divider';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import Avatar from '@material-ui/core/Avatar';
@@ -47,6 +48,9 @@ function AlignItemsList(props: AlignItemListProps) {
}
/>
+
+
+
@@ -68,6 +72,9 @@ function AlignItemsList(props: AlignItemListProps) {
}
/>
+
+
+
diff --git a/docs/src/pages/demos/lists/CheckboxList.tsx b/docs/src/pages/demos/lists/CheckboxList.tsx
index 5ee653e994800a..b012bfa623c3c0 100644
--- a/docs/src/pages/demos/lists/CheckboxList.tsx
+++ b/docs/src/pages/demos/lists/CheckboxList.tsx
@@ -2,6 +2,7 @@ import React from 'react';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
import Checkbox from '@material-ui/core/Checkbox';
@@ -39,10 +40,17 @@ function CheckboxList() {
{[0, 1, 2, 3].map(value => (
-
+
+
+
-
+
diff --git a/docs/src/pages/demos/lists/CheckboxListSecondary.tsx b/docs/src/pages/demos/lists/CheckboxListSecondary.tsx
index bd3c208821f4fb..06fa84c7946c09 100644
--- a/docs/src/pages/demos/lists/CheckboxListSecondary.tsx
+++ b/docs/src/pages/demos/lists/CheckboxListSecondary.tsx
@@ -36,7 +36,7 @@ function CheckboxListSecondary() {
};
return (
-
+
{[0, 1, 2, 3].map(value => (
@@ -44,7 +44,11 @@ function CheckboxListSecondary() {
-
+
))}
diff --git a/docs/src/pages/demos/lists/FolderList.tsx b/docs/src/pages/demos/lists/FolderList.tsx
index 164b6528e0896a..f1c1a3bb2e06de 100644
--- a/docs/src/pages/demos/lists/FolderList.tsx
+++ b/docs/src/pages/demos/lists/FolderList.tsx
@@ -4,6 +4,7 @@ import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/s
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import Avatar from '@material-ui/core/Avatar';
import ImageIcon from '@material-ui/icons/Image';
import WorkIcon from '@material-ui/icons/Work';
@@ -25,21 +26,27 @@ function FolderList(props: FolderListProps) {
return (
-
-
-
+
+
+
+
+
-
-
-
+
+
+
+
+
-
-
-
+
+
+
+
+
diff --git a/docs/src/pages/demos/lists/InsetList.tsx b/docs/src/pages/demos/lists/InsetList.tsx
index 4d7e5a1b5125f3..85ae73516c2959 100644
--- a/docs/src/pages/demos/lists/InsetList.tsx
+++ b/docs/src/pages/demos/lists/InsetList.tsx
@@ -26,7 +26,7 @@ function InsetList(props: InsetListProps) {
-
+
diff --git a/docs/src/pages/premium-themes/instapaper/components/atoms/Badge.js b/docs/src/pages/premium-themes/instapaper/components/atoms/Badge.js
index d516a08068f594..9d876b040d191a 100644
--- a/docs/src/pages/premium-themes/instapaper/components/atoms/Badge.js
+++ b/docs/src/pages/premium-themes/instapaper/components/atoms/Badge.js
@@ -3,8 +3,10 @@ import clsx from 'clsx';
import MuiBadge from '@material-ui/core/Badge';
import { BADGE } from '../../theme/core';
-const Badge = ({ className, dotted, ...props }) => (
-
+const Badge = ({ className, dotted, children, ...props }) => (
+
+ {children}
+
);
export default Badge;
diff --git a/docs/src/pages/premium-themes/instapaper/components/molecules/ListItemIcon.js b/docs/src/pages/premium-themes/instapaper/components/molecules/ListItemIcon.js
index 4b2f4fa8d72a13..3c0bc3dfeae458 100644
--- a/docs/src/pages/premium-themes/instapaper/components/molecules/ListItemIcon.js
+++ b/docs/src/pages/premium-themes/instapaper/components/molecules/ListItemIcon.js
@@ -3,11 +3,13 @@ import clsx from 'clsx';
import MuiListItemIcon from '@material-ui/core/ListItemIcon';
import { LIST_ITEM_ICON } from '../../theme/core';
-const ListItemIcon = ({ className, subcategory, ...props }) => (
+const ListItemIcon = ({ className, children, subcategory, ...props }) => (
+ >
+ {children}
+
);
export default ListItemIcon;
diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/LayoutBody.js b/docs/src/pages/premium-themes/onepirate/modules/components/LayoutBody.js
index 7c63699fc994f1..225d5d10954787 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/components/LayoutBody.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/components/LayoutBody.js
@@ -77,6 +77,7 @@ const styles = theme => ({
function LayoutBody(props) {
const {
+ children,
classes,
className,
component: Component,
@@ -103,7 +104,9 @@ function LayoutBody(props) {
)}
style={style}
{...other}
- />
+ >
+ {children}
+
);
}
diff --git a/docs/src/pages/premium-themes/tweeper/components/atoms/Badge.js b/docs/src/pages/premium-themes/tweeper/components/atoms/Badge.js
index 3afe3189c842eb..5780da76cff575 100644
--- a/docs/src/pages/premium-themes/tweeper/components/atoms/Badge.js
+++ b/docs/src/pages/premium-themes/tweeper/components/atoms/Badge.js
@@ -3,14 +3,16 @@ import clsx from 'clsx';
import MuiBadge from '@material-ui/core/Badge';
import { BADGE } from '../../theme/core';
-const Badge = ({ className, dotted, number, ...props }) => (
+const Badge = ({ className, dotted, number, children, ...props }) => (
+ >
+ {children}
+
);
export default Badge;
diff --git a/docs/src/pages/premium-themes/tweeper/components/molecules/ListItemIcon.js b/docs/src/pages/premium-themes/tweeper/components/molecules/ListItemIcon.js
index 4b2f4fa8d72a13..3c0bc3dfeae458 100644
--- a/docs/src/pages/premium-themes/tweeper/components/molecules/ListItemIcon.js
+++ b/docs/src/pages/premium-themes/tweeper/components/molecules/ListItemIcon.js
@@ -3,11 +3,13 @@ import clsx from 'clsx';
import MuiListItemIcon from '@material-ui/core/ListItemIcon';
import { LIST_ITEM_ICON } from '../../theme/core';
-const ListItemIcon = ({ className, subcategory, ...props }) => (
+const ListItemIcon = ({ className, children, subcategory, ...props }) => (
+ >
+ {children}
+
);
export default ListItemIcon;
diff --git a/packages/material-ui-lab/src/ToggleButton/ToggleButton.js b/packages/material-ui-lab/src/ToggleButton/ToggleButton.js
index 1ba3f715d666b7..fb0b1006ecd9d0 100644
--- a/packages/material-ui-lab/src/ToggleButton/ToggleButton.js
+++ b/packages/material-ui-lab/src/ToggleButton/ToggleButton.js
@@ -170,4 +170,6 @@ ToggleButton.defaultProps = {
disableRipple: false,
};
+ToggleButton.muiName = 'ToggleButton';
+
export default withStyles(styles, { name: 'MuiToggleButton' })(ToggleButton);
diff --git a/packages/material-ui/src/AppBar/AppBar.js b/packages/material-ui/src/AppBar/AppBar.js
index d06b8261f7a8b3..deebced5560b83 100644
--- a/packages/material-ui/src/AppBar/AppBar.js
+++ b/packages/material-ui/src/AppBar/AppBar.js
@@ -69,7 +69,7 @@ export const styles = theme => {
};
const AppBar = React.forwardRef(function AppBar(props, ref) {
- const { classes, className, color, position, ...other } = props;
+ const { children, classes, className, color, position, ...other } = props;
return (
+ >
+ {children}
+
);
});
diff --git a/packages/material-ui/src/Container/Container.js b/packages/material-ui/src/Container/Container.js
index 860ee2a9179f4a..c06cf730e762df 100644
--- a/packages/material-ui/src/Container/Container.js
+++ b/packages/material-ui/src/Container/Container.js
@@ -10,15 +10,15 @@ export const styles = theme => ({
marginLeft: 'auto',
boxSizing: 'border-box',
marginRight: 'auto',
- paddingLeft: 16,
- paddingRight: 16,
+ paddingLeft: theme.spacing(2),
+ paddingRight: theme.spacing(2),
[theme.breakpoints.up('sm')]: {
- paddingLeft: 24,
- paddingRight: 24,
+ paddingLeft: theme.spacing(3),
+ paddingRight: theme.spacing(3),
},
[theme.breakpoints.up('md')]: {
- paddingLeft: 32,
- paddingRight: 32,
+ paddingLeft: theme.spacing(4),
+ paddingRight: theme.spacing(4),
},
},
fixed: Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
@@ -59,7 +59,7 @@ export const styles = theme => ({
});
const Container = React.forwardRef(function Container(props, ref) {
- const { classes, className, component: Component, fixed, maxWidth, ...other } = props;
+ const { children, classes, className, component: Component, fixed, maxWidth, ...other } = props;
return (
+ >
+ {children}
+
);
});
diff --git a/packages/material-ui/src/DialogActions/DialogActions.js b/packages/material-ui/src/DialogActions/DialogActions.js
index 9ac699f8d81417..42f0f09a55f3b8 100644
--- a/packages/material-ui/src/DialogActions/DialogActions.js
+++ b/packages/material-ui/src/DialogActions/DialogActions.js
@@ -22,7 +22,7 @@ export const styles = {
};
const DialogActions = React.forwardRef(function DialogActions(props, ref) {
- const { disableActionSpacing, classes, className, ...other } = props;
+ const { disableActionSpacing, children, classes, className, ...other } = props;
return (
+ >
+ {children}
+
);
});
diff --git a/packages/material-ui/src/DialogContent/DialogContent.js b/packages/material-ui/src/DialogContent/DialogContent.js
index 3b80df1163b60c..e7ba6da2f875aa 100644
--- a/packages/material-ui/src/DialogContent/DialogContent.js
+++ b/packages/material-ui/src/DialogContent/DialogContent.js
@@ -19,7 +19,7 @@ export const styles = theme => ({
});
const DialogContent = React.forwardRef(function DialogContent(props, ref) {
- const { classes, className, dividers, ...other } = props;
+ const { classes, children, className, dividers, ...other } = props;
return (
+ >
+ {children}
+
);
});
diff --git a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js
index fec59e7552114f..d47cfaefb04088 100644
--- a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js
+++ b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js
@@ -12,9 +12,13 @@ export const styles = {
};
const ExpansionPanelDetails = React.forwardRef(function ExpansionPanelDetails(props, ref) {
- const { classes, className, ...other } = props;
+ const { classes, children, className, ...other } = props;
- return ;
+ return (
+
+ {children}
+
+ );
});
ExpansionPanelDetails.propTypes = {
diff --git a/packages/material-ui/src/FormGroup/FormGroup.js b/packages/material-ui/src/FormGroup/FormGroup.js
index 52674aeef0d2d5..d74dd29e2eb36b 100644
--- a/packages/material-ui/src/FormGroup/FormGroup.js
+++ b/packages/material-ui/src/FormGroup/FormGroup.js
@@ -22,7 +22,7 @@ export const styles = {
* For the `Radio`, you should be using the `RadioGroup` component instead of this one.
*/
const FormGroup = React.forwardRef(function FormGroup(props, ref) {
- const { classes, className, row, ...other } = props;
+ const { classes, className, children, row, ...other } = props;
return (
+ >
+ {children}
+
);
});
diff --git a/packages/material-ui/src/Icon/Icon.js b/packages/material-ui/src/Icon/Icon.js
index e876f580bb18a7..1b47c06a6feb95 100644
--- a/packages/material-ui/src/Icon/Icon.js
+++ b/packages/material-ui/src/Icon/Icon.js
@@ -50,7 +50,7 @@ export const styles = theme => ({
});
const Icon = React.forwardRef(function Icon(props, ref) {
- const { classes, className, color, component: Component, fontSize, ...other } = props;
+ const { children, classes, className, color, component: Component, fontSize, ...other } = props;
return (
+ >
+ {children}
+
);
});
diff --git a/packages/material-ui/src/InputLabel/InputLabel.js b/packages/material-ui/src/InputLabel/InputLabel.js
index 2616933acfe34a..d02166a8b27d33 100644
--- a/packages/material-ui/src/InputLabel/InputLabel.js
+++ b/packages/material-ui/src/InputLabel/InputLabel.js
@@ -85,6 +85,7 @@ export const styles = theme => ({
const InputLabel = React.forwardRef(function InputLabel(props, ref) {
const {
+ children,
classes,
className,
disableAnimation,
@@ -130,7 +131,9 @@ const InputLabel = React.forwardRef(function InputLabel(props, ref) {
}}
ref={ref}
{...other}
- />
+ >
+ {children}
+
);
});
diff --git a/packages/material-ui/src/Link/Link.js b/packages/material-ui/src/Link/Link.js
index 07390e453c987d..58ccc5e643a369 100644
--- a/packages/material-ui/src/Link/Link.js
+++ b/packages/material-ui/src/Link/Link.js
@@ -50,7 +50,7 @@ export const styles = {
};
const Link = React.forwardRef(function Link(props, ref) {
- const { classes, className, component, TypographyClasses, underline, ...other } = props;
+ const { children, classes, className, component, TypographyClasses, underline, ...other } = props;
return (
+ >
+ {children}
+
);
});
diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
index d6344dc1b7be39..e7f86354a28279 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelectInput.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
@@ -7,6 +7,7 @@ import clsx from 'clsx';
*/
const NativeSelectInput = React.forwardRef(function NativeSelectInput(props, ref) {
const {
+ children,
classes,
className,
disabled,
@@ -37,7 +38,9 @@ const NativeSelectInput = React.forwardRef(function NativeSelectInput(props, ref
value={value}
ref={inputRef || ref}
{...other}
- />
+ >
+ {children}
+
);
diff --git a/packages/material-ui/src/TableCell/TableCell.js b/packages/material-ui/src/TableCell/TableCell.js
index 38237d92d22d78..9a8661e8564877 100644
--- a/packages/material-ui/src/TableCell/TableCell.js
+++ b/packages/material-ui/src/TableCell/TableCell.js
@@ -101,6 +101,7 @@ export const styles = theme => ({
const TableCell = React.forwardRef(function TableCell(props, ref) {
const {
align,
+ children,
classes,
className,
component,
@@ -154,7 +155,9 @@ const TableCell = React.forwardRef(function TableCell(props, ref) {
aria-sort={ariaSort}
scope={scope}
{...other}
- />
+ >
+ {children}
+
);
});
diff --git a/packages/material-ui/src/Toolbar/Toolbar.js b/packages/material-ui/src/Toolbar/Toolbar.js
index 6612d8b2e3d236..9db0b735f5f829 100644
--- a/packages/material-ui/src/Toolbar/Toolbar.js
+++ b/packages/material-ui/src/Toolbar/Toolbar.js
@@ -12,11 +12,11 @@ export const styles = theme => ({
},
/* Styles applied to the root element if `disableGutters={false}`. */
gutters: {
- paddingLeft: 16,
- paddingRight: 16,
+ paddingLeft: theme.spacing(2),
+ paddingRight: theme.spacing(2),
[theme.breakpoints.up('sm')]: {
- paddingLeft: 24,
- paddingRight: 24,
+ paddingLeft: theme.spacing(3),
+ paddingRight: theme.spacing(3),
},
},
/* Styles applied to the root element if `variant="regular"`. */
@@ -28,21 +28,29 @@ export const styles = theme => ({
});
const Toolbar = React.forwardRef(function Toolbar(props, ref) {
- const { classes, className, component: Component, disableGutters, variant, ...other } = props;
+ const {
+ children,
+ classes,
+ className: classNameProp,
+ component: Component,
+ disableGutters,
+ variant,
+ ...other
+ } = props;
+
+ const className = clsx(
+ classes.root,
+ classes[variant],
+ {
+ [classes.gutters]: !disableGutters,
+ },
+ classNameProp,
+ );
return (
-
+
+ {children}
+
);
});