refactor(toolbar): added the ability to add a search bar or segment in toolbar

Removed ion-segments dependency on being in the ion-title as this
should be for text only. References #356

ionic/components/segment/segment.scss

@@ -7,6 +7,7 @@ $segment-button-padding:    0 16px !default;
 
 ion-segment {
   display: block;
+  width: 100%;
 }
 
 .ion-segment {

ionic/components/segment/test/basic/main.html

@@ -1,14 +1,12 @@
 <ion-toolbar>
-  <ion-title>
-    <ion-segment [(ng-model)]="relationship">
-      <ion-segment-button value="friends" class="e2eSegmentFriends">
-        Friends
-      </ion-segment-button>
-      <ion-segment-button value="enemies">
-        Enemies
-      </ion-segment-button>
-    </ion-segment>
-  </ion-title>
+  <ion-segment [(ng-model)]="relationship">
+    <ion-segment-button value="friends" class="e2eSegmentFriends">
+      Friends
+    </ion-segment-button>
+    <ion-segment-button value="enemies">
+      Enemies
+    </ion-segment-button>
+  </ion-segment>
 </ion-toolbar>
 
 <ion-toolbar>
@@ -17,16 +15,14 @@
       <icon search></icon>
     </button>
   </ion-nav-items>
-  <ion-title>
-    <ion-segment secondary>
-      <ion-segment-button>
-        Something
-      </ion-segment-button>
-      <ion-segment-button>
-        Else
-      </ion-segment-button>
-    </ion-segment>
-  </ion-title>
+  <ion-segment secondary>
+    <ion-segment-button>
+      Something
+    </ion-segment-button>
+    <ion-segment-button>
+      Else
+    </ion-segment-button>
+  </ion-segment>
 </ion-toolbar>
 
 <ion-content padding>
@@ -87,17 +83,15 @@
 </ion-content>
 
 <ion-toolbar position="bottom">
-  <ion-title>
-    <ion-segment [(ng-model)]="appType" primary>
-      <ion-segment-button value="paid">
-        Paid
-      </ion-segment-button>
-      <ion-segment-button value="free">
-        Free
-      </ion-segment-button>
-      <ion-segment-button value="top" class="e2eSegmentTopGrossing">
-        Top Grossing
-      </ion-segment-button>
-    </ion-segment>
-  </ion-title>
+  <ion-segment [(ng-model)]="appType" primary>
+    <ion-segment-button value="paid">
+      Paid
+    </ion-segment-button>
+    <ion-segment-button value="free">
+      Free
+    </ion-segment-button>
+    <ion-segment-button value="top" class="e2eSegmentTopGrossing">
+      Top Grossing
+    </ion-segment-button>
+  </ion-segment>
 </ion-toolbar>

ionic/components/toolbar/toolbar.ts

@@ -60,7 +60,7 @@ export class ToolbarBase extends Ion  {
   template:
     '<div class="toolbar-inner">' +
       '<ng-content select="[menu-toggle]"></ng-content>' +
-      '<ng-content select="ion-title"></ng-content>' +
+      '<ng-content select="ion-title,ion-search-bar,ion-segment"></ng-content>' +
       '<ng-content select="ion-nav-items[primary]"></ng-content>' +
       '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
     '</div>' +