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

- Fixed block/full buttons, now there are display: block - Fixes <ion-segment-button> warnings
ionic-team · Feb 10, 2016 · 38a3be4 · 38a3be4
1 parent b0a8045
commit 38a3be4
Show file tree

Hide file tree

Showing 11 changed files with 81 additions and 75 deletions.
diff --git a/ionic/components/button/button.ios.scss b/ionic/components/button/button.ios.scss
@@ -97,19 +97,17 @@ $button-ios-small-icon-font-size:     1.3em !default;
   margin-right: 0;
 }
 
-
 // iOS Full Button
 // --------------------------------------------------
 
 .button-full {
   margin-right: 0;
   margin-left: 0;
   border-radius: 0;
-  border-left: none;
-  border-right: none;
+  border-right-width: 0;
+  border-left-width: 0;
 }
 
-
 // iOS Outline Button
 // --------------------------------------------------
 

diff --git a/ionic/components/button/button.md.scss b/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 Full Button
+// Material Design Block Button
 // --------------------------------------------------
 
-.button-full {
-  border-radius: 0;
-  margin-right: 0;
+.button-block {
   margin-left: 0;
-  border-right-width: 0;
-  border-left-width: 0;
+  margin-right: 0;
 }
 
-
-// Material Design Block Button
+// Material Design Full Button
 // --------------------------------------------------
 
-.button-block {
+.button-full {
   margin-right: 0;
   margin-left: 0;
+  border-radius: 0;
+  border-right-width: 0;
+  border-left-width: 0;
 }
 
-
 // Material Design Outline Button
 // --------------------------------------------------
 

diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
@@ -29,17 +29,18 @@ $button-round-border-radius:      64px !default;
   @include appearance(none);
 }
 
-span.button-inner {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-shrink: 0;
-    flex-flow: row nowrap;
-    align-items: center;
-    justify-content: center;
+.button-inner {
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  flex-shrink: 0;
+  flex-flow: row nowrap;
+  align-items: center;
+  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%;
 }
 

diff --git a/ionic/components/nav/test/basic/index.ts b/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: PrimaryHeaderPage}
+      { page: FirstPage },
+      { 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() {

diff --git a/ionic/components/nav/test/insert-views/index.ts b/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,15 +30,15 @@ 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>
   `
 })
 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() { }
 }
 
 

diff --git a/ionic/components/navbar/navbar.ts b/ionic/components/navbar/navbar.ts
@@ -94,9 +94,11 @@ class ToolbarBackground {
   template:
     '<div class="toolbar-background"></div>' +
     '<button class="back-button bar-button bar-button-default" [hidden]="hideBackButton">' +
-      '<ion-icon class="back-button-icon" [name]="_bbIcon"></ion-icon>' +
-      '<span class="back-button-text">' +
-        '<span class="back-default">{{_bbText}}</span>' +
+      '<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>' +

diff --git a/ionic/components/toolbar/test/scenarios/main.html b/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>
-      Edit
+    <a button href="#">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>
-  <button #button1 (click)="buttonClick(button1)">
-    <ion-icon name="star"></ion-icon>
-  </button>
-</ion-buttons>
+  <ion-buttons end>
+    <button #button1 (click)="buttonClick(button1)">
+      <ion-icon name="star"></ion-icon>
+    </button>
+  </ion-buttons>
   <ion-title>Right side menu toggle</ion-title>
   <button menuToggle right>
     <ion-icon name="menu"></ion-icon>
@@ -167,24 +179,24 @@
     </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>
 </ion-toolbar>
 
 <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>
@@ -195,4 +207,4 @@
   .toolbar {
     border-bottom: 1px solid black;
   }
-</style>
+</style>
diff --git a/ionic/components/toolbar/toolbar-button.scss b/ionic/components/toolbar/toolbar-button.scss
@@ -5,11 +5,7 @@
 
 .bar-button {
   position: relative;
-  display: inline-flex;
-  flex-shrink: 0;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: center;
+  display: inline-block;
 
   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;
   }
 }
 

diff --git a/ionic/components/toolbar/toolbar.ios.scss b/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 {