From 35dd0ed0b016cca54481942f4fea442b042d2ee8 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 20 Apr 2016 13:20:01 -0400
Subject: [PATCH] fix(button): add a category to buttons so they won't get the
 button styles

fixes #6237
---
 .../components/action-sheet/action-sheet.md.scss  |  4 ++++
 ionic/components/action-sheet/action-sheet.ts     |  4 ++--
 .../components/action-sheet/action-sheet.wp.scss  |  4 ++++
 ionic/components/alert/alert.ios.scss             |  2 +-
 ionic/components/alert/alert.md.scss              |  8 ++++++--
 ionic/components/alert/alert.ts                   |  6 +++---
 ionic/components/alert/alert.wp.scss              |  8 ++++++--
 ionic/components/button/button.ts                 | 15 +++++++++++++++
 ionic/components/checkbox/checkbox.ts             |  1 +
 ionic/components/radio/radio-button.ts            |  1 +
 ionic/components/select/select.ts                 |  1 +
 ionic/components/toggle/toggle.ts                 |  1 +
 12 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/ionic/components/action-sheet/action-sheet.md.scss b/ionic/components/action-sheet/action-sheet.md.scss
index fb00fc0dd5..908dcdfdce 100644
--- a/ionic/components/action-sheet/action-sheet.md.scss
+++ b/ionic/components/action-sheet/action-sheet.md.scss
@@ -70,6 +70,10 @@ $action-sheet-md-icon-margin:                           0 28px 0 0 !default;
   &:last-child .action-sheet-button {
     margin-bottom: $action-sheet-md-group-margin-bottom;
   }
