apply review

mui · Mar 15, 2020 · 0546c18 · 0546c18
1 parent a5509ed
commit 0546c18
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 5 deletions.
diff --git a/docs/pages/api-docs/avatar-group.md b/docs/pages/api-docs/avatar-group.md
@@ -26,8 +26,8 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> | | The avatars to stack. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
-| <span class="prop-name">spacing</span> | <span class="prop-type">'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;number</span> | <span class="prop-default">'medium'</span> | Spacing between avatars. |
-| <span class="prop-name">max</span> | <span class="prop-type">number</span> | <span class="prop-default">5</span> | Max avatars to display. |
+| <span class="prop-name">spacing</span> | <span class="prop-type">'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;number</span> | <span class="prop-default">'medium'</span> | The spacing between avatars. A group with `small` spacing value has a larger overlap. |
+| <span class="prop-name">max</span> | <span class="prop-type">number</span> | <span class="prop-default">5</span> | The maximum number of avatars to display. An additional text avatar will display the number of hidden avatars, if any. |
 
 The `ref` is forwarded to the root element.
 

diff --git a/docs/src/pages/components/avatars/GroupAvatars.js b/docs/src/pages/components/avatars/GroupAvatars.js
@@ -4,10 +4,11 @@ import AvatarGroup from '@material-ui/lab/AvatarGroup';
 
 export default function GroupAvatars() {
  return (
- <AvatarGroup>
+ <AvatarGroup max={3}>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+ <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
  </AvatarGroup>
  );
 }
diff --git a/docs/src/pages/components/avatars/GroupAvatars.tsx b/docs/src/pages/components/avatars/GroupAvatars.tsx
@@ -4,10 +4,11 @@ import AvatarGroup from '@material-ui/lab/AvatarGroup';
 
 export default function GroupAvatars() {
  return (
- <AvatarGroup>
+ <AvatarGroup max={3}>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+ <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
  </AvatarGroup>
  );
 }
diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js
@@ -61,7 +61,7 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(props, ref) {
  zIndex: 0,
  marginLeft: spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing,
  }}>+{extraAvatars}</Avatar>
- : <></>}
+ : null}
  </div>
  );
 });