review

mui · Apr 14, 2019 · ca1d6cc · ca1d6cc
1 parent d36a32d
commit ca1d6cc
Show file tree

Hide file tree

Showing 23 changed files with 139 additions and 65 deletions.
diff --git 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) {
           }
         />
       </ListItem>
+      <li>
+        <Divider variant="inset" />
+      </li>
       <ListItem alignItems="flex-start">
         <ListItemAvatar>
           <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
@@ -68,6 +72,9 @@ function AlignItemsList(props: AlignItemListProps) {
           }
         />
       </ListItem>
+      <li>
+        <Divider variant="inset" />
+      </li>
       <ListItem alignItems="flex-start">
         <ListItemAvatar>
           <Avatar alt="Remy Sharp" src="/static/images/avatar/3.jpg" />

diff --git 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() {
     <List className={classes.root}>
       {[0, 1, 2, 3].map(value => (
         <ListItem key={value} role={undefined} dense button onClick={handleToggle(value)}>
-          <Checkbox checked={checked.indexOf(value) !== -1} tabIndex={-1} disableRipple />
+          <ListItemIcon>
+            <Checkbox
+              edge="start"
+              checked={checked.indexOf(value) !== -1}
+              tabIndex={-1}
+              disableRipple
+            />
+          </ListItemIcon>
           <ListItemText primary={`Line item ${value + 1}`} />
           <ListItemSecondaryAction>
-            <IconButton aria-label="Comments">
+            <IconButton edge="end" aria-label="Comments">
               <CommentIcon />
             </IconButton>
           </ListItemSecondaryAction>

diff --git a/docs/src/pages/demos/lists/CheckboxListSecondary.tsx b/docs/src/pages/demos/lists/CheckboxListSecondary.tsx
@@ -36,15 +36,19 @@ function CheckboxListSecondary() {
   };
 
   return (
-    <List dense className={classes.root}>
+    <List className={classes.root}>
       {[0, 1, 2, 3].map(value => (
         <ListItem key={value} button>
           <ListItemAvatar>
             <Avatar alt={`Avatar n°${value + 1}`} src={`/static/images/avatar/${value + 1}.jpg`} />
           </ListItemAvatar>
           <ListItemText primary={`Line item ${value + 1}`} />
           <ListItemSecondaryAction>
-            <Checkbox onChange={handleToggle(value)} checked={checked.indexOf(value) !== -1} />
+            <Checkbox
+              edge="end"
+              onChange={handleToggle(value)}
+              checked={checked.indexOf(value) !== -1}
+            />
           </ListItemSecondaryAction>
         </ListItem>
       ))}

diff --git 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 (
     <List className={classes.root}>
       <ListItem>
-        <Avatar>
-          <ImageIcon />
-        </Avatar>
+        <ListItemAvatar>
+          <Avatar>
+            <ImageIcon />
+          </Avatar>
+        </ListItemAvatar>
         <ListItemText primary="Photos" secondary="Jan 9, 2014" />
       </ListItem>
       <ListItem>
-        <Avatar>
-          <WorkIcon />
-        </Avatar>
+        <ListItemAvatar>
+          <Avatar>
+            <WorkIcon />
+          </Avatar>
+        </ListItemAvatar>
         <ListItemText primary="Work" secondary="Jan 7, 2014" />
       </ListItem>
       <ListItem>
-        <Avatar>
-          <BeachAccessIcon />
-        </Avatar>
+        <ListItemAvatar>
+          <Avatar>
+            <BeachAccessIcon />
+          </Avatar>
+        </ListItemAvatar>
         <ListItemText primary="Vacation" secondary="July 20, 2014" />
       </ListItem>
     </List>

diff --git a/docs/src/pages/demos/lists/InsetList.tsx b/docs/src/pages/demos/lists/InsetList.tsx
@@ -26,7 +26,7 @@ function InsetList(props: InsetListProps) {
         <ListItemIcon>
           <StarIcon />
         </ListItemIcon>
-        <ListItemText inset primary="Chelsea Otakan" />
+        <ListItemText primary="Chelsea Otakan" />
       </ListItem>
       <ListItem button>
         <ListItemText inset primary="Eric Hoffman" />

diff --git 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 }) => (
-  <MuiBadge className={clsx(BADGE.root, className, dotted && BADGE.dotted)} {...props} />
+const Badge = ({ className, dotted, children, ...props }) => (
+  <MuiBadge className={clsx(BADGE.root, className, dotted && BADGE.dotted)} {...props}>
+    {children}
+  </MuiBadge>
 );
 
 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
@@ -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 }) => (
   <MuiListItemIcon
     className={clsx(LIST_ITEM_ICON.root, className, subcategory && LIST_ITEM_ICON.subcategory)}
     {...props}
-  />
+  >
+    {children}
+  </MuiListItemIcon>
 );
 
 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
@@ -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}
+    </Component>
   );
 }
 

diff --git 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 }) => (
   <MuiBadge
     className={clsx(BADGE.root, className, dotted && BADGE.dotted, number && BADGE.number)}
     classes={{
       badge: BADGE.badge,
     }}
     {...props}
-  />
+  >
+    {children}
+  </MuiBadge>
 );
 
 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
@@ -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 }) => (
   <MuiListItemIcon
     className={clsx(LIST_ITEM_ICON.root, className, subcategory && LIST_ITEM_ICON.subcategory)}
     {...props}
-  />
+  >
+    {children}
+  </MuiListItemIcon>
 );
 
 export default ListItemIcon;
diff --git 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
@@ -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 (
     <Paper
@@ -87,7 +87,9 @@ const AppBar = React.forwardRef(function AppBar(props, ref) {
       )}
       ref={ref}
       {...other}
-    />
+    >
+      {children}
+    </Paper>
   );
 });
 

diff --git 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 (
     <Component
@@ -73,7 +73,9 @@ const Container = React.forwardRef(function Container(props, ref) {
       )}
       ref={ref}
       {...other}
-    />
+    >
+      {children}
+    </Component>
   );
 });
 

diff --git 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 (
     <div
@@ -35,7 +35,9 @@ const DialogActions = React.forwardRef(function DialogActions(props, ref) {
       )}
       ref={ref}
       {...other}
-    />
+    >
+      {children}
+    </div>
   );
 });
 

diff --git 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 (
     <div
@@ -32,7 +32,9 @@ const DialogContent = React.forwardRef(function DialogContent(props, ref) {
       )}
       ref={ref}
       {...other}
-    />
+    >
+      {children}
+    </div>
   );
 });
 

diff --git 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 <div className={clsx(classes.root, className)} ref={ref} {...other} />;
+  return (
+    <div className={clsx(classes.root, className)} ref={ref} {...other}>
+      {children}
+    </div>
+  );
 });
 
 ExpansionPanelDetails.propTypes = {

diff --git 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 (
     <div
@@ -35,7 +35,9 @@ const FormGroup = React.forwardRef(function FormGroup(props, ref) {
       )}
       ref={ref}
       {...other}
-    />
+    >
+      {children}
+    </div>
   );
 });
 

diff --git 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 (
     <Component
@@ -66,7 +66,9 @@ const Icon = React.forwardRef(function Icon(props, ref) {
       aria-hidden="true"
       ref={ref}
       {...other}
-    />
+    >
+      {children}
+    </Component>
   );
 });
 

diff --git 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}
+    </FormLabel>
   );
 });