Skip to content

Commit 55a0257

Browse files
brandyscarneybrandyscarney
committed
refactor(colors): color should be added as an input instead of directly adding the color to the component
BREAKING CHANGES: Colors should be passed in the `color` input on components, not added individually as an attribute on the component. For example: ``` <ion-tabs primary> ``` Becomes ``` <ion-tabs color=”primary”> ``` Or to bind an expression to color: ``` <ion-navbar [color]="barColor"> ... </ion-navbar> ``` ```ts @component({ templateUrl: 'build/pages/about/about.html' }) export class AboutPage { barColor: string; constructor(private nav: NavController, platform: Platform) { this.barColor = platform.is('android') ? 'primary' : 'light'; } } ``` Reason for this change: It was difficult to dynamically add colors to components, especially if the name of the color attribute was unknown in the template. This change keeps the css flat since we aren’t chaining color attributes on components and instead we assign a class to the component which includes the color’s name. This allows you to easily toggle a component between multiple colors. Speeds up performance because we are no longer reading through all of the attributes to grab the color ones. references #7467 closes #7087 closes #7401 closes #7523
1 parent 7b60e9c commit 55a0257

File tree

170 files changed

+1559
-701
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

170 files changed

+1559
-701
lines changed

‎demos/alert/main.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010
<ion-content padding>
1111

1212
<button ion-button block (click)="doAlert()">Basic Alert</button>
13-
<button ion-button light block (click)="doConfirm()">Confirm Alert</button>
14-
<button ion-button secondary block (click)="doPrompt()">Prompt Alert</button>
15-
<button ion-button danger block (click)="doRadio()">Radio Alert</button>
16-
<button ion-button dark block (click)="doCheckbox()">Checkbox Alert</button>
13+
<button ion-button color="light" block (click)="doConfirm()">Confirm Alert</button>
14+
<button ion-button color="secondary" block (click)="doPrompt()">Prompt Alert</button>
15+
<button ion-button color="danger" block (click)="doRadio()">Radio Alert</button>
16+
<button ion-button color="dark" block (click)="doCheckbox()">Checkbox Alert</button>
1717

1818
</ion-content>

‎demos/button/main.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ <h4>Colors</h4>
1313

1414
<button ion-button>Default</button>
1515

16-
<button ion-button secondary>Secondary</button>
16+
<button ion-button color="secondary">Secondary</button>
1717

18-
<button ion-button danger>Danger</button>
18+
<button ion-button color="danger">Danger</button>
1919

20-
<button ion-button light>Light</button>
20+
<button ion-button color="light">Light</button>
2121

22-
<button ion-button dark>Dark</button>
22+
<button ion-button color="dark">Dark</button>
2323

2424
<h4>Shapes</h4>
2525

@@ -33,36 +33,36 @@ <h4>Shapes</h4>
3333

3434
<h4>Outlines</h4>
3535

36-
<button ion-button secondary full outline>Outline + Full</button>
36+
<button ion-button color="secondary" full outline>Outline + Full</button>
3737

38-
<button ion-button secondary block outline>Outline + Block</button>
38+
<button ion-button color="secondary" block outline>Outline + Block</button>
3939

40-
<button ion-button secondary round outline>Outline + Round</button>
40+
<button ion-button color="secondary" round outline>Outline + Round</button>
4141

42-
<button ion-button secondary fab outline style="position: relative;">FAB</button>
42+
<button ion-button color="secondary" fab outline style="position: relative;">FAB</button>
4343

4444
<h4>Icons</h4>
4545

46-
<button ion-button icon-left dark>
46+
<button ion-button icon-left color="dark">
4747
<ion-icon name="star"></ion-icon>
4848
Left Icon
4949
</button>
5050

51-
<button ion-button icon-right dark>
51+
<button ion-button icon-right color="dark">
5252
Right Icon
5353
<ion-icon name="star"></ion-icon>
5454
</button>
5555

56-
<button ion-button icon-only dark>
56+
<button ion-button icon-only color="dark">
5757
<ion-icon name="star"></ion-icon>
5858
</button>
5959

6060
<h4>Sizes</h4>
6161

62-
<button ion-button light large>Large</button>
62+
<button ion-button color="light" large>Large</button>
6363

64-
<button ion-button light>Default</button>
64+
<button ion-button color="light">Default</button>
6565

66-
<button ion-button light small>Small</button>
66+
<button ion-button color="light" small>Small</button>
6767

6868
</ion-content>

