handle more reviews

mui · Apr 14, 2019 · 4a9254f · 4a9254f
1 parent e8fab84
commit 4a9254f
Show file tree

Hide file tree

Showing 9 changed files with 15 additions and 24 deletions.
diff --git a/docs/src/pages/demos/dividers/InsetDividers.js b/docs/src/pages/demos/dividers/InsetDividers.js
@@ -31,9 +31,7 @@ function InsetDividers(props) {
         </ListItemAvatar>
         <ListItemText primary="Photos" secondary="Jan 9, 2014" />
       </ListItem>
-      <li>
-        <Divider variant="inset" />
-      </li>
+      <Divider variant="inset" component="li" />
       <ListItem>
         <ListItemAvatar>
           <Avatar>

diff --git a/docs/src/pages/demos/dividers/InsetDividers.tsx b/docs/src/pages/demos/dividers/InsetDividers.tsx
@@ -34,9 +34,7 @@ function InsetDividers(props: Props) {
         </ListItemAvatar>
         <ListItemText primary="Photos" secondary="Jan 9, 2014" />
       </ListItem>
-      <li>
-        <Divider variant="inset" />
-      </li>
+      <Divider variant="inset" component="li" />
       <ListItem>
         <ListItemAvatar>
           <Avatar>

diff --git a/docs/src/pages/demos/lists/AlignItemsList.js b/docs/src/pages/demos/lists/AlignItemsList.js
@@ -45,9 +45,7 @@ function AlignItemsList(props) {
           }
         />
       </ListItem>
-      <li>
-        <Divider variant="inset" />
-      </li>
+      <Divider variant="inset" component="li" />
       <ListItem alignItems="flex-start">
         <ListItemAvatar>
           <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
@@ -69,9 +67,7 @@ function AlignItemsList(props) {
           }
         />
       </ListItem>
-      <li>
-        <Divider variant="inset" />
-      </li>
+      <Divider variant="inset" component="li" />
       <ListItem alignItems="flex-start">
         <ListItemAvatar>
           <Avatar alt="Remy Sharp" src="/static/images/avatar/3.jpg" />

diff --git a/docs/src/pages/demos/lists/AlignItemsList.tsx b/docs/src/pages/demos/lists/AlignItemsList.tsx
@@ -48,9 +48,7 @@ function AlignItemsList(props: AlignItemListProps) {
           }
         />
       </ListItem>
-      <li>
-        <Divider variant="inset" />
-      </li>
+      <Divider variant="inset" component="li" />
       <ListItem alignItems="flex-start">
         <ListItemAvatar>
           <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
@@ -72,9 +70,7 @@ function AlignItemsList(props: AlignItemListProps) {
           }
         />
       </ListItem>
-      <li>
-        <Divider variant="inset" />
-      </li>
+      <Divider variant="inset" component="li" />
       <ListItem alignItems="flex-start">
         <ListItemAvatar>
           <Avatar alt="Remy Sharp" src="/static/images/avatar/3.jpg" />

diff --git a/docs/src/pages/demos/lists/CheckboxListSecondary.js b/docs/src/pages/demos/lists/CheckboxListSecondary.js
@@ -34,7 +34,7 @@ function CheckboxListSecondary() {
   };
 
   return (
-    <List className={classes.root}>
+    <List dense className={classes.root}>
       {[0, 1, 2, 3].map(value => (
         <ListItem key={value} button>
           <ListItemAvatar>

diff --git a/docs/src/pages/demos/lists/CheckboxListSecondary.tsx b/docs/src/pages/demos/lists/CheckboxListSecondary.tsx
@@ -36,7 +36,7 @@ function CheckboxListSecondary() {
   };
 
   return (
-    <List className={classes.root}>
+    <List dense className={classes.root}>
       {[0, 1, 2, 3].map(value => (
         <ListItem key={value} button>
           <ListItemAvatar>

diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js
@@ -38,6 +38,10 @@ export const styles = theme => ({
 const Divider = React.forwardRef(function Divider(props, ref) {
   const { absolute, classes, className, component: Component, light, variant, ...other } = props;
 
+  if (Component === 'li' && !other.role) {
+    other.role = 'separator';
+  }
+
   return (
     <Component
       className={clsx(

diff --git a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js
@@ -8,6 +8,7 @@ export const styles = {
   /* Styles applied to the root element. */
   root: {
     minWidth: 56,
+    flexShrink: 0,
   },
   /* Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. */
   alignItemsFlexStart: {
@@ -16,8 +17,7 @@ export const styles = {
 };
 
 /**
- * This is a simple wrapper to apply the `dense`
- * and `align-items="flex-start"` mode styles to `Avatar`.
+ * A simple wrapper to apply `List` styles to an `Avatar`.
  */
 const ListItemAvatar = React.forwardRef(function ListItemAvatar(props, ref) {
   const { classes, className, ...other } = props;

diff --git a/pages/api/list-item-avatar.md b/pages/api/list-item-avatar.md
@@ -12,8 +12,7 @@ filename: /packages/material-ui/src/ListItemAvatar/ListItemAvatar.js
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 ```
 
-This is a simple wrapper to apply the `dense`
-and `align-items="flex-start"` mode styles to `Avatar`.
+A simple wrapper to apply `List` styles to an `Avatar`.
 
 ## Props