[List] Doesn't meet guidelines

[kybarg]

Problem description

According to Material guidelines ALL(with controls also) single line list items must be 48px height and 40px when in dense mode. Only exception is when avatar element is present it can be 56px height.
https://material.io/guidelines/components/lists.html#lists-specs

Link to minimally-working code that reproduces the issue

Versions

• Material-UI: next
• React: 15.4.0
• Browser: Chrome 56

[ArcanisCz]

Only case i am seeing is when there are some custom components in list-item, such as buttons (https://material-ui-1dab0.firebaseapp.com/component-demos/lists#checkbox).

Should ListItem force its size even though children are taller than 48/40 px?

[skirunman]

Also, list is missing secondary text line for three-line lists, which is supported in v0.x?
#9205

[zdrummond]

This problem is hitting me now. I am trying to use a ListItem with a Checkbox, and the list must be dense for this UI. It works fine, until I put the Checkbox in, as noted above.

I am new to material-ui and I having trouble figure out how to force the checkbox to be smaller. Any guidance would be appreciated.

[rvolgers]

I just ran into this. While I'm really excited about v1.0, it's kind of a shame this isn't scheduled to be fixed for the big release!

I'm currently using the following wrapper component around Checkbox to resolve this:

// Workaround for https://github.com/mui-org/material-ui/issues/6098
const DenserPrimaryAction = withStyles(
    theme => ({
        root: {margin: '-12px 4px -12px -12px'},
    }),
)(
    props => (
        <div className={props.classes.root}>
            {props.children}
        </div>
    ),
);

I'm only using it inside a non-dense ListItem around a Checkbox currently, and it's pixel perfect for that usecase. Ymmv for other uses but I think it should work for any 48x48 component that has a centered 24x24 thing inside it surrounded by empty space.

Using the negative margins is a bit of a hack but it seemed like the least invasive change I could make.

[Zuurkern]

I am working on a solution, also adding support for three-line items (#9205). I'll open a PR when I feel it is robust and elegant enough.

[jedwards1211]

I'm confused, do the specs say anything about a dense mode? Now at least, there's nothing in the OP link about dense mode and no image in the specs where the item is 40px tall.

[mbrookes]

@jedwards1211 You're commenting on a closed issue from 2017.

[jedwards1211]

I guess I should have tagged the OP in the new issue that resulted from this?