‎demos/checkbox/main.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
</ion-item>
1818

1919
<ion-item>
20-
<ion-checkbox dark [(ngModel)]="data.daenerys"></ion-checkbox>
20+
<ion-checkbox [(ngModel)]="data.daenerys" color="vibrant"></ion-checkbox>
2121
<ion-label>Daenerys Targaryen</ion-label>
2222
</ion-item>
2323

@@ -27,12 +27,12 @@
2727
</ion-item>
2828

2929
<ion-item>
30-
<ion-checkbox [(ngModel)]="data.tyroin" secondary></ion-checkbox>
30+
<ion-checkbox [(ngModel)]="data.tyroin" color="secondary"></ion-checkbox>
3131
<ion-label>Tyrion Lannister</ion-label>
3232
</ion-item>
3333

3434
<ion-item>
35-
<ion-checkbox [(ngModel)]="data.sansa" danger></ion-checkbox>
35+
<ion-checkbox [(ngModel)]="data.sansa" color="danger"></ion-checkbox>
3636
<ion-label>Sansa Stark</ion-label>
3737
</ion-item>
3838

@@ -42,7 +42,7 @@
4242
</ion-item>
4343

4444
<ion-item>
45-
<ion-checkbox [(ngModel)]="data.cersei" dark></ion-checkbox>
45+
<ion-checkbox [(ngModel)]="data.cersei" color="dark"></ion-checkbox>
4646
<ion-label>Cersei Lannister</ion-label>
4747
</ion-item>
4848

@@ -57,17 +57,17 @@
5757
</ion-item>
5858

5959
<ion-item>
60-
<ion-checkbox [(ngModel)]="data.hodor" dark></ion-checkbox>
60+
<ion-checkbox [(ngModel)]="data.hodor" color="dark"></ion-checkbox>
6161
<ion-label>Hodor</ion-label>
6262
</ion-item>
6363

6464
<ion-item>
65-
<ion-checkbox [(ngModel)]="data.catelyn" secondary></ion-checkbox>
65+
<ion-checkbox [(ngModel)]="data.catelyn" color="secondary"></ion-checkbox>
6666
<ion-label>Catelyn Stark</ion-label>
6767
</ion-item>
6868

6969
<ion-item>
70-
<ion-checkbox [(ngModel)]="data.bronn" royal></ion-checkbox>
70+
<ion-checkbox [(ngModel)]="data.bronn" color="vibrant"></ion-checkbox>
7171
<ion-label>Bronn</ion-label>
7272
</ion-item>
7373

‎demos/config/main.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
});</pre>
5858

5959
<div padding>
60-
<button ion-button block secondary (click)="push()">
60+
<button ion-button block color="secondary" (click)="push()">
6161
Go to Another Page
6262
</button>
6363
</div>

‎demos/events/app.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<ion-menu #menu [content]="content">
22

33
<ion-header>
4-
<ion-toolbar secondary>
4+
<ion-toolbar color="secondary">
55
<ion-title>Left Menu</ion-title>
66
</ion-toolbar>
77
</ion-header>
@@ -13,7 +13,7 @@
1313
Logged in as <b>Administrator</b>
1414
</ion-list-header>
1515
<button ion-item menuClose *ngFor="let p of loggedInPages" (click)="openPage(menu, p)">
16-
<ion-label primary>{{p.title}}</ion-label>
16+
<ion-label color="primary">{{p.title}}</ion-label>
1717
</button>
1818

1919
<button ion-item menuToggle>
@@ -27,7 +27,7 @@
2727
Please Log In
2828
</ion-list-header>
2929
<button ion-item menuClose *ngFor="let p of loggedOutPages" (click)="openPage(menu, p)">
30-
<ion-label primary>{{p.title}}</ion-label>
30+
<ion-label color="primary">{{p.title}}</ion-label>
3131
</button>
3232

3333
<button ion-item menuToggle>

‎demos/events/login.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,18 @@ <h3 margin-left>Login</h3>
2020

2121
<ion-list no-margin>
2222
<ion-item>
23-
<ion-label stacked primary>Name</ion-label>
23+
<ion-label stacked color="primary">Name</ion-label>
2424
<ion-input [(ngModel)]="user.name" disabled></ion-input>
2525
</ion-item>
2626
<ion-item>
27-
<ion-label stacked primary>Username</ion-label>
27+
<ion-label stacked color="primary">Username</ion-label>
2828
<ion-input [(ngModel)]="user.username" disabled></ion-input>
2929
</ion-item>
3030
</ion-list>
3131

