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

captain-yossarian · 2020-02-08T19:14:06Z

I have followed (at least) the PR section of the contributing guide.

mui-pr-bot · 2020-02-08T19:31:00Z

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 · 2020-02-08T19:36:46Z

@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 · 2020-02-08T20:18:23Z

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 · 2020-02-09T17:59:56Z

@captain-yossarian Thanks

mbrookes · 2020-02-09T22:06:20Z

docs/src/pages/components/dividers/dividers.md

@@ -36,5 +36,6 @@ The examples below show two ways of achieving this.
 ## 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.


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.

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

mbrookes · 2020-02-09T22:08:50Z

packages/material-ui/src/Divider/Divider.js

@@ -99,7 +99,7 @@ Divider.propTypes = {
   */
  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.


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.)

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

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.)

captain-yossarian added 4 commits February 8, 2020 20:11

Init

5d03946

Order

3b87743

Remove empty space

974a37d

Remove redundant code

d91bbab

captain-yossarian requested a review from oliviertassinari February 8, 2020 19:33

captain-yossarian force-pushed the issue/18022 branch from 2e14fd6 to d91bbab Compare February 8, 2020 19:40

captain-yossarian added 3 commits February 8, 2020 20:41

update docs

9c0f867

Adjust to convention

80fabbf

Add point

6e1a679

oliviertassinari added the component: divider This is the name of the generic UI component, not the React module! label Feb 9, 2020

polish

d4d91fa

oliviertassinari added the new feature New feature or request label Feb 9, 2020

oliviertassinari approved these changes Feb 9, 2020

View reviewed changes

oliviertassinari added the PR: ready to ship label Feb 9, 2020

oliviertassinari merged commit 624d9ce into mui:master Feb 9, 2020

mbrookes reviewed Feb 9, 2020

View reviewed changes

oliviertassinari mentioned this pull request Feb 10, 2020

[core] Batch small changes #19639

Merged

EsoterikStare pushed a commit to EsoterikStare/material-ui that referenced this pull request Feb 13, 2020

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

c1d22b8

This was referenced Mar 21, 2020

[Snyk] Upgrade @material-ui/core from 4.9.2 to 4.9.7 JohannesKonings/fff-badminton#18

Merged

[Snyk] Upgrade @material-ui/core from 4.9.1 to 4.9.4 mdfaizan7/react-bitConnect-client#1

Open

This was referenced Apr 16, 2020

[Snyk] Upgrade @material-ui/core from 4.3.3 to 4.9.7 reactioncommerce/reaction#6208

Merged

[Snyk] Upgrade: @material-ui/core, @material-ui/icons BrainBackup/bb8#100

Closed

snyk-bot mentioned this pull request May 4, 2020

[Snyk] Upgrade: @material-ui/core, @material-ui/icons BeOrNot2Be/CopVSMed#6

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

captain-yossarian commented Feb 8, 2020 •

edited by oliviertassinari

Loading

mui-pr-bot commented Feb 8, 2020 •

edited

Loading

captain-yossarian commented Feb 8, 2020

captain-yossarian commented Feb 8, 2020

oliviertassinari commented Feb 9, 2020

mbrookes Feb 9, 2020

oliviertassinari Feb 9, 2020

mbrookes Feb 9, 2020

oliviertassinari Feb 9, 2020

mbrookes Feb 10, 2020

	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.

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

	* 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.)

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

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

Conversation

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

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

captain-yossarian commented Feb 8, 2020

captain-yossarian commented Feb 8, 2020

oliviertassinari commented Feb 9, 2020

mbrookes Feb 9, 2020

Choose a reason for hiding this comment

oliviertassinari Feb 9, 2020

Choose a reason for hiding this comment

mbrookes Feb 9, 2020

Choose a reason for hiding this comment

oliviertassinari Feb 9, 2020

Choose a reason for hiding this comment

mbrookes Feb 10, 2020

Choose a reason for hiding this comment

captain-yossarian commented Feb 8, 2020 •

edited by oliviertassinari

Loading

mui-pr-bot commented Feb 8, 2020 •

edited

Loading