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

[ExpansionPanel] Use theme.spacing in summary #20344

Merged

Conversation

eps1lon
Copy link
Member

@eps1lon eps1lon commented Mar 30, 2020

This is a partial revert of #12022 to get a discussion starting why this was done since the original discussion was kept internal.

  1. Not sure where the "-0.3 Kb gzipped" comes from. Let's see if we can observe a change in this PR.
  2. We do currently use it internally (table, toolbar, grid, divider). If we're not using it internally we don't need to expose it in our theme
  3. Fundamentally I don't understand the original change. Why hard code the spacing if we agree that spacing should be something that is applied theme-wide with scales?

In practice, we do not expect people to change the value.

This is no longer consistent with our density guide.
4. It's not important to land this in a minor. It's probably safer anyway to do this in v5

/cc @oliviertassinari, @mbrookes

@eps1lon eps1lon added discussion on hold There is a blocker, we need to wait labels Mar 30, 2020
@oliviertassinari
Copy link
Member

oliviertassinari commented Mar 30, 2020

@eps1lon The motivation is about enabling custom values of theme.spacing. Assuming it's the only concern we value, if we have a doubt about the impact a different value should have on the design, theme.spacing shouldn't be used.

Examples of obvious cases: Grid.spacing, Box.margin.

@eps1lon
Copy link
Member Author

eps1lon commented Mar 30, 2020

The motivation is about enabling custom values of theme.spacing.

What is the concern?

@oliviertassinari
Copy link
Member

What is the concern?

That is looks broken.

@eps1lon
Copy link
Member Author

eps1lon commented Mar 30, 2020

What is the concern?

That is looks broken.

Why does this concern not apply to color, or font, or component props?

@mui-pr-bot
Copy link

mui-pr-bot commented Mar 30, 2020

Details of bundle changes.

Comparing: 5aad5f2...26efdb1

