Skip to content

Commit 35dd0ed

Browse files
brandyscarneybrandyscarney
committed
fix(button): add a category to buttons so they won't get the button styles
fixes #6237
1 parent 4a8975c commit 35dd0ed

File tree

12 files changed

+45
-10
lines changed

12 files changed

+45
-10
lines changed

‎ionic/components/action-sheet/action-sheet.md.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,10 @@ $action-sheet-md-icon-margin: 0 28px 0 0 !default;
7070
&:last-child .action-sheet-button {
7171
margin-bottom: $action-sheet-md-group-margin-bottom;
7272
}
73+
74+
.button-inner {
75+
justify-content: flex-start;
76+
}
7377
}
7478

7579
.action-sheet-selected {

‎ionic/components/action-sheet/action-sheet.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -222,14 +222,14 @@ export class ActionSheet extends ViewController {
222222
'<div class="action-sheet-group">' +
223223
'<div class="action-sheet-title" id="{{hdrId}}" *ngIf="d.title">{{d.title}}</div>' +
224224
'<div class="action-sheet-sub-title" id="{{descId}}" *ngIf="d.subTitle">{{d.subTitle}}</div>' +
225-
'<button (click)="click(b)" *ngFor="#b of d.buttons" class="action-sheet-button disable-hover" [ngClass]="b.cssClass">' +
225+
'<button category="action-sheet-button" (click)="click(b)" *ngFor="#b of d.buttons" class="action-sheet-button disable-hover" [ngClass]="b.cssClass">' +
226226
'<ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon> ' +
227227
'{{b.text}}' +
228228
'<ion-button-effect></ion-button-effect>' +
229229
'</button>' +
230230
'</div>' +
231231
'<div class="action-sheet-group" *ngIf="d.cancelButton">' +
232-
'<button (click)="click(d.cancelButton)" class="action-sheet-button action-sheet-cancel disable-hover" [ngClass]="d.cancelButton.cssClass">' +
232+
'<button category="action-sheet-button" (click)="click(d.cancelButton)" class="action-sheet-button action-sheet-cancel disable-hover" [ngClass]="d.cancelButton.cssClass">' +
233233
'<ion-icon [name]="d.cancelButton.icon" *ngIf="d.cancelButton.icon" class="action-sheet-icon"></ion-icon> ' +
234234
'{{d.cancelButton.text}}' +
235235
'<ion-button-effect></ion-button-effect>' +

‎ionic/components/action-sheet/action-sheet.wp.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,10 @@ $action-sheet-wp-icon-margin: 0 16px 0 0 !default;
7373
&:last-child .action-sheet-button {
7474
margin-bottom: $action-sheet-wp-group-margin-bottom;
7575
}
76+
77+
.button-inner {
78+
justify-content: flex-start;
79+
}
7680
}
7781

7882
.action-sheet-selected {

‎ionic/components/alert/alert.ios.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ $alert-ios-radio-label-padding: 13px !default;
5858

5959
$alert-ios-radio-min-width: 30px !default;
6060

61-
$alert-ios-radio-icon-top: 13px !default;
61+
$alert-ios-radio-icon-top: -7px !default;
6262
$alert-ios-radio-icon-left: 7px !default;
6363
$alert-ios-radio-icon-width: 6px !default;
6464
$alert-ios-radio-icon-height: 12px !default;

‎ionic/components/alert/alert.md.scss

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ $alert-md-list-border-bottom: $alert-md-list-border-top !default
5757

5858
$alert-md-radio-label-padding: 13px 26px !default;
5959

60-
$alert-md-radio-top: 13px !default;
60+
$alert-md-radio-top: 0 !default;
6161
$alert-md-radio-left: 13px !default;
6262
$alert-md-radio-width: 16px !default;
6363
$alert-md-radio-height: 16px !default;
@@ -78,7 +78,7 @@ $alert-md-radio-icon-transition: transform 280ms cubic-bezier(.4, 0
7878

7979
$alert-md-checkbox-label-padding: 13px 26px !default;
8080

81-
$alert-md-checkbox-top: 13px !default;
81+
$alert-md-checkbox-top: 0 !default;
8282
$alert-md-checkbox-left: 13px !default;
8383
$alert-md-checkbox-width: 16px !default;
8484
$alert-md-checkbox-height: 16px !default;
@@ -337,4 +337,8 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
337337
&.activated {
338338
background-color: $alert-md-button-background-color-activated;
339339
}
340+
341+
.button-inner {
342+
justify-content: $alert-md-button-group-justify-content;
343+
}
340344
}

‎ionic/components/alert/alert.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -323,7 +323,7 @@ export class Alert extends ViewController {
323323

324324
'<template ngSwitchWhen="radio">' +
325325
'<div class="alert-radio-group" role="radiogroup" [attr.aria-labelledby]="hdrId" [attr.aria-activedescendant]="activeId">' +
326-
'<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">' +
326+
'<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">' +
327327
'<div class="alert-radio-icon"><div class="alert-radio-inner"></div></div>' +
328328
'<div class="alert-radio-label">' +
329329
'{{i.label}}' +
@@ -334,7 +334,7 @@ export class Alert extends ViewController {
334334

335335
'<template ngSwitchWhen="checkbox">' +
336336
'<div class="alert-checkbox-group">' +
337-
'<button *ngFor="#i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" class="alert-tappable alert-checkbox" role="checkbox">' +
337+
'<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">' +
338338
'<div class="alert-checkbox-icon"><div class="alert-checkbox-inner"></div></div>' +
339339
'<div class="alert-checkbox-label">' +
340340
'{{i.label}}' +
@@ -353,7 +353,7 @@ export class Alert extends ViewController {
353353

354354
'</div>' +
355355
'<div class="alert-button-group" [ngClass]="{vertical: d.buttons.length>2}">' +
356-
'<button *ngFor="#b of d.buttons" (click)="btnClick(b)" [ngClass]="b.cssClass" class="alert-button">' +
356+
'<button category="alert-button" *ngFor="#b of d.buttons" (click)="btnClick(b)" [ngClass]="b.cssClass" class="alert-button">' +
357357
'{{b.text}}' +
358358
'<ion-button-effect></ion-button-effect>' +
359359
'</button>' +

‎ionic/components/alert/alert.wp.scss

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ $alert-wp-radio-border-color: $input-wp-border-color !default;
5959

6060
$alert-wp-radio-label-padding: 13px 26px !default;
6161

62-
$alert-wp-radio-top: 13px !default;
62+
$alert-wp-radio-top: 0 !default;
6363
$alert-wp-radio-left: 13px !default;
6464
$alert-wp-radio-width: 16px !default;
6565
$alert-wp-radio-height: 16px !default;
@@ -76,7 +76,7 @@ $alert-wp-radio-icon-border-radius: $alert-wp-radio-border-radius !de
7676

7777
$alert-wp-checkbox-label-padding: 13px 26px !default;
7878

79-
$alert-wp-checkbox-top: 13px !default;
79+
$alert-wp-checkbox-top: 0 !default;
8080
$alert-wp-checkbox-left: 13px !default;
8181
$alert-wp-checkbox-width: 16px !default;
8282
$alert-wp-checkbox-height: 16px !default;
@@ -354,4 +354,8 @@ ion-alert {
354354
&.activated {
355355
background: $alert-wp-button-background-activated;
356356
}
357+
358+
.button-inner {
359+
justify-content: $alert-wp-button-group-justify-content;
360+
}
357361
}

‎ionic/components/button/button.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,11 @@ export class Button {
5858
*/
5959
isItem: boolean;
6060

61+
/**
62+
* @input {string} The category of the button.
63+
*/
64+
@Input() category: string;
65+
6166
/**
6267
* @input {string} Large button.
6368
*/
@@ -179,6 +184,16 @@ export class Button {
179184
this._readAttrs(element);
180185
}
181186

187+
/**
188+
* @private
189+
*/
190+
ngOnInit() {
191+
// If the button has a role applied to it
192+
if (this.category) {
193+
this.setRole(this.category);
194+
}
195+
}
196+
182197
/**
183198
* @private
184199
*/

‎ionic/components/checkbox/checkbox.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ const CHECKBOX_VALUE_ACCESSOR = new Provider(
5555
'</div>' +
5656
'<button role="checkbox" ' +
5757
'type="button" ' +
58+
'category="item-cover" ' +
5859
'[id]="id" ' +
5960
'[attr.aria-checked]="_checked" ' +
6061
'[attr.aria-labelledby]="_labelId" ' +

‎ionic/components/radio/radio-button.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import {RadioGroup} from './radio-group';
3737
'</div>' +
3838
'<button role="radio" ' +
3939
'type="button" ' +
40+
'category="item-cover" ' +
4041
'[id]="id" ' +
4142
'[attr.aria-checked]="_checked" ' +
4243
'[attr.aria-labelledby]="_labelId" ' +

0 commit comments

Comments
 (0)