fix(button): bar-button uses inner span as flexbox

- Fixed block/full buttons, now there are display: block
- Fixes <ion-segment-button> warnings

ionic/components/button/button.ios.scss

@@ -97,7 +97,6 @@ $button-ios-small-icon-font-size:     1.3em !default;
   margin-right: 0;
 }
 
-
 // iOS Full Button
 // --------------------------------------------------
 
@@ -105,11 +104,10 @@ $button-ios-small-icon-font-size:     1.3em !default;
   margin-right: 0;
   margin-left: 0;
   border-radius: 0;
-  border-left: none;
+  border-right-width: 0;
-  border-right: none;
+  border-left-width: 0;
 }
 
-
 // iOS Outline Button
 // --------------------------------------------------
 

ionic/components/button/button.md.scss

@@ -110,28 +110,25 @@ $button-md-small-icon-font-size:           1.4em !default;
   font-size: $button-md-small-icon-font-size;
 }
 
+// Material Design Block Button
+// --------------------------------------------------
+
+.button-block {
+  margin-left: 0;
+  margin-right: 0;
+}
 
 // Material Design Full Button
 // --------------------------------------------------
 
 .button-full {
-  border-radius: 0;
   margin-right: 0;
   margin-left: 0;
+  border-radius: 0;
   border-right-width: 0;
   border-left-width: 0;
 }
 
-
-// Material Design Block Button
-// --------------------------------------------------
-
-.button-block {
-  margin-right: 0;
-  margin-left: 0;
-}
-
-
 // Material Design Outline Button
 // --------------------------------------------------
 

ionic/components/button/button.scss

@@ -29,9 +29,10 @@ $button-round-border-radius:      64px !default;
   @include appearance(none);
 }
 
