Drawer selected list item misses some guidelines

[touficbatache]

Bugs

What MDC-Web Version are you using?

0.23.0

What browser(s) is this bug affecting?

All browsers

What OS are you using?

All OS

What are the steps to reproduce the bug?

1. Go to http://material-components-web.appspot.com/drawer/permanent-drawer-above-toolbar.html
2. Take a look at the first item

What is the expected behavior?

According to the guidelines, after a list item is selected, that item changes color to match the app’s primary color to indicate selection. Additionally, the touch ripple highlights the row of that list item.

What is the actual behavior?

The list item is selected and only the color changes to match the app’s primary color to indicate selection but the touch ripple doesn't highlight the row of that list item.

Any other information you believe would be useful?

The active state (.mdc-permanent-drawer .mdc-list-item:active::before) of the list item in the drawer has the opacity set to .18, to make it match with the guidelines color just change the opacity to .09 for the selected item.

[lynnmercier]

We're currently working on revisiting some of our guidelines around selected list items. I'll mark this as "needs design guidance" until we have some resolution.

[touficbatache]

Hey @lynnjepsen! Any news on this? I'd be happy to work on this and submit a PR. 😃

[kfranqueiro]

There are several parts to this, some of which are currently being worked on:

• Add proper styles for activated/selected list items:
  • Applying primary color to text/icon (done in feat(list): Add color theme mixins & --selected/--activated modifiers #1663)
  • Applying to shades for activated state (being reviewed in feat(list): Use states mixins; change padding behavior to support them #1737)
• Add code to apply activated class to drawer items (being reviewed in feat(drawer): Remove obsolete pre-states styles; update demo pages #1738)
• Change primary color in demos to make it more prominent (WIP feat(theme): Update baseline theme colors #1744)
• Add ripple JS instances to list items in drawer demos to get full ripple effect rather than just shades

[touficbatache]

It seems like this has been fixed