+
+  .button-inner {
+    justify-content: flex-start;
+  }
 }
 
 .action-sheet-selected {
diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts
index 54b73c336d..a99dcca0b6 100644
--- a/ionic/components/action-sheet/action-sheet.ts
+++ b/ionic/components/action-sheet/action-sheet.ts
@@ -222,14 +222,14 @@ export class ActionSheet extends ViewController {
         '<div class="action-sheet-group">' +
           '<div class="action-sheet-title" id="{{hdrId}}" *ngIf="d.title">{{d.title}}</div>' +
           '<div class="action-sheet-sub-title" id="{{descId}}" *ngIf="d.subTitle">{{d.subTitle}}</div>' +
-          '<button (click)="click(b)" *ngFor="#b of d.buttons" class="action-sheet-button disable-hover" [ngClass]="b.cssClass">' +
+          '<button category="action-sheet-button" (click)="click(b)" *ngFor="#b of d.buttons" class="action-sheet-button disable-hover" [ngClass]="b.cssClass">' +
             '<ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon> ' +
             '{{b.text}}' +
             '<ion-button-effect></ion-button-effect>' +
           '</button>' +
         '</div>' +
         '<div class="action-sheet-group" *ngIf="d.cancelButton">' +
-          '<button (click)="click(d.cancelButton)" class="action-sheet-button action-sheet-cancel disable-hover" [ngClass]="d.cancelButton.cssClass">' +
+          '<button category="action-sheet-button" (click)="click(d.cancelButton)" class="action-sheet-button action-sheet-cancel disable-hover" [ngClass]="d.cancelButton.cssClass">' +
             '<ion-icon [name]="d.cancelButton.icon" *ngIf="d.cancelButton.icon" class="action-sheet-icon"></ion-icon> ' +
             '{{d.cancelButton.text}}' +
             '<ion-button-effect></ion-button-effect>' +
diff --git a/ionic/components/action-sheet/action-sheet.wp.scss b/ionic/components/action-sheet/action-sheet.wp.scss
index 05ce0c5060..226d809905 100644
--- a/ionic/components/action-sheet/action-sheet.wp.scss
+++ b/ionic/components/action-sheet/action-sheet.wp.scss
@@ -73,6 +73,10 @@ $action-sheet-wp-icon-margin:                     0 16px 0 0 !default;
   &:last-child .action-sheet-button {
     margin-bottom: $action-sheet-wp-group-margin-bottom;
   }
+
+  .button-inner {
+    justify-content: flex-start;
+  }  
 }
 
 .action-sheet-selected {
diff --git a/ionic/components/alert/alert.ios.scss b/ionic/components/alert/alert.ios.scss
index 3f546b614f..9a76a9ccf9 100644
--- a/ionic/components/alert/alert.ios.scss
+++ b/ionic/components/alert/alert.ios.scss
@@ -58,7 +58,7 @@ $alert-ios-radio-label-padding:                 13px !default;
 
 $alert-ios-radio-min-width:                     30px !default;
 
-$alert-ios-radio-icon-top:                      13px !default;
+$alert-ios-radio-icon-top:                      -7px !default;
 $alert-ios-radio-icon-left:                     7px !default;
 $alert-ios-radio-icon-width:                    6px !default;
 $alert-ios-radio-icon-height:                   12px !default;
diff --git a/ionic/components/alert/alert.md.scss b/ionic/components/alert/alert.md.scss
index 4a14f36e74..7c654afdb0 100644
--- a/ionic/components/alert/alert.md.scss
+++ b/ionic/components/alert/alert.md.scss
@@ -57,7 +57,7 @@ $alert-md-list-border-bottom:                 $alert-md-list-border-top !default
 
 $alert-md-radio-label-padding:                13px 26px !default;
 
-$alert-md-radio-top:                          13px !default;
+$alert-md-radio-top:                          0 !default;
 $alert-md-radio-left:                         13px !default;
 $alert-md-radio-width:                        16px !default;
 $alert-md-radio-height:                       16px !default;
@@ -78,7 +78,7 @@ $alert-md-radio-icon-transition:              transform 280ms cubic-bezier(.4, 0
 
 $alert-md-checkbox-label-padding:             13px 26px !default;
 
-$alert-md-checkbox-top:                       13px !default;
+$alert-md-checkbox-top:                       0 !default;
 $alert-md-checkbox-left:                      13px !default;
 $alert-md-checkbox-width:                     16px !default;
 $alert-md-checkbox-height:                    16px !default;
@@ -337,4 +337,8 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
   &.activated {
     background-color: $alert-md-button-background-color-activated;
   }
+
+  .button-inner {
+    justify-content: $alert-md-button-group-justify-content;
+  }
 }
diff --git a/ionic/components/alert/alert.ts b/ionic/components/alert/alert.ts
index e58d1060c5..6692e11d7c 100644
--- a/ionic/components/alert/alert.ts
+++ b/ionic/components/alert/alert.ts
@@ -323,7 +323,7 @@ export class Alert extends ViewController {
 
         '<template ngSwitchWhen="radio">' +
           '<div class="alert-radio-group" role="radiogroup" [attr.aria-labelledby]="hdrId" [attr.aria-activedescendant]="activeId">' +
-            '<button *ngFor="#i of d.inputs" (click)="rbClick(i)" [attr.aria-checked]="i.checked" [attr.id]="i.id" class="alert-tappable alert-radio" role="radio">' +
+            '<button category="alert-radio-button" *ngFor="#i of d.inputs" (click)="rbClick(i)" [attr.aria-checked]="i.checked" [attr.id]="i.id" class="alert-tappable alert-radio" role="radio">' +
               '<div class="alert-radio-icon"><div class="alert-radio-inner"></div></div>' +
               '<div class="alert-radio-label">' +
                 '{{i.label}}' +
@@ -334,7 +334,7 @@ export class Alert extends ViewController {
 
         '<template ngSwitchWhen="checkbox">' +
           '<div class="alert-checkbox-group">' +
-            '<button *ngFor="#i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" class="alert-tappable alert-checkbox" role="checkbox">' +
+            '<button category="alert-checkbox-button" *ngFor="#i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" class="alert-tappable alert-checkbox" role="checkbox">' +
               '<div class="alert-checkbox-icon"><div class="alert-checkbox-inner"></div></div>' +
               '<div class="alert-checkbox-label">' +
                 '{{i.label}}' +
@@ -353,7 +353,7 @@ export class Alert extends ViewController {
 
       '</div>' +
       '<div class="alert-button-group" [ngClass]="{vertical: d.buttons.length>2}">' +
-        '<button *ngFor="#b of d.buttons" (click)="btnClick(b)" [ngClass]="b.cssClass" class="alert-button">' +
+        '<button category="alert-button" *ngFor="#b of d.buttons" (click)="btnClick(b)" [ngClass]="b.cssClass" class="alert-button">' +
           '{{b.text}}' +
           '<ion-button-effect></ion-button-effect>' +
         '</button>' +
diff --git a/ionic/components/alert/alert.wp.scss b/ionic/components/alert/alert.wp.scss
index b4ddada502..2997ee15c6 100644
--- a/ionic/components/alert/alert.wp.scss
+++ b/ionic/components/alert/alert.wp.scss
@@ -59,7 +59,7 @@ $alert-wp-radio-border-color:                  $input-wp-border-color !default;
 
 $alert-wp-radio-label-padding:                 13px 26px !default;
 
-$alert-wp-radio-top:                           13px !default;
+$alert-wp-radio-top:                           0 !default;
 $alert-wp-radio-left:                          13px !default;
 $alert-wp-radio-width:                         16px !default;
 $alert-wp-radio-height:                        16px !default;
@@ -76,7 +76,7 @@ $alert-wp-radio-icon-border-radius:            $alert-wp-radio-border-radius !de
 
 $alert-wp-checkbox-label-padding:              13px 26px !default;
 
-$alert-wp-checkbox-top:                        13px !default;
+$alert-wp-checkbox-top:                        0 !default;
 $alert-wp-checkbox-left:                       13px !default;
 $alert-wp-checkbox-width:                      16px !default;
 $alert-wp-checkbox-height:                     16px !default;
@@ -354,4 +354,8 @@ ion-alert {
   &.activated {
     background: $alert-wp-button-background-activated;
   }
+
+  .button-inner {
+    justify-content: $alert-wp-button-group-justify-content;
+  }
 }
diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts
index 3e01cfbd6e..d922191008 100644
--- a/ionic/components/button/button.ts
+++ b/ionic/components/button/button.ts
@@ -58,6 +58,11 @@ export class Button {
    */
   isItem: boolean;
 
+  /**
+   * @input {string} The category of the button.
+   */
+  @Input() category: string;
+
   /**
    * @input {string} Large button.
    */
@@ -179,6 +184,16 @@ export class Button {
     this._readAttrs(element);
   }
 
+  /**
+   * @private
+   */
+  ngOnInit() {
+    // If the button has a role applied to it
+    if (this.category) {
+      this.setRole(this.category);
+    }
+  }
+
   /**
    * @private
    */
diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts
index bdb44b4f01..29f8cf2814 100644
--- a/ionic/components/checkbox/checkbox.ts
+++ b/ionic/components/checkbox/checkbox.ts
@@ -55,6 +55,7 @@ const CHECKBOX_VALUE_ACCESSOR = new Provider(
     '</div>' +
     '<button role="checkbox" ' +
             'type="button" ' +
+            'category="item-cover" ' +
             '[id]="id" ' +
             '[attr.aria-checked]="_checked" ' +
             '[attr.aria-labelledby]="_labelId" ' +
diff --git a/ionic/components/radio/radio-button.ts b/ionic/components/radio/radio-button.ts
index 9eb36c3bf6..409d47c5f7 100644
--- a/ionic/components/radio/radio-button.ts
+++ b/ionic/components/radio/radio-button.ts
@@ -37,6 +37,7 @@ import {RadioGroup} from './radio-group';
     '</div>' +
     '<button role="radio" ' +
             'type="button" ' +
+            'category="item-cover" ' +
             '[id]="id" ' +
             '[attr.aria-checked]="_checked" ' +
             '[attr.aria-labelledby]="_labelId" ' +
diff --git a/ionic/components/select/select.ts b/ionic/components/select/select.ts
index d52100ae51..bccbb80ab8 100644
--- a/ionic/components/select/select.ts
+++ b/ionic/components/select/select.ts
@@ -109,6 +109,7 @@ const SELECT_VALUE_ACCESSOR = new Provider(
     '</div>' +
     '<button aria-haspopup="true" ' +
             '[id]="id" ' +
+            'category="item-cover" ' +
             '[attr.aria-labelledby]="_labelId" ' +
             '[attr.aria-disabled]="_disabled" ' +
             'class="item-cover">' +
diff --git a/ionic/components/toggle/toggle.ts b/ionic/components/toggle/toggle.ts
index baed91868a..5e628bcd34 100644
--- a/ionic/components/toggle/toggle.ts
+++ b/ionic/components/toggle/toggle.ts
@@ -58,6 +58,7 @@ const TOGGLE_VALUE_ACCESSOR = new Provider(
     '</div>' +
     '<button role="checkbox" ' +
             'type="button" ' +
+            'category="item-cover" ' +
             '[id]="id" ' +
             '[attr.aria-checked]="_checked" ' +
             '[attr.aria-labelledby]="_labelId" ' +