Skip to content

[Divider] Fix height for vertical divider in a flexbox #19614

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 8 commits into from
Feb 9, 2020
Merged

[Divider] Fix height for vertical divider in a flexbox #19614

merged 8 commits into from
Feb 9, 2020

Conversation

@captain-yossarian
Copy link
Contributor

@captain-yossarian captain-yossarian commented Feb 8, 2020 •
edited by oliviertassinari
Loading

Closes #18022

@mui-pr-bot
Copy link

mui-pr-bot commented Feb 8, 2020 •
edited
Loading

Details of bundle changes.

Comparing: 5794780...d4d91fa

bundle Size Change Size Gzip Change Gzip
Divider ▲ +99 B (+0.16% ) 62.9 kB ▲ +54 B (+0.27% ) 19.8 kB
docs.main ▲ +99 B (+0.02% ) 596 kB ▲ +41 B (+0.02% ) 194 kB
@material-ui/core[umd] ▲ +99 B (+0.03% ) 318 kB ▲ +35 B (+0.04% ) 92 kB
@material-ui/core ▲ +99 B (+0.03% ) 362 kB ▲ +29 B (+0.03% ) 98.9 kB
@material-ui/lab -- 194 kB -- 57.3 kB
@material-ui/styles -- 51.4 kB -- 15.4 kB
@material-ui/system -- 16.4 kB -- 4.3 kB
Alert -- 83.6 kB -- 26.3 kB
AlertTitle -- 64.4 kB -- 20.3 kB
AppBar -- 64.2 kB -- 20.1 kB
Autocomplete -- 132 kB -- 41.4 kB
Avatar -- 65.4 kB -- 20.6 kB
AvatarGroup -- 62.4 kB -- 19.6 kB
Backdrop -- 68 kB -- 21 kB
Badge -- 65.5 kB -- 20.4 kB
BottomNavigation -- 62.6 kB -- 19.6 kB
BottomNavigationAction -- 75.7 kB -- 23.9 kB
Box -- 72 kB -- 21.8 kB
Breadcrumbs -- 67.9 kB -- 21.3 kB
Button -- 79.9 kB -- 24.5 kB
ButtonBase -- 74.2 kB -- 23.3 kB
ButtonGroup -- 83.4 kB -- 25.5 kB
Card -- 63 kB -- 19.7 kB
CardActionArea -- 75.3 kB -- 23.7 kB
CardActions -- 62.2 kB -- 19.5 kB
CardContent -- 62.1 kB -- 19.5 kB
CardHeader -- 65.2 kB -- 20.5 kB
CardMedia -- 62.5 kB -- 19.7 kB
Checkbox -- 83.2 kB -- 26.3 kB
Chip -- 82.8 kB -- 25.4 kB
CircularProgress -- 64.3 kB -- 20.3 kB
ClickAwayListener -- 3.91 kB -- 1.55 kB
Collapse -- 68.2 kB -- 21.1 kB
colorManipulator -- 3.88 kB -- 1.52 kB
Container -- 63.3 kB -- 19.8 kB
CssBaseline -- 57.7 kB -- 18.1 kB
Dialog -- 83.2 kB -- 25.9 kB
DialogActions -- 62.3 kB -- 19.5 kB
DialogContent -- 62.4 kB -- 19.6 kB
DialogContentText -- 64.2 kB -- 20.2 kB
DialogTitle -- 64.4 kB -- 20.2 kB
docs.landing -- 56.4 kB -- 14.5 kB
Drawer -- 85 kB -- 25.8 kB
ExpansionPanel -- 72.5 kB -- 22.7 kB
ExpansionPanelActions -- 62.2 kB -- 19.5 kB
ExpansionPanelDetails -- 62.1 kB -- 19.5 kB
ExpansionPanelSummary -- 78.3 kB -- 24.8 kB
Fab -- 77 kB -- 24 kB
Fade -- 23.4 kB -- 7.98 kB
FilledInput -- 73.7 kB -- 22.9 kB
FormControl -- 64.6 kB -- 20.2 kB
FormControlLabel -- 65.7 kB -- 20.6 kB
FormGroup -- 62.2 kB -- 19.5 kB
FormHelperText -- 63.5 kB -- 20 kB
FormLabel -- 63.6 kB -- 19.8 kB
Grid -- 65.3 kB -- 20.5 kB
GridList -- 62.6 kB -- 19.7 kB
GridListTile -- 63.9 kB -- 20 kB
GridListTileBar -- 63.4 kB -- 19.9 kB
Grow -- 24 kB -- 8.19 kB
Hidden -- 66.1 kB -- 20.8 kB
Icon -- 63 kB -- 19.7 kB
IconButton -- 76.3 kB -- 23.8 kB
Input -- 72.7 kB -- 22.7 kB
InputAdornment -- 65.3 kB -- 20.5 kB
InputBase -- 70.8 kB -- 22.2 kB
InputLabel -- 65.5 kB -- 20.5 kB
LinearProgress -- 65.5 kB -- 20.5 kB
Link -- 66.8 kB -- 21.1 kB
List -- 62.5 kB -- 19.5 kB
ListItem -- 77.3 kB -- 24.2 kB
ListItemAvatar -- 62.3 kB -- 19.5 kB
ListItemIcon -- 62.3 kB -- 19.5 kB
ListItemSecondaryAction -- 62.2 kB -- 19.5 kB
ListItemText -- 65.1 kB -- 20.5 kB
ListSubheader -- 62.9 kB -- 19.8 kB
Menu -- 89 kB -- 27.4 kB
MenuItem -- 78.4 kB -- 24.5 kB
MenuList -- 66.2 kB -- 20.7 kB
MobileStepper -- 68 kB -- 21.4 kB
Modal -- 14.5 kB -- 5.04 kB
NativeSelect -- 77 kB -- 24.3 kB
NoSsr -- 2.19 kB -- 1.04 kB
OutlinedInput -- 74.7 kB -- 23.3 kB
Pagination -- 86.2 kB -- 26.3 kB
PaginationItem -- 82.4 kB -- 25.5 kB
Paper -- 62.5 kB -- 19.5 kB
Popover -- 83.3 kB -- 25.8 kB
Popper -- 28.8 kB -- 10.3 kB
Portal -- 2.92 kB -- 1.3 kB
Radio -- 84.2 kB -- 26.5 kB
RadioGroup -- 64.6 kB -- 20.1 kB
Rating -- 70.7 kB -- 22.7 kB
RootRef -- 4.24 kB -- 1.64 kB
Select -- 117 kB -- 34.6 kB
Skeleton -- 63.1 kB -- 20 kB
Slide -- 25.5 kB -- 8.71 kB
Slider -- 76.8 kB -- 24.2 kB
Snackbar -- 75.6 kB -- 23.7 kB
SnackbarContent -- 63.7 kB -- 20.1 kB
SpeedDial -- 86.4 kB -- 27.2 kB
SpeedDialAction -- 119 kB -- 37.5 kB
SpeedDialIcon -- 64.7 kB -- 20.4 kB
Step -- 62.8 kB -- 19.7 kB
StepButton -- 82.6 kB -- 26.1 kB
StepConnector -- 62.9 kB -- 19.8 kB
StepContent -- 69.3 kB -- 21.7 kB
StepIcon -- 64.8 kB -- 20.2 kB
StepLabel -- 68.8 kB -- 21.7 kB
Stepper -- 65.1 kB -- 20.6 kB
styles/createMuiTheme -- 16.5 kB -- 5.81 kB
SvgIcon -- 63.2 kB -- 19.8 kB
SwipeableDrawer -- 92.4 kB -- 28.8 kB
Switch -- 82.3 kB -- 26 kB
Tab -- 76.5 kB -- 24.2 kB
Table -- 62.7 kB -- 19.7 kB
TableBody -- 62.3 kB -- 19.5 kB
TableCell -- 64.2 kB -- 20.2 kB
TableContainer -- 62.1 kB -- 19.5 kB
TableFooter -- 62.3 kB -- 19.5 kB
TableHead -- 62.3 kB -- 19.5 kB
TablePagination -- 144 kB -- 41.9 kB
TableRow -- 62.7 kB -- 19.7 kB
TableSortLabel -- 77.6 kB -- 24.4 kB
Tabs -- 85.8 kB -- 27.2 kB
TextareaAutosize -- 5.12 kB -- 2.14 kB
TextField -- 125 kB -- 36.6 kB
ToggleButton -- 76.3 kB -- 24.2 kB
ToggleButtonGroup -- 63.4 kB -- 20 kB
Toolbar -- 62.5 kB -- 19.6 kB
Tooltip -- 102 kB -- 32.4 kB
TreeItem -- 74.2 kB -- 23.5 kB
TreeView -- 66.8 kB -- 21.1 kB
Typography -- 63.8 kB -- 20 kB
useAutocomplete -- 14.7 kB -- 5.31 kB
useMediaQuery -- 2.58 kB -- 1.07 kB
Zoom -- 23.5 kB -- 8.09 kB

