fix(toolbar): Title text should allow ellipsis.

[topherfangio]

Currently, the title text of a toolbar wraps around on small screens causing the toolbar to become larger than expected.

• Provide a new md-truncate component that applies the appropriate styles
  for using CSS-based text-overflow with an ellipsis.

  This component is designed to work nicely with the Toolbar component,
  but is also reusable and can be used in any other component.

• Add docs/demos for the new component.

• Update Toolbar demos to use new md-truncate component and show proper
  usage.

Additionally, add the appropriate CSS docs in a new CSS & Styles section which includes a new doc-only directive (docs-css-api-table) that creates a clean way to view documentation regarding available CSS classes.

Fixes #9026.

---

Edit: Add screenshot of new docs section.

[topherfangio]

@ThomasBurleson @EladBezalel @crisbeto @devversion Can you guys review and see if you like the color/styling of the new "CSS & Styles" section of the Toolbar docs?

Also, standard review of my proposed solution to the actual problem 😄

[ThomasBurleson]

@topherfangio - this looks very cool. Like your use of the Component API in the docs-css-api-table implementation.

[ThomasBurleson]

@topherfangio - lgtm

[devversion]

Nit: Why are there controllers if they aren't used? Same for the selector directive.

[ThomasBurleson]

can you simply use :

controller : function() {  },

[devversion]

LGTM aside from that minor comment 👍

[topherfangio]

@ThomasBurleson @devversion Waiting for Travis to succeed, but I pushed the requested updates, and fixed a typo 😃

[EladBezalel]

Why not use &:first-child and make it more generic?

[topherfangio]

Since the only formatting this applies is the overflow, I wanted something that shouldn't apply any additional formatting.

I guess I'm afraid that if we switch it to :first-child, people might try to use a <div> or something else strange and it will mess up.

I'm not opposed to switching it, and I honestly can't put a finger on why I feel this way, but using the <span> just feels like a better solution to me 😕

Thoughts?

[ThomasBurleson]

@topherfangio - can you fix the failing tests ?

[topherfangio]

@ThomasBurleson Um...I "fixed" the tests...actually, I didn't do anything. Someone must have rerun the failed build and it passed?

I ran the tests on my Windows box twice. The first time a $mdBottomsheet test failed; the second time, they all passed. So I think these are erroneous failures.

[topherfangio]

Talked with Elad, we think making this an actual directive of <md-toolbar-title> makes more sense instead of forcing people to include a class and then add a <span> tag inside.

@ThomasBurleson Unless you disagree, I'll get this done tomorrow.

[topherfangio]

@ThomasBurleson @EladBezalel Made a more generic <md-title> component which handles this case for any component (not just Toolbar).

Do you like the name md-title, or should we perhaps name it md-ellipsis to be more clear?

[EladBezalel]

I said that maybe having an ellipsis directive would be nice but in case we don't want to create more complexibility than I'd go with <md-toolbar-title>

[ThomasBurleson]

md-truncate

[topherfangio]

Updated to md-truncate. Ping @ThomasBurleson for one more review.

[ThomasBurleson]

@topherfangio - lgtm