Details of page changes
bundle Size Change Size Gzip Change Gzip
/api-docs/avatar ▼ -10 B (-0.62% ) 1.6 kB -- -1 B
/api-docs/button ▲ +10 B (+0.43% ) 2.33 kB -- -1 B
/api-docs/input-label ▲ +10 B (+0.55% ) 1.83 kB -- -1 B
/api-docs/table-cell ▼ -10 B (-0.53% ) 1.86 kB -- -1 B
/api-docs/tree-view ▼ -10 B (-0.60% ) 1.66 kB -- -1 B
/blog/march-2019-update ▼ -10 B (-0.46% ) 2.16 kB -- -1 B
/api-docs/svg-icon ▼ -10 B (-0.50% ) 2 kB -- -1 B
/_app -- 34.4 kB -- -1 B
/api-docs/alert-title -- 1.14 kB -- -1 B
/api-docs/alert -- 2.15 kB -- -1 B
/api-docs/app-bar -- 1.69 kB -- -1 B
/api-docs/autocomplete -- 4.05 kB -- -1 B
/api-docs/avatar-group -- 1.26 kB -- -1 B
/api-docs/backdrop -- 1.38 kB -- -1 B
/api-docs/badge -- 1.88 kB -- -1 B
/api-docs/bottom-navigation-action -- 1.55 kB -- -1 B
/api-docs/bottom-navigation -- 1.43 kB -- -1 B
/api-docs/breadcrumbs -- 1.59 kB -- -1 B
/api-docs/button-base -- 2.08 kB -- -1 B
/api-docs/button-group -- 1.95 kB -- -1 B
/api-docs/card-action-area -- 1.32 kB -- -1 B
/api-docs/card-actions -- 1.22 kB -- -1 B
/api-docs/card-content -- 1.2 kB -- -1 B
/api-docs/card-header -- 1.53 kB -- -1 B
/api-docs/card-media -- 1.43 kB -- -1 B
/api-docs/card -- 1.25 kB -- -1 B
/api-docs/checkbox -- 2.05 kB -- -1 B
/api-docs/chip -- 2.19 kB -- -1 B
/api-docs/circular-progress -- 1.8 kB -- -1 B
/api-docs/click-away-listener -- 1.13 kB -- -1 B
/api-docs/collapse -- 1.76 kB -- -1 B
/api-docs/container -- 1.62 kB -- -1 B
/api-docs/css-baseline -- 1.14 kB -- -1 B
/api-docs/dialog-actions -- 1.22 kB -- -1 B
/api-docs/dialog-content-text -- 1.23 kB -- -1 B
/api-docs/dialog-content -- 1.2 kB -- -1 B
/api-docs/dialog-title -- 1.25 kB -- -1 B
/api-docs/dialog -- 2.48 kB -- -1 B
/api-docs/divider -- 1.55 kB -- -1 B
/api-docs/drawer -- 1.87 kB -- -1 B
/api-docs/expansion-panel-actions -- 1.23 kB -- -1 B
/api-docs/expansion-panel-details -- 1.16 kB -- -1 B
/api-docs/expansion-panel-summary -- 1.46 kB -- -1 B
/api-docs/expansion-panel -- 1.7 kB -- -1 B
/api-docs/fab -- 1.86 kB -- -1 B
/api-docs/fade -- 1.17 kB -- -1 B
/api-docs/filled-input -- 2.65 kB -- -1 B
/api-docs/form-control-label -- 1.73 kB -- -1 B
/api-docs/form-control -- 2.12 kB -- -1 B
/api-docs/form-group -- 1.3 kB -- -1 B
/api-docs/form-helper-text -- 1.66 kB -- -1 B
/api-docs/form-label -- 1.59 kB -- -1 B
/api-docs/grid-list-tile-bar -- 1.54 kB -- -1 B
/api-docs/grid-list-tile -- 1.46 kB -- -1 B
/api-docs/grid-list -- 1.37 kB -- -1 B
/api-docs/grid -- 2.29 kB -- -1 B
/api-docs/grow -- 1.23 kB -- -1 B
/api-docs/hidden -- 1.32 kB -- -1 B
/api-docs/icon-button -- 1.85 kB -- -1 B
/api-docs/icon -- 1.54 kB -- -1 B
/api-docs/input-adornment -- 1.68 kB -- -1 B
/api-docs/input-base -- 2.74 kB -- -1 B
/api-docs/input -- 2.61 kB -- -1 B
/api-docs/linear-progress -- 1.78 kB -- -1 B
/api-docs/link -- 1.68 kB -- -1 B
/api-docs/list-item-avatar -- 1.25 kB -- -1 B
/api-docs/list-item-icon -- 1.27 kB -- -1 B
/api-docs/list-item-secondary-action -- 1.22 kB -- -1 B
/api-docs/list-item-text -- 1.54 kB -- -1 B
/api-docs/list-item -- 2 kB -- -1 B
/api-docs/list-subheader -- 1.51 kB -- -1 B
/api-docs/list -- 1.44 kB -- -1 B
/api-docs/menu-item -- 1.46 kB -- -1 B
/api-docs/menu-list -- 1.36 kB -- -1 B
/api-docs/menu -- 2.13 kB -- -1 B
/api-docs/mobile-stepper -- 1.67 kB -- -1 B
/api-docs/modal -- 2.14 kB -- -1 B
/api-docs/native-select -- 1.83 kB -- -1 B
/api-docs/no-ssr -- 1.09 kB -- -1 B
/api-docs/outlined-input -- 2.76 kB -- -1 B
/api-docs/pagination-item -- 1.71 kB -- -1 B
/api-docs/pagination -- 1.98 kB -- -1 B
/api-docs/paper -- 1.61 kB -- -1 B
/api-docs/popover -- 2.5 kB -- -1 B
/api-docs/popper -- 1.76 kB -- -1 B
/api-docs/portal -- 1.12 kB -- -1 B
/api-docs/radio-group -- 1.23 kB -- -1 B
/api-docs/radio -- 1.87 kB -- -1 B
/api-docs/rating -- 2.25 kB -- -1 B
/api-docs/root-ref -- 1.2 kB -- -1 B
/api-docs/scoped-css-baseline -- 1.15 kB -- -1 B
/api-docs/select -- 2.65 kB -- -1 B
/api-docs/skeleton -- 1.52 kB -- -1 B
/api-docs/slide -- 1.31 kB -- -1 B
/api-docs/slider -- 2.85 kB -- -1 B
/api-docs/snackbar-content -- 1.36 kB -- -1 B
/api-docs/snackbar -- 2.46 kB -- -1 B
/api-docs/speed-dial-action -- 1.67 kB -- -1 B
/api-docs/speed-dial-icon -- 1.29 kB -- -1 B
/api-docs/speed-dial -- 2.05 kB -- -1 B
/api-docs/step-button -- 1.38 kB -- -1 B
/api-docs/step-connector -- 1.29 kB -- -1 B
/api-docs/step-content -- 1.47 kB -- -1 B
/api-docs/step-icon -- 1.33 kB -- -1 B
/api-docs/step-label -- 1.64 kB -- -1 B
/api-docs/step -- 1.38 kB -- -1 B
/api-docs/stepper -- 1.6 kB -- -1 B
/api-docs/swipeable-drawer -- 1.78 kB -- -1 B
/api-docs/switch -- 2.22 kB -- -1 B
/api-docs/tab -- 1.74 kB -- -1 B
/api-docs/table-body -- 1.21 kB -- -1 B
/api-docs/table-container -- 1.22 kB -- -1 B
/api-docs/table-footer -- 1.22 kB -- -1 B
/api-docs/table-head -- 1.21 kB -- -1 B
/api-docs/table-pagination -- 2.21 kB -- -1 B
/api-docs/table-row -- 1.43 kB -- -1 B
/api-docs/table-sort-label -- 1.57 kB -- -1 B
/api-docs/table -- 1.43 kB -- -1 B
/api-docs/tabs -- 2.28 kB -- -1 B
/api-docs/text-field -- 2.94 kB -- -1 B
/api-docs/textarea-autosize -- 908 B -- -1 B
/api-docs/toggle-button-group -- 1.56 kB -- -1 B
/api-docs/toggle-button -- 1.55 kB -- -1 B
/api-docs/toolbar -- 1.4 kB -- -1 B
/api-docs/tooltip -- 2.3 kB -- -1 B
/api-docs/tree-item -- 1.53 kB -- -1 B
/api-docs/typography -- 2.33 kB -- -1 B
/api-docs/zoom -- 1.2 kB -- -1 B
/blog/2019-developer-survey-results -- 5.98 kB -- -1 B
/blog/2019 -- 3.87 kB -- -1 B
/blog/2020-introducing-sketch -- 3.1 kB -- -1 B
/blog/april-2019-update -- 2.76 kB -- -1 B
/blog/august-2019-update -- 1.87 kB -- -1 B
/blog/december-2019-update -- 2.01 kB -- -1 B
/blog/july-2019-update -- 1.77 kB -- -1 B
/blog/june-2019-update -- 1.63 kB -- -1 B
/blog/material-ui-v1-is-out -- 6.29 kB -- -1 B
/blog/material-ui-v4-is-out -- 9.32 kB -- -1 B
/blog/may-2019-update -- 1.96 kB -- -1 B
/blog/november-2019-update -- 2.37 kB -- -1 B
/blog/october-2019-update -- 2.12 kB -- -1 B
/blog/september-2019-update -- 2.3 kB -- -1 B
/company/about -- 1.56 kB -- -1 B
/company/contact -- 1.14 kB -- -1 B
/company/jobs -- 1.16 kB -- -1 B
/components/about-the-lab -- 5.55 kB -- -1 B
/components/alert -- 12.4 kB -- -1 B
/components/app-bar -- 30.8 kB -- -1 B
/components/autocomplete -- 104 kB -- -1 B
/components/avatars -- 8.43 kB -- -1 B
/components/backdrop -- 3.19 kB -- -1 B
/components/badges -- 15 kB -- -1 B
/components/bottom-navigation -- 6.21 kB -- -1 B
/components/box -- 7.96 kB -- -1 B
/components/breadcrumbs -- 14.3 kB -- -1 B
/components/button-group -- 6.64 kB -- -1 B
/components/buttons -- 24.3 kB -- -1 B
/components/cards -- 16.8 kB -- -1 B
/components/checkboxes -- 16.5 kB -- -1 B
/components/chips -- 21.4 kB -- -1 B
/components/click-away-listener -- 3.38 kB -- -1 B
/components/container -- 3.83 kB -- -1 B
/components/css-baseline -- 5.96 kB -- -1 B
/components/dialogs -- 42.1 kB -- -1 B
/components/dividers -- 12.2 kB -- -1 B
/components/drawers -- 29.3 kB -- -1 B
/components/expansion-panels -- 20 kB -- -1 B
/components/floating-action-button -- 10.3 kB -- -1 B
/components/grid-list -- 11.8 kB -- -1 B
/components/grid -- 33.8 kB -- -1 B
/components/hidden -- 10.5 kB -- -1 B
/components/icons -- 24.4 kB -- -1 B
/components/links -- 6.82 kB -- -1 B
/components/lists -- 26 kB -- -1 B
/components/material-icons -- 728 kB -- -1 B
/components/menus -- 23.2 kB -- -1 B
/components/modal -- 11.5 kB -- -1 B
/components/no-ssr -- 5.02 kB -- -1 B
/components/pagination -- 8.07 kB -- -1 B
/components/paper -- 3.33 kB -- -1 B
/components/pickers -- 38.2 kB -- -1 B
/components/popover -- 16.9 kB -- -1 B
/components/popper -- 22.5 kB -- -1 B
/components/portal -- 3.29 kB -- -1 B
/components/progress -- 21.7 kB -- -1 B
/components/radio-buttons -- 15.2 kB -- -1 B
/components/rating -- 11.1 kB -- -1 B
/components/selects -- 28.8 kB -- -1 B
/components/skeleton -- 10.1 kB -- -1 B
/components/slider -- 14.6 kB -- -1 B
/components/snackbars -- 24.8 kB -- -1 B
/components/speed-dial -- 14.4 kB -- -1 B
/components/steppers -- 36.1 kB -- -1 B
/components/switches -- 16 kB -- -1 B
/components/tables -- 174 kB -- -1 B
/components/tabs -- 19.2 kB -- -1 B
/components/text-fields -- 54.7 kB -- -1 B
/components/textarea-autosize -- 2.81 kB -- -1 B
/components/toggle-button -- 10.5 kB -- -1 B
/components/tooltips -- 17.3 kB -- -1 B
/components/transfer-list -- 9.2 kB -- -1 B
/components/transitions -- 10.8 kB -- -1 B
/components/tree-view -- 11.2 kB -- -1 B
/components/typography -- 9.7 kB -- -1 B
/components/use-media-query -- 13.1 kB -- -1 B
/customization/breakpoints -- 15.7 kB -- -1 B
/customization/color -- 21.5 kB -- -1 B
/customization/components -- 37.4 kB -- -1 B
/customization/default-theme -- 8.54 kB -- -1 B
/customization/density -- 9.13 kB -- -1 B
/customization/globals -- 4.65 kB -- -1 B
/customization/palette -- 11.9 kB -- -1 B
/customization/spacing -- 2.49 kB -- -1 B
/customization/theming -- 17 kB -- -1 B
/customization/typography -- 11.6 kB -- -1 B
/customization/z-index -- 3.05 kB -- -1 B
/discover-more/backers -- 2.88 kB -- -1 B
/discover-more/changelog -- 1.37 kB -- -1 B
/discover-more/languages -- 3.32 kB -- -1 B
/discover-more/related-projects -- 7.06 kB -- -1 B
/discover-more/roadmap -- 3.67 kB -- -1 B
/discover-more/showcase -- 13.5 kB -- -1 B
/discover-more/team -- 6.51 kB -- -1 B
/discover-more/vision -- 7.03 kB -- -1 B
/getting-started/example-projects -- 6.12 kB -- -1 B
/getting-started/faq -- 31.8 kB -- -1 B
/getting-started/installation -- 7.6 kB -- -1 B
/getting-started/learn -- 8.39 kB -- -1 B
/getting-started/support -- 7.85 kB -- -1 B
/getting-started/supported-components -- 6.19 kB -- -1 B
/getting-started/supported-platforms -- 5.69 kB -- -1 B
/getting-started/templates -- 8.35 kB -- -1 B
/getting-started/templates/album -- 5.57 kB -- -1 B
/getting-started/templates/blog -- 7.43 kB -- -1 B
/getting-started/templates/checkout -- 11.2 kB -- -1 B
/getting-started/templates/dashboard -- 8.47 kB -- -1 B
/getting-started/templates/pricing -- 7.79 kB -- -1 B
/getting-started/templates/sign-in-side -- 9.23 kB -- -1 B
/getting-started/templates/sign-in -- 9.47 kB -- -1 B
/getting-started/templates/sign-up -- 9.58 kB -- -1 B
/getting-started/templates/sticky-footer -- 1.54 kB -- -1 B
/getting-started/usage -- 9.37 kB -- -1 B
/guides/api -- 17.4 kB -- -1 B
/guides/composition -- 14 kB -- -1 B
/guides/flow -- 2.21 kB -- -1 B
/guides/interoperability -- 14.9 kB -- -1 B
/guides/localization -- 19.9 kB -- -1 B
/guides/migration-v0x -- 7.25 kB -- -1 B
/guides/migration-v3 -- 22.3 kB -- -1 B
/guides/minimizing-bundle-size -- 6.73 kB -- -1 B
/guides/responsive-ui -- 4.18 kB -- -1 B
/guides/right-to-left -- 6.69 kB -- -1 B
/guides/server-rendering -- 8.38 kB -- -1 B
/guides/testing -- 8.33 kB -- -1 B
/guides/typescript -- 13.4 kB -- -1 B
/performance/table-component -- 1.44 kB -- -1 B
/performance/table-emotion -- 2.97 kB -- -1 B
/performance/table-hook -- 2.23 kB -- -1 B
/performance/table-mui -- 4.42 kB -- -1 B
/performance/table-raw -- 613 B -- -1 B
/performance/table-styled-components -- 2.61 kB -- -1 B
/premium-themes/onepirate -- 7.11 kB -- -1 B
/premium-themes/onepirate/forgot-password -- 1 kB -- -1 B
/premium-themes/onepirate/privacy -- 4.43 kB -- -1 B
/premium-themes/onepirate/sign-in -- 1.07 kB -- -1 B
/premium-themes/onepirate/sign-up -- 1.12 kB -- -1 B
/premium-themes/onepirate/terms -- 11.8 kB -- -1 B
/premium-themes/paperbase -- 8.71 kB -- -1 B
/styles/advanced -- 30.3 kB -- -1 B
/styles/api -- 16 kB -- -1 B
/styles/basics -- 17.6 kB -- -1 B
/system/api -- 5.85 kB -- -1 B
/system/basics -- 25.1 kB -- -1 B
/system/borders -- 4.04 kB -- -1 B
/system/display -- 6.51 kB -- -1 B
/system/flexbox -- 5.72 kB -- -1 B
/system/palette -- 4.28 kB -- -1 B
/system/positions -- 2.46 kB -- -1 B
/system/shadows -- 3.44 kB -- -1 B
/system/sizing -- 3.44 kB -- -1 B
/system/spacing -- 5.97 kB -- -1 B
/system/typography -- 4.22 kB -- -1 B
/versions -- 23.1 kB -- -1 B
docs:chunk:shared -- 68.7 kB -- -1 B
docs:shared:chunk/commons -- 5.99 kB -- -1 B
docs:shared:chunk/framework -- 42.3 kB -- -1 B
docs:shared:runtime/main -- 6.78 kB -- -1 B
docs:shared:runtime/webpack -- 1.24 kB -- -1 B
bundle Size Change Size Gzip Change Gzip
ExpansionPanelSummary ▼ -1 B (-0.00% ) 82.7 kB ▼ -1 B (-0.00% ) 26.3 kB
@material-ui/core ▼ -1 B (-0.00% ) 362 kB -- 99.7 kB
@material-ui/core[umd] ▼ -1 B (-0.00% ) 320 kB -- 92.9 kB
@material-ui/lab -- 203 kB -- 60.5 kB
@material-ui/styles -- 52 kB -- 15.6 kB
@material-ui/system -- 17.2 kB -- 4.52 kB
Alert -- 87.9 kB -- 27.9 kB
AlertTitle -- 68.8 kB -- 21.7 kB
AppBar -- 68.7 kB -- 21.6 kB
Autocomplete -- 136 kB -- 42.9 kB
Avatar -- 69.8 kB -- 21.9 kB
AvatarGroup -- 70.8 kB -- 22.5 kB
Backdrop -- 72.5 kB -- 22.4 kB
Badge -- 70 kB -- 21.8 kB
BottomNavigation -- 67.1 kB -- 21.1 kB
BottomNavigationAction -- 80.1 kB -- 25.4 kB
Box -- 73.6 kB -- 22.4 kB
Breadcrumbs -- 85 kB -- 27 kB
Button -- 84.3 kB -- 25.9 kB
ButtonBase -- 78.6 kB -- 24.7 kB
ButtonGroup -- 87.8 kB -- 27.2 kB
Card -- 67.5 kB -- 21.2 kB
CardActionArea -- 79.7 kB -- 25.3 kB
CardActions -- 66.7 kB -- 20.9 kB
CardContent -- 66.6 kB -- 20.9 kB
CardHeader -- 69.7 kB -- 22 kB
CardMedia -- 67 kB -- 21.1 kB
Checkbox -- 86.7 kB -- 27.5 kB
Chip -- 87.2 kB -- 26.8 kB
CircularProgress -- 68.8 kB -- 21.7 kB
ClickAwayListener -- 3.84 kB -- 1.54 kB
Collapse -- 72.6 kB -- 22.5 kB
colorManipulator -- 3.88 kB -- 1.52 kB
Container -- 67.8 kB -- 21.2 kB
CssBaseline -- 66.6 kB -- 21 kB
Dialog -- 87.5 kB -- 27.4 kB
DialogActions -- 66.8 kB -- 21 kB
DialogContent -- 66.9 kB -- 21 kB
DialogContentText -- 68.7 kB -- 21.6 kB
DialogTitle -- 68.9 kB -- 21.7 kB
Divider -- 67.3 kB -- 21.2 kB
docs:/ -- 10.7 kB -- -1 B
docs:/_app -- 34.4 kB -- -1 B
Drawer -- 89.2 kB -- 27.2 kB
ExpansionPanel -- 76.2 kB -- 24 kB
ExpansionPanelActions -- 66.7 kB -- 20.9 kB
ExpansionPanelDetails -- 66.6 kB -- 20.9 kB
Fab -- 81.4 kB -- 25.4 kB
Fade -- 28.4 kB -- 9.47 kB
FilledInput -- 78.2 kB -- 24.4 kB
FormControl -- 69 kB -- 21.5 kB
FormControlLabel -- 70.1 kB -- 22.1 kB
FormGroup -- 66.7 kB -- 20.8 kB
FormHelperText -- 68 kB -- 21.2 kB
FormLabel -- 68.1 kB -- 21.2 kB
Grid -- 69.8 kB -- 21.9 kB
GridList -- 67.1 kB -- 21.1 kB
GridListTile -- 68.4 kB -- 21.5 kB
GridListTileBar -- 67.9 kB -- 21.3 kB
Grow -- 29 kB -- 9.68 kB
Hidden -- 70.6 kB -- 22.3 kB
Icon -- 67.5 kB -- 21.2 kB
IconButton -- 80.7 kB -- 25.2 kB
Input -- 77.2 kB -- 24.2 kB
InputAdornment -- 69.7 kB -- 22 kB
InputBase -- 75.3 kB -- 23.7 kB
InputLabel -- 69.9 kB -- 21.6 kB
LinearProgress -- 70 kB -- 21.7 kB
Link -- 71.2 kB -- 22.6 kB
List -- 67 kB -- 20.9 kB
ListItem -- 81.6 kB -- 25.6 kB
ListItemAvatar -- 66.8 kB -- 20.9 kB
ListItemIcon -- 66.8 kB -- 21 kB
ListItemSecondaryAction -- 66.7 kB -- 20.9 kB
ListItemText -- 69.6 kB -- 22 kB
ListSubheader -- 67.4 kB -- 21.2 kB
Menu -- 93.2 kB -- 28.8 kB
MenuItem -- 82.7 kB -- 25.9 kB
MenuList -- 70.7 kB -- 22.1 kB
MobileStepper -- 72.5 kB -- 22.8 kB
Modal -- 14.9 kB -- 5.23 kB
NativeSelect -- 81.5 kB -- 25.9 kB
NoSsr -- 2.18 kB -- 1.03 kB
OutlinedInput -- 79.2 kB -- 24.7 kB
Pagination -- 89 kB -- 27.5 kB
PaginationItem -- 85.4 kB -- 26.4 kB
Paper -- 67 kB -- 20.9 kB
Popover -- 87.6 kB -- 27.2 kB
Popper -- 28.8 kB -- 10.3 kB
Portal -- 2.87 kB -- 1.29 kB
Radio -- 87.7 kB -- 27.8 kB
RadioGroup -- 68.4 kB -- 21.3 kB
Rating -- 75.1 kB -- 24.2 kB
RootRef -- 4.61 kB -- 1.77 kB
ScopedCssBaseline -- 67.5 kB -- 21.2 kB
Select -- 120 kB -- 35.8 kB
Skeleton -- 67.7 kB -- 21.4 kB
Slide -- 30.4 kB -- 10.1 kB
Slider -- 80.4 kB -- 25.7 kB
Snackbar -- 79.9 kB -- 25.1 kB
SnackbarContent -- 68.2 kB -- 21.3 kB
SpeedDial -- 90.8 kB -- 28.8 kB
SpeedDialAction -- 122 kB -- 39 kB
SpeedDialIcon -- 69.2 kB -- 21.8 kB
Step -- 67.3 kB -- 21.2 kB
StepButton -- 86.9 kB -- 27.5 kB
StepConnector -- 67.4 kB -- 21.3 kB
StepContent -- 73.8 kB -- 23.1 kB
StepIcon -- 69.2 kB -- 21.6 kB
StepLabel -- 73.2 kB -- 22.7 kB
Stepper -- 69.5 kB -- 22 kB
styles/createMuiTheme -- 22.2 kB -- 7.69 kB
SvgIcon -- 67.7 kB -- 21.2 kB
SwipeableDrawer -- 96.6 kB -- 30.4 kB
Switch -- 85.9 kB -- 27.1 kB
Tab -- 80.9 kB -- 25.8 kB
Table -- 67.2 kB -- 21.1 kB
TableBody -- 66.8 kB -- 20.9 kB
TableCell -- 68.7 kB -- 21.4 kB
TableContainer -- 66.6 kB -- 20.9 kB
TableFooter -- 66.8 kB -- 20.9 kB
TableHead -- 66.8 kB -- 20.9 kB
TablePagination -- 147 kB -- 43.2 kB
TableRow -- 67.1 kB -- 21.1 kB
TableSortLabel -- 82 kB -- 26 kB
Tabs -- 89.9 kB -- 28.8 kB
TextareaAutosize -- 5.19 kB -- 2.17 kB
TextField -- 129 kB -- 37.9 kB
ToggleButton -- 80.7 kB -- 25.7 kB
ToggleButtonGroup -- 67.9 kB -- 21.4 kB
Toolbar -- 67 kB -- 21.1 kB
Tooltip -- 106 kB -- 33.6 kB
TreeItem -- 79.8 kB -- 25.4 kB
TreeView -- 72.9 kB -- 23 kB
Typography -- 68.3 kB -- 21.4 kB
useAutocomplete -- 16 kB -- 5.74 kB
useMediaQuery -- 2.56 kB -- 1.06 kB
Zoom -- 28.4 kB -- 9.59 kB

