From 31c6d7db820f7db2b6e73df7580fa757acfb64ea Mon Sep 17 00:00:00 2001 From: Gavin Fynbo Date: Tue, 25 Feb 2020 19:14:41 -0800 Subject: [PATCH 1/7] Add max avatar prop to AvatarGroup --- docs/pages/api-docs/avatar-group.md | 1 + .../pages/components/avatars/GroupAvatars.js | 6 +----- .../pages/components/avatars/GroupAvatars.tsx | 4 ---- .../src/AvatarGroup/AvatarGroup.d.ts | 4 ++++ .../src/AvatarGroup/AvatarGroup.js | 19 +++++++++++++++++-- 5 files changed, 23 insertions(+), 11 deletions(-) diff --git a/docs/pages/api-docs/avatar-group.md b/docs/pages/api-docs/avatar-group.md index 393a0e92dbd03a..6280185f839fdf 100644 --- a/docs/pages/api-docs/avatar-group.md +++ b/docs/pages/api-docs/avatar-group.md @@ -27,6 +27,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | children | node | | The avatars to stack. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | spacing | 'medium'
| 'small'
| number | 'medium' | Spacing between avatars. | +| max | number | 5 | Max avatars to display. | 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 index 1af0c027edd5d6..22decfe38328e1 100644 --- a/docs/src/pages/components/avatars/GroupAvatars.js +++ b/docs/src/pages/components/avatars/GroupAvatars.js @@ -1,7 +1,6 @@ import React from 'react'; import Avatar from '@material-ui/core/Avatar'; -import AvatarGroup from '@material-ui/lab/AvatarGroup'; -import Tooltip from '@material-ui/core/Tooltip'; +import AvatarGroup from '../../../../../packages/material-ui-lab/src/AvatarGroup'; export default function GroupAvatars() { return ( @@ -9,9 +8,6 @@ export default function GroupAvatars() { - - +3 - ); } diff --git a/docs/src/pages/components/avatars/GroupAvatars.tsx b/docs/src/pages/components/avatars/GroupAvatars.tsx index 1af0c027edd5d6..2ba7239497d042 100644 --- a/docs/src/pages/components/avatars/GroupAvatars.tsx +++ b/docs/src/pages/components/avatars/GroupAvatars.tsx @@ -1,7 +1,6 @@ import React from 'react'; import Avatar from '@material-ui/core/Avatar'; import AvatarGroup from '@material-ui/lab/AvatarGroup'; -import Tooltip from '@material-ui/core/Tooltip'; export default function GroupAvatars() { return ( @@ -9,9 +8,6 @@ export default function GroupAvatars() { - - +3 - ); } diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts index 1a0403bf6a7fa5..bef1a9b5ba2292 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts @@ -11,6 +11,10 @@ export interface AvatarGroupProps * Spacing between avatars. */ spacing?: 'small' | 'medium' | number; + /** + * Max avatars to show before +x. + */ + max?: number; } export type AvatarGroupClassKey = 'root' | 'avatar'; diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js index a78d20a321378d..edc3f0d3730aa0 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { isFragment } from 'react-is'; import clsx from 'clsx'; import { withStyles } from '@material-ui/core/styles'; +import Avatar from '@material-ui/core/Avatar'; const SPACINGS = { small: -16, @@ -22,7 +23,7 @@ export const styles = theme => ({ }); const AvatarGroup = React.forwardRef(function AvatarGroup(props, ref) { - const { children: childrenProp, classes, className, spacing = 'medium', ...other } = props; + const { children: childrenProp, classes, className, spacing = 'medium', max = 5, ...other } = props; const children = React.Children.toArray(childrenProp).filter(child => { if (process.env.NODE_ENV !== 'production') { @@ -39,9 +40,11 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(props, ref) { return React.isValidElement(child); }); + const extraAvatars = children.length > max ? children.length - max : 0; + return (
- {children.map((child, index) => { + {children.slice(0, children.length - extraAvatars).map((child, index) => { return React.cloneElement(child, { className: clsx(child.props.className, classes.avatar), style: { @@ -51,6 +54,14 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(props, ref) { }, }); })} + {extraAvatars ? + +{extraAvatars} + : <>}
); }); @@ -77,6 +88,10 @@ AvatarGroup.propTypes = { * Spacing between avatars. */ spacing: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.number]), + /** + * Max avatars to show before +x. + */ + max: PropTypes.number, }; export default withStyles(styles, { name: 'MuiAvatarGroup' })(AvatarGroup); From 4efa0621c6c28459f0c8aa5603b1047a2b4e980e Mon Sep 17 00:00:00 2001 From: Gavin Fynbo Date: Tue, 25 Feb 2020 19:18:14 -0800 Subject: [PATCH 2/7] Fix docs import --- docs/src/pages/components/avatars/GroupAvatars.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/avatars/GroupAvatars.js b/docs/src/pages/components/avatars/GroupAvatars.js index 22decfe38328e1..73135cb67be981 100644 --- a/docs/src/pages/components/avatars/GroupAvatars.js +++ b/docs/src/pages/components/avatars/GroupAvatars.js @@ -1,6 +1,6 @@ import React from 'react'; import Avatar from '@material-ui/core/Avatar'; -import AvatarGroup from '../../../../../packages/material-ui-lab/src/AvatarGroup'; +import AvatarGroup from '@material-ui/core/AvatarGroup'; export default function GroupAvatars() { return ( From 0422f4641c15aa856bc4c9f2ab11223c85eb52af Mon Sep 17 00:00:00 2001 From: Gavin Fynbo Date: Tue, 25 Feb 2020 19:19:04 -0800 Subject: [PATCH 3/7] Fix docs import --- docs/src/pages/components/avatars/GroupAvatars.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/avatars/GroupAvatars.js b/docs/src/pages/components/avatars/GroupAvatars.js index 73135cb67be981..2ba7239497d042 100644 --- a/docs/src/pages/components/avatars/GroupAvatars.js +++ b/docs/src/pages/components/avatars/GroupAvatars.js @@ -1,6 +1,6 @@ import React from 'react'; import Avatar from '@material-ui/core/Avatar'; -import AvatarGroup from '@material-ui/core/AvatarGroup'; +import AvatarGroup from '@material-ui/lab/AvatarGroup'; export default function GroupAvatars() { return ( From 905cb306fc58b44d1fd8806c972691b107555063 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 4 Mar 2020 10:53:02 +0100 Subject: [PATCH 4/7] Update packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js Co-Authored-By: Matt --- packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js index edc3f0d3730aa0..815870500c0919 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js @@ -85,7 +85,7 @@ AvatarGroup.propTypes = { */ className: PropTypes.string, /** - * Spacing between avatars. + * The spacing between avatars. A group with `small` spacing value has a larger overlap. */ spacing: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.number]), /** From a5509eda876da943c89df7c136a6eea5ba3224aa Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 4 Mar 2020 10:53:23 +0100 Subject: [PATCH 5/7] Update packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js Co-Authored-By: Matt --- packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js index 815870500c0919..64e6c5589ff89e 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js @@ -89,7 +89,7 @@ AvatarGroup.propTypes = { */ spacing: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.number]), /** - * Max avatars to show before +x. + * The maximum number of avatars to display. An additional text avatar will display the number of hidden avatars, if any. */ max: PropTypes.number, }; From 0546c1814265c5b7b9a731c5d3645590ee291710 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 15 Mar 2020 19:50:21 +0100 Subject: [PATCH 6/7] apply review --- docs/pages/api-docs/avatar-group.md | 4 ++-- docs/src/pages/components/avatars/GroupAvatars.js | 3 ++- docs/src/pages/components/avatars/GroupAvatars.tsx | 3 ++- packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js | 2 +- 4 files changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/pages/api-docs/avatar-group.md b/docs/pages/api-docs/avatar-group.md index 6280185f839fdf..70d36efdf25dfe 100644 --- 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 |:-----|:-----|:--------|:------------| | children | node | | The avatars to stack. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| spacing | 'medium'
| 'small'
| number | 'medium' | Spacing between avatars. | -| max | number | 5 | Max avatars to display. | +| spacing | 'medium'
| 'small'
| number | 'medium' | The spacing between avatars. A group with `small` spacing value has a larger overlap. | +| max | number | 5 | 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 index 2ba7239497d042..17c8816ff1c540 100644 --- 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 ( - + + ); } diff --git a/docs/src/pages/components/avatars/GroupAvatars.tsx b/docs/src/pages/components/avatars/GroupAvatars.tsx index 2ba7239497d042..17c8816ff1c540 100644 --- 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 ( - + + ); } diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js index 64e6c5589ff89e..4725cb1e84b4ef 100644 --- 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} - : <>} + : null} ); }); From 69f99423a1706d4db55cfc6eadd8ff0c0a918bb0 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 15 Mar 2020 19:57:08 +0100 Subject: [PATCH 7/7] add test case --- docs/pages/api-docs/avatar-group.md | 4 +-- .../src/AvatarGroup/AvatarGroup.d.ts | 8 +++--- .../src/AvatarGroup/AvatarGroup.js | 26 +++++++++++++------ .../src/AvatarGroup/AvatarGroup.test.js | 16 ++++++++++++ 4 files changed, 40 insertions(+), 14 deletions(-) diff --git a/docs/pages/api-docs/avatar-group.md b/docs/pages/api-docs/avatar-group.md index 70d36efdf25dfe..bdd0d2e5ccb838 100644 --- 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 |:-----|:-----|:--------|:------------| | children | node | | The avatars to stack. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| spacing | 'medium'
| 'small'
| number | 'medium' | The spacing between avatars. A group with `small` spacing value has a larger overlap. | -| max | number | 5 | The maximum number of avatars to display. An additional text avatar will display the number of hidden avatars, if any. | +| max | number | 5 | Max avatars to show before +x. | +| spacing | 'medium'
| 'small'
| number | 'medium' | Spacing between avatars. | The `ref` is forwarded to the root element. diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts index bef1a9b5ba2292..62d7792bc53d98 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts @@ -7,14 +7,14 @@ export interface AvatarGroupProps * The avatars to stack. */ children: React.ReactNode; - /** - * Spacing between avatars. - */ - spacing?: 'small' | 'medium' | number; /** * Max avatars to show before +x. */ max?: number; + /** + * Spacing between avatars. + */ + spacing?: 'small' | 'medium' | number; } export type AvatarGroupClassKey = 'root' | 'avatar'; diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js index 4725cb1e84b4ef..273066efc309b9 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js @@ -23,7 +23,14 @@ export const styles = theme => ({ }); const AvatarGroup = React.forwardRef(function AvatarGroup(props, ref) { - const { children: childrenProp, classes, className, spacing = 'medium', max = 5, ...other } = props; + const { + children: childrenProp, + classes, + className, + spacing = 'medium', + max = 5, + ...other + } = props; const children = React.Children.toArray(childrenProp).filter(child => { if (process.env.NODE_ENV !== 'production') { @@ -54,14 +61,17 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(props, ref) { }, }); })} - {extraAvatars ? + {extraAvatars ? ( +{extraAvatars} - : null} + }} + > + +{extraAvatars} + + ) : null} ); }); @@ -85,13 +95,13 @@ AvatarGroup.propTypes = { */ className: PropTypes.string, /** - * The spacing between avatars. A group with `small` spacing value has a larger overlap. + * Max avatars to show before +x. */ - spacing: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.number]), + max: PropTypes.number, /** - * The maximum number of avatars to display. An additional text avatar will display the number of hidden avatars, if any. + * Spacing between avatars. */ - max: PropTypes.number, + spacing: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.number]), }; export default withStyles(styles, { name: 'MuiAvatarGroup' })(AvatarGroup); diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.test.js b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.test.js index 422a8ebc3ddb9f..f1fbf364c49361 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.test.js +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.test.js @@ -1,11 +1,15 @@ import * as React from 'react'; +import { expect } from 'chai'; import { createMount, getClasses } from '@material-ui/core/test-utils'; import describeConformance from '@material-ui/core/test-utils/describeConformance'; +import { createClientRender } from 'test/utils/createClientRender'; import AvatarGroup from './AvatarGroup'; +import { Avatar } from '@material-ui/core'; describe('', () => { let mount; let classes; + const render = createClientRender(); before(() => { mount = createMount({ strict: true }); @@ -23,4 +27,16 @@ describe('', () => { refInstanceof: window.HTMLDivElement, skip: ['componentProp'], })); + + it('should not display all the avatars', () => { + const { container } = render( + + + + + , + ); + expect(container.querySelectorAll('img').length).to.equal(1); + expect(container.textContent).to.equal('+2'); + }); });