fix(toolbar): Make Toolbar accommodated very long section

Close #508

packages/mdc-toolbar/README.md

@@ -96,7 +96,20 @@ of the toolbar (respectively).
 ```
 
 Toolbar sections are laid out using flexbox. Each section will take up an equal
-amount of space within the toolbar.
+amount of space within the toolbar by default. But you can accommodate very long section (very long title) by adding `mdc-toolbar__section--shrink-to-fit` to other sections.
+
+```
+<div class="mdc-toolbar>
+  <div class="mdc-toolbar__row">
+      <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
+        <span class="mdc-toolbar__title">This is a super super super super long title</span>
+      </section>
+      <section class="mdc-toolbar__section mdc-toolbar__section--align-end mdc-toolbar__section--shrink-to-fit">
+        <a class="material-icons search align-icons" aria-label="Search" alt="Search">search</a>
+      </section>
+  </div>
+</div>
+```
 
 ### Toolbar title
 
@@ -139,3 +152,4 @@ The provided modifiers are:
 | `mdc-toolbar--fixed`                 | Make toolbar fixed to top of screen.    |
 | `mdc-toolbar__section--align-start`  | Makes section aligns to the start.      |
 | `mdc-toolbar__section--align-end`    | Makes section aligns to the end.        |
+| `mdc-toolbar__section--shrink-to-fit`| Makes section takes the width of its content.|

packages/mdc-toolbar/mdc-toolbar.scss

@@ -59,6 +59,7 @@ $mdc-toolbar-mobile-breakpoint: 599px;
     align-items: flex-start;
     justify-content: center;
     z-index: 1;
+    overflow: hidden;
 
     &--align-start {
       justify-content: flex-start;
@@ -74,6 +75,9 @@ $mdc-toolbar-mobile-breakpoint: 599px;
   &__title {
     @include mdc-typography(title);
 
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     margin: 0;
     line-height: 1.5rem;
   }
@@ -97,3 +101,7 @@ $mdc-toolbar-mobile-breakpoint: 599px;
     margin-top: $mdc-toolbar-mobile-row-height;
   }
 }
+
+.mdc-toolbar__section--shrink-to-fit {
+  flex: none;
+}