Skip to content

Commit 26c653e

Browse files
AmitMYbrandyscarney
AmitMY
authored and
brandyscarney
committed
feat(item): deprecate item-left / item-right attributes for item-start / item-end (ionic-team#11125)
item-start and item-end make more sense for RTL * refactor(item): replaced item-left with item-start replaced item-right with item-end * style(item): fix spacing * fix(item): add backwards support for left/right in ng-content * fix(item): deprecated old variables, not breaking change * fix(scss): fix variable name * fix(item): old attributes deprecated support
1 parent 6d11499 commit 26c653e

File tree

73 files changed

+663
-582
lines changed

Some content is hidden

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

73 files changed

+663
-582
lines changed

‎demos/src/item-sliding/pages/page-one/page-one.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@
1616

1717
<ion-item-sliding *ngFor="let chat of chats" #item>
1818
<ion-item>
19-
<ion-avatar item-left>
19+
<ion-avatar item-start>
2020
<img [src]="chat.img">
2121
</ion-avatar>
2222
<h2>{{chat.name}}</h2>
2323
<p>{{chat.message}}</p>
24-
<ion-note item-right>
24+
<ion-note item-end>
2525
{{chat.time}}
2626
</ion-note>
2727
</ion-item>
@@ -58,7 +58,7 @@ <h2>{{chat.name}}</h2>
5858

5959
<ion-item-sliding *ngFor="let login of logins" #item>
6060
<ion-item>
61-
<ion-icon [name]="login.icon" item-left></ion-icon>
61+
<ion-icon [name]="login.icon" item-start></ion-icon>
6262
<h2>{{login.name}}</h2>
6363
<p>{{login.username}}</p>
6464
</ion-item>

‎demos/src/item/pages/page-one/page-one.html‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -12,51 +12,51 @@
1212
<ion-list>
1313
<ion-list-header>
1414
Settings
15-
<button ion-button icon-only item-right clear>
15+
<button ion-button icon-only item-end clear>
1616
<ion-icon name="cog"></ion-icon>
1717
</button>
1818
</ion-list-header>
1919

2020
<ion-item-group>
2121
<ion-item>
22-
<ion-icon name="plane" item-left color="danger"></ion-icon>
22+
<ion-icon name="plane" item-start color="danger"></ion-icon>
2323
<ion-label>Airplane Mode</ion-label>
2424
<ion-toggle color="secondary"></ion-toggle>
2525
</ion-item>
2626

2727
<button ion-item>
28-
<ion-icon name="wifi" item-left color="primary"></ion-icon>
28+
<ion-icon name="wifi" item-start color="primary"></ion-icon>
2929
<ion-label>Wi-Fi</ion-label>
30-
<ion-note item-right>The Interwebz</ion-note>
30+
<ion-note item-end>The Interwebz</ion-note>
3131
</button>
3232

3333
<button ion-item>
34-
<ion-icon name="bluetooth" item-left color="primary"></ion-icon>
34+
<ion-icon name="bluetooth" item-start color="primary"></ion-icon>
3535
<ion-label>Bluetooth</ion-label>
36-
<ion-note item-right>Off</ion-note>
36+
<ion-note item-end>Off</ion-note>
3737
</button>
3838
</ion-item-group>
3939

4040
<ion-item-divider color="primary">
4141
Other Settings
42-
<button ion-button item-right outline color="light">Clear</button>
42+
<button ion-button item-end outline color="light">Clear</button>
4343
</ion-item-divider>
4444

4545
<button ion-item>
46-
<ion-icon name="call" item-left color="secondary"></ion-icon>
46+
<ion-icon name="call" item-start color="secondary"></ion-icon>
4747
<ion-label>Cellular</ion-label>
4848
</button>
4949

5050
<button ion-item>
51-
<ion-icon name="link" item-left color="secondary"></ion-icon>
51+
<ion-icon name="link" item-start color="secondary"></ion-icon>
5252
<ion-label>Personal Hotspot</ion-label>
53-
<ion-note item-right>Off</ion-note>
53+
<ion-note item-end>Off</ion-note>
5454
</button>
5555
</ion-list>
5656

5757
<ion-list radio-group>
5858
<ion-list-header>
59-
<ion-icon item-left name="phone-portrait"></ion-icon>
59+
<ion-icon item-start name="phone-portrait"></ion-icon>
6060
Silence Phone
6161
</ion-list-header>
6262

@@ -76,24 +76,24 @@
7676
</ion-list-header>
7777

7878
<ion-item>
79-
<ion-icon name="ionic" item-left color="primary"></ion-icon>
79+
<ion-icon name="ionic" item-start color="primary"></ion-icon>
8080
<ion-label>Ionic View</ion-label>
81-
<button ion-button outline item-right>Uninstall</button>
81+
<button ion-button outline item-end>Uninstall</button>
8282
</ion-item>
8383
<ion-item>
84-
<ion-icon name="brush" item-left color="primary"></ion-icon>
84+
<ion-icon name="brush" item-start color="primary"></ion-icon>
8585
<ion-label>Ionic Creator</ion-label>
86-
<button ion-button outline item-right>Uninstall</button>
86+
<button ion-button outline item-end>Uninstall</button>
8787
</ion-item>
8888
<ion-item>
89-
<ion-icon name="logo-octocat" item-left color="dark"></ion-icon>
89+
<ion-icon name="logo-octocat" item-start color="dark"></ion-icon>
9090
<ion-label>Hubstruck</ion-label>
91-
<button ion-button outline item-right>Uninstall</button>
91+
<button ion-button outline item-end>Uninstall</button>
9292
</ion-item>
9393
<ion-item>
94-
<ion-icon name="paw" item-left color="danger"></ion-icon>
94+
<ion-icon name="paw" item-start color="danger"></ion-icon>
9595
<ion-label>Barkpark</ion-label>
96-
<button ion-button outline item-right>Uninstall</button>
96+
<button ion-button outline item-end>Uninstall</button>
9797
</ion-item>
9898
</ion-list>
9999

‎demos/src/label/pages/page-one/page-one.html‎

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

1212
<ion-list>
1313
<ion-item no-lines>
14-
<ion-avatar item-left>
14+
<ion-avatar item-start>
1515
<img src="./assets/ionic.svg">
1616
</ion-avatar>
1717
<ion-label>Ionic</ion-label>
@@ -21,8 +21,8 @@
2121
<ion-item>
2222
<ion-label stacked color="primary">Mobile</ion-label>
2323
<ion-input type="tel" value="+1 (555) 123-1234"></ion-input>
24-
<ion-icon color="primary" item-right ios="ios-chatbubbles-outline" md="md-chatbubbles"></ion-icon>
25-
<ion-icon color="primary" item-right ios="ios-call-outline" md="md-call"></ion-icon>
24+
<ion-icon color="primary" item-end ios="ios-chatbubbles-outline" md="md-chatbubbles"></ion-icon>
25+
<ion-icon color="primary" item-end ios="ios-call-outline" md="md-call"></ion-icon>
2626
</ion-item>
2727

2828
<ion-item>

‎demos/src/list/pages/page-one/page-one.html‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -15,32 +15,32 @@
1515
</ion-list-header>
1616

1717
<ion-item>
18-
<ion-icon name="plane" item-left color="danger"></ion-icon>
18+
<ion-icon name="plane" item-start color="danger"></ion-icon>
1919
<ion-label>Airplane Mode</ion-label>
2020
<ion-toggle color="secondary"></ion-toggle>
2121
</ion-item>
2222

2323
<button ion-item>
24-
<ion-icon name="wifi" item-left color="primary"></ion-icon>
24+
<ion-icon name="wifi" item-start color="primary"></ion-icon>
2525
<ion-label>Wi-Fi</ion-label>
26-
<ion-note item-right>The Interwebz</ion-note>
26+
<ion-note item-end>The Interwebz</ion-note>
2727
</button>
2828

2929
<button ion-item>
30-
<ion-icon name="bluetooth" item-left color="primary"></ion-icon>
30+
<ion-icon name="bluetooth" item-start color="primary"></ion-icon>
3131
<ion-label>Bluetooth</ion-label>
32-
<ion-note item-right>Off</ion-note>
32+
<ion-note item-end>Off</ion-note>
3333
</button>
3434

3535
<button ion-item>
36-
<ion-icon name="call" item-left color="secondary"></ion-icon>
36+
<ion-icon name="call" item-start color="secondary"></ion-icon>
3737
<ion-label>Cellular</ion-label>
3838
</button>
3939

4040
<button ion-item>
41-
<ion-icon name="link" item-left color="secondary"></ion-icon>
41+
<ion-icon name="link" item-start color="secondary"></ion-icon>
4242
<ion-label>Personal Hotspot</ion-label>
43-
<ion-note item-right>Off</ion-note>
43+
<ion-note item-end>Off</ion-note>
4444
</button>
4545
</ion-list>
4646

@@ -65,24 +65,24 @@
6565
</ion-list-header>
6666

6767
<ion-item>
68-
<ion-icon name="ionic" item-left color="primary"></ion-icon>
68+
<ion-icon name="ionic" item-start color="primary"></ion-icon>
6969
<ion-label>Ionic View</ion-label>
70-
<button ion-button outline item-right>Uninstall</button>
70+
<button ion-button outline item-end>Uninstall</button>
7171
</ion-item>
7272
<ion-item>
73-
<ion-icon name="brush" item-left color="primary"></ion-icon>
73+
<ion-icon name="brush" item-start color="primary"></ion-icon>
7474
<ion-label>Ionic Creator</ion-label>
75-
<button ion-button outline item-right>Uninstall</button>
75+
<button ion-button outline item-end>Uninstall</button>
7676
</ion-item>
7777
<ion-item>
78-
<ion-icon name="logo-octocat" item-left color="dark"></ion-icon>
78+
<ion-icon name="logo-octocat" item-start color="dark"></ion-icon>
7979
<ion-label>Hubstruck</ion-label>
80-
<button ion-button outline item-right>Uninstall</button>
80+
<button ion-button outline item-end>Uninstall</button>
8181
</ion-item>
8282
<ion-item>
83-
<ion-icon name="paw" item-left color="danger"></ion-icon>
83+
<ion-icon name="paw" item-start color="danger"></ion-icon>
8484
<ion-label>Barkpark</ion-label>
85-
<button ion-button outline item-right>Uninstall</button>
85+
<button ion-button outline item-end>Uninstall</button>
8686
</ion-item>
8787
</ion-list>
8888

‎demos/src/loading/pages/page-one/page-one.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,27 +14,27 @@
1414
Spinner Loading Indicators
1515
</ion-list-header>
1616
<button ion-item (click)="presentLoadingIos()">
17-
<ion-spinner item-left name="ios"></ion-spinner>
17+
<ion-spinner item-start name="ios"></ion-spinner>
1818
Show iOS
1919
</button>
2020
<button ion-item (click)="presentLoadingDots()">
21-
<ion-spinner item-left name="dots"></ion-spinner>
21+
<ion-spinner item-start name="dots"></ion-spinner>
2222
Show Dots
2323
</button>
2424
<button ion-item (click)="presentLoadingBubbles()">
25-
<ion-spinner item-left name="bubbles"></ion-spinner>
25+
<ion-spinner item-start name="bubbles"></ion-spinner>
2626
Show Bubbles
2727
</button>
2828
<button ion-item (click)="presentLoadingCircles()">
29-
<ion-spinner item-left name="circles"></ion-spinner>
29+
<ion-spinner item-start name="circles"></ion-spinner>
3030
Show Circles
3131
</button>
3232
<button ion-item (click)="presentLoadingCrescent()">
33-
<ion-spinner item-left name="crescent"></ion-spinner>
33+
<ion-spinner item-start name="crescent"></ion-spinner>
3434
Show Crescent
3535
</button>
3636
<button ion-item (click)="presentLoadingDefault()">
37-
<ion-spinner item-left></ion-spinner>
37+
<ion-spinner item-start></ion-spinner>
3838
Show Default
3939
</button>
4040
</ion-list>

‎demos/src/range/pages/page-one/page-one.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<ion-list>
1313
<ion-list-header>
1414
Brightness
15-
<ion-badge item-right>{{brightness}}</ion-badge>
15+
<ion-badge item-end>{{brightness}}</ion-badge>
1616
</ion-list-header>
1717
<ion-item>
1818
<ion-range [(ngModel)]="brightness">
@@ -25,7 +25,7 @@
2525
<ion-list>
2626
<ion-list-header>
2727
Saturation
28-
<ion-badge item-right color="secondary">{{saturation}}</ion-badge>
28+
<ion-badge item-end color="secondary">{{saturation}}</ion-badge>
2929
</ion-list-header>
3030
<ion-item>
3131
<ion-range min="-200" max="200" pin="true" [(ngModel)]="saturation" color="secondary">
@@ -38,7 +38,7 @@
3838
<ion-list>
3939
<ion-list-header>
4040
Warmth
41-
<ion-badge item-right color="danger">{{warmth}}</ion-badge>
41+
<ion-badge item-end color="danger">{{warmth}}</ion-badge>
4242
</ion-list-header>
4343
<ion-item>
4444
<ion-range min="1000" max="2000" step="100" snaps="true" [(ngModel)]="warmth" color="danger">
@@ -51,8 +51,8 @@
5151
<ion-list>
5252
<ion-list-header>
5353
Structure
54-
<ion-badge item-right color="dark">{{structure.lower}}</ion-badge>
55-
<ion-badge item-right color="dark">{{structure.upper}}</ion-badge>
54+
<ion-badge item-end color="dark">{{structure.lower}}</ion-badge>
55+
<ion-badge item-end color="dark">{{structure.upper}}</ion-badge>
5656
</ion-list-header>
5757
<ion-item>
5858
<ion-range dualKnobs="true" pin="true" [(ngModel)]="structure" (ionChange)="onChange($event)" color="dark">

‎demos/src/segment/pages/page-one/page-one.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<ion-list-header>{{ appType }}</ion-list-header>
2626
<ion-item *ngFor="let item of getItems(appType)">
2727
{{ item.name }}
28-
<button ion-button outline item-right>{{ item.price }}</button>
28+
<button ion-button outline item-end>{{ item.price }}</button>
2929
</ion-item>
3030
</ion-list>
3131

@@ -47,7 +47,7 @@
4747
</ion-segment>
4848
<ion-list style="margin: 0" inset>
4949
<button ion-item *ngFor="let sItem of getSafariItems(safari)">
50-
<ion-icon item-left [name]="sItem.icon" color="primary"></ion-icon>
50+
<ion-icon item-start [name]="sItem.icon" color="primary"></ion-icon>
5151
{{ sItem.name }}
5252
</button>
5353
</ion-list>

‎src/components/app/test/gesture-collision/pages/page-one/page-one.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424

2525
<ion-item>
2626
<ion-label>Apple</ion-label>
27-
<ion-toggle item-left></ion-toggle>
27+
<ion-toggle item-start></ion-toggle>
2828
</ion-item>
2929

3030
<ion-item>
@@ -106,7 +106,7 @@
106106

107107
<ion-item>
108108
<ion-label>Apple</ion-label>
109-
<ion-toggle item-left></ion-toggle>
109+
<ion-toggle item-start></ion-toggle>
110110
</ion-item>
111111

112112
<ion-item>

‎src/components/app/test/gesture-collision/pages/page-two/page-two.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ <h3>Page 1</h3>
7676

7777
<ion-item>
7878
<ion-label>Apple</ion-label>
79-
<ion-toggle item-left></ion-toggle>
79+
<ion-toggle item-start></ion-toggle>
8080
</ion-item>
8181

8282
<ion-item>

‎src/components/avatar/avatar.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Directive } from '@angular/core';
55
* @module ionic
66
* @description
77
* An Avatar is a component that creates a circular image for an item.
8-
* Avatars can be placed on the left or right side of an item with the `item-left` or `item-right` directive.
8+
* Avatars can be placed on the left or right side of an item with the `item-start` or `item-end` directive.
99
* @see {@link /docs/components/#avatar-list Avatar Component Docs}
1010
*/
1111
@Directive({

0 commit comments

Comments
 (0)