javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(item): deprecate item-left / item-right attributes for item-start / item-end (#11125)

Browse Source 
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
This commit is contained in:
Amit Moryossef
2017-05-05 18:53:32 +03:00
committed by Brandy Carney
parent 6d11499417
commit 26c653e43e
73 changed files with 663 additions and 582 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/input/input.wp.scss
View File

@@ -126,8 +126,10 @@ $text-input-wp-highlight-color-invalid: $text-input-highlight-color-invalid
width: calc(100% - #{$text-input-wp-margin-right});
}
.item-wp.item-label-stacked [item-right],
.item-wp.item-label-floating [item-right] {
.item-wp.item-label-stacked [item-right], // deprecated
.item-wp.item-label-floating [item-right], // deprecated
.item-wp.item-label-stacked [item-end],
.item-wp.item-label-floating [item-end] {
align-self: flex-end;
}

4
src/components/input/test/clear-input/pages/root-page/root-page.html
View File

@@ -29,12 +29,12 @@
<ion-item>
<ion-label>Button:</ion-label>
<ion-input class="e2eClearInput" [(ngModel)]="myValue"></ion-input>
<button ion-button item-right (click)="clicked()">Button</button>
<button ion-button item-end (click)="clicked()">Button</button>
</ion-item>
<ion-item>
<input type="text" placeholder="Native Input"/>
<button ion-button item-right (click)="clicked()">Button</button>
<button ion-button item-end (click)="clicked()">Button</button>
</ion-item>
</ion-list>

14
src/components/input/test/fixed-inline-labels/pages/root-page/root-page.html
View File

@@ -30,7 +30,7 @@
<ion-item>
<ion-label fixed>From</ion-label>
<ion-input value="Text 3"></ion-input>
<button ion-button icon-only clear item-right>
<button ion-button icon-only clear item-end>
<ion-icon name="power"></ion-icon>
</button>
</ion-item>
@@ -45,32 +45,32 @@
</ion-item>
<ion-item>
<ion-icon name="globe" item-left></ion-icon>
<ion-icon name="globe" item-start></ion-icon>
<ion-label fixed>Website</ion-label>
<ion-input value="http://ionic.io/" type="url"></ion-input>
</ion-item>
<ion-item>
<ion-icon name="mail" item-left></ion-icon>
<ion-icon name="mail" item-start></ion-icon>
<ion-label fixed>Email</ion-label>
<ion-input value="email6@email.com" type="email"></ion-input>
</ion-item>
<ion-item>
<ion-icon name="call" item-left></ion-icon>
<ion-icon name="call" item-start></ion-icon>
<ion-label fixed>Phone</ion-label>
<ion-input value="867-5309" type="tel"></ion-input>
</ion-item>
<ion-item>
<ion-icon name="contact" item-left></ion-icon>
<ion-icon name="contact" item-start></ion-icon>
<ion-input placeholder="Placeholder Text"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Score</ion-label>
<ion-input value="10" type="number"></ion-input>
<button ion-button outline item-right>Update</button>
<button ion-button outline item-end>Update</button>
</ion-item>
<ion-item>
@@ -84,7 +84,7 @@
</ion-item>
<ion-item>
<ion-icon name="create" item-left></ion-icon>
<ion-icon name="create" item-start></ion-icon>
<ion-label fixed>Message</ion-label>
<ion-textarea value="To infinity and beyond"></ion-textarea>
</ion-item>

10
src/components/input/test/floating-labels/pages/root-page/root-page.html
View File

@@ -14,7 +14,7 @@
<ion-item>
<ion-label floating>Params: {{ myParam }}</ion-label>
<ion-input [(ngModel)]="myParam" type="text"></ion-input>
<button ion-button icon-only clear item-right>
<button ion-button icon-only clear item-end>
<ion-icon name="settings"></ion-icon>
</button>
</ion-item>
@@ -32,13 +32,13 @@
<ion-item>
<ion-label floating>value: {{ numberInput.value }} min: {{ minValue }} max: {{ maxValue }} step: {{ stepValue }} </ion-label>
<ion-input #numberInput [min]="minValue" [max]="maxValue" [step]="stepValue" type="number"></ion-input>
<button item-right outline ion-button (click)="toggleValues()">Toggle</button>
<button item-end outline ion-button (click)="toggleValues()">Toggle</button>
</ion-item>
<ion-item>
<ion-label floating color="primary">ngModel 2: {{ myValues.value2 }}</ion-label>
<ion-textarea [(ngModel)]='myValues.value2'></ion-textarea>
<button ion-button outline item-right>
<button ion-button outline item-end>
View
</button>
</ion-item>
@@ -51,7 +51,7 @@
<ion-item>
<ion-label floating color="danger">Email Input: {{ emailInput.value }}</ion-label>
<ion-input #emailInput type="email"></ion-input>
<ion-avatar item-right>
<ion-avatar item-end>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
</ion-item>
@@ -59,7 +59,7 @@
<ion-item>
<ion-label floating>Textarea Input: {{ textareaInput.value }} </ion-label>
<ion-textarea #textareaInput></ion-textarea>
<ion-thumbnail item-right>
<ion-thumbnail item-end>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-thumbnail>
</ion-item>

20
src/components/input/test/highlight/pages/root-page/root-page.html
View File

@@ -38,31 +38,31 @@
<ion-list>
<ion-item>
<ion-icon item-left name="logo-buffer"></ion-icon>
<ion-icon item-start name="logo-buffer"></ion-icon>
<ion-label stacked>Stacked</ion-label>
<ion-input clearInput [(ngModel)]="login.email" formControlName="email" type="email" required></ion-input>
</ion-item>
<ion-item>
<ion-icon item-left name="apps"></ion-icon>
<ion-icon item-start name="apps"></ion-icon>
<ion-label floating>Floating</ion-label>
<ion-input clearInput [(ngModel)]="login.username" formControlName="username"></ion-input>
</ion-item>
<ion-item>
<ion-icon item-left name="browsers"></ion-icon>
<ion-icon item-start name="browsers"></ion-icon>
<ion-label fixed>Fixed</ion-label>
<ion-input clearInput [(ngModel)]="login.password" formControlName="password" type="password" required></ion-input>
</ion-item>
<ion-item>
<ion-icon item-left name="card"></ion-icon>
<ion-icon item-start name="card"></ion-icon>
<ion-label>Inline</ion-label>
<ion-textarea clearInput [(ngModel)]="login.comments" formControlName="comments" required>Comment value</ion-textarea>
</ion-item>
<ion-item inset>
<ion-icon item-left name="checkmark-circle"></ion-icon>
<ion-icon item-start name="checkmark-circle"></ion-icon>
<ion-label>Inset</ion-label>
<ion-input clearInput [(ngModel)]="login.inset" formControlName="inset" required></ion-input>
</ion-item>
@@ -71,31 +71,31 @@
<ion-card>
<ion-list>
<ion-item>
<ion-icon item-left name="logo-buffer"></ion-icon>
<ion-icon item-start name="logo-buffer"></ion-icon>
<ion-label stacked>Stacked</ion-label>
<ion-input clearInput [(ngModel)]="login.email" formControlName="email" type="email" required></ion-input>
</ion-item>
<ion-item>
<ion-icon item-left name="apps"></ion-icon>
<ion-icon item-start name="apps"></ion-icon>
<ion-label floating>Floating</ion-label>
<ion-input clearInput [(ngModel)]="login.username" formControlName="username"></ion-input>
</ion-item>
<ion-item>
<ion-icon item-left name="browsers"></ion-icon>
<ion-icon item-start name="browsers"></ion-icon>
<ion-label fixed>Fixed</ion-label>
<ion-input clearInput [(ngModel)]="login.password" formControlName="password" type="password" required></ion-input>
</ion-item>
<ion-item>
<ion-icon item-left name="card"></ion-icon>
<ion-icon item-start name="card"></ion-icon>
<ion-label>Inline</ion-label>
<ion-textarea clearInput [(ngModel)]="login.comments" formControlName="comments" required>Comment value</ion-textarea>
</ion-item>
<ion-item inset>
<ion-icon item-left name="checkmark-circle"></ion-icon>
<ion-icon item-start name="checkmark-circle"></ion-icon>
<ion-label>Inset</ion-label>
<ion-input clearInput [(ngModel)]="login.inset" formControlName="inset" required></ion-input>
</ion-item>

12
src/components/input/test/inline-labels/pages/root-page/root-page.html
View File

@@ -26,7 +26,7 @@
<ion-item>
<ion-label>From:</ion-label>
<ion-input value="Text 3"></ion-input>
<button ion-button icon-only clear item-right>
<button ion-button icon-only clear item-end>
<ion-icon name="power"></ion-icon>
</button>
</ion-item>
@@ -37,19 +37,19 @@
</ion-item>
<ion-item>
<ion-icon name="globe" item-left></ion-icon>
<ion-icon name="globe" item-start></ion-icon>
<ion-label>Website:</ion-label>
<ion-input value="http://ionic.io/" type="url"></ion-input>
</ion-item>
<ion-item>
<ion-icon name="mail" item-left></ion-icon>
<ion-icon name="mail" item-start></ion-icon>
<ion-label>Email:</ion-label>
<ion-input value="email6@email.com" type="email"></ion-input>
</ion-item>
<ion-item>
<ion-icon name="create" item-left></ion-icon>
<ion-icon name="create" item-start></ion-icon>
<ion-label>Feedback:</ion-label>
<ion-textarea placeholder="Placeholder Text"></ion-textarea>
</ion-item>
@@ -57,13 +57,13 @@
<ion-item>
<ion-label>More Info:</ion-label>
<ion-input placeholder="Placeholder Text"></ion-input>
<ion-icon name="flag" item-right></ion-icon>
<ion-icon name="flag" item-end></ion-icon>
</ion-item>
<ion-item>
<ion-label>Score:</ion-label>
<ion-input value="10" type="number"></ion-input>
<button ion-button outline item-right>Update</button>
<button ion-button outline item-end>Update</button>
</ion-item>
<ion-item>

14
src/components/input/test/input-focus/pages/root-page/root-page.html
View File

@@ -25,7 +25,7 @@
<ion-item>
Item with button right
<button ion-button item-right>Button 1</button>
<button ion-button item-end>Button 1</button>
</ion-item>
<ion-item>
@@ -40,7 +40,7 @@
<ion-item>
<ion-label>Text 3:</ion-label>
<ion-input></ion-input>
<button ion-button clear item-right>
<button ion-button clear item-end>
<ion-icon name="power"></ion-icon>
</button>
</ion-item>
@@ -51,19 +51,19 @@
</ion-item>
<ion-item>
<ion-icon name="globe" item-left></ion-icon>
<ion-icon name="globe" item-start></ion-icon>
<ion-label>Website:</ion-label>
<ion-input value="http://ionic.io/" type="url"></ion-input>
</ion-item>
<ion-item>
<ion-icon name="mail" item-left></ion-icon>
<ion-icon name="mail" item-start></ion-icon>
<ion-label>Email:</ion-label>
<ion-input value="email6@email.com" type="email"></ion-input>
</ion-item>
<ion-item>
<ion-icon name="create" item-left></ion-icon>
<ion-icon name="create" item-start></ion-icon>
<ion-label>Feedback:</ion-label>
<ion-textarea placeholder="Placeholder Text"></ion-textarea>
</ion-item>
@@ -76,7 +76,7 @@
<ion-item>
<ion-label>More Info:</ion-label>
<ion-input placeholder="Placeholder Text"></ion-input>
<ion-icon name="flag" item-right></ion-icon>
<ion-icon name="flag" item-end></ion-icon>
</ion-item>
<ion-item>
@@ -87,7 +87,7 @@
<ion-item>
<ion-label>Score:</ion-label>
<ion-input value="10" type="number"></ion-input>
<button ion-button outline item-right>Update</button>
<button ion-button outline item-end>Update</button>
</ion-item>
<ion-item>

18
src/components/input/test/inset-inputs/pages/root-page/root-page.html
View File

@@ -12,17 +12,17 @@
<ion-list inset>
<ion-item>
<ion-icon name="search" item-left></ion-icon>
<ion-icon name="search" item-start></ion-icon>
<ion-input value="Input inside an inset list"></ion-input>
</ion-item>
<ion-item>
<ion-icon name="call" item-left></ion-icon>
<ion-icon name="call" item-start></ion-icon>
<ion-input type="tel"></ion-input>
</ion-item>
<ion-item>
<ion-icon name="mail" item-left></ion-icon>
<ion-icon name="mail" item-start></ion-icon>
<ion-input placeholder="Placeholder text"></ion-input>
</ion-item>
@@ -32,13 +32,13 @@
<ion-list inset>
<ion-item inset>
<ion-icon name="search" item-left></ion-icon>
<ion-icon name="search" item-start></ion-icon>
<ion-input value="Inset input inside an inset list"></ion-input>
</ion-item>
<ion-item inset>
<ion-input value="Inset input inside an inset list"></ion-input>
<ion-icon name="mic" item-right></ion-icon>
<ion-icon name="mic" item-end></ion-icon>
</ion-item>
</ion-list>
@@ -47,9 +47,9 @@
<ion-list>
<ion-item inset>
<ion-icon name="search" item-left></ion-icon>
<ion-icon name="search" item-start></ion-icon>
<ion-input value="Inset input inside a list"></ion-input>
<button ion-button outline item-right>Search</button>
<button ion-button outline item-end>Search</button>
</ion-item>
</ion-list>
@@ -58,13 +58,13 @@
<ion-card>
<ion-item>
<ion-icon name="search" item-left></ion-icon>
<ion-icon name="search" item-start></ion-icon>
<ion-input value="Input inside a card"></ion-input>
</ion-item>
<ion-item>
<ion-input value="Input inside a card"></ion-input>
<ion-icon name="mic" item-right></ion-icon>
<ion-icon name="mic" item-end></ion-icon>
</ion-item>
</ion-card>

8
src/components/input/test/placeholder-labels/pages/root-page/root-page.html
View File

@@ -27,12 +27,12 @@
</ion-item>
<ion-item>
<ion-icon name="call" item-left></ion-icon>
<ion-icon name="call" item-start></ion-icon>
<ion-input placeholder="Text Input Placeholder"></ion-input>
</ion-item>
<ion-item>
<ion-icon name="call" item-left></ion-icon>
<ion-icon name="call" item-start></ion-icon>
<ion-input placeholder="Text Input Placeholder" value="Text Input Value"></ion-input>
</ion-item>
@@ -61,12 +61,12 @@
</ion-item>
<ion-item>
<ion-icon name="call" item-left></ion-icon>
<ion-icon name="call" item-start></ion-icon>
<ion-input placeholder="Inset List: Text Input Placeholder"></ion-input>
</ion-item>
<ion-item>
<ion-icon name="call" item-left></ion-icon>
<ion-icon name="call" item-start></ion-icon>
<ion-input placeholder="Inset List: Text Input Placeholder" value="Inset List: Text Input Value"></ion-input>
</ion-item>

4
src/components/input/test/stacked-labels/pages/root-page/root-page.html
View File

@@ -20,8 +20,8 @@
<ion-item>
<ion-label stacked>Label 2</ion-label>
<ion-input value="Text 2"></ion-input>
<button ion-button icon-only item-right clear><ion-icon name="heart-outline"></ion-icon></button>
<button ion-button icon-only item-right clear><ion-icon ios="ios-call-outline" md="md-call"></ion-icon></button>
<button ion-button icon-only item-end clear><ion-icon name="heart-outline"></ion-icon></button>
<button ion-button icon-only item-end clear><ion-icon ios="ios-call-outline" md="md-call"></ion-icon></button>
</ion-item>
<ion-item>