Generated by 🚫 dangerJS against 26efdb1

@oliviertassinari
Copy link
Member

oliviertassinari commented Mar 30, 2020

I believe there are 3 types of spacing, 1. the spacing between elements, which should and can be configured, 2. the spacing inside the element which should be immutable if it risks breaking the display. I'm not aware of the same constraint with colors or fonts.

@eps1lon
Copy link
Member Author

eps1lon commented Mar 30, 2020

the spacing inside the element which should be immutable

Why? This directly contradicts my understanding of spacing as well as the material guidelines.

@oliviertassinari
Copy link
Member

oliviertassinari commented Mar 30, 2020

Why? This directly contradicts my understanding of spacing as well as the material guidelines.

As far as I know, it doesn't work (as a systematized strategy). We can't change the spacing value and have it still look great everywhere. To solve this problem, the size enums were introduced, for instance: small, medium, large. Values with spacing we fully control.

There is another dimension to the problem, developers might work with different spacing grid than Material Design. Material Design requires a 4px or 8px linear (depending on the context) grid. But people might very well use different values or non-linear e.g. [5, 12, 20, …].

@oliviertassinari
Copy link
Member

Regarding this very component, I think that it could make sense to apply the change.

@eps1lon
Copy link
Member Author

eps1lon commented Mar 30, 2020

