From 5a1704eca36c403ec611f231487e8e3b09afae7e Mon Sep 17 00:00:00 2001 From: Gavin Fynbo Date: Sat, 15 Feb 2020 20:10:11 -0800 Subject: [PATCH 1/8] Add the spacing prop with 'small' 'medium' and 'large' options corresponding to negative margin on avatar spacing Begin changes for spacing prop Change spacing to 4px increments with default -8px and add doc changes. Changing spacing from numerical to small, medium, and large spacing Update docs to reflect correct sizing --- docs/pages/api/avatar-group.md | 2 ++ .../material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts | 4 ++++ .../material-ui-lab/src/AvatarGroup/AvatarGroup.js | 11 ++++++++--- 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/docs/pages/api/avatar-group.md b/docs/pages/api/avatar-group.md index 1d6e752f384e45..8eb70b31ffa979 100644 --- a/docs/pages/api/avatar-group.md +++ b/docs/pages/api/avatar-group.md @@ -26,6 +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 | 'small'
| 'medium'
| 'large | | Defines the spacing between `avatar` as `'large': -4px`, `'medium': -8px`, and `'small': -16px`. | + 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 2d2e7065d971e1..6c30e40b335d5b 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts @@ -7,6 +7,10 @@ export interface AvatarGroupProps * The avatars to stack. */ children: React.ReactNode; + /** + * Spacing between avatars + */ + spacing?: 'small' | 'medium' | 'large'; } 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 016441e475b9ed..445c2e184cb9a9 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js @@ -4,6 +4,8 @@ import { isFragment } from 'react-is'; import clsx from 'clsx'; import { withStyles } from '@material-ui/core/styles'; +const SPACINGS = {"large":-4, "medium":-8, "small":-16}; + export const styles = theme => ({ /* Styles applied to the root element. */ root: { @@ -12,13 +14,11 @@ export const styles = theme => ({ /* Styles applied to the avatar elements. */ avatar: { border: `2px solid ${theme.palette.background.default}`, - marginLeft: -8, }, }); const AvatarGroup = React.forwardRef(function AvatarGroup(props, ref) { - const { children: childrenProp, classes, className, ...other } = props; - + const { children: childrenProp, classes, className, spacing, ...other } = props; const children = React.Children.toArray(childrenProp).filter(child => { if (process.env.NODE_ENV !== 'production') { if (isFragment(child)) { @@ -41,6 +41,7 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(props, ref) { className: clsx(child.props.className, classes.avatar), style: { zIndex: children.length - index, + marginLeft: spacing && SPACINGS[spacing] ? SPACINGS[spacing] : -8, ...child.props.style, }, }); @@ -63,6 +64,10 @@ AvatarGroup.propTypes = { * See [CSS API](#css) below for more details. */ classes: PropTypes.object, + /** + * Defines the space between the type `avatar` component. + */ + spacing: PropTypes.oneOf(SPACINGS), /** * @ignore */ From 37cd0dd285045559f5ff19e77729b0fcc45d622d Mon Sep 17 00:00:00 2001 From: Gavin Fynbo Date: Mon, 17 Feb 2020 15:42:30 -0800 Subject: [PATCH 2/8] Fix notation to be single quote not double --- 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 445c2e184cb9a9..271f1dc9a4dc02 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js @@ -4,7 +4,7 @@ import { isFragment } from 'react-is'; import clsx from 'clsx'; import { withStyles } from '@material-ui/core/styles'; -const SPACINGS = {"large":-4, "medium":-8, "small":-16}; +const SPACINGS = {'large': -4, 'medium': -8, 'small': -16}; export const styles = theme => ({ /* Styles applied to the root element. */ From d526a0e048328c2faa1fe3c29eb6861a33ea997d Mon Sep 17 00:00:00 2001 From: Gavin Fynbo Date: Mon, 17 Feb 2020 16:12:55 -0800 Subject: [PATCH 3/8] Reflect PR changes of accepting a number input as well. --- packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts | 4 ++-- packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js | 7 +++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts index 6c30e40b335d5b..6431f8b37ffc2d 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts @@ -8,9 +8,9 @@ export interface AvatarGroupProps */ children: React.ReactNode; /** - * Spacing between avatars + * Spacing between avatars. */ - spacing?: 'small' | 'medium' | 'large'; + spacing?: 'small' | 'medium' | 'large' | 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 271f1dc9a4dc02..fa2d697e4319d7 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js @@ -41,7 +41,7 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(props, ref) { className: clsx(child.props.className, classes.avatar), style: { zIndex: children.length - index, - marginLeft: spacing && SPACINGS[spacing] ? SPACINGS[spacing] : -8, + marginLeft: spacing && SPACINGS[spacing] ? SPACINGS[spacing] : spacing, ...child.props.style, }, }); @@ -67,7 +67,10 @@ AvatarGroup.propTypes = { /** * Defines the space between the type `avatar` component. */ - spacing: PropTypes.oneOf(SPACINGS), + spacing: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + ]), /** * @ignore */ From 2b09618657442fa55d2f065d6f992c2757810bff Mon Sep 17 00:00:00 2001 From: Gavin Fynbo Date: Mon, 17 Feb 2020 16:20:38 -0800 Subject: [PATCH 4/8] Fix spacing enum --- packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js index fa2d697e4319d7..5ea94eb23bc38c 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js @@ -4,7 +4,11 @@ import { isFragment } from 'react-is'; import clsx from 'clsx'; import { withStyles } from '@material-ui/core/styles'; -const SPACINGS = {'large': -4, 'medium': -8, 'small': -16}; +const SPACINGS = { + large: -4, + medium: -8, + small: -16 +}; export const styles = theme => ({ /* Styles applied to the root element. */ From ad1d1b964fef5cc28097234ff8df7e043e7c0d77 Mon Sep 17 00:00:00 2001 From: Gavin Fynbo Date: Mon, 17 Feb 2020 16:33:11 -0800 Subject: [PATCH 5/8] Fix default spacing and number support and update docs --- docs/pages/api/avatar-group.md | 2 +- packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/api/avatar-group.md b/docs/pages/api/avatar-group.md index 8eb70b31ffa979..3c18e082d6c21e 100644 --- a/docs/pages/api/avatar-group.md +++ b/docs/pages/api/avatar-group.md @@ -26,7 +26,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 | 'small'
| 'medium'
| 'large | | Defines the spacing between `avatar` as `'large': -4px`, `'medium': -8px`, and `'small': -16px`. | +| spacing | 'small'
| 'medium'
| 'large'
| number | | Defines the spacing between `avatar` as `'large': -4px`, `'medium': -8px`, and `'small': -16px` or define a `number` as the spacing. | The `ref` is forwarded to the root element. diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js index 5ea94eb23bc38c..a24f4785f994a5 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js @@ -45,7 +45,7 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(props, ref) { className: clsx(child.props.className, classes.avatar), style: { zIndex: children.length - index, - marginLeft: spacing && SPACINGS[spacing] ? SPACINGS[spacing] : spacing, + marginLeft: spacing ? (SPACINGS[spacing] ? SPACINGS[spacing] : spacing) : -8, ...child.props.style, }, }); From e15f32ee4a83bab600252ff7368b047b5df08dd8 Mon Sep 17 00:00:00 2001 From: Gavin Fynbo Date: Mon, 17 Feb 2020 16:42:21 -0800 Subject: [PATCH 6/8] Fix typescript vs javascript differences --- packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js index a24f4785f994a5..e94524d838f5b0 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js @@ -69,12 +69,9 @@ AvatarGroup.propTypes = { */ classes: PropTypes.object, /** - * Defines the space between the type `avatar` component. + * Spacing between avatars. */ - spacing: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number, - ]), + spacing: PropTypes.oneOfType([PropTypes.oneOf(['large', 'medium', 'small']), PropTypes.number]), /** * @ignore */ From 0ce81e04025430073cc11e05f6034fdd42bf0345 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 18 Feb 2020 11:19:33 +0100 Subject: [PATCH 7/8] fix yarn proptypes generation --- docs/pages/api/avatar-group.md | 3 +-- .../src/AvatarGroup/AvatarGroup.d.ts | 2 +- .../src/AvatarGroup/AvatarGroup.js | 19 ++++++++++--------- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/pages/api/avatar-group.md b/docs/pages/api/avatar-group.md index 3c18e082d6c21e..b58ca8a30319a0 100644 --- a/docs/pages/api/avatar-group.md +++ b/docs/pages/api/avatar-group.md @@ -26,8 +26,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 | 'small'
| 'medium'
| 'large'
| number | | Defines the spacing between `avatar` as `'large': -4px`, `'medium': -8px`, and `'small': -16px` or define a `number` as the spacing. | - +| spacing | 'large'
| '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 6431f8b37ffc2d..7786af1a461c09 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts @@ -15,4 +15,4 @@ export interface AvatarGroupProps export type AvatarGroupClassKey = 'root' | 'avatar'; -export default function AvatarGroup(props: AvatarGroupProps): JSX.Element | null; +export default function AvatarGroup(props: AvatarGroupProps): JSX.Element; diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js index e94524d838f5b0..eefc96f12adb20 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js @@ -5,9 +5,8 @@ import clsx from 'clsx'; import { withStyles } from '@material-ui/core/styles'; const SPACINGS = { - large: -4, - medium: -8, - small: -16 + large: -4, + small: -16, }; export const styles = theme => ({ @@ -18,11 +17,13 @@ export const styles = theme => ({ /* Styles applied to the avatar elements. */ avatar: { border: `2px solid ${theme.palette.background.default}`, + marginLeft: -8, }, }); const AvatarGroup = React.forwardRef(function AvatarGroup(props, ref) { - const { children: childrenProp, classes, className, spacing, ...other } = props; + const { children: childrenProp, classes, className, spacing = 'medium', ...other } = props; + const children = React.Children.toArray(childrenProp).filter(child => { if (process.env.NODE_ENV !== 'production') { if (isFragment(child)) { @@ -45,7 +46,7 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(props, ref) { className: clsx(child.props.className, classes.avatar), style: { zIndex: children.length - index, - marginLeft: spacing ? (SPACINGS[spacing] ? SPACINGS[spacing] : spacing) : -8, + marginLeft: spacing && SPACINGS[spacing] ? SPACINGS[spacing] : -spacing, ...child.props.style, }, }); @@ -68,14 +69,14 @@ AvatarGroup.propTypes = { * See [CSS API](#css) below for more details. */ classes: PropTypes.object, - /** - * Spacing between avatars. - */ - spacing: PropTypes.oneOfType([PropTypes.oneOf(['large', 'medium', 'small']), PropTypes.number]), /** * @ignore */ className: PropTypes.string, + /** + * Spacing between avatars. + */ + spacing: PropTypes.oneOfType([PropTypes.oneOf(['large', 'medium', 'small']), PropTypes.number]), }; export default withStyles(styles, { name: 'MuiAvatarGroup' })(AvatarGroup); From 6b777020b00e78aac3399345537eb79a8e7e97ce Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 19 Feb 2020 23:44:49 +0100 Subject: [PATCH 8/8] only keep small --- docs/pages/api/avatar-group.md | 2 +- packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts | 2 +- packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/pages/api/avatar-group.md b/docs/pages/api/avatar-group.md index b58ca8a30319a0..393a0e92dbd03a 100644 --- a/docs/pages/api/avatar-group.md +++ b/docs/pages/api/avatar-group.md @@ -26,7 +26,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 | 'large'
| 'medium'
| 'small'
| number | 'medium' | Spacing between avatars. | +| 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 7786af1a461c09..1a0403bf6a7fa5 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts @@ -10,7 +10,7 @@ export interface AvatarGroupProps /** * Spacing between avatars. */ - spacing?: 'small' | 'medium' | 'large' | number; + 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 eefc96f12adb20..f598c40fb82653 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js @@ -5,8 +5,8 @@ import clsx from 'clsx'; import { withStyles } from '@material-ui/core/styles'; const SPACINGS = { - large: -4, small: -16, + medium: null, }; export const styles = theme => ({ @@ -46,7 +46,7 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(props, ref) { className: clsx(child.props.className, classes.avatar), style: { zIndex: children.length - index, - marginLeft: spacing && SPACINGS[spacing] ? SPACINGS[spacing] : -spacing, + marginLeft: spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing, ...child.props.style, }, }); @@ -76,7 +76,7 @@ AvatarGroup.propTypes = { /** * Spacing between avatars. */ - spacing: PropTypes.oneOfType([PropTypes.oneOf(['large', 'medium', 'small']), PropTypes.number]), + spacing: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.number]), }; export default withStyles(styles, { name: 'MuiAvatarGroup' })(AvatarGroup);