From f143cc4285fca521112be16816f5e7099e6a9e38 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 13 Apr 2019 17:14:41 +0200 Subject: [PATCH] [List] Update to match the specification --- docs/src/pages/demos/app-bar/BottomAppBar.js | 5 +- docs/src/pages/demos/app-bar/BottomAppBar.tsx | 5 +- .../src/pages/demos/dividers/InsetDividers.js | 25 +-- .../pages/demos/dividers/InsetDividers.tsx | 25 +-- .../pages/demos/dividers/SubheaderDividers.js | 9 +- .../demos/dividers/SubheaderDividers.tsx | 9 +- .../CustomizedExpansionPanel.js | 4 +- .../CustomizedExpansionPanel.tsx | 8 +- docs/src/pages/demos/lists/AlignItemsList.js | 7 + docs/src/pages/demos/lists/CheckboxList.js | 12 +- .../demos/lists/CheckboxListSecondary.js | 8 +- docs/src/pages/demos/lists/FolderList.js | 25 +-- docs/src/pages/demos/lists/InsetList.js | 2 +- docs/src/pages/demos/lists/InteractiveList.js | 2 +- docs/src/pages/demos/lists/NestedList.js | 8 +- .../pages/demos/lists/SwitchListSecondary.js | 7 +- .../transfer-list/SelectAllTransferList.js | 10 +- .../pages/demos/transfer-list/TransferList.js | 10 +- .../instapaper/components/atoms/Badge.js | 6 +- .../components/molecules/ListItemIcon.js | 6 +- .../modules/components/LayoutBody.js | 5 +- .../tweeper/components/atoms/Badge.js | 6 +- .../components/molecules/ListItemIcon.js | 6 +- .../src/ToggleButton/ToggleButton.js | 2 - packages/material-ui/src/AppBar/AppBar.js | 6 +- .../material-ui/src/Container/Container.js | 18 +-- .../src/DialogActions/DialogActions.js | 6 +- .../src/DialogContent/DialogContent.js | 6 +- .../ExpansionPanelDetails.js | 8 +- .../material-ui/src/FormGroup/FormGroup.js | 6 +- packages/material-ui/src/Icon/Icon.js | 6 +- .../material-ui/src/IconButton/IconButton.js | 1 + .../material-ui/src/InputLabel/InputLabel.js | 5 +- packages/material-ui/src/Link/Link.js | 6 +- packages/material-ui/src/List/List.js | 43 +++--- packages/material-ui/src/ListItem/ListItem.js | 142 +++++++++--------- .../material-ui/src/ListItem/ListItem.test.js | 16 -- .../src/ListItem/MergeListContext.d.ts | 9 -- .../src/ListItem/MergeListContext.js | 34 ----- .../src/ListItemAvatar/ListItemAvatar.js | 58 +++---- .../src/ListItemAvatar/ListItemAvatar.test.js | 47 ++---- .../src/ListItemIcon/ListItemIcon.js | 10 +- .../ListItemSecondaryAction.js | 10 +- .../src/ListItemText/ListItemText.js | 142 ++++++++---------- .../src/ListSubheader/ListSubheader.js | 2 - .../src/NativeSelect/NativeSelectInput.js | 5 +- packages/material-ui/src/Switch/Switch.js | 29 +++- .../material-ui/src/TableCell/TableCell.js | 5 +- packages/material-ui/src/Toolbar/Toolbar.js | 42 +++--- .../src/utils/reactHelpers.test.js | 3 +- pages/api/icon-button.md | 2 +- pages/api/list-item-avatar.md | 5 +- pages/api/list-item-text.md | 4 +- pages/api/list-item.md | 5 +- pages/api/list.md | 2 +- pages/api/switch.md | 3 + test/regressions/tests/List/AvatarListItem.js | 39 ----- .../List/PrimaryActionCheckboxListItem.js | 44 ------ 58 files changed, 397 insertions(+), 584 deletions(-) delete mode 100644 packages/material-ui/src/ListItem/MergeListContext.d.ts delete mode 100644 packages/material-ui/src/ListItem/MergeListContext.js delete mode 100644 test/regressions/tests/List/AvatarListItem.js delete mode 100644 test/regressions/tests/List/PrimaryActionCheckboxListItem.js diff --git a/docs/src/pages/demos/app-bar/BottomAppBar.js b/docs/src/pages/demos/app-bar/BottomAppBar.js index 941122a26ee0dd..7e209a24623cff 100644 --- a/docs/src/pages/demos/app-bar/BottomAppBar.js +++ b/docs/src/pages/demos/app-bar/BottomAppBar.js @@ -9,6 +9,7 @@ import Paper from '@material-ui/core/Paper'; import Fab from '@material-ui/core/Fab'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; +import ListItemAvatar from '@material-ui/core/ListItemAvatar'; import ListItemText from '@material-ui/core/ListItemText'; import ListSubheader from '@material-ui/core/ListSubheader'; import Avatar from '@material-ui/core/Avatar'; @@ -111,7 +112,9 @@ function BottomAppBar() { {id === 1 && Today} {id === 3 && Yesterday} - + + + diff --git a/docs/src/pages/demos/app-bar/BottomAppBar.tsx b/docs/src/pages/demos/app-bar/BottomAppBar.tsx index 5a8fe5ca431bba..970786f3107e9f 100644 --- a/docs/src/pages/demos/app-bar/BottomAppBar.tsx +++ b/docs/src/pages/demos/app-bar/BottomAppBar.tsx @@ -9,6 +9,7 @@ import Paper from '@material-ui/core/Paper'; import Fab from '@material-ui/core/Fab'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; +import ListItemAvatar from '@material-ui/core/ListItemAvatar'; import ListItemText from '@material-ui/core/ListItemText'; import ListSubheader from '@material-ui/core/ListSubheader'; import Avatar from '@material-ui/core/Avatar'; @@ -113,7 +114,9 @@ function BottomAppBar() { {id === 1 && Today} {id === 3 && Yesterday} - + + + diff --git a/docs/src/pages/demos/dividers/InsetDividers.js b/docs/src/pages/demos/dividers/InsetDividers.js index 413268c9cacccf..ee12890c42c2af 100644 --- a/docs/src/pages/demos/dividers/InsetDividers.js +++ b/docs/src/pages/demos/dividers/InsetDividers.js @@ -4,6 +4,7 @@ import { withStyles } from '@material-ui/core/styles'; 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'; @@ -23,25 +24,31 @@ function InsetDividers(props) { return ( - - - + + + + +
    • - - - + + + + + - - - + + + + +     diff --git a/docs/src/pages/demos/dividers/InsetDividers.tsx b/docs/src/pages/demos/dividers/InsetDividers.tsx index 5341c8084b2115..faf982ecf263e6 100644 --- a/docs/src/pages/demos/dividers/InsetDividers.tsx +++ b/docs/src/pages/demos/dividers/InsetDividers.tsx @@ -4,6 +4,7 @@ import { withStyles, Theme, WithStyles, WithTheme, createStyles } from '@materia 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'; @@ -26,25 +27,31 @@ function InsetDividers(props: Props) { return ( - - - + + + + +
    • - - - + + + + + - - - + + + + +     diff --git a/docs/src/pages/demos/dividers/SubheaderDividers.js b/docs/src/pages/demos/dividers/SubheaderDividers.js index 85b1eee9b92df5..0265a2861a3f9d 100644 --- a/docs/src/pages/demos/dividers/SubheaderDividers.js +++ b/docs/src/pages/demos/dividers/SubheaderDividers.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; +import ListItemAvatar from '@material-ui/core/ListItemAvatar'; import ListItemText from '@material-ui/core/ListItemText'; import Avatar from '@material-ui/core/Avatar'; import BeachAccessIcon from '@material-ui/icons/BeachAccess'; @@ -56,9 +57,11 @@ function SubheaderDividers(props) { - - - + + + + + diff --git a/docs/src/pages/demos/dividers/SubheaderDividers.tsx b/docs/src/pages/demos/dividers/SubheaderDividers.tsx index 030f8239ffdf1d..212025f13a0d73 100644 --- a/docs/src/pages/demos/dividers/SubheaderDividers.tsx +++ b/docs/src/pages/demos/dividers/SubheaderDividers.tsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { withStyles, WithStyles, WithTheme, Theme } from '@material-ui/core/styles'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; +import ListItemAvatar from '@material-ui/core/ListItemAvatar'; import ListItemText from '@material-ui/core/ListItemText'; import Avatar from '@material-ui/core/Avatar'; import BeachAccessIcon from '@material-ui/icons/BeachAccess'; @@ -58,9 +59,11 @@ function SubheaderDividers(props: Props) { - - - + + + + + diff --git a/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js index 14810b683f17b4..3ec84239dd63e9 100644 --- a/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js +++ b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js @@ -37,9 +37,7 @@ const ExpansionPanelSummary = withStyles({ }, }, expanded: {}, -})(props => ); - -ExpansionPanelSummary.muiName = 'ExpansionPanelSummary'; +})(MuiExpansionPanelSummary); const ExpansionPanelDetails = withStyles(theme => ({ root: { diff --git a/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.tsx b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.tsx index 170ea9779e7176..b3d7d5ec285182 100644 --- a/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.tsx +++ b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.tsx @@ -1,9 +1,7 @@ import React from 'react'; import { withStyles } from '@material-ui/core/styles'; import MuiExpansionPanel from '@material-ui/core/ExpansionPanel'; -import MuiExpansionPanelSummary, { - ExpansionPanelSummaryProps, -} from '@material-ui/core/ExpansionPanelSummary'; +import MuiExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'; import MuiExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'; import Typography from '@material-ui/core/Typography'; @@ -39,9 +37,7 @@ const ExpansionPanelSummary = withStyles({ }, }, expanded: {}, -})((props: ExpansionPanelSummaryProps) => ); - -(ExpansionPanelSummary as any).muiName = 'ExpansionPanelSummary'; +})(MuiExpansionPanelSummary); const ExpansionPanelDetails = withStyles(theme => ({ root: { diff --git a/docs/src/pages/demos/lists/AlignItemsList.js b/docs/src/pages/demos/lists/AlignItemsList.js index 28a55864b44810..a20f6d6bc9fd6a 100644 --- a/docs/src/pages/demos/lists/AlignItemsList.js +++ b/docs/src/pages/demos/lists/AlignItemsList.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; import List from '@material-ui/core/List'; import ListItem 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'; @@ -44,6 +45,9 @@ function AlignItemsList(props) { } /> +
  • + +
    • @@ -65,6 +69,9 @@ function AlignItemsList(props) { } /> +
  • + +
    • diff --git a/docs/src/pages/demos/lists/CheckboxList.js b/docs/src/pages/demos/lists/CheckboxList.js index 1101e84913a79a..293616e47ac2df 100644 --- a/docs/src/pages/demos/lists/CheckboxList.js +++ b/docs/src/pages/demos/lists/CheckboxList.js @@ -2,6 +2,7 @@ import React from 'react'; import { makeStyles } 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'; @@ -37,10 +38,17 @@ function CheckboxList() { {[0, 1, 2, 3].map(value => ( - + + + - + diff --git a/docs/src/pages/demos/lists/CheckboxListSecondary.js b/docs/src/pages/demos/lists/CheckboxListSecondary.js index b20bdbc90599d5..b5831f19c401e2 100644 --- a/docs/src/pages/demos/lists/CheckboxListSecondary.js +++ b/docs/src/pages/demos/lists/CheckboxListSecondary.js @@ -34,7 +34,7 @@ function CheckboxListSecondary() { }; return ( - + {[0, 1, 2, 3].map(value => ( @@ -42,7 +42,11 @@ function CheckboxListSecondary() { - + ))} diff --git a/docs/src/pages/demos/lists/FolderList.js b/docs/src/pages/demos/lists/FolderList.js index 94202e51b54fe6..1a27fb03e2632d 100644 --- a/docs/src/pages/demos/lists/FolderList.js +++ b/docs/src/pages/demos/lists/FolderList.js @@ -4,6 +4,7 @@ import { withStyles } from '@material-ui/core/styles'; 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'; @@ -22,21 +23,27 @@ function FolderList(props) { return ( - - - + + + + + - - - + + + + + - - - + + + + + diff --git a/docs/src/pages/demos/lists/InsetList.js b/docs/src/pages/demos/lists/InsetList.js index 7bc540957290e4..e4bd666edc324f 100644 --- a/docs/src/pages/demos/lists/InsetList.js +++ b/docs/src/pages/demos/lists/InsetList.js @@ -23,7 +23,7 @@ function InsetList(props) { - + diff --git a/docs/src/pages/demos/lists/InteractiveList.js b/docs/src/pages/demos/lists/InteractiveList.js index 18eb3df6165358..8e65394b3dbcd4 100644 --- a/docs/src/pages/demos/lists/InteractiveList.js +++ b/docs/src/pages/demos/lists/InteractiveList.js @@ -146,7 +146,7 @@ function InteractiveList() { secondary={secondary ? 'Secondary text' : null} /> - + diff --git a/docs/src/pages/demos/lists/NestedList.js b/docs/src/pages/demos/lists/NestedList.js index 7100c9b3dc35ae..d13dce2695e2cf 100644 --- a/docs/src/pages/demos/lists/NestedList.js +++ b/docs/src/pages/demos/lists/NestedList.js @@ -42,19 +42,19 @@ function NestedList() { - + - + - + {open ? : } @@ -63,7 +63,7 @@ function NestedList() { - + diff --git a/docs/src/pages/demos/lists/SwitchListSecondary.js b/docs/src/pages/demos/lists/SwitchListSecondary.js index e9fd99579a051f..8e8ca16becc9ce 100644 --- a/docs/src/pages/demos/lists/SwitchListSecondary.js +++ b/docs/src/pages/demos/lists/SwitchListSecondary.js @@ -43,7 +43,11 @@ function SwitchListSecondary() { - + @@ -53,6 +57,7 @@ function SwitchListSecondary() { diff --git a/docs/src/pages/demos/transfer-list/SelectAllTransferList.js b/docs/src/pages/demos/transfer-list/SelectAllTransferList.js index bddad4099400dd..db0ec47a65403e 100644 --- a/docs/src/pages/demos/transfer-list/SelectAllTransferList.js +++ b/docs/src/pages/demos/transfer-list/SelectAllTransferList.js @@ -6,6 +6,7 @@ import Card from '@material-ui/core/Card'; import CardHeader from '@material-ui/core/CardHeader'; import ListItem from '@material-ui/core/ListItem'; import ListItemText from '@material-ui/core/ListItemText'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; import Checkbox from '@material-ui/core/Checkbox'; import Button from '@material-ui/core/Button'; import Divider from '@material-ui/core/Divider'; @@ -23,10 +24,6 @@ const useStyles = makeStyles(theme => ({ backgroundColor: theme.palette.background.paper, overflow: 'auto', }, - listItem: { - paddingTop: 4, - paddingBottom: 4, - }, button: { margin: theme.spacing(0.5, 0), }, @@ -107,13 +104,14 @@ function TransferList() { {items.map(value => ( - + + + ))} diff --git a/docs/src/pages/demos/transfer-list/TransferList.js b/docs/src/pages/demos/transfer-list/TransferList.js index c4e9b9e61ebb9c..556964900a29b0 100644 --- a/docs/src/pages/demos/transfer-list/TransferList.js +++ b/docs/src/pages/demos/transfer-list/TransferList.js @@ -3,6 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'; import Grid from '@material-ui/core/Grid'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemText from '@material-ui/core/ListItemText'; import Checkbox from '@material-ui/core/Checkbox'; import Button from '@material-ui/core/Button'; @@ -17,10 +18,6 @@ const useStyles = makeStyles(theme => ({ height: 230, overflow: 'auto', }, - listItem: { - paddingTop: 4, - paddingBottom: 4, - }, button: { margin: theme.spacing(0.5, 0), }, @@ -83,13 +80,14 @@ function TransferList() { {items.map(value => ( - + + + ))} 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 9d876b040d191a..d516a08068f594 100644 --- a/docs/src/pages/premium-themes/instapaper/components/atoms/Badge.js +++ b/docs/src/pages/premium-themes/instapaper/components/atoms/Badge.js @@ -3,10 +3,8 @@ import clsx from 'clsx'; import MuiBadge from '@material-ui/core/Badge'; import { BADGE } from '../../theme/core'; -const Badge = ({ className, dotted, children, ...props }) => ( - - {children} - +const Badge = ({ className, dotted, ...props }) => ( + ); 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 3c0bc3dfeae458..4b2f4fa8d72a13 100644 --- a/docs/src/pages/premium-themes/instapaper/components/molecules/ListItemIcon.js +++ b/docs/src/pages/premium-themes/instapaper/components/molecules/ListItemIcon.js @@ -3,13 +3,11 @@ import clsx from 'clsx'; import MuiListItemIcon from '@material-ui/core/ListItemIcon'; import { LIST_ITEM_ICON } from '../../theme/core'; -const ListItemIcon = ({ className, children, subcategory, ...props }) => ( +const ListItemIcon = ({ className, 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 225d5d10954787..7c63699fc994f1 100644 --- a/docs/src/pages/premium-themes/onepirate/modules/components/LayoutBody.js +++ b/docs/src/pages/premium-themes/onepirate/modules/components/LayoutBody.js @@ -77,7 +77,6 @@ const styles = theme => ({ function LayoutBody(props) { const { - children, classes, className, component: Component, @@ -104,9 +103,7 @@ 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 5780da76cff575..3afe3189c842eb 100644 --- a/docs/src/pages/premium-themes/tweeper/components/atoms/Badge.js +++ b/docs/src/pages/premium-themes/tweeper/components/atoms/Badge.js @@ -3,16 +3,14 @@ import clsx from 'clsx'; import MuiBadge from '@material-ui/core/Badge'; import { BADGE } from '../../theme/core'; -const Badge = ({ className, dotted, number, children, ...props }) => ( +const Badge = ({ className, dotted, number, ...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 3c0bc3dfeae458..4b2f4fa8d72a13 100644 --- a/docs/src/pages/premium-themes/tweeper/components/molecules/ListItemIcon.js +++ b/docs/src/pages/premium-themes/tweeper/components/molecules/ListItemIcon.js @@ -3,13 +3,11 @@ import clsx from 'clsx'; import MuiListItemIcon from '@material-ui/core/ListItemIcon'; import { LIST_ITEM_ICON } from '../../theme/core'; -const ListItemIcon = ({ className, children, subcategory, ...props }) => ( +const ListItemIcon = ({ className, 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 fb0b1006ecd9d0..1ba3f715d666b7 100644 --- a/packages/material-ui-lab/src/ToggleButton/ToggleButton.js +++ b/packages/material-ui-lab/src/ToggleButton/ToggleButton.js @@ -170,6 +170,4 @@ 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 deebced5560b83..d06b8261f7a8b3 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 { children, classes, className, color, position, ...other } = props; + const { 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 c06cf730e762df..860ee2a9179f4a 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: theme.spacing(2), - paddingRight: theme.spacing(2), + paddingLeft: 16, + paddingRight: 16, [theme.breakpoints.up('sm')]: { - paddingLeft: theme.spacing(3), - paddingRight: theme.spacing(3), + paddingLeft: 24, + paddingRight: 24, }, [theme.breakpoints.up('md')]: { - paddingLeft: theme.spacing(4), - paddingRight: theme.spacing(4), + paddingLeft: 32, + paddingRight: 32, }, }, 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 { children, classes, className, component: Component, fixed, maxWidth, ...other } = props; + const { 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 42f0f09a55f3b8..9ac699f8d81417 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, children, classes, className, ...other } = props; + const { disableActionSpacing, 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 e7ba6da2f875aa..3b80df1163b60c 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, children, className, dividers, ...other } = props; + const { classes, 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 d47cfaefb04088..fec59e7552114f 100644 --- a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js +++ b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js @@ -12,13 +12,9 @@ export const styles = { }; const ExpansionPanelDetails = React.forwardRef(function ExpansionPanelDetails(props, ref) { - const { classes, children, className, ...other } = props; + const { classes, className, ...other } = props; - return ( -
    - {children} -
    - ); + return
    ; }); ExpansionPanelDetails.propTypes = { diff --git a/packages/material-ui/src/FormGroup/FormGroup.js b/packages/material-ui/src/FormGroup/FormGroup.js index d74dd29e2eb36b..52674aeef0d2d5 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, children, row, ...other } = props; + const { classes, className, row, ...other } = props; return (
    - {children} -
    + /> ); }); diff --git a/packages/material-ui/src/Icon/Icon.js b/packages/material-ui/src/Icon/Icon.js index 1b47c06a6feb95..e876f580bb18a7 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 { children, classes, className, color, component: Component, fontSize, ...other } = props; + const { classes, className, color, component: Component, fontSize, ...other } = props; return ( + /> ); }); diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js index 5500452e25437e..8b65988e97f736 100644 --- a/packages/material-ui/src/IconButton/IconButton.js +++ b/packages/material-ui/src/IconButton/IconButton.js @@ -178,6 +178,7 @@ IconButton.propTypes = { IconButton.defaultProps = { color: 'default', disabled: false, + edge: false, size: 'medium', }; diff --git a/packages/material-ui/src/InputLabel/InputLabel.js b/packages/material-ui/src/InputLabel/InputLabel.js index d02166a8b27d33..2616933acfe34a 100644 --- a/packages/material-ui/src/InputLabel/InputLabel.js +++ b/packages/material-ui/src/InputLabel/InputLabel.js @@ -85,7 +85,6 @@ export const styles = theme => ({ const InputLabel = React.forwardRef(function InputLabel(props, ref) { const { - children, classes, className, disableAnimation, @@ -131,9 +130,7 @@ 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 58ccc5e643a369..07390e453c987d 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 { children, classes, className, component, TypographyClasses, underline, ...other } = props; + const { classes, className, component, TypographyClasses, underline, ...other } = props; return ( - {children} - + /> ); }); diff --git a/packages/material-ui/src/List/List.js b/packages/material-ui/src/List/List.js index a54ac9feb5c517..ee7ee5b1d93df9 100644 --- a/packages/material-ui/src/List/List.js +++ b/packages/material-ui/src/List/List.js @@ -17,11 +17,8 @@ export const styles = { paddingTop: 8, paddingBottom: 8, }, - /* Styles applied to the root element if `dense={true}` & `disablePadding={false}`. */ - dense: { - paddingTop: 4, - paddingBottom: 4, - }, + /* Styles applied to the root element if dense */ + dense: {}, /* Styles applied to the root element if a `subheader` is provided. */ subheader: { paddingTop: 0, @@ -43,24 +40,24 @@ const List = React.forwardRef(function List(props, ref) { const context = React.useMemo(() => ({ dense }), [dense]); return ( - - + + {subheader} {children} - - + + ); }); @@ -85,8 +82,8 @@ List.propTypes = { component: PropTypes.elementType, /** * If `true`, compact vertical padding designed for keyboard and mouse input will be used for - * the list and list items. The property is available to descendant components as the - * `dense` context. + * the list and list items. + * The property is available to descendant components as the `dense` context. */ dense: PropTypes.bool, /** diff --git a/packages/material-ui/src/ListItem/ListItem.js b/packages/material-ui/src/ListItem/ListItem.js index 52c604074d1e2f..2dd1bcfcf06c3f 100644 --- a/packages/material-ui/src/ListItem/ListItem.js +++ b/packages/material-ui/src/ListItem/ListItem.js @@ -5,7 +5,7 @@ import { chainPropTypes } from '@material-ui/utils'; import withStyles from '../styles/withStyles'; import ButtonBase from '../ButtonBase'; import { isMuiElement } from '../utils/reactHelpers'; -import MergeListContext from './MergeListContext'; +import ListContext from '../List/ListContext'; export const styles = theme => ({ /* Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */ @@ -18,8 +18,8 @@ export const styles = theme => ({ width: '100%', boxSizing: 'border-box', textAlign: 'left', - paddingTop: 11, // To use 10px in v4 - paddingBottom: 11, // To use 10px in v4 + paddingTop: 8, + paddingBottom: 8, '&$selected, &$selected:hover': { backgroundColor: theme.palette.action.selected, }, @@ -33,12 +33,10 @@ export const styles = theme => ({ focusVisible: { backgroundColor: theme.palette.action.selected, }, - /* Legacy styles applied to the root element. Use `root` instead. */ - default: {}, - /* Styles applied to the `component` element if `dense={true}` or `children` includes `Avatar`. */ + /* Styles applied to the `component` element if dense */ dense: { - paddingTop: 8, - paddingBottom: 8, + paddingTop: 4, + paddingBottom: 4, }, /* Styles applied to the `component` element if `alignItems="flex-start"`. */ alignItemsFlexStart: { @@ -76,7 +74,7 @@ export const styles = theme => ({ secondaryAction: { // Add some space to avoid collision as `ListItemSecondaryAction` // is absolutely positioned. - paddingRight: 32, + paddingRight: 48, }, /* Styles applied to the root element if `selected={true}`. */ selected: {}, @@ -91,11 +89,11 @@ const ListItem = React.forwardRef(function ListItem(props, ref) { button, children: childrenProp, classes, - className: classNameProp, + className, component: componentProp, ContainerComponent, ContainerProps: { className: ContainerClassName, ...ContainerProps } = {}, - dense: denseProp, + dense, disabled, disableGutters, divider, @@ -104,72 +102,75 @@ const ListItem = React.forwardRef(function ListItem(props, ref) { ...other } = props; - return ( - - {({ dense }) => { - const children = React.Children.toArray(childrenProp); - const hasAvatar = children.some(value => isMuiElement(value, ['ListItemAvatar'])); - const hasSecondaryAction = - children.length && - isMuiElement(children[children.length - 1], ['ListItemSecondaryAction']); + const context = React.useContext(ListContext); + const childContext = { + dense: dense || context.dense || false, + alignItems, + }; - const className = clsx( - classes.root, - classes.default, - { - [classes.dense]: dense || hasAvatar, - [classes.gutters]: !disableGutters, - [classes.divider]: divider, - [classes.disabled]: disabled, - [classes.button]: button, - [classes.alignItemsFlexStart]: alignItems === 'flex-start', - [classes.secondaryAction]: hasSecondaryAction, - [classes.selected]: selected, - }, - classNameProp, - ); + const children = React.Children.toArray(childrenProp); + const hasSecondaryAction = + children.length && isMuiElement(children[children.length - 1], ['ListItemSecondaryAction']); - const componentProps = { className, disabled, ...other }; - let Component = componentProp || 'li'; + const componentProps = { + className: clsx( + classes.root, + { + [classes.dense]: childContext.dense, + [classes.gutters]: !disableGutters, + [classes.divider]: divider, + [classes.disabled]: disabled, + [classes.button]: button, + [classes.alignItemsFlexStart]: alignItems === 'flex-start', + [classes.secondaryAction]: hasSecondaryAction, + [classes.selected]: selected, + }, + className, + ), + disabled, + ...other, + }; + let Component = componentProp || 'li'; - if (button) { - componentProps.component = componentProp || 'div'; - componentProps.focusVisibleClassName = clsx(classes.focusVisible, focusVisibleClassName); - Component = ButtonBase; - } + if (button) { + componentProps.component = componentProp || 'div'; + componentProps.focusVisibleClassName = clsx(classes.focusVisible, focusVisibleClassName); + Component = ButtonBase; + } - if (hasSecondaryAction) { - // Use div by default. - Component = !componentProps.component && !componentProp ? 'div' : Component; + if (hasSecondaryAction) { + // Use div by default. + Component = !componentProps.component && !componentProp ? 'div' : Component; - // Avoid nesting of li > li. - if (ContainerComponent === 'li') { - if (Component === 'li') { - Component = 'div'; - } else if (componentProps.component === 'li') { - componentProps.component = 'div'; - } - } + // Avoid nesting of li > li. + if (ContainerComponent === 'li') { + if (Component === 'li') { + Component = 'div'; + } else if (componentProps.component === 'li') { + componentProps.component = 'div'; + } + } - return ( - - {children} - {children.pop()} - - ); - } + return ( + + + {children} + {children.pop()} + + + ); + } - return ( - - {children} - - ); - }} - + return ( + + + {children} + + ); }); @@ -263,7 +264,6 @@ ListItem.defaultProps = { alignItems: 'center', button: false, ContainerComponent: 'li', - dense: false, disabled: false, disableGutters: false, divider: false, diff --git a/packages/material-ui/src/ListItem/ListItem.test.js b/packages/material-ui/src/ListItem/ListItem.test.js index 41928fb4b4f5ba..d750aadf66358e 100644 --- a/packages/material-ui/src/ListItem/ListItem.test.js +++ b/packages/material-ui/src/ListItem/ListItem.test.js @@ -11,8 +11,6 @@ import consoleErrorMock from 'test/utils/consoleErrorMock'; import ListItemText from '../ListItemText'; import ListItemSecondaryAction from '../ListItemSecondaryAction'; import ListItem from './ListItem'; -import ListItemAvatar from '../ListItemAvatar'; -import Avatar from '../Avatar'; import ButtonBase from '../ButtonBase'; import ListContext from '../List/ListContext'; @@ -54,20 +52,6 @@ describe('', () => { assert.strictEqual(listItem.hasClass(classes.gutters), false); }); - it('should use dense class when ListItemAvatar is present', () => { - const wrapper = mount( - - - - - - - , - ); - const listItem = findOutermostIntrinsic(wrapper); - assert.strictEqual(listItem.hasClass(classes.dense), true); - }); - describe('prop: button', () => { it('should render a div', () => { const wrapper = mount(); diff --git a/packages/material-ui/src/ListItem/MergeListContext.d.ts b/packages/material-ui/src/ListItem/MergeListContext.d.ts deleted file mode 100644 index 4502151b2170e2..00000000000000 --- a/packages/material-ui/src/ListItem/MergeListContext.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -import * as React from 'react'; - -export interface MergeWithListContextProps { - dense?: boolean; -} - -declare const MergeWithListContext: React.ComponentType; - -export default MergeWithListContext; diff --git a/packages/material-ui/src/ListItem/MergeListContext.js b/packages/material-ui/src/ListItem/MergeListContext.js deleted file mode 100644 index 49d839e6729f7c..00000000000000 --- a/packages/material-ui/src/ListItem/MergeListContext.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import ListContext from '../List/ListContext'; - -/** - * @ignore - internal component. - * - * Consumes a context and passes that context merged with its props. - */ -function MergeListContext(props) { - const { alignItems, children, dense } = props; - return ( - - {context => { - const childContext = { - dense: dense || context.dense || false, - alignItems, - }; - - return ( - {children(childContext)} - ); - }} - - ); -} - -MergeListContext.propTypes = { - alignItems: PropTypes.oneOf(['flex-start', 'center']).isRequired, - children: PropTypes.func.isRequired, - dense: PropTypes.bool.isRequired, -}; - -export default MergeListContext; diff --git a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js index cbfdde9963b83f..9b647b8efc450f 100644 --- a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js +++ b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js @@ -4,55 +4,39 @@ import clsx from 'clsx'; import withStyles from '../styles/withStyles'; import ListContext from '../List/ListContext'; -export const styles = theme => ({ +export const styles = { /* Styles applied to the root element. */ root: { - width: 36, - height: 36, - fontSize: theme.typography.pxToRem(18), - marginRight: 4, + minWidth: 56, }, - /* Styles applied to the root element when. */ + /* Styles applied to the root element when context.alignItems="flex-start". */ alignItemsFlexStart: { - marginTop: 4, + marginTop: 8, }, - /* Styles applied to the children – typically the `Avatar` component. */ - icon: { - width: 20, - height: 20, - fontSize: theme.typography.pxToRem(20), - }, -}); +}; /** * This is a simple wrapper to apply the `dense` * and `align-items="flex-start"` mode styles to `Avatar`. */ -function ListItemAvatar(props) { - const { children, classes, className, ...other } = props; +const ListItemAvatar = React.forwardRef(function ListItemAvatar(props, ref) { + const { classes, className, ...other } = props; + const context = React.useContext(ListContext); return ( - - {context => - React.cloneElement(children, { - className: clsx( - { - [classes.root]: context.dense, - [classes.alignItemsFlexStart]: context.alignItems === 'flex-start', - }, - className, - children.props.className, - ), - childrenClassName: clsx( - { [classes.icon]: context.dense }, - children.props.childrenClassName, - ), - ...other, - }) - } - +
    ); -} +}); ListItemAvatar.propTypes = { /** @@ -70,6 +54,4 @@ ListItemAvatar.propTypes = { className: PropTypes.string, }; -ListItemAvatar.muiName = 'ListItemAvatar'; - export default withStyles(styles, { name: 'MuiListItemAvatar' })(ListItemAvatar); diff --git a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.test.js b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.test.js index 1f263a07016e0d..c5604ae4884cef 100644 --- a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.test.js +++ b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.test.js @@ -1,9 +1,6 @@ import React from 'react'; -import { assert } from 'chai'; -import { createMount, getClasses } from '@material-ui/core/test-utils'; -import Avatar from '../Avatar'; +import { createMount, getClasses, describeConformance } from '@material-ui/core/test-utils'; import ListItemAvatar from './ListItemAvatar'; -import ListContext from '../List/ListContext'; describe('', () => { let mount; @@ -12,8 +9,8 @@ describe('', () => { before(() => { mount = createMount(); classes = getClasses( - - + +
    , ); }); @@ -22,30 +19,16 @@ describe('', () => { mount.cleanUp(); }); - it('should render with the user and root classes', () => { - const wrapper = mount( - - - - - , - ); - const avatar = wrapper.find(Avatar); - assert.strictEqual(avatar.hasClass('foo'), true); - assert.strictEqual(avatar.hasClass('bar'), true); - assert.strictEqual(avatar.hasClass(classes.root), true); - }); - - describe('List', () => { - it('should render an Avatar', () => { - const wrapper = mount( - - - - - , - ); - assert.strictEqual(wrapper.type(), ListItemAvatar); - }); - }); + describeConformance( + +
    + , + () => ({ + classes, + inheritComponent: 'div', + mount, + refInstanceof: window.HTMLDivElement, + skip: ['componentProp'], + }), + ); }); diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.js b/packages/material-ui/src/ListItemIcon/ListItemIcon.js index b16d2018bb6146..89e61d727ce5af 100644 --- a/packages/material-ui/src/ListItemIcon/ListItemIcon.js +++ b/packages/material-ui/src/ListItemIcon/ListItemIcon.js @@ -6,7 +6,7 @@ import withStyles from '../styles/withStyles'; export const styles = theme => ({ /* Styles applied to the root element. */ root: { - marginRight: 16, + minWidth: 56, color: theme.palette.action.active, flexShrink: 0, display: 'inline-flex', @@ -17,13 +17,9 @@ export const styles = theme => ({ * A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`. */ const ListItemIcon = React.forwardRef(function ListItemIcon(props, ref) { - const { children, classes, className: classNameProp, ...other } = props; + const { classes, className, ...other } = props; - return ( -
    - {children} -
    - ); + return
    ; }); ListItemIcon.propTypes = { diff --git a/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js b/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js index 05be0938c8299a..0f67a2933a7b51 100644 --- a/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js +++ b/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js @@ -7,7 +7,7 @@ export const styles = { /* Styles applied to the root element. */ root: { position: 'absolute', - right: 4, + right: 16, top: '50%', transform: 'translateY(-50%)', }, @@ -17,13 +17,9 @@ export const styles = { * Must be used as the last child of ListItem to function properly. */ const ListItemSecondaryAction = React.forwardRef(function ListItemSecondaryAction(props, ref) { - const { children, classes, className, ...other } = props; + const { classes, className, ...other } = props; - return ( -
    - {children} -
    - ); + return
    ; }); ListItemSecondaryAction.propTypes = { diff --git a/packages/material-ui/src/ListItemText/ListItemText.js b/packages/material-ui/src/ListItemText/ListItemText.js index 22b709eb0eb6c4..530ac38e0fb2b0 100644 --- a/packages/material-ui/src/ListItemText/ListItemText.js +++ b/packages/material-ui/src/ListItemText/ListItemText.js @@ -5,109 +5,91 @@ import withStyles from '../styles/withStyles'; import Typography from '../Typography'; import ListContext from '../List/ListContext'; -export const styles = theme => ({ +export const styles = { /* Styles applied to the root element. */ root: { flex: '1 1 auto', minWidth: 0, - padding: '0 16px', - '&:first-child': { - paddingLeft: 0, - }, + marginTop: 4, + marginBottom: 4, }, + /* Styles applied to the `Typography` components if primary and secondary are set. */ + multipleLines: { + marginTop: 6, + marginBottom: 6, + }, + /* Styles applied to the `Typography` components if dense. */ + dense: {}, /* Styles applied to the root element if `inset={true}`. */ inset: { - '&:first-child': { - paddingLeft: 56, - }, - }, - /* Styles applied to the root element if `context.dense` is `true`. */ - dense: { - fontSize: theme.typography.pxToRem(13), + paddingLeft: 56, }, /* Styles applied to the primary `Typography` component. */ - primary: { - '&$textDense': { - fontSize: 'inherit', - }, - }, + primary: {}, /* Styles applied to the secondary `Typography` component. */ - secondary: { - '&$textDense': { - fontSize: 'inherit', - }, - }, - /* Styles applied to the `Typography` components if `context.dense` is `true`. */ - textDense: {}, -}); + secondary: {}, +}; const ListItemText = React.forwardRef(function ListItemText(props, ref) { const { children, classes, - className: classNameProp, + className, disableTypography, inset, primary: primaryProp, primaryTypographyProps, secondary: secondaryProp, secondaryTypographyProps, - theme, ...other } = props; + const { dense } = React.useContext(ListContext); - return ( - - {({ dense }) => { - let primary = primaryProp != null ? primaryProp : children; - if (primary != null && primary.type !== Typography && !disableTypography) { - primary = ( - - {primary} - - ); - } + let primary = primaryProp != null ? primaryProp : children; + if (primary != null && primary.type !== Typography && !disableTypography) { + primary = ( + + {primary} + + ); + } - let secondary = secondaryProp; - if (secondary != null && secondary.type !== Typography && !disableTypography) { - secondary = ( - - {secondary} - - ); - } + let secondary = secondaryProp; + if (secondary != null && secondary.type !== Typography && !disableTypography) { + secondary = ( + + {secondary} + + ); + } - return ( -
    - {primary} - {secondary} -
    - ); - }} -     + return ( +
    + {primary} + {secondary} +
    ); }); @@ -155,10 +137,6 @@ ListItemText.propTypes = { * (as long as disableTypography is not `true`). */ secondaryTypographyProps: PropTypes.object, - /** - * @ignore - */ - theme: PropTypes.object.isRequired, }; ListItemText.defaultProps = { @@ -166,4 +144,4 @@ ListItemText.defaultProps = { inset: false, }; -export default withStyles(styles, { name: 'MuiListItemText', withTheme: true })(ListItemText); +export default withStyles(styles, { name: 'MuiListItemText' })(ListItemText); diff --git a/packages/material-ui/src/ListSubheader/ListSubheader.js b/packages/material-ui/src/ListSubheader/ListSubheader.js index 220a1d393f74de..f2fcd0fb2a4278 100644 --- a/packages/material-ui/src/ListSubheader/ListSubheader.js +++ b/packages/material-ui/src/ListSubheader/ListSubheader.js @@ -116,6 +116,4 @@ ListSubheader.defaultProps = { inset: false, }; -ListSubheader.muiName = 'ListSubheader'; - export default withStyles(styles, { name: 'MuiListSubheader' })(ListSubheader); diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.js index e7f86354a28279..d6344dc1b7be39 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelectInput.js +++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.js @@ -7,7 +7,6 @@ import clsx from 'clsx'; */ const NativeSelectInput = React.forwardRef(function NativeSelectInput(props, ref) { const { - children, classes, className, disabled, @@ -38,9 +37,7 @@ const NativeSelectInput = React.forwardRef(function NativeSelectInput(props, ref value={value} ref={inputRef || ref} {...other} - > - {children} - + />
    ); diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js index cc2e2a5c2303ce..c979714ea6ff0c 100644 --- a/packages/material-ui/src/Switch/Switch.js +++ b/packages/material-ui/src/Switch/Switch.js @@ -22,6 +22,14 @@ export const styles = theme => ({ zIndex: 0, // Reset the stacking context. verticalAlign: 'middle', // For correct alignment with the text. }, + /* Styles applied to the root element if `edge="start"`. */ + edgeStart: { + marginLeft: -8, + }, + /* Styles applied to the root element if `edge="end"`. */ + edgeEnd: { + marginRight: -8, + }, /* Styles applied to the internal `SwitchBase` component's `root` class. */ switchBase: { position: 'absolute', @@ -116,11 +124,20 @@ export const styles = theme => ({ }); const Switch = React.forwardRef(function Switch(props, ref) { - const { classes, className, color, ...other } = props; + const { classes, className, color, edge, ...other } = props; const icon = ; return ( - + ({ const TableCell = React.forwardRef(function TableCell(props, ref) { const { align, - children, classes, className, component, @@ -155,9 +154,7 @@ 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 9db0b735f5f829..6612d8b2e3d236 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: theme.spacing(2), - paddingRight: theme.spacing(2), + paddingLeft: 16, + paddingRight: 16, [theme.breakpoints.up('sm')]: { - paddingLeft: theme.spacing(3), - paddingRight: theme.spacing(3), + paddingLeft: 24, + paddingRight: 24, }, }, /* Styles applied to the root element if `variant="regular"`. */ @@ -28,29 +28,21 @@ export const styles = theme => ({ }); const Toolbar = React.forwardRef(function Toolbar(props, ref) { - const { - children, - classes, - className: classNameProp, - component: Component, - disableGutters, - variant, - ...other - } = props; - - const className = clsx( - classes.root, - classes[variant], - { - [classes.gutters]: !disableGutters, - }, - classNameProp, - ); + const { classes, className, component: Component, disableGutters, variant, ...other } = props; return ( - - {children} - + ); }); diff --git a/packages/material-ui/src/utils/reactHelpers.test.js b/packages/material-ui/src/utils/reactHelpers.test.js index ec324a24839eb7..77a7cb7ced93a5 100644 --- a/packages/material-ui/src/utils/reactHelpers.test.js +++ b/packages/material-ui/src/utils/reactHelpers.test.js @@ -3,7 +3,7 @@ import { assert } from 'chai'; import { spy } from 'sinon'; import PropTypes from 'prop-types'; import { isMuiElement, setRef, useForkRef } from './reactHelpers'; -import { Input, ListItemAvatar, ListItemSecondaryAction, SvgIcon } from '..'; +import { Input, ListItemSecondaryAction, SvgIcon } from '..'; import { mount } from 'enzyme'; describe('utils/reactHelpers.js', () => { @@ -21,7 +21,6 @@ describe('utils/reactHelpers.js', () => { it('should be truthy for matching components', () => { [ [Input, 'Input'], - [ListItemAvatar, 'ListItemAvatar'], [ListItemSecondaryAction, 'ListItemSecondaryAction'], [SvgIcon, 'SvgIcon'], ].forEach(([Component, muiName]) => { diff --git a/pages/api/icon-button.md b/pages/api/icon-button.md index 337bc8ccd21401..dd9bec99625311 100644 --- a/pages/api/icon-button.md +++ b/pages/api/icon-button.md @@ -23,7 +23,7 @@ regarding the available icon options. | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | color | enum: 'default' |
     'inherit' |
     'primary' |
     'secondary'
     | 'default' | The color of the component. It supports those theme colors that make sense for this component. | | disabled | bool | false | If `true`, the button will be disabled. | -| edge | enum: 'start' |
     'end' |
     false
     | | If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape). | +| edge | enum: 'start' |
     'end' |
     false
     | false | If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape). | | size | enum: 'small' |
     'medium'
     | 'medium' | The size of the button. `small` is equivalent to the dense button styling. | The `ref` is forwarded to the root element. diff --git a/pages/api/list-item-avatar.md b/pages/api/list-item-avatar.md index 3bfa0160c0b2e3..64029f6fcfd9ab 100644 --- a/pages/api/list-item-avatar.md +++ b/pages/api/list-item-avatar.md @@ -22,7 +22,7 @@ and `align-items="flex-start"` mode styles to `Avatar`. | children * | element | | The content of the component – normally `Avatar`. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -The component cannot hold a ref. +The `ref` is forwarded to the root element. Any other properties supplied will be spread to the root element (native element). @@ -35,8 +35,7 @@ This property accepts the following keys: | Name | Description | |:-----|:------------| | root | Styles applied to the root element. -| alignItemsFlexStart | Styles applied to the root element when. -| icon | Styles applied to the children – typically the `Avatar` component. +| alignItemsFlexStart | Styles applied to the root element when context.alignItems="flex-start". Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js) diff --git a/pages/api/list-item-text.md b/pages/api/list-item-text.md index 9caddfe933c431..c9833cfeff0188 100644 --- a/pages/api/list-item-text.md +++ b/pages/api/list-item-text.md @@ -40,11 +40,11 @@ This property accepts the following keys: | Name | Description | |:-----|:------------| | root | Styles applied to the root element. +| multipleLines | Styles applied to the `Typography` components if primary and secondary are set. +| dense | Styles applied to the `Typography` components if dense. | inset | Styles applied to the root element if `inset={true}`. -| dense | Styles applied to the root element if `context.dense` is `true`. | primary | Styles applied to the primary `Typography` component. | secondary | Styles applied to the secondary `Typography` component. -| textDense | Styles applied to the `Typography` components if `context.dense` is `true`. Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/ListItemText/ListItemText.js) diff --git a/pages/api/list-item.md b/pages/api/list-item.md index 1415ddc5473423..f2eeacf9372247 100644 --- a/pages/api/list-item.md +++ b/pages/api/list-item.md @@ -25,7 +25,7 @@ Uses an additional container component if `ListItemSecondaryAction` is the last | component | elementType | | The component used for the root node. Either a string to use a DOM element or a component. By default, it's a `li` when `button` is `false` and a `div` when `button` is `true`. | | ContainerComponent | elementType | 'li' | The container component used when a `ListItemSecondaryAction` is the last child. | | ContainerProps | object | | Properties applied to the container component if used. | -| dense | bool | false | If `true`, compact vertical padding designed for keyboard and mouse input will be used. | +| dense | bool | | If `true`, compact vertical padding designed for keyboard and mouse input will be used. | | disabled | bool | false | If `true`, the list item will be disabled. | | disableGutters | bool | false | If `true`, the left and right padding is removed. | | divider | bool | false | If `true`, a 1px light border is added to the bottom of the list item. | @@ -46,8 +46,7 @@ This property accepts the following keys: | root | Styles applied to the (normally root) `component` element. May be wrapped by a `container`. | container | Styles applied to the `container` element if `children` includes `ListItemSecondaryAction`. | focusVisible | Styles applied to the `component`'s `focusVisibleClassName` property if `button={true}`. -| default | Legacy styles applied to the root element. Use `root` instead. -| dense | Styles applied to the `component` element if `dense={true}` or `children` includes `Avatar`. +| dense | Styles applied to the `component` element if dense | alignItemsFlexStart | Styles applied to the `component` element if `alignItems="flex-start"`. | disabled | Styles applied to the inner `component` element if `disabled={true}`. | divider | Styles applied to the inner `component` element if `divider={true}`. diff --git a/pages/api/list.md b/pages/api/list.md index 19607b35570142..3aa0229cff5197 100644 --- a/pages/api/list.md +++ b/pages/api/list.md @@ -39,7 +39,7 @@ This property accepts the following keys: |:-----|:------------| | root | Styles applied to the root element. | padding | Styles applied to the root element if `disablePadding={false}`. -| dense | Styles applied to the root element if `dense={true}` & `disablePadding={false}`. +| dense | Styles applied to the root element if dense | subheader | Styles applied to the root element if a `subheader` is provided. Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section diff --git a/pages/api/switch.md b/pages/api/switch.md index 093e669edea5f9..ea3fc1931fc2fe 100644 --- a/pages/api/switch.md +++ b/pages/api/switch.md @@ -24,6 +24,7 @@ import Switch from '@material-ui/core/Switch'; | color | enum: 'primary' |
     'secondary' |
     'default'
     | 'secondary' | The color of the component. It supports those theme colors that make sense for this component. | | disabled | bool | | If `true`, the switch will be disabled. | | disableRipple | bool | | If `true`, the ripple effect will be disabled. | +| edge | enum: 'start' |
     'end' |
     false
     | false | If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape). | | icon | node | | The icon to display when the component is unchecked. | | id | string | | The id of the `input` element. | | inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | @@ -45,6 +46,8 @@ This property accepts the following keys: | Name | Description | |:-----|:------------| | root | Styles applied to the root element. +| edgeStart | Styles applied to the root element if `edge="start"`. +| edgeEnd | Styles applied to the root element if `edge="end"`. | switchBase | Styles applied to the internal `SwitchBase` component's `root` class. | colorPrimary | Styles applied to the internal SwitchBase component's root element if `color="primary"`. | colorSecondary | Styles applied to the internal SwitchBase component's root element if `color="secondary"`. diff --git a/test/regressions/tests/List/AvatarListItem.js b/test/regressions/tests/List/AvatarListItem.js deleted file mode 100644 index f319ca0c270955..00000000000000 --- a/test/regressions/tests/List/AvatarListItem.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import Avatar from '@material-ui/core/Avatar'; -import Icon from '@material-ui/core/Icon'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; - -export default function AvatarListItem() { - return ( -
    - - - folder - - - - - - folder - - - - - - - folder - - - - - - folder - - - - -
    - ); -} diff --git a/test/regressions/tests/List/PrimaryActionCheckboxListItem.js b/test/regressions/tests/List/PrimaryActionCheckboxListItem.js deleted file mode 100644 index 134f63bd0fb94a..00000000000000 --- a/test/regressions/tests/List/PrimaryActionCheckboxListItem.js +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import Checkbox from '@material-ui/core/Checkbox'; -import IconButton from '@material-ui/core/IconButton'; -import Icon from '@material-ui/core/Icon'; - -export default function PrimaryActionCheckboxListItem() { - return ( -
    - - - - - - - comment - - - - - - - - - comment - - - - - - - - - comment - - - - -
    - ); -}