Merge pull request #5310 from manucorporat/new-buttons-css

refactor(button): refactor button css to avoid using flex

Author: adamdbradley

ionic/components/action-sheet/action-sheet.ios.scss

@@ -81,7 +81,7 @@ ion-action-sheet {
 }
 
 .action-sheet-cancel {
-  font-weight: bold;
+  font-weight: 600;
   background: $action-sheet-ios-cancel-button-background-color;
 }
 

ionic/components/alert/alert.ios.scss

@@ -222,7 +222,7 @@ ion-alert {
   flex: 1 1 auto;
   min-width: 50%;
   font-size: $alert-ios-button-font-size;
-  min-height: $alert-ios-button-min-height;
+  height: $alert-ios-button-min-height;
   border-radius: $alert-ios-button-border-radius;
   border-top: 1px solid $alert-ios-button-border-color;
   border-right: 1px solid $alert-ios-button-border-color;

ionic/components/button/button.ios.scss

@@ -30,7 +30,7 @@ $button-ios-small-icon-font-size:     1.3em !default;
   margin: $button-ios-margin;
   padding: $button-ios-padding;
 
-  min-height: $button-ios-height;
+  height: $button-ios-height;
   font-size: $button-ios-font-size;
 
   border-radius: $button-ios-border-radius;
@@ -75,13 +75,13 @@ $button-ios-small-icon-font-size:     1.3em !default;
 
 .button-large {
   padding: 0 $button-ios-large-padding;
-  min-height: $button-ios-large-height;
+  height: $button-ios-large-height;
   font-size: $button-ios-large-font-size;
 }
 
 .button-small {
   padding: 0 $button-ios-small-padding;
-  min-height: $button-ios-small-height;
+  height: $button-ios-small-height;
   font-size: $button-ios-small-font-size;
 }
 
@@ -93,9 +93,6 @@ $button-ios-small-icon-font-size:     1.3em !default;
 // --------------------------------------------------
 
 .button-block {
-  // This fixes an issue with flexbox and button on iOS Safari. See #225
-  display: block;
-  line-height: $button-ios-height;
   margin-left: 0;
   margin-right: 0;
 }

ionic/components/button/button.md.scss

@@ -43,7 +43,7 @@ $button-md-small-icon-font-size:           1.4em !default;
 .button {
   margin: $button-md-margin;
   padding: $button-md-padding;
-  min-height: $button-md-height;
+  height: $button-md-height;
   border-radius: $button-md-border-radius;
 
   font-weight: 500;
@@ -96,13 +96,13 @@ $button-md-small-icon-font-size:           1.4em !default;
 
 .button-large {
   padding: 0 $button-md-large-padding;
-  min-height: $button-md-large-height;
+  height: $button-md-large-height;
   font-size: $button-md-large-font-size;
 }
 
 .button-small {
   padding: 0 $button-md-small-padding;
-  min-height: $button-md-small-height;
+  height: $button-md-small-height;
   font-size: $button-md-small-font-size;
 }
 

ionic/components/button/button.scss

@@ -9,11 +9,7 @@ $button-round-border-radius:      64px !default;
 
 .button {
   position: relative;
-  display: inline-flex;
-  flex-shrink: 0;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: center;
+  display: inline-block;
   transition: background-color, opacity 100ms linear;
   z-index: 0;
 
@@ -23,6 +19,7 @@ $button-round-border-radius:      64px !default;
 
   text-align: center;
   text-transform: none;
+  font-kerning: none;
 
   vertical-align: top; // the better option for most scenarios
   vertical-align: -webkit-baseline-middle; // the best for those that support it
@@ -32,6 +29,16 @@ $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;
+}
+
 a.button {
   text-decoration: none;
 }

ionic/components/button/button.ts

@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Renderer, Attribute, Optional, Input} from 'angular2/core';
+import {Component, ElementRef, Renderer, Attribute, Optional, Input} from 'angular2/core';
 
 import {Config} from '../../config/config';
 import {Toolbar} from '../toolbar/toolbar';
@@ -28,8 +28,9 @@ import {Toolbar} from '../toolbar/toolbar';
   * @see {@link /docs/v2/components#buttons Button Component Docs}
 
  */
-@Directive({
-  selector: 'button,[button]'
+@Component({
+  selector: 'button:not([ion-item]),[button]',
+  template: '<span class="button-inner"><ng-content></ng-content></span>'
 })
 export class Button {
   private _role: string = 'button'; // bar-button/item-button
@@ -78,7 +79,6 @@ export class Button {
     }
 
     this._readAttrs(element);
-    this._readIcon(element);
   }
 
   /**
@@ -89,6 +89,7 @@ export class Button {
     if (this.color) {
       this._colors = [this.color];
     }
+    this._readIcon(this._elementRef.nativeElement);
     this._assignCss(true);
   }
 
@@ -124,6 +125,9 @@ export class Button {
   private _readIcon(element: HTMLElement) {
     // figure out if and where the icon lives in the button
     let childNodes = element.childNodes;
+    if (childNodes.length == 1) {
+      childNodes = childNodes[0].childNodes;
+    }
     let childNode;
     let nodes = [];
     for (let i = 0, l = childNodes.length; i < l; i++) {
@@ -218,9 +222,9 @@ export class Button {
     }
   }
 
-/**
- * @private
- */
+  /**
+   * @private
+   */
   static setRoles(contentButtonChildren, role: string) {
     let buttons = contentButtonChildren.toArray();
     buttons.forEach(button => {

ionic/components/button/test/full/main.html

@@ -1,28 +1,37 @@
-
 <ion-toolbar>
   <ion-title>Full Buttons</ion-title>
 </ion-toolbar>
 
 <ion-content>
 
-  <div>
+  <p>
     <a button full href="#">a[button][full]</a>
     <button full>button[full]</button>
-  </div>
+  </p>
+
+  <p>
+    <a button full href="#">
+      <ion-icon name="help-circle"></ion-icon>
+      a[button][full] + icon
+    </a>
+    <button full>
+      <ion-icon name="help-circle"></ion-icon>
+      button[full] + icon
+    </button>
+  </p>
 
-  <div>
+  <p>
     <a button full outline secondary href="#">a[button][full][outline][secondary]</a>
     <button full outline secondary>button[full][outline][secondary]</button>
-  </div>
+  </p>
 
-  <div>
+  <p>
     <a button full clear light href="#">a[button][full][clear][light]</a>
     <button full clear light>button[full][clear][light]</button>
-  </div>
+  </p>
 
-  <div>
+  <p>
     <a button full clear dark href="#">a[button][full][clear][dark]</a>
     <button full clear dark>button[full][clear][dark]</button>
-  </div>
-
-</ion-content>
+  </p>
+</ion-content>

ionic/components/item/item.ios.scss

@@ -121,7 +121,7 @@ ion-thumbnail[item-right] {
 .item-button {
   padding: 0 0.5em;
   font-size: 1.3rem;
-  min-height: 24px;
+  height: 24px;
 }
 
 .item-button.button-icon-only ion-icon,

ionic/components/item/item.md.scss

@@ -94,7 +94,7 @@ ion-icon[item-right] {
 
 .item-button {
   padding: 0 0.6em;
-  min-height: 25px;
+  height: 25px;
   font-size: 1.2rem;
 }
 

ionic/components/searchbar/searchbar.ios.scss

@@ -102,7 +102,7 @@ ion-searchbar {
 
 .searchbar-ios-cancel {
   transition: $searchbar-ios-cancel-transition;
-  min-height: 30px;
+  height: 30px;
 
   margin-left: 0;
   margin-right: 0;