3232
<div padding>
3333
<button ion-button block (click)="login()">Login</button>
34-
<button ion-button block secondary menuToggle>Toggle Menu</button>
34+
<button ion-button block color="secondary" menuToggle>Toggle Menu</button>
3535
</div>
3636

3737
</ion-content>

‎demos/events/logout.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,6 @@ <h3 margin-left>Logout</h3>
1818

1919
<div padding>
2020
<button ion-button block (click)="logout()">Logout</button>
21-
<button ion-button block secondary menuToggle>Toggle Menu</button>
21+
<button ion-button block color="secondary" menuToggle>Toggle Menu</button>
2222
</div>
2323
</ion-content>

‎demos/icon/main.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,50 +10,50 @@
1010
<ion-content text-center class="icon-demo">
1111

1212
<ion-row>
13-
<ion-col><ion-icon name="ionic" primary></ion-icon></ion-col>
13+
<ion-col><ion-icon name="ionic" color="primary"></ion-icon></ion-col>
1414
<ion-col><ion-icon name="logo-angular"></ion-icon></ion-col>
15-
<ion-col><ion-icon name="heart" danger></ion-icon></ion-col>
16-
<ion-col><ion-icon name="ionitron" primary></ion-icon></ion-col>
15+
<ion-col><ion-icon name="heart" color="danger"></ion-icon></ion-col>
16+
<ion-col><ion-icon name="ionitron" color="primary"></ion-icon></ion-col>
1717

18-
<ion-col><ion-icon name="happy" vibrant></ion-icon></ion-col>
18+
<ion-col><ion-icon name="happy" color="vibrant"></ion-icon></ion-col>
1919
<ion-col><ion-icon name="people"></ion-icon></ion-col>
2020
<ion-col><ion-icon name="person"></ion-icon></ion-col>
2121
<ion-col><ion-icon name="contact"></ion-icon></ion-col>
2222

2323
<ion-col><ion-icon name="apps"></ion-icon></ion-col>
2424
<ion-col><ion-icon name="lock"></ion-icon></ion-col>
25-
<ion-col><ion-icon name="key" bright></ion-icon></ion-col>
25+
<ion-col><ion-icon name="key" color="bright"></ion-icon></ion-col>
2626
<ion-col><ion-icon name="unlock"></ion-icon></ion-col>
2727

28-
<ion-col><ion-icon name="map" secondary></ion-icon></ion-col>
28+
<ion-col><ion-icon name="map" color="secondary"></ion-icon></ion-col>
2929
<ion-col><ion-icon name="navigate"></ion-icon></ion-col>
3030
<ion-col><ion-icon name="pin"></ion-icon></ion-col>
3131
<ion-col><ion-icon name="locate"></ion-icon></ion-col>
3232

3333
<ion-col><ion-icon name="mic"></ion-icon></ion-col>
34-
<ion-col><ion-icon name="musical-notes" vibrant></ion-icon></ion-col>
34+
<ion-col><ion-icon name="musical-notes" color="vibrant"></ion-icon></ion-col>
3535
<ion-col><ion-icon name="volume-up"></ion-icon></ion-col>
3636
<ion-col><ion-icon name="microphone"></ion-icon></ion-col>
3737

38-
<ion-col><ion-icon name="cafe" bright></ion-icon></ion-col>
38+
<ion-col><ion-icon name="cafe" color="bright"></ion-icon></ion-col>
3939
<ion-col><ion-icon name="calculator"></ion-icon></ion-col>
4040
<ion-col><ion-icon name="bus"></ion-icon></ion-col>
41-
<ion-col><ion-icon name="wine" danger></ion-icon></ion-col>
41+
<ion-col><ion-icon name="wine" color="danger"></ion-icon></ion-col>
4242

4343
<ion-col><ion-icon name="camera"></ion-icon></ion-col>
44-
<ion-col><ion-icon name="image" secondary></ion-icon></ion-col>
45-
<ion-col><ion-icon name="star" bright></ion-icon></ion-col>
44+
<ion-col><ion-icon name="image" color="secondary"></ion-icon></ion-col>
45+
<ion-col><ion-icon name="star" color="bright"></ion-icon></ion-col>
4646
<ion-col><ion-icon name="pin"></ion-icon></ion-col>
4747

