Material-design-lite: Add divider for menus

[smcardle]

As far as I can see there is no divider css styles for menus.

Can this be added ...

Regards

[Garbee]

Can you provide a reference in the specification for where this is defined?

[smcardle]

Sure

General divider spec
https://www.google.com/design/spec/components/dividers.html

Usage in a menu

https://www.google.com/design/spec/components/menus.html#menus-usage

Regards

[mspl13]

What about just using an <hr /> or a border-bottom-style tag for those purposes?

[Garbee]

Doing a modifier against menu items with border-bottom styling seems best here.

[smcardle]

I agree that border-bottom would work here and It was something I considered, but I think it is also unintuitive to many.

Also, dynamically adding items to menus in groups may become somewhat confusing and more difficult to handle. In this case I expect a hr maybe better placed but at least there would be options.

Technically, this is a specific item, according to the spec, that serves it's own purpose and lives on it's own merits and is not as part of an actual menu item or group, but as a distinct component.

However, as a stop gap, until a proper solution in line with the specs can be provided, I am personally happy to go with this.

Regards

[Garbee]

The logistics between adding in a horizontal row dynamically or the modifier class is the same and not more difficult in any case that comes to mind. Somehow, you are going to need to detect when to add either and then carry out the task, so which is done doesn't seem like an issue.

Dividers can't live on its own. The way to implement it depends upon the component being targeted. Abstracting it out doesn't make sense. The spec pages are not a one-to-one thing. There is a subheader page, but we won't implement that as its own component.

[dolthead]

A standalone menu/list divider class--that doesn't piggy back a list item with content--would be so much easier for looping, IMHO. Sounds like a pull request opportunity for me... :o]

[Garbee]

Can you provide an example where it would make looping easier? I'm not sure how it being a class vs a dedicated node is going to make a difference.

[dolthead]

We have some dynamic menus built from values in the database. After I loop through those, I want to add a full-bleed divider and add a few more items to the menu. Is there a way provided to add standalone list item for a menu divider? <li class='mdl-menu__item mdl-menu__item--full-bleed-divider'></li> with no content has a lot of space (for the menu item content), and <li><hr/></li> has half space before and after the divider.
If there's not already something provided, I'll just add CSS to the hr version to shrink the height to 1px.

[Garbee]

There is no node to make a divider. It's just a modifier class on an existing node. Even with the given case I'm still not seeing how having a dedicated node is going to help at all.

[dolthead]

It's a personal code-style thing. I'd rather not add the divider class to the previous <li>, and I don't want to add logic to the loop to add the divider class to other menu items at certain points. I like dropping this in when I want a divider <li class='my-divider'><hr/></li>.

[xR86]

I've found that using an <hr /> would be fine, but something is missing, since it isn't rendered.

For some reason, the hr in material.grey-orange.min.css (which probably has the same issue in other ones like material.indigo-pink.min.css) would only have these properties:

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

I think these should be added:

• width: 100%; - responsive, solves the problem (probably 90% would be nice for hr, while 100% could be set for .mdl-cell hr)
• margin: 1.5em auto - 1.5em would give more space, while auto would center it

[Garbee]

The hr styling is from the reset. We won't allow any changes to that internally since it could have adverse affects on existing sites.

[JeffEmery]

Here is an option that seems to be inline with the style guide...

<Menu id="nav-menu">
    {items.map(
        option => [
            <MenuItem key={option.primary}>
                <ListItemIcon>{option.icon}</ListItemIcon>
                <ListItemText primary={option.primary} />
            </MenuItem>,
            option.isDivider ? <Divider /> : null,
        ]
    )}
</Menu>