Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[AvatarGroup] Introduce new component #18707

Merged
merged 3 commits into from
Dec 8, 2019

Conversation

oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Dec 6, 2019

@oliviertassinari oliviertassinari added new feature New feature or request component: avatar This is the name of the generic UI component, not the React module! labels Dec 6, 2019
@oliviertassinari oliviertassinari force-pushed the AvatarGroup branch 2 times, most recently from 69e8ced to 5cbdb9d Compare December 6, 2019 16:22
@mui-pr-bot
Copy link

mui-pr-bot commented Dec 6, 2019

@material-ui/lab: parsed: +0.44% , gzip: +0.21%

Details of bundle changes.

Comparing: a973b2f...8a64ad8

bundle Size Change Size Gzip Change Gzip
AvatarGroup ▲ +61.2 kB (+Infinity% ) 61.2 kB ▲ +19.1 kB (+Infinity% ) 19.1 kB
@material-ui/lab ▲ +761 B (+0.44% ) 175 kB ▲ +111 B (+0.21% ) 52.4 kB
@material-ui/core[umd] ▼ -43 B (-0.01% ) 312 kB ▼ -8 B (-0.01% ) 90.1 kB
Badge ▼ -43 B (-0.07% ) 64.2 kB ▼ -5 B (-0.03% ) 19.9 kB
@material-ui/core ▼ -41 B (-0.01% ) 355 kB ▼ -36 B (-0.04% ) 97.1 kB
TablePagination ▲ +2 B (0.00% ) 140 kB ▲ +3 B (+0.01% ) 40.8 kB
TextField ▲ +2 B (0.00% ) 122 kB ▲ +1 B (0.00% ) 35.6 kB
Drawer ▲ +1 B (0.00% ) 83.2 kB ▲ +3 B (+0.01% ) 25.2 kB
Menu ▲ +1 B (0.00% ) 87.2 kB ▼ -1 B (-0.00% ) 26.8 kB
SpeedDialIcon -- 63.5 kB ▼ -107 B (-0.54% ) 19.8 kB
CardActionArea -- 73.9 kB ▼ -101 B (-0.43% ) 23.1 kB
Rating -- 68.9 kB ▼ -86 B (-0.39% ) 22 kB
SpeedDialAction -- 116 kB ▲ +18 B (+0.05% ) 36.6 kB
Snackbar -- 76 kB ▼ -11 B (-0.05% ) 23.7 kB
CardActions -- 60.9 kB ▲ +10 B (+0.05% ) 19 kB
GridListTile -- 62.6 kB ▼ -9 B (-0.05% ) 19.5 kB
FormControlLabel -- 64.4 kB ▼ -4 B (-0.02% ) 20.1 kB
Grid -- 64 kB ▲ +4 B (+0.02% ) 20 kB
GridListTileBar -- 62.1 kB ▼ -4 B (-0.02% ) 19.4 kB
CardMedia -- 61.2 kB ▼ -3 B (-0.02% ) 19.2 kB
Container -- 62 kB ▲ +3 B (+0.02% ) 19.3 kB
DialogContentText -- 62.9 kB ▼ -3 B (-0.02% ) 19.7 kB
Stepper -- 63.6 kB ▲ +3 B (+0.02% ) 20 kB
BottomNavigationAction -- 74.3 kB ▼ -2 B (-0.01% ) 23.4 kB
Dialog -- 81.5 kB ▼ -2 B (-0.01% ) 25.4 kB
Divider -- 61.5 kB ▼ -2 B (-0.01% ) 19.2 kB
ExpansionPanelDetails -- 60.8 kB ▲ +2 B (+0.01% ) 19 kB
GridList -- 61.4 kB ▼ -2 B (-0.01% ) 19.2 kB
InputAdornment -- 64 kB ▼ -2 B (-0.01% ) 20 kB
ListItemText -- 63.9 kB ▼ -2 B (-0.01% ) 19.9 kB
Radio -- 81.7 kB ▼ -2 B (-0.01% ) 25.7 kB
RootRef -- 4.43 kB ▼ -2 B (-0.12% ) 1.66 kB
Select -- 113 kB ▼ -2 B (-0.01% ) 33.5 kB
Skeleton -- 61.5 kB ▼ -2 B (-0.01% ) 19.3 kB
Step -- 61.5 kB ▲ +2 B (+0.01% ) 19.2 kB
StepButton -- 81.1 kB ▼ -2 B (-0.01% ) 25.5 kB
StepContent -- 67.9 kB ▼ -2 B (-0.01% ) 21.2 kB
Table -- 61.5 kB ▲ +2 B (+0.01% ) 19.2 kB
TableFooter -- 61 kB ▼ -2 B (-0.01% ) 19 kB
TableRow -- 61.4 kB ▲ +2 B (+0.01% ) 19.1 kB
useAutocomplete -- 12.6 kB ▲ +2 B (+0.04% ) 4.63 kB
@material-ui/styles -- 51 kB ▲ +1 B (+0.01% ) 15.3 kB
@material-ui/system -- 14.8 kB ▲ +1 B (+0.02% ) 4.07 kB
Autocomplete -- 128 kB ▼ -1 B (-0.00% ) 39.8 kB
BottomNavigation -- 61.3 kB ▲ +1 B (+0.01% ) 19.1 kB
ButtonGroup -- 80.9 kB ▼ -1 B (-0.00% ) 24.8 kB
Card -- 61.6 kB ▼ -1 B (-0.01% ) 19.2 kB
CardContent -- 60.9 kB ▼ -1 B (-0.01% ) 19 kB
CardHeader -- 64 kB ▼ -1 B (-0.01% ) 20 kB
Checkbox -- 80.8 kB ▲ +1 B (0.00% ) 25.4 kB
CssBaseline -- 56.5 kB ▲ +1 B (+0.01% ) 17.6 kB
DialogActions -- 61 kB ▲ +1 B (+0.01% ) 19 kB
DialogContent -- 61.1 kB ▲ +1 B (+0.01% ) 19.1 kB
DialogTitle -- 63.2 kB ▼ -1 B (-0.01% ) 19.7 kB
ExpansionPanel -- 70.2 kB ▼ -1 B (-0.00% ) 21.8 kB
ExpansionPanelActions -- 61 kB ▼ -1 B (-0.01% ) 19 kB
Grow -- 23.1 kB ▲ +1 B (+0.01% ) 7.83 kB
Link -- 65.5 kB ▼ -1 B (-0.00% ) 20.6 kB
ListItemIcon -- 61.1 kB ▲ +1 B (+0.01% ) 19 kB
Popover -- 81.5 kB ▲ +1 B (0.00% ) 25.1 kB
Popper -- 28.7 kB ▲ +1 B (+0.01% ) 10.2 kB
RadioGroup -- 62.1 kB ▼ -1 B (-0.01% ) 19.4 kB
Slider -- 74.5 kB ▼ -1 B (-0.00% ) 23.3 kB
SwipeableDrawer -- 90.6 kB ▲ +1 B (0.00% ) 28 kB
Switch -- 80 kB ▲ +1 B (0.00% ) 25 kB
Tab -- 75.2 kB ▼ -1 B (-0.00% ) 23.7 kB
TableBody -- 61 kB ▼ -1 B (-0.01% ) 19 kB
TableSortLabel -- 76.2 kB ▲ +1 B (0.00% ) 23.9 kB
ToggleButtonGroup -- 62.1 kB ▲ +1 B (+0.01% ) 19.4 kB
TreeItem -- 72.5 kB ▲ +1 B (0.00% ) 22.8 kB
AppBar -- 62.7 kB -- 19.5 kB
Avatar -- 64.2 kB -- 20.1 kB
Backdrop -- 66.6 kB -- 20.5 kB
Box -- 69.6 kB -- 21 kB
Breadcrumbs -- 66.9 kB -- 20.9 kB
Button -- 78.3 kB -- 23.9 kB
ButtonBase -- 72.8 kB -- 22.8 kB
Chip -- 81.4 kB -- 24.8 kB
CircularProgress -- 63 kB -- 19.8 kB
ClickAwayListener -- 3.87 kB -- 1.56 kB
Collapse -- 66.8 kB -- 20.6 kB
colorManipulator -- 3.85 kB -- 1.52 kB
docs.landing -- 52.4 kB -- 11.4 kB
docs.main -- 610 kB -- 194 kB
ExpansionPanelSummary -- 76.9 kB -- 24.2 kB
Fab -- 75.6 kB -- 23.5 kB
Fade -- 22.5 kB -- 7.71 kB
FilledInput -- 72.4 kB -- 22.4 kB
FormControl -- 63.3 kB -- 19.6 kB
FormGroup -- 60.9 kB -- 19 kB
FormHelperText -- 62.2 kB -- 19.4 kB
FormLabel -- 62.4 kB -- 19.2 kB
Hidden -- 64.8 kB -- 20.2 kB
Icon -- 61.7 kB -- 19.2 kB
IconButton -- 75 kB -- 23.3 kB
Input -- 71.3 kB -- 22.1 kB
InputBase -- 69.4 kB -- 21.7 kB
InputLabel -- 64.2 kB -- 20 kB
LinearProgress -- 64.2 kB -- 20 kB
List -- 61.3 kB -- 19 kB
ListItem -- 76 kB -- 23.6 kB
ListItemAvatar -- 61 kB -- 19 kB
ListItemSecondaryAction -- 60.9 kB -- 19 kB
ListSubheader -- 61.7 kB -- 19.3 kB
MenuItem -- 77 kB -- 23.9 kB
MenuList -- 64.9 kB -- 20.2 kB
MobileStepper -- 66.6 kB -- 20.8 kB
Modal -- 14.3 kB -- 5 kB
NativeSelect -- 75.6 kB -- 23.7 kB
NoSsr -- 2.19 kB -- 1.03 kB
OutlinedInput -- 72.8 kB -- 22.6 kB
Paper -- 61.1 kB -- 19 kB
Portal -- 2.9 kB -- 1.3 kB
Slide -- 24.5 kB -- 8.33 kB
SnackbarContent -- 64.5 kB -- 20.2 kB
SpeedDial -- 84.9 kB -- 26.7 kB
StepConnector -- 61.6 kB -- 19.3 kB
StepIcon -- 63.5 kB -- 19.7 kB
StepLabel -- 67.5 kB -- 21.1 kB
styles/createMuiTheme -- 15.7 kB -- 5.47 kB
SvgIcon -- 61.9 kB -- 19.3 kB
TableCell -- 62.9 kB -- 19.7 kB
TableHead -- 61 kB -- 19 kB
Tabs -- 84.3 kB -- 26.5 kB
TextareaAutosize -- 5.06 kB -- 2.11 kB
ToggleButton -- 75 kB -- 23.7 kB
Toolbar -- 61.2 kB -- 19.1 kB
Tooltip -- 99.7 kB -- 31.5 kB
TreeView -- 65.3 kB -- 20.4 kB
Typography -- 62.5 kB -- 19.5 kB
useMediaQuery -- 2.47 kB -- 1.04 kB
Zoom -- 22.5 kB -- 7.71 kB