-span.button-inner {
+.button-inner {
   width: 100%;
   height: 100%;
+
   display: flex;
   flex-shrink: 0;
   flex-flow: row nowrap;
@@ -39,7 +40,7 @@ span.button-inner {
   justify-content: center;
 }
 
-a.button {
+a.button, a[button] {
   text-decoration: none;
 }
 
@@ -54,7 +55,7 @@ a.button {
 // --------------------------------------------------
 
 .button-block {
-  display: flex;
+  display: block;
   clear: both;
   width: 100%;
 
@@ -68,6 +69,7 @@ a.button {
 // --------------------------------------------------
 
 .button-full {
+  display: block;
   width: 100%;
 }
 

ionic/components/nav/test/basic/index.ts

@@ -20,7 +20,7 @@ class MyCmpTest{}
         <button><ion-icon name="star"></ion-icon></button>
       </ion-buttons>
       <ion-buttons end>
-        <button>S1</button>
+        <button>S1g</button>
       </ion-buttons>
     </ion-navbar>
     <ion-content>
@@ -74,7 +74,7 @@ class FirstPage {
 
   setPages() {
     let items = [
-      {page: PrimaryHeaderPage}
+      { page: PrimaryHeaderPage }
     ];
 
     this.nav.setPages(items);
@@ -89,7 +89,7 @@ class FirstPage {
   }
 
   pushFullPage() {
-    this.nav.push(FullPage, { id: 8675309, myData: [1,2,3,4] } );
+    this.nav.push(FullPage, { id: 8675309, myData: [1, 2, 3, 4] });
   }
 
   pushAnother() {
@@ -139,8 +139,8 @@ class FullPage {
 
   setPages() {
     let items = [
-      {page: FirstPage},
+      { page: FirstPage },
-      {page: PrimaryHeaderPage}
+      { page: PrimaryHeaderPage }
     ];
 
     this.nav.setPages(items);
@@ -190,6 +190,9 @@ class FullPage {
   template: `
     <ion-navbar *navbar primary>
       <ion-title>Primary Color Page Header</ion-title>
+      <ion-buttons end>
+        <button>S1g</button>
+      </ion-buttons>
     </ion-navbar>
     <ion-content padding>
       <p><button class="e2eFrom3To2" (click)="nav.pop()">Pop</button></p>
@@ -218,7 +221,7 @@ class PrimaryHeaderPage {
   }
 
   pushFullPage() {
-    this.nav.push(FullPage, { id: 8675309, myData: [1,2,3,4] } );
+    this.nav.push(FullPage, { id: 8675309, myData: [1, 2, 3, 4] });
   }
 
   insert() {

ionic/components/nav/test/insert-views/index.ts

@@ -9,14 +9,14 @@ import {App, Page, NavController} from 'ionic/ionic';
     </ion-navbar>
 
     <ion-content padding>
-    <button block (click)="pushPage()">Push Page</block>
+    <button block (click)="pushPage()">Push Page</button>
     </ion-content>`,
 })
 class FirstPage {
   constructor(nav: NavController) {
     this.nav = nav;
   }
-  pushPage(){
+  pushPage() {
     this.nav.push(SecondPage)
   }
 }
@@ -30,7 +30,7 @@ class FirstPage {
 
     <ion-content padding>
       <h1>Second page</h1>
-    <button block (click)="insertPage()">Insert Page</block>
+    <button block (click)="insertPage()">Insert Page</button>
     </ion-content>
   `
 })
@@ -38,7 +38,7 @@ class SecondPage {
   constructor(nav: NavController) {
     this.nav = nav;
   }
-  insertPage(){
+  insertPage() {
     this.nav.insert(1, InsertPage)
   }
 }
@@ -55,7 +55,7 @@ class SecondPage {
   `
 })
 class InsertPage {
-  constructor() {}
+  constructor() { }
 }
 
 

ionic/components/navbar/navbar.ts

@@ -94,10 +94,12 @@ class ToolbarBackground {
   template:
     '<div class="toolbar-background"></div>' +
     '<button class="back-button bar-button bar-button-default" [hidden]="hideBackButton">' +
+      '<span class="button-inner">' +
         '<ion-icon class="back-button-icon" [name]="_bbIcon"></ion-icon>' +
         '<span class="back-button-text">' +
           '<span class="back-default">{{_bbText}}</span>' +
         '</span>' +
+      '</span>' +
     '</button>' +
     '<ng-content select="[menuToggle],ion-buttons[left]"></ng-content>' +
     '<ng-content select="ion-buttons[start]"></ng-content>' +

ionic/components/toolbar/test/scenarios/main.html

@@ -1,4 +1,3 @@
-
 <ion-toolbar>
   <ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
 </ion-toolbar>
@@ -62,9 +61,9 @@
 
 <ion-toolbar>
   <ion-buttons start>
-    <button solid class="activated">
+    <a button solid class="activated">
       <ion-icon name="contact"></ion-icon>
-    </button>
+    </a>
     <button solid class="activated">
       <ion-icon name="contact"></ion-icon>
       Solid
@@ -126,14 +125,27 @@
     </button>
   </ion-buttons>
   <ion-buttons end>
-    <button>
+    <a button href="#">Edit
-      Edit
       <ion-icon name="create"></ion-icon>
-    </button>
+    </a>
   </ion-buttons>
   <ion-title>Icon/Color Attr</ion-title>
 </ion-toolbar>
 
+<ion-toolbar>
+  <ion-buttons start>
+    <button>
+      Go Back
+    </button>
+  </ion-buttons>
+  <ion-buttons end>
+    <a button href="#">
+      Edit
+    </a>
+  </ion-buttons>
+  <ion-title>Text Only</ion-title>
+</ion-toolbar>
+
 
 <ion-toolbar>
   <button menuToggle>
@@ -149,11 +161,11 @@
 
 
 <ion-toolbar>
-<ion-buttons end>
+  <ion-buttons end>
     <button #button1 (click)="buttonClick(button1)">
       <ion-icon name="star"></ion-icon>
     </button>
-</ion-buttons>
+  </ion-buttons>
   <ion-title>Right side menu toggle</ion-title>
   <button menuToggle right>
     <ion-icon name="menu"></ion-icon>
@@ -167,10 +179,10 @@
     </button>
   </ion-buttons>
   <ion-segment secondary>
-    <ion-segment-button>
+    <ion-segment-button value="something">
       Something
     </ion-segment-button>
-    <ion-segment-button>
+    <ion-segment-button value="else">
       Else
     </ion-segment-button>
   </ion-segment>
@@ -178,13 +190,13 @@
 
 <ion-toolbar>
   <ion-segment>
-    <ion-segment-button>
+    <ion-segment-button value="light">
       Light
     </ion-segment-button>
-    <ion-segment-button>
+    <ion-segment-button value="toolbar">
       Toolbar
     </ion-segment-button>
-    <ion-segment-button>
+    <ion-segment-button value="default">
       Default Segment
     </ion-segment-button>
   </ion-segment>

ionic/components/toolbar/toolbar-button.scss

@@ -5,11 +5,7 @@
 
 .bar-button {
   position: relative;
-  display: inline-flex;
+  display: inline-block;
-  flex-shrink: 0;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: center;
 
   margin: 0;
   padding: 0;
@@ -19,6 +15,7 @@
 
   text-align: center;
   text-transform: none;
+  line-height: 1;
 
   vertical-align: top; // the better option for most scenarios
   vertical-align: -webkit-baseline-middle; // the best for those that support it
@@ -54,7 +51,7 @@
 .back-button {
   display: none;
   &.show-back-button {
-    display: flex;
+    display: inline-block;
   }
 }
 

ionic/components/toolbar/toolbar.ios.scss

@@ -62,7 +62,6 @@ ion-navbar-section {
 .toolbar-title {
   font-size: $toolbar-ios-title-font-size;
   font-weight: 600;
-  margin-top: 1px;
   text-align: center;
   pointer-events: auto;
   color: $toolbar-ios-text-color;
@@ -123,10 +122,8 @@ ion-buttons[right] {
 // --------------------------------------------------
 
 .bar-button {
-  margin-top: 0;
-  margin-bottom: 0;
   padding: 0 5px;
-  min-height: 32px;
+  height: 32px;
   border: 0;
   font-size: $toolbar-ios-button-font-size;
   border-radius: $bar-button-ios-border-radius;
@@ -225,7 +222,6 @@ ion-buttons[right] {
 // --------------------------------------------------
 
 .bar-button-icon-left ion-icon {
-  margin-left: -0.1em;
   padding-right: 0.3em;
   font-size: 1.4em;
   line-height: 0.67;
@@ -257,7 +253,6 @@ ion-buttons[right] {
 
 .back-button {
   margin: 0;
-  margin-top: 2px;
   min-height: 3.2rem;
   line-height: 1;
   order: map-get($toolbar-order-ios, back-button);
@@ -268,8 +263,9 @@ ion-buttons[right] {
 .back-button-icon {
   display: inherit;
   margin: 0;
+  margin-top: -1px;
   min-width: 18px;
-  font-size: 3.3rem;
+  font-size: 3.4rem;
 }
 
 .back-button-text {

ionic/components/toolbar/toolbar.md.scss

@@ -125,7 +125,7 @@ ion-buttons[right] {
   margin-left: 0.2rem;
   margin-right: 0.2rem;
   padding: 0 5px;
-  min-height: 32px;
+  height: 32px;
   border: 0;
   font-size: $toolbar-md-button-font-size;
   border-radius: $bar-button-md-border-radius;
@@ -226,7 +226,6 @@ ion-buttons[right] {
 // --------------------------------------------------
 
 .bar-button-icon-left ion-icon {
-  margin-left: -0.1em;
   padding-right: 0.3em;
   font-size: 1.4em;
   line-height: 0.67;

ionic/components/toolbar/toolbar.ts

@@ -155,7 +155,7 @@ export class ToolbarTitle extends Ion {
     toolbar && toolbar.setTitleCmp(this);
     navbar && navbar.setTitleCmp(this);
   }
-/**
+  /**
    * @private
    */
   getTitleText() {