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] Add spacing prop #19761

Merged
merged 8 commits into from
Feb 19, 2020
Merged

Conversation

GFynbo
Copy link
Contributor

@GFynbo GFynbo commented Feb 17, 2020

This corresponds to issue:18869 with the enhancement of adding a spacing prop to the AvatarGroup lab component.

Add spacing prop with following options:

  • 'small': -16
  • 'medium': -8
  • 'large': -4

This should allow the users to manipulate the spacing between avatars without directly requiring more css changes. This PR adds this functionality.

e.g.

<AvatarGroup spacing="large">
  <Avatar></Avatar>
  <Avatar></Avatar>
</AvatarGroup>

…ponding 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
@GFynbo GFynbo changed the title Issue/18869 spacing [AvatarGroup] Add spacing prop Feb 17, 2020
Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

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

Maybe we can support both 3. and 2.

packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts Outdated Show resolved Hide resolved
packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js Outdated Show resolved Hide resolved
packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts Outdated Show resolved Hide resolved
@oliviertassinari oliviertassinari added component: avatar This is the name of the generic UI component, not the React module! new feature New feature or request labels Feb 18, 2020
@mui-pr-bot
Copy link

mui-pr-bot commented Feb 18, 2020

@material-ui/core: parsed: +Infinity% , gzip: +Infinity%
@material-ui/lab: parsed: +Infinity% , gzip: +Infinity%
@material-ui/styles: parsed: +Infinity% , gzip: +Infinity%
@material-ui/system: parsed: +Infinity% , gzip: +Infinity%

Details of bundle changes.

Comparing: 61a9cc6...6b77702