Generated by 🚫 dangerJS against 8a64ad8

/**
* The avatars to stack.
*/
children: React.ReactNode;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A ReactNode can be undefined, should probably be ReactElement

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it work after React.Children.toArray(undefined)?

Copy link
Member Author

@oliviertassinari oliviertassinari Dec 6, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh or just?

children?: React.ReactNode;

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had a look at the codebase, we don't have much consistency on this point.

@mbrookes
Copy link
Member

mbrookes commented Dec 6, 2019

Nice job so far.

Looking at the benchmarks, Atlas and Treasury both allow passing in the data, and generate the required Avatars. While we've generally favoured composed components, that could be nice as an option.

Chakra (or whoever's code they copied) supports the ability to set the max number of avatars before truncation - that seems like a nice thing to automate. (It helps that their Avatar also has a name prop.). Also, the prop to adjust the negative margin might have some merit.

Other than that, it looks pretty clean!

@oliviertassinari
Copy link
Member Author

oliviertassinari commented Dec 6, 2019

@mbrookes Thanks for the review, I have wondered about these points.

  • For the max prop of Chakra, I decided to go against, (after implementing it), because it hides the Avatar, and would make implementing popup like behavior trickier. Hence the tooltip in the demo. But maybe it could be optional and automated.
  • For the data prop of Atlaskit, I think that it's something people could abstract, it's higher level.
  • For the negative margin, yeah, maybe. The alternative to CSS would be a prop + inline-style. Do you want me to change it?

@mbrookes
Copy link
Member

mbrookes commented Dec 7, 2019

But maybe it could be optional and automated.

That was what I had in mind.

For the data prop of Atlaskit, I think that it's something people could abstract

Sure, everything can be done by the developer, but then, why use the component? I'm not wedded to this, but it seems like it might have some value.

The alternative to CSS would be a prop + inline-style

I was thinking more of a limited set of values, each with their own class.

@oliviertassinari
Copy link
Member Author

To be honest, I don't know. I'm not sure how people will use this component. The nice thing about your proposal is that they are incremental, we should be able to add them later down the road when we see a compelling reason to do so.

@lcswillems
Copy link
Contributor

Awesome work!!

@w3bdesign
Copy link

Thanks for this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: avatar This is the name of the generic UI component, not the React module! new feature New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[AvatarGroup] Add support for avatar grouping
6 participants