Generated by 🚫 dangerJS against d4d91fa

@captain-yossarian
Copy link
Contributor Author

captain-yossarian commented Feb 8, 2020

@oliviertassinari It works, but in this case
<Any nonFlexBox > <Divider flexItem /> </Any>
it does not work.
Should I apply flexItem only if orientation is vertical or keep it as it is ?

@captain-yossarian
Copy link
Contributor Author

captain-yossarian commented Feb 8, 2020

I have checked argos-ci, it is looks Ok, except docs-components-dividers/VerticalDividers.png. There is no vertical divider neither on master nor in my changes. But divider is visible in docs - both on master and on my branch. So, I think it is no important

@oliviertassinari oliviertassinari added the scope: divider Changes related to the divier. label Feb 9, 2020
@oliviertassinari oliviertassinari added the type: new feature Expand the scope of the product to solve a new problem. label Feb 9, 2020
@oliviertassinari oliviertassinari merged commit 624d9ce into mui:master Feb 9, 2020
@oliviertassinari
Copy link
Member

oliviertassinari commented Feb 9, 2020

@captain-yossarian Thanks

mbrookes
mbrookes reviewed Feb 9, 2020
View reviewed changes
docs/src/pages/components/dividers/dividers.md
## Vertical Dividers

You can also render a divider vertically using the `orientation` prop.
Note the usage of the `flexItem` prop to accommodate for the flex container.
Copy link
Member