bundle Size Change Size Gzip Change Gzip
docs.main ▲ +604 kB (+Infinity% ) 604 kB ▲ +196 kB (+Infinity% ) 196 kB
@material-ui/core ▲ +362 kB (+Infinity% ) 362 kB ▲ +98.8 kB (+Infinity% ) 98.8 kB
@material-ui/core[umd] ▲ +318 kB (+Infinity% ) 318 kB ▲ +92 kB (+Infinity% ) 92 kB
@material-ui/lab ▲ +194 kB (+Infinity% ) 194 kB ▲ +57.2 kB (+Infinity% ) 57.2 kB
TablePagination ▲ +144 kB (+Infinity% ) 144 kB ▲ +42 kB (+Infinity% ) 42 kB
Autocomplete ▲ +132 kB (+Infinity% ) 132 kB ▲ +41.4 kB (+Infinity% ) 41.4 kB
TextField ▲ +126 kB (+Infinity% ) 126 kB ▲ +36.6 kB (+Infinity% ) 36.6 kB
SpeedDialAction ▲ +119 kB (+Infinity% ) 119 kB ▲ +37.6 kB (+Infinity% ) 37.6 kB
Select ▲ +117 kB (+Infinity% ) 117 kB ▲ +34.6 kB (+Infinity% ) 34.6 kB
Tooltip ▲ +103 kB (+Infinity% ) 103 kB ▲ +32.4 kB (+Infinity% ) 32.4 kB
SwipeableDrawer ▲ +92.5 kB (+Infinity% ) 92.5 kB ▲ +28.9 kB (+Infinity% ) 28.9 kB
Menu ▲ +89.1 kB (+Infinity% ) 89.1 kB ▲ +27.4 kB (+Infinity% ) 27.4 kB
SpeedDial ▲ +86.6 kB (+Infinity% ) 86.6 kB ▲ +27.3 kB (+Infinity% ) 27.3 kB
Tabs ▲ +85.8 kB (+Infinity% ) 85.8 kB ▲ +27.2 kB (+Infinity% ) 27.2 kB
Pagination ▲ +85.5 kB (+Infinity% ) 85.5 kB ▲ +26.3 kB (+Infinity% ) 26.3 kB
Drawer ▲ +85.2 kB (+Infinity% ) 85.2 kB ▲ +25.9 kB (+Infinity% ) 25.9 kB
Radio ▲ +84.4 kB (+Infinity% ) 84.4 kB ▲ +26.6 kB (+Infinity% ) 26.6 kB
Alert ▲ +83.8 kB (+Infinity% ) 83.8 kB ▲ +26.3 kB (+Infinity% ) 26.3 kB
ButtonGroup ▲ +83.6 kB (+Infinity% ) 83.6 kB ▲ +25.6 kB (+Infinity% ) 25.6 kB
Popover ▲ +83.5 kB (+Infinity% ) 83.5 kB ▲ +25.8 kB (+Infinity% ) 25.8 kB
Dialog ▲ +83.4 kB (+Infinity% ) 83.4 kB ▲ +26 kB (+Infinity% ) 26 kB
Checkbox ▲ +83.4 kB (+Infinity% ) 83.4 kB ▲ +26.3 kB (+Infinity% ) 26.3 kB
Chip ▲ +83 kB (+Infinity% ) 83 kB ▲ +25.4 kB (+Infinity% ) 25.4 kB
StepButton ▲ +82.7 kB (+Infinity% ) 82.7 kB ▲ +26.2 kB (+Infinity% ) 26.2 kB
Switch ▲ +82.5 kB (+Infinity% ) 82.5 kB ▲ +26 kB (+Infinity% ) 26 kB
PaginationItem ▲ +81.2 kB (+Infinity% ) 81.2 kB ▲ +25 kB (+Infinity% ) 25 kB
Button ▲ +80.1 kB (+Infinity% ) 80.1 kB ▲ +24.5 kB (+Infinity% ) 24.5 kB
MenuItem ▲ +78.6 kB (+Infinity% ) 78.6 kB ▲ +24.5 kB (+Infinity% ) 24.5 kB
ExpansionPanelSummary ▲ +78.5 kB (+Infinity% ) 78.5 kB ▲ +24.8 kB (+Infinity% ) 24.8 kB
TableSortLabel ▲ +77.8 kB (+Infinity% ) 77.8 kB ▲ +24.4 kB (+Infinity% ) 24.4 kB
ListItem ▲ +77.5 kB (+Infinity% ) 77.5 kB ▲ +24.2 kB (+Infinity% ) 24.2 kB
NativeSelect ▲ +77.2 kB (+Infinity% ) 77.2 kB ▲ +24.3 kB (+Infinity% ) 24.3 kB
Fab ▲ +77.2 kB (+Infinity% ) 77.2 kB ▲ +24.1 kB (+Infinity% ) 24.1 kB
Slider ▲ +77 kB (+Infinity% ) 77 kB ▲ +24.2 kB (+Infinity% ) 24.2 kB
Tab ▲ +76.7 kB (+Infinity% ) 76.7 kB ▲ +24.3 kB (+Infinity% ) 24.3 kB
ToggleButton ▲ +76.5 kB (+Infinity% ) 76.5 kB ▲ +24.2 kB (+Infinity% ) 24.2 kB
IconButton ▲ +76.5 kB (+Infinity% ) 76.5 kB ▲ +23.9 kB (+Infinity% ) 23.9 kB
BottomNavigationAction ▲ +75.9 kB (+Infinity% ) 75.9 kB ▲ +24 kB (+Infinity% ) 24 kB
Snackbar ▲ +75.7 kB (+Infinity% ) 75.7 kB ▲ +23.7 kB (+Infinity% ) 23.7 kB
CardActionArea ▲ +75.5 kB (+Infinity% ) 75.5 kB ▲ +23.8 kB (+Infinity% ) 23.8 kB
OutlinedInput ▲ +74.9 kB (+Infinity% ) 74.9 kB ▲ +23.3 kB (+Infinity% ) 23.3 kB
ButtonBase ▲ +74.4 kB (+Infinity% ) 74.4 kB ▲ +23.3 kB (+Infinity% ) 23.3 kB
TreeItem ▲ +74.3 kB (+Infinity% ) 74.3 kB ▲ +23.5 kB (+Infinity% ) 23.5 kB
FilledInput ▲ +73.9 kB (+Infinity% ) 73.9 kB ▲ +23 kB (+Infinity% ) 23 kB
Input ▲ +72.9 kB (+Infinity% ) 72.9 kB ▲ +22.8 kB (+Infinity% ) 22.8 kB
ExpansionPanel ▲ +72.7 kB (+Infinity% ) 72.7 kB ▲ +22.7 kB (+Infinity% ) 22.7 kB
Box ▲ +72.2 kB (+Infinity% ) 72.2 kB ▲ +21.9 kB (+Infinity% ) 21.9 kB
InputBase ▲ +71 kB (+Infinity% ) 71 kB ▲ +22.3 kB (+Infinity% ) 22.3 kB
Rating ▲ +70.8 kB (+Infinity% ) 70.8 kB ▲ +22.8 kB (+Infinity% ) 22.8 kB
StepContent ▲ +69.5 kB (+Infinity% ) 69.5 kB ▲ +21.8 kB (+Infinity% ) 21.8 kB
StepLabel ▲ +69 kB (+Infinity% ) 69 kB ▲ +21.7 kB (+Infinity% ) 21.7 kB
Collapse ▲ +68.4 kB (+Infinity% ) 68.4 kB ▲ +21.2 kB (+Infinity% ) 21.2 kB
Backdrop ▲ +68.2 kB (+Infinity% ) 68.2 kB ▲ +21.1 kB (+Infinity% ) 21.1 kB
MobileStepper ▲ +68.2 kB (+Infinity% ) 68.2 kB ▲ +21.4 kB (+Infinity% ) 21.4 kB
Breadcrumbs ▲ +68.1 kB (+Infinity% ) 68.1 kB ▲ +21.4 kB (+Infinity% ) 21.4 kB
TreeView ▲ +67 kB (+Infinity% ) 67 kB ▲ +21.1 kB (+Infinity% ) 21.1 kB
Link ▲ +67 kB (+Infinity% ) 67 kB ▲ +21.1 kB (+Infinity% ) 21.1 kB
MenuList ▲ +66.4 kB (+Infinity% ) 66.4 kB ▲ +20.8 kB (+Infinity% ) 20.8 kB
Hidden ▲ +66.3 kB (+Infinity% ) 66.3 kB ▲ +20.8 kB (+Infinity% ) 20.8 kB
FormControlLabel ▲ +65.9 kB (+Infinity% ) 65.9 kB ▲ +20.6 kB (+Infinity% ) 20.6 kB
InputLabel ▲ +65.7 kB (+Infinity% ) 65.7 kB ▲ +20.5 kB (+Infinity% ) 20.5 kB
LinearProgress ▲ +65.7 kB (+Infinity% ) 65.7 kB ▲ +20.5 kB (+Infinity% ) 20.5 kB
Badge ▲ +65.7 kB (+Infinity% ) 65.7 kB ▲ +20.4 kB (+Infinity% ) 20.4 kB
Avatar ▲ +65.6 kB (+Infinity% ) 65.6 kB ▲ +20.7 kB (+Infinity% ) 20.7 kB
InputAdornment ▲ +65.4 kB (+Infinity% ) 65.4 kB ▲ +20.6 kB (+Infinity% ) 20.6 kB
Grid ▲ +65.4 kB (+Infinity% ) 65.4 kB ▲ +20.5 kB (+Infinity% ) 20.5 kB
CardHeader ▲ +65.4 kB (+Infinity% ) 65.4 kB ▲ +20.6 kB (+Infinity% ) 20.6 kB
ListItemText ▲ +65.3 kB (+Infinity% ) 65.3 kB ▲ +20.5 kB (+Infinity% ) 20.5 kB
Stepper ▲ +65.2 kB (+Infinity% ) 65.2 kB ▲ +20.6 kB (+Infinity% ) 20.6 kB
StepIcon ▲ +65 kB (+Infinity% ) 65 kB ▲ +20.3 kB (+Infinity% ) 20.3 kB
SpeedDialIcon ▲ +64.9 kB (+Infinity% ) 64.9 kB ▲ +20.3 kB (+Infinity% ) 20.3 kB
RadioGroup ▲ +64.8 kB (+Infinity% ) 64.8 kB ▲ +20.1 kB (+Infinity% ) 20.1 kB
FormControl ▲ +64.8 kB (+Infinity% ) 64.8 kB ▲ +20.2 kB (+Infinity% ) 20.2 kB
DialogTitle ▲ +64.6 kB (+Infinity% ) 64.6 kB ▲ +20.3 kB (+Infinity% ) 20.3 kB
AlertTitle ▲ +64.5 kB (+Infinity% ) 64.5 kB ▲ +20.3 kB (+Infinity% ) 20.3 kB
CircularProgress ▲ +64.4 kB (+Infinity% ) 64.4 kB ▲ +20.3 kB (+Infinity% ) 20.3 kB
DialogContentText ▲ +64.4 kB (+Infinity% ) 64.4 kB ▲ +20.2 kB (+Infinity% ) 20.2 kB
TableCell ▲ +64.4 kB (+Infinity% ) 64.4 kB ▲ +20.3 kB (+Infinity% ) 20.3 kB
AppBar ▲ +64.4 kB (+Infinity% ) 64.4 kB ▲ +20.2 kB (+Infinity% ) 20.2 kB
GridListTile ▲ +64.1 kB (+Infinity% ) 64.1 kB ▲ +20.1 kB (+Infinity% ) 20.1 kB
Typography ▲ +64 kB (+Infinity% ) 64 kB ▲ +20 kB (+Infinity% ) 20 kB
SnackbarContent ▲ +63.9 kB (+Infinity% ) 63.9 kB ▲ +20.1 kB (+Infinity% ) 20.1 kB
FormLabel ▲ +63.8 kB (+Infinity% ) 63.8 kB ▲ +19.8 kB (+Infinity% ) 19.8 kB
FormHelperText ▲ +63.7 kB (+Infinity% ) 63.7 kB ▲ +20 kB (+Infinity% ) 20 kB
GridListTileBar ▲ +63.6 kB (+Infinity% ) 63.6 kB ▲ +19.9 kB (+Infinity% ) 19.9 kB
ToggleButtonGroup ▲ +63.5 kB (+Infinity% ) 63.5 kB ▲ +20 kB (+Infinity% ) 20 kB
Container ▲ +63.5 kB (+Infinity% ) 63.5 kB ▲ +19.9 kB (+Infinity% ) 19.9 kB
SvgIcon ▲ +63.4 kB (+Infinity% ) 63.4 kB ▲ +19.8 kB (+Infinity% ) 19.8 kB
Skeleton ▲ +63.3 kB (+Infinity% ) 63.3 kB ▲ +20 kB (+Infinity% ) 20 kB
Card ▲ +63.2 kB (+Infinity% ) 63.2 kB ▲ +19.8 kB (+Infinity% ) 19.8 kB
ScopedCssBaseline ▲ +63.2 kB (+Infinity% ) 63.2 kB ▲ +19.9 kB (+Infinity% ) 19.9 kB
Icon ▲ +63.1 kB (+Infinity% ) 63.1 kB ▲ +19.8 kB (+Infinity% ) 19.8 kB
ListSubheader ▲ +63.1 kB (+Infinity% ) 63.1 kB ▲ +19.8 kB (+Infinity% ) 19.8 kB
StepConnector ▲ +63.1 kB (+Infinity% ) 63.1 kB ▲ +19.9 kB (+Infinity% ) 19.9 kB
Divider ▲ +63 kB (+Infinity% ) 63 kB ▲ +19.8 kB (+Infinity% ) 19.8 kB
Step ▲ +63 kB (+Infinity% ) 63 kB ▲ +19.8 kB (+Infinity% ) 19.8 kB
Table ▲ +62.9 kB (+Infinity% ) 62.9 kB ▲ +19.7 kB (+Infinity% ) 19.7 kB
TableRow ▲ +62.8 kB (+Infinity% ) 62.8 kB ▲ +19.7 kB (+Infinity% ) 19.7 kB
GridList ▲ +62.8 kB (+Infinity% ) 62.8 kB ▲ +19.7 kB (+Infinity% ) 19.7 kB
BottomNavigation ▲ +62.7 kB (+Infinity% ) 62.7 kB ▲ +19.7 kB (+Infinity% ) 19.7 kB
AvatarGroup ▲ +62.7 kB (+Infinity% ) 62.7 kB ▲ +19.7 kB (+Infinity% ) 19.7 kB
Paper ▲ +62.7 kB (+Infinity% ) 62.7 kB ▲ +19.6 kB (+Infinity% ) 19.6 kB
List ▲ +62.7 kB (+Infinity% ) 62.7 kB ▲ +19.6 kB (+Infinity% ) 19.6 kB
CardMedia ▲ +62.7 kB (+Infinity% ) 62.7 kB ▲ +19.7 kB (+Infinity% ) 19.7 kB
Toolbar ▲ +62.7 kB (+Infinity% ) 62.7 kB ▲ +19.7 kB (+Infinity% ) 19.7 kB
DialogContent ▲ +62.6 kB (+Infinity% ) 62.6 kB ▲ +19.6 kB (+Infinity% ) 19.6 kB
ListItemIcon ▲ +62.5 kB (+Infinity% ) 62.5 kB ▲ +19.6 kB (+Infinity% ) 19.6 kB
ListItemAvatar ▲ +62.5 kB (+Infinity% ) 62.5 kB ▲ +19.5 kB (+Infinity% ) 19.5 kB
TableFooter ▲ +62.5 kB (+Infinity% ) 62.5 kB ▲ +19.5 kB (+Infinity% ) 19.5 kB
TableHead ▲ +62.4 kB (+Infinity% ) 62.4 kB ▲ +19.5 kB (+Infinity% ) 19.5 kB
TableBody ▲ +62.4 kB (+Infinity% ) 62.4 kB ▲ +19.5 kB (+Infinity% ) 19.5 kB
DialogActions ▲ +62.4 kB (+Infinity% ) 62.4 kB ▲ +19.6 kB (+Infinity% ) 19.6 kB
ExpansionPanelActions ▲ +62.4 kB (+Infinity% ) 62.4 kB ▲ +19.6 kB (+Infinity% ) 19.6 kB
CardActions ▲ +62.4 kB (+Infinity% ) 62.4 kB ▲ +19.6 kB (+Infinity% ) 19.6 kB
FormGroup ▲ +62.3 kB (+Infinity% ) 62.3 kB ▲ +19.6 kB (+Infinity% ) 19.6 kB
ListItemSecondaryAction ▲ +62.3 kB (+Infinity% ) 62.3 kB ▲ +19.5 kB (+Infinity% ) 19.5 kB
CssBaseline ▲ +62.3 kB (+Infinity% ) 62.3 kB ▲ +19.6 kB (+Infinity% ) 19.6 kB
CardContent ▲ +62.3 kB (+Infinity% ) 62.3 kB ▲ +19.5 kB (+Infinity% ) 19.5 kB
TableContainer ▲ +62.3 kB (+Infinity% ) 62.3 kB ▲ +19.5 kB (+Infinity% ) 19.5 kB
ExpansionPanelDetails ▲ +62.3 kB (+Infinity% ) 62.3 kB ▲ +19.5 kB (+Infinity% ) 19.5 kB
docs.landing ▲ +56.8 kB (+Infinity% ) 56.8 kB ▲ +15.6 kB (+Infinity% ) 15.6 kB
@material-ui/styles ▲ +51.4 kB (+Infinity% ) 51.4 kB ▲ +15.4 kB (+Infinity% ) 15.4 kB
Popper ▲ +28.8 kB (+Infinity% ) 28.8 kB ▲ +10.3 kB (+Infinity% ) 10.3 kB
Slide ▲ +25.7 kB (+Infinity% ) 25.7 kB ▲ +8.74 kB (+Infinity% ) 8.74 kB
Grow ▲ +24.2 kB (+Infinity% ) 24.2 kB ▲ +8.22 kB (+Infinity% ) 8.22 kB
Zoom ▲ +23.6 kB (+Infinity% ) 23.6 kB ▲ +8.12 kB (+Infinity% ) 8.12 kB
Fade ▲ +23.6 kB (+Infinity% ) 23.6 kB ▲ +8.01 kB (+Infinity% ) 8.01 kB
styles/createMuiTheme ▲ +16.6 kB (+Infinity% ) 16.6 kB ▲ +5.85 kB (+Infinity% ) 5.85 kB
@material-ui/system ▲ +16.5 kB (+Infinity% ) 16.5 kB ▲ +4.32 kB (+Infinity% ) 4.32 kB
useAutocomplete ▲ +14.7 kB (+Infinity% ) 14.7 kB ▲ +5.31 kB (+Infinity% ) 5.31 kB
Modal ▲ +14.5 kB (+Infinity% ) 14.5 kB ▲ +5.04 kB (+Infinity% ) 5.04 kB
TextareaAutosize ▲ +5.12 kB (+Infinity% ) 5.12 kB ▲ +2.14 kB (+Infinity% ) 2.14 kB
RootRef ▲ +4.24 kB (+Infinity% ) 4.24 kB ▲ +1.64 kB (+Infinity% ) 1.64 kB
ClickAwayListener ▲ +3.91 kB (+Infinity% ) 3.91 kB ▲ +1.55 kB (+Infinity% ) 1.55 kB
colorManipulator ▲ +3.88 kB (+Infinity% ) 3.88 kB ▲ +1.52 kB (+Infinity% ) 1.52 kB
Portal ▲ +2.92 kB (+Infinity% ) 2.92 kB ▲ +1.3 kB (+Infinity% ) 1.3 kB
useMediaQuery ▲ +2.58 kB (+Infinity% ) 2.58 kB ▲ +1.06 kB (+Infinity% ) 1.06 kB
NoSsr ▲ +2.19 kB (+Infinity% ) 2.19 kB ▲ +1.04 kB (+Infinity% ) 1.04 kB

Generated by 🚫 dangerJS against 6b77702

@GFynbo
Copy link
Contributor Author

GFynbo commented Feb 18, 2020

@oliviertassinari Can you take a look when you get a chance? Should be good to go, but can't figure out why test_static or mui-org tests are failing.

@oliviertassinari
Copy link
Member

oliviertassinari commented Feb 18, 2020

@GFynbo The problem was the trailing spaces. I have also updated the logic to make CSS overrides of the spacing easier when the default value is used (inline style has more specificity).

Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

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

We might be able to improve the description of the new spacing prop, but it's probably good enough to be merged.

@oliviertassinari
Copy link
Member

@GFynbo After looking at the output of the large variant, I think that small and medium are enough.

@oliviertassinari oliviertassinari force-pushed the issue/18869-spacing branch 2 times, most recently from d9463e2 to 32f8b39 Compare February 19, 2020 23:04
@oliviertassinari
Copy link
Member

oliviertassinari commented Feb 19, 2020

Alright, one step at the time, in any case, we can continue to iterate. I'm happy to discuss it further :). Well done!

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.

3 participants