Menus/Selects/ExpansionPanel should follow Material guidelines

[Ploppy3]

Bug:

What is the expected behavior?

The components should follow the Material guidelines

What is the current behavior?

For Menu/Select/ExpansionPanel:

• Shadows seem incorrect
• Missing border-radius

For Menu/Select:

• Wrong animations.

Current Menu animation:

Menu Animation according to the Material Guidelines:

Current Select animation:

Select Animation according to the Material Guidelines:

Which versions of Angular, Material, OS, browsers are affected?

Material 5.0.0-rc0

[Ploppy3]

@crisbeto Is it also possible to apply the same fixes to the Expansion Panel, missing border radius, wrong shadows, and separator hardly visible :

(from material guidelines)

[Ploppy3]

@crisbeto Update the issue so that it concerns the 3 components.

[thw0rted]

I am also looking to style the Expansion Panel's description (while collapsed) in line with how the spec presents it. I don't think the spec ever actually states that the description portion of multiple panels in the same "group" (grouping of multiple panels is also never specifically mentioned in the spec...) must align in a column with each other, but each example image does exhibit this behavior.

The current implementation just allows each panel's title and description fields to resize according to their content, which means that the descriptions will never line up with each other. This can be seen in the docs examples and gets really pronounced with many panels of varying title width. I have used a variant of the fix described in #5173 (flex-basis: 0) but the fundamental problem is that you have to know ahead of time approximately how large your title content will be, because you still either accept the default title width (which is small) or need to define a min-width manually. I don't see a clean way to automatically select a common title width among all grouped panels, but would love to be proven wrong.