We can't expect to change the spacing value and have it look great. To solve this problem, the size enum was introduced, small, medium, large. Value we fin grain control.

Let's switch to I or you here. Otherwise this gets confusing.

I don't expect components to look great if the spacing value changes. Just like I don't expect components to look great if color, or font, or props change. You seem to expect changes in color to not affect that a component looks great. How is that?

But people might very well use different values or non-linear ([5, 12, 20, …]).

This is why we introduced overriding theme.spacing, no? So that one can apply different scales, grids etc. I don't understand how hardcoding solves this. A custom grid breaks hardcoded values just as likely, no?

@eps1lon
Copy link
Member Author

eps1lon commented Mar 30, 2020

This topic is important if we're considering moving to a stricter handling of the theme (you suggest theme-ui in the last meeting). There's a very clear specification that changing the spacing values of the theme affects the spacing of components.

I still don't understand why we have spacing in the theme if we shouldn't use it.
It's pretty confusing to have a property in an object if that property doesn't affect the thing I pass it to.

@oliviertassinari
Copy link
Member

@eps1lon I believe the convention in #12022 is:

  • if spacing outside the element: theme.spacing, e.g. margin of components, grid gaps.
  • if spacing inside the element: unless explicitly set by the user: hardcoded.

I agree it's an important concern, it deserves more exploration. There are a couple of questions I wonder about that I think it would be awesome to answer:

  • For the current users who tweak theme.spacing, what's the objective? (personally, I never had a use case for tweaked the value). How do they use it? The only one I recall seeing users is for the px -> rem switch of unit.
  • Do we have an example of stress-tested prior-art in the industry (for the approach we used to have)? Does it work?

Maybe we need an RFC and ask feedback from the community on Twitter?

@eps1lon
Copy link
Member Author

eps1lon commented Mar 30, 2020

How do they use it?

Personally I use it in the literal sense: "How much space does my UI have?". Larger value > more empty space, Smaller value > less empty space. In other words: This is a slider for the density.

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.

Based on the outcome of the team meeting discussion, I think that we are good to go.
As long as it renders correctly with different spacing value, we are good.

@oliviertassinari oliviertassinari added PR: ready to ship component: accordion This is the name of the generic UI component, not the React module! and removed on hold There is a blocker, we need to wait discussion labels Mar 31, 2020
@oliviertassinari oliviertassinari changed the title [ExpansionPanelSummary] Use theme.spacing [ExpansionPanel] Use theme.spacing in summary Apr 1, 2020
@oliviertassinari oliviertassinari merged commit 6746867 into mui:master Apr 1, 2020
@eps1lon eps1lon deleted the feat/ExpansionPanel/spacing-density branch April 1, 2020 10:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: accordion This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants