Skip to content

Commit 938864e

Browse files
brandyscarneybrandyscarney
committed
refactor(button): add ion-button attribute and icon attributes to style buttons
BREAKING CHANGES: - `<button>` becomes `<button ion-button>` - `<a button>` becomes `<a ion-button>` - `<button ion-item>` does not get the `ion-button` attribute - Buttons inside of `<ion-item-options>` do get the `ion-button` attribute - Removed the `category` attribute, this should be passed in `ion-button` instead. - Button attributes added for icons in buttons: `icon-only`, `icon-left`, and `icon-right` closes #7466
1 parent 90929d0 commit 938864e

File tree

179 files changed

+1394
-1082
lines changed

Some content is hidden

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

179 files changed

+1394
-1082
lines changed

‎demos/action-sheet/main.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@
99

1010
<ion-content padding>
1111

12-
<button block (click)="present()">Basic Action Sheet</button>
12+
<button ion-button block (click)="present()">Basic Action Sheet</button>
1313

1414
</ion-content>

‎demos/alert/main.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99

1010
<ion-content padding>
1111

12-
<button block (click)="doAlert()">Basic Alert</button>
13-
<button light block (click)="doConfirm()">Confirm Alert</button>
14-
<button secondary block (click)="doPrompt()">Prompt Alert</button>
15-
<button danger block (click)="doRadio()">Radio Alert</button>
16-
<button dark block (click)="doCheckbox()">Checkbox Alert</button>
12+
<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>
1717

1818
</ion-content>

‎demos/button/main.html‎

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

1212
<h4>Colors</h4>
1313

14-
<button>Default</button>
14+
<button ion-button>Default</button>
1515

16-
<button secondary>Secondary</button>
16+
<button ion-button secondary>Secondary</button>
1717

18-
<button danger>Danger</button>
18+
<button ion-button danger>Danger</button>
1919

20-
<button light>Light</button>
20+
<button ion-button light>Light</button>
2121

22-
<button dark>Dark</button>
22+
<button ion-button dark>Dark</button>
2323

2424
<h4>Shapes</h4>
2525

26-
<button full>Full Button</button>
26+
<button ion-button full>Full Button</button>
2727

28-
<button block>Block Button</button>
28+
<button ion-button block>Block Button</button>
2929

30-
<button round>Round Button</button>
30+
<button ion-button round>Round Button</button>
3131

32-
<button fab style="position: relative;">FAB</button>
32+
<button ion-button fab style="position: relative;">FAB</button>
3333

3434
<h4>Outlines</h4>
3535

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

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

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

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

4444
<h4>Icons</h4>
4545

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

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

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

6060
<h4>Sizes</h4>
6161

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

64-
<button light>Default</button>
64+
<button ion-button light>Default</button>
6565

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

6868
</ion-content>

‎demos/config/index.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,18 +89,23 @@ export class ApiDemoPage {
8989

9090
if (window.localStorage.getItem('configDemo') !== null) {
9191
this.config = JSON.parse(window.localStorage.getItem('configDemo'));
92-
}
93-
else if (platform.is('ios')) {
92+
} else if (platform.is('ios')) {
9493
this.config = {
9594
'backButtonIcon': 'ios-arrow-back',
9695
'iconMode': 'ios',
9796
'tabsPlacement': 'bottom'
9897
};
98+
} else if(platform.is('windows')) {
99+
this.config = {
100+
'backButtonIcon': 'ios-arrow-back',
101+
'iconMode': 'ios',
102+
'tabsPlacement': 'top'
103+
};
99104
} else {
100105
this.config = {
101106
'backButtonIcon': 'md-arrow-back',
102107
'iconMode': 'md',
103-
'tabsPlacement': 'top'
108+
'tabsPlacement': 'bottom'
104109
};
105110
}
106111

‎demos/config/main.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
<p class="note">Note: the config will not be updated until you click the button below.</p>
4242

4343
<div padding>
44-
<button block (click)="load()">
44+
<button ion-button block (click)="load()">
4545
Update Config
4646
</button>
4747
</div>
@@ -57,7 +57,7 @@
5757
});</pre>
5858

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

‎demos/config/page.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66

77
<ion-content>
88
<div padding>
9-
<button block (click)="pop()">Go Back to Config</button>
9+
<button ion-button block (click)="pop()">Go Back to Config</button>
1010
</div>
1111
</ion-content>

‎demos/events/login.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<ion-header>
22

33
<ion-navbar>
4-
<button menuToggle>
4+
<button ion-button menuToggle>
55
<ion-icon name="menu"></ion-icon>
66
</button>
77

@@ -30,8 +30,8 @@ <h3 margin-left>Login</h3>
3030
</ion-list>
3131

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

3737
</ion-content>

‎demos/events/logout.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<ion-header>
22

33
<ion-navbar>
4-
<button menuToggle>
4+
<button ion-button menuToggle>
55
<ion-icon name="menu"></ion-icon>
66
</button>
77

@@ -17,7 +17,7 @@ <h3 margin-left>Logout</h3>
1717
<p margin>Click the logout button to logout. Then, toggle the menu to see the menu items change.</p>
1818

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

‎demos/item-reorder/main.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<ion-navbar>
44
<ion-title>Item Reorder</ion-title>
55
<ion-buttons end>
6-
<button (click)="toggleEdit()">{{editButton}}</button>
6+
<button ion-button (click)="toggleEdit()">{{editButton}}</button>
77
</ion-buttons>
88
</ion-navbar>
99

‎demos/item-sliding/main.html‎

Lines changed: 8 additions & 8 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 secondary (click)="more(item)">
30+
<button ion-button secondary (click)="more(item)">
3131
<ion-icon name="menu"></ion-icon>
3232
More
3333
</button>
34-
<button dark (click)="mute(item)">
34+
<button ion-button dark (click)="mute(item)">
3535
<ion-icon name="volume-off"></ion-icon>
3636
Mute
3737
</button>
38-
<button danger (click)="delete(item)">
38+
<button ion-button 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 primary expandable (click)="archive(item)">
45+
<button ion-button 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 danger>
66+
<button ion-button danger>
6767
<ion-icon name="trash"></ion-icon>
6868
</button>
6969
</ion-item-options>
70-
<ion-item-options (ionSwipe)="download(item)">
71-
<button dark (click)="more(item)">
70+
<ion-item-options (ionSwipe)="download(item)" icon-left>
71+
<button ion-button dark (click)="more(item)">
7272
<ion-icon name="volume-off"></ion-icon>
7373
Mute
7474
</button>
75-
<button light expandable (click)="download(item)">
75+
<button ion-button 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)