48-
<ion-col><ion-icon name="arrow-dropup-circle" vibrant></ion-icon></ion-col>
48+
<ion-col><ion-icon name="arrow-dropup-circle" color="vibrant"></ion-icon></ion-col>
4949
<ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
5050
<ion-col><ion-icon name="arrow-dropdown"></ion-icon></ion-col>
5151
<ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>
5252

5353
<ion-col><ion-icon name="cloud"></ion-icon></ion-col>
54-
<ion-col><ion-icon name="sunny" bright></ion-icon></ion-col>
54+
<ion-col><ion-icon name="sunny" color="bright"></ion-icon></ion-col>
5555
<ion-col><ion-icon name="umbrella"></ion-icon></ion-col>
56-
<ion-col><ion-icon name="rainy" primary></ion-icon></ion-col>
56+
<ion-col><ion-icon name="rainy" color="primary"></ion-icon></ion-col>
5757
</ion-row>
5858

5959
</ion-content>

‎demos/input/main.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@
1111

1212
<ion-list>
1313
<ion-item>
14-
<ion-label primary>Inline Label</ion-label>
14+
<ion-label color="primary">Inline Label</ion-label>
1515
<ion-input placeholder="Text Input"></ion-input>
1616
</ion-item>
1717

1818
<ion-item>
19-
<ion-label primary fixed>Fixed Label</ion-label>
19+
<ion-label color="primary" fixed>Fixed Label</ion-label>
2020
<ion-input type="tel" placeholder="Tel Input"></ion-input>
2121
</ion-item>
2222

@@ -25,17 +25,17 @@
2525
</ion-item>
2626

2727
<ion-item>
28-
<ion-label primary stacked>Stacked Label</ion-label>
28+
<ion-label color="primary" stacked>Stacked Label</ion-label>
2929
<ion-input type="email" placeholder="Email Input"></ion-input>
3030
</ion-item>
3131

3232
<ion-item>
33-
<ion-label primary stacked>Stacked Label</ion-label>
33+
<ion-label color="primary" stacked>Stacked Label</ion-label>
3434
<ion-input type="password" placeholder="Password Input"></ion-input>
3535
</ion-item>
3636

3737
<ion-item>
38-
<ion-label primary floating>Floating Label</ion-label>
38+
<ion-label color="primary" floating>Floating Label</ion-label>
3939
<ion-input></ion-input>
4040
</ion-item>
4141

‎demos/item-sliding/main.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,22 +27,22 @@ <h2>{{chat.name}}</h2>
2727
</ion-item>
2828

2929
<ion-item-options>
30-
<button ion-button secondary (click)="more(item)">
30+
<button ion-button color="secondary" (click)="more(item)">
3131
<ion-icon name="menu"></ion-icon>
3232
More
3333
</button>
34-
<button ion-button dark (click)="mute(item)">
34+
<button ion-button color="dark" (click)="mute(item)">
3535
<ion-icon name="volume-off"></ion-icon>
3636
Mute
3737
</button>
38-
<button ion-button danger (click)="delete(item)">
38+
<button ion-button color="danger" (click)="delete(item)">
3939
<ion-icon name="trash"></ion-icon>
4040
Delete
4141
</button>
4242
</ion-item-options>
4343

4444
<ion-item-options side="left" (ionSwipe)="archive(item)">
45-
<button ion-button primary expandable (click)="archive(item)">
45+
<button ion-button color="primary" expandable (click)="archive(item)">
4646
<ion-icon name="archive" class="expand-hide"></ion-icon>
4747
<div class="expand-hide">Archive</div>
4848
<ion-spinner id="archive-spinner"></ion-spinner>
@@ -63,16 +63,16 @@ <h2>{{login.name}}</h2>
6363
<p>{{login.username}}</p>
6464
</ion-item>
6565
<ion-item-options side="left">
66-
<button ion-button danger>
66+
<button ion-button color="danger">
6767
<ion-icon name="trash"></ion-icon>
6868
</button>
6969
</ion-item-options>
7070
<ion-item-options (ionSwipe)="download(item)" icon-left>
71-
<button ion-button dark (click)="more(item)">
71+
<button ion-button color="dark" (click)="more(item)">
7272
<ion-icon name="volume-off"></ion-icon>
7373
Mute
7474
</button>
75-
<button ion-button light expandable (click)="download(item)">
75+
<button ion-button color="light" expandable (click)="download(item)">
7676
<ion-icon name="download" class="expand-hide"></ion-icon>
7777
<div class="expand-hide">Download</div>
7878
<ion-spinner id="download-spinner"></ion-spinner>

0 commit comments

Comments
 (0)