@mbrookes mbrookes Feb 9, 2020

Choose a reason for hiding this comment

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

Suggested change
Note the usage of the `flexItem` prop to accommodate for the flex container.
Note the use of the `flexItem` prop to accommodate for the flex container.

Copy link
Member

@oliviertassinari oliviertassinari Feb 9, 2020

Choose a reason for hiding this comment

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

Thanks, I take care of it in a follow-up.

packages/material-ui/src/Divider/Divider.js
component: PropTypes.elementType,
/**
* If `true`, the divider will apply different strategy for height.
* If `true`, the divider will apply adapt to a parent flex container.
Copy link
Member

@mbrookes mbrookes Feb 9, 2020

Choose a reason for hiding this comment

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

Suggested change
* If `true`, the divider will apply adapt to a parent flex container.
If `true`, the divider will adapt to a parent flex container.

?

(Fixes the grammar, but it's still not clear what this is actually trying to say.)

Copy link
Member

@oliviertassinari oliviertassinari Feb 9, 2020

Choose a reason for hiding this comment

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

I'm not sure how we could better explain the role of this prop.

Copy link
Member

@mbrookes mbrookes Feb 10, 2020

Choose a reason for hiding this comment

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

We could spell it out 🤷‍♂:

Suggested change
* If `true`, the divider will apply adapt to a parent flex container.
If `true`, a vertical divider will have the correct height when used in flex container. (By default, a vertical divider will have a calculated height of `0px` in Chrome if it is the child of a flex container.)

@oliviertassinari oliviertassinari mentioned this pull request Feb 10, 2020
Merged
EsoterikStare pushed a commit to EsoterikStare/material-ui that referenced this pull request Feb 13, 2020
@captain-yossarian @EsoterikStare
[Divider] Fix height for vertical divider in a flexbox (mui#19614)
c1d22b8
This was referenced Mar 10, 2020
Merged
Merged
Merged
Closed
Closed
Closed
This was referenced Mar 21, 2020
Merged
Open
This was referenced Apr 16, 2020
Merged
Closed
@snyk-bot snyk-bot mentioned this pull request May 4, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mbrookes mbrookes mbrookes left review comments

@oliviertassinari oliviertassinari oliviertassinari approved these changes

Assignees

No one assigned

Labels

scope: divider Changes related to the divier. type: new feature Expand the scope of the product to solve a new problem.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Divider] Height is not correct for vertical divider in a flexbox

4 participants

@captain-yossarian @mui-pr-bot @oliviertassinari @mbrookes