Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(rtl): add icon-start and icon-end notations #11217

Closed
wants to merge 52 commits into from
Closed

fix(rtl): add icon-start and icon-end notations #11217

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
52 commits
Select commit Hold shift + click to select a range
516e68d
fix(rtl): add icon-start and icon-end notations
AmitMY Apr 13, 2017
3536066
fix(icon): deprecate icon-left and icon-right
AmitMY Apr 13, 2017
0c04bbc
fix(): replace all icon-left with icon-start
AmitMY Apr 13, 2017
58e9fcf
style(css): fix css value alignment
AmitMY Apr 21, 2017
9211c41
style(css): fix css value alignment
AmitMY Apr 21, 2017
4c8189a
fix(sass): create deprecated variables for compatibility
AmitMY Apr 21, 2017
13294ed
feat(rtl): padding mixin
AmitMY Apr 24, 2017
5ab8d60
feat(rtl): change all padding variables to start/end
AmitMY Apr 24, 2017
2b3897a
feat(rtl): replace all padding-side with start/end
AmitMY Apr 24, 2017
abdff51
Merge remote-tracking branch 'origin/start-end' into start-end
AmitMY Apr 24, 2017
6629092
revert(functions): remove mixins
AmitMY Apr 24, 2017
ce2d9f1
feat(scss): add padding-horizontal and rtl functions (thanks brandy)
AmitMY Apr 24, 2017
a6c1feb
feat(padding): use padding horizontal mixin everywhere
AmitMY Apr 24, 2017
1a4e0d4
feat(padding): use padding horizontal mixin everywhere
AmitMY Apr 24, 2017
a332df7
fix(lint): change properties order. tests passing
AmitMY Apr 24, 2017
bfe80bb
fix(sass-functions): reorder functions to avoid warning
AmitMY Apr 24, 2017
762fdb0
perf(rtl): add check if need rtl selector
AmitMY Apr 25, 2017
8f228e8
feat(scss): add full padding function
AmitMY Apr 25, 2017
4f81dd2
feat(scss): add border-radius mixin
AmitMY Apr 25, 2017
f2077f4
fix(rtl): change border-radius to use mixin
AmitMY Apr 25, 2017
d27b7b0
perf(scss): only override if has something to override
AmitMY Apr 25, 2017
8ebd500
feat(scss): add margin scss variables for sides
AmitMY Apr 25, 2017
40624db
feat(scss): add margin mixin
AmitMY Apr 25, 2017
bc93198
fix(scss): fix wrong support for 2/3 args
AmitMY Apr 25, 2017
c79db3b
feat(rtl): spread margins/paddings
AmitMY Apr 25, 2017
788728a
feat(rtl): spread margins/paddings
AmitMY Apr 25, 2017
ffce076
feat(position): add rtl support for absolute
AmitMY Apr 25, 2017
2c89379
fix(rtl): add missing calls
AmitMY Apr 26, 2017
e428c61
Merge branch 'master' into start-end
AmitMY Apr 27, 2017
cfecb3e
Merge branch 'master' into start-end
AmitMY May 1, 2017
2b409e1
fix(sass-functions): and not &&
AmitMY May 2, 2017
00152e9
fix(padding): merge + missing padding
AmitMY May 2, 2017
93f78c2
fix(padding): merge + missing padding
AmitMY May 2, 2017
6f84b7b
style(): remove newline
AmitMY May 2, 2017
b8721c8
refactor(mixins): move mixins to mixins file
AmitMY May 2, 2017
cf99437
style(): fix alignment
AmitMY May 2, 2017
d1ac9a0
fix(item): right padding should not be set
AmitMY May 2, 2017
3cbc8d6
fix(): incorrect defaults
AmitMY May 2, 2017
3577190
feat(scss-lint): disable some side variables
AmitMY May 4, 2017
7e38881
fix(scss): lint passes
AmitMY May 4, 2017
1a863ef
feat(lint): disabled text-align
AmitMY May 4, 2017
7307706
fix(): correct variable name
AmitMY May 4, 2017
b6ad052
fix(fab): missed a comma
AmitMY May 4, 2017
4376436
Merge branch 'master' into start-end
AmitMY May 4, 2017
d1ce2d6
fix(rtl): rtl method incorrect for multiple selectors
AmitMY May 5, 2017
8d045b7
fix(rtl): toolbar bad merge
AmitMY May 5, 2017
c25eca6
fix(rtl): icon-only is in px not em
AmitMY May 5, 2017
3757a44
fix(rtl): toggle padding
AmitMY May 5, 2017
5ad8328
feat(rtl): correct notation for rtl custom
AmitMY May 5, 2017
becf2b9
fix(doc): correct alignment
AmitMY May 5, 2017
59eb644
Merge branch 'start-end' into icon-x
AmitMY May 5, 2017
c488c14
Merge branch 'start-end' into icon-x
AmitMY May 5, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions demos/src/button/pages/page-one/page-one.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,12 @@ <h4>Outlines</h4>

<h4>Icons</h4>

<button ion-button icon-left color="dark">
<button ion-button icon-start color="dark">
<ion-icon name="star"></ion-icon>
Left Icon
</button>

<button ion-button icon-right color="dark">
<button ion-button icon-end color="dark">
Right Icon
<ion-icon name="star"></ion-icon>
</button>
Expand Down
2 changes: 1 addition & 1 deletion demos/src/item-sliding/pages/page-one/page-one.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ <h2>{{login.name}}</h2>
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-options>
<ion-item-options (ionSwipe)="download(item)" icon-left>
<ion-item-options (ionSwipe)="download(item)" icon-start>
<button ion-button color="dark" (click)="more(item)">
<ion-icon name="volume-off"></ion-icon>
Mute
Expand Down
2 changes: 1 addition & 1 deletion demos/src/loading/pages/page-one/page-one.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@

<ion-toolbar>
<ion-buttons end>
<button ion-button icon-right (click)="goToPage2()">
<button ion-button icon-end (click)="goToPage2()">
Show Loading and Navigate
<ion-icon name="arrow-forward"></ion-icon>
</button>
Expand Down
4 changes: 2 additions & 2 deletions demos/src/navbar/pages/page-one/page-one.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons end>
<button ion-button icon-right solid color="secondary">
<button ion-button icon-end solid color="secondary">
Help
<ion-icon name="help-circle"></ion-icon>
</button>
Expand All @@ -69,7 +69,7 @@
</button>
</ion-buttons>
<ion-buttons end>
<button ion-button icon-right outline color="secondary">
<button ion-button icon-end outline color="secondary">
Help
<ion-icon name="help-circle"></ion-icon>
</button>
Expand Down
4 changes: 2 additions & 2 deletions demos/src/tabs/pages/page-one/page-one.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,15 @@


<!-- Icons right of text -->
<ion-tabs tabs-only tabsLayout="icon-right" selectedIndex="0" color="light">
<ion-tabs tabs-only tabsLayout="icon-end" selectedIndex="0" color="light">
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root" tabBadge="4" tabBadgeStyle="secondary"></ion-tab>
</ion-tabs>


<!-- Icons left of text -->
<ion-tabs tabs-only tabsLayout="icon-left" color="dark">
<ion-tabs tabs-only tabsLayout="icon-start" color="dark">
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="1" tabBadgeStyle="danger"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
Expand Down
4 changes: 2 additions & 2 deletions demos/src/title/pages/page-one/page-one.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons end>
<button ion-button icon-right solid color="secondary">
<button ion-button icon-end solid color="secondary">
Help
<ion-icon name="help-circle"></ion-icon>
</button>
Expand All @@ -69,7 +69,7 @@
</button>
</ion-buttons>
<ion-buttons end>
<button ion-button icon-right outline color="secondary">
<button ion-button icon-end outline color="secondary">
Help
<ion-icon name="help-circle"></ion-icon>
</button>
Expand Down
4 changes: 2 additions & 2 deletions demos/src/toolbar/pages/page-one/page-one.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons end>
<button ion-button icon-right solid color="secondary">
<button ion-button icon-end solid color="secondary">
Help
<ion-icon name="help-circle"></ion-icon>
</button>
Expand All @@ -69,7 +69,7 @@
</button>
</ion-buttons>
<ion-buttons end>
<button ion-button icon-right outline color="secondary">
<button ion-button icon-end outline color="secondary">
Help
<ion-icon name="help-circle"></ion-icon>
</button>
Expand Down
4 changes: 2 additions & 2 deletions src/components/action-sheet/action-sheet-component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,13 @@ import { ViewController } from '../../navigation/view-controller';
'<div class="action-sheet-group">' +
'<div class="action-sheet-title" id="{{hdrId}}" *ngIf="d.title">{{d.title}}</div>' +
'<div class="action-sheet-sub-title" id="{{descId}}" *ngIf="d.subTitle">{{d.subTitle}}</div>' +
'<button ion-button="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [attr.icon-left]="b.icon ? \'\' : null" [ngClass]="b.cssClass">' +
'<button ion-button="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [attr.icon-start]="b.icon ? \'\' : null" [ngClass]="b.cssClass">' +
'<ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon>' +
'{{b.text}}' +
'</button>' +
'</div>' +
'<div class="action-sheet-group" *ngIf="d.cancelButton">' +
'<button ion-button="action-sheet-button" (click)="click(d.cancelButton)" class="action-sheet-cancel disable-hover" [attr.icon-left]="d.cancelButton.icon ? \'\' : null" [ngClass]="d.cancelButton.cssClass">' +
'<button ion-button="action-sheet-button" (click)="click(d.cancelButton)" class="action-sheet-cancel disable-hover" [attr.icon-start]="d.cancelButton.icon ? \'\' : null" [ngClass]="d.cancelButton.cssClass">' +
'<ion-icon [name]="d.cancelButton.icon" *ngIf="d.cancelButton.icon" class="action-sheet-icon"></ion-icon>' +
'{{d.cancelButton.text}}' +
'</button>' +
Expand Down
8 changes: 4 additions & 4 deletions src/components/alert/alert.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ $alert-ios-radio-min-width: 30px !default;
$alert-ios-radio-icon-top: -7px !default;

/// @prop - Left of the icon in the radio alert
$alert-ios-radio-icon-left: 7px !default;
$alert-ios-radio-icon-start: 7px !default;

/// @prop - Width of the icon in the radio alert
$alert-ios-radio-icon-width: 6px !default;
Expand Down Expand Up @@ -193,7 +193,7 @@ $alert-ios-checkbox-background-color-on: color($colors-ios, primary) !def
$alert-ios-checkbox-icon-top: 4px !default;

/// @prop - Left of the icon in the checkbox alert
$alert-ios-checkbox-icon-left: 7px !default;
$alert-ios-checkbox-icon-start: 7px !default;

/// @prop - Width of the icon in the checkbox alert
$alert-ios-checkbox-icon-width: 4px !default;
Expand Down Expand Up @@ -351,7 +351,7 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default;
.alert-ios [aria-checked=true] .alert-radio-inner {
position: absolute;
top: $alert-ios-radio-icon-top;
left: $alert-ios-radio-icon-left;
left: $alert-ios-radio-icon-start;

width: $alert-ios-radio-icon-width;
height: $alert-ios-radio-icon-height;
Expand Down Expand Up @@ -419,7 +419,7 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default;
.alert-ios [aria-checked=true] .alert-checkbox-inner {
position: absolute;
top: $alert-ios-checkbox-icon-top;
left: $alert-ios-checkbox-icon-left;
left: $alert-ios-checkbox-icon-start;

width: $alert-ios-checkbox-icon-width;
height: $alert-ios-checkbox-icon-height;
Expand Down
8 changes: 4 additions & 4 deletions src/components/alert/alert.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ $alert-md-radio-border-color-on: $alert-md-button-text-color !defau
$alert-md-radio-icon-top: 2px !default;

/// @prop - Left of the icon in the alert radio
$alert-md-radio-icon-left: 2px !default;
$alert-md-radio-icon-start: 2px !default;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@AmitMY this variable value is not longer aligned with the rest of scss variables. the same applies many times

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@manucorporat You have the eyes like a hawk :)
Fixed


/// @prop - Width of the icon in the alert radio
$alert-md-radio-icon-width: 8px !default;
Expand Down Expand Up @@ -223,7 +223,7 @@ $alert-md-checkbox-border-color-on: $alert-md-button-text-color !defau
$alert-md-checkbox-icon-top: 0 !default;

/// @prop - Left of the icon in the checkbox alert
$alert-md-checkbox-icon-left: 3px !default;
$alert-md-checkbox-icon-start: 3px !default;

/// @prop - Width of the icon in the checkbox alert
$alert-md-checkbox-icon-width: 6px !default;
Expand Down Expand Up @@ -373,7 +373,7 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
.alert-md .alert-radio-inner {
position: absolute;
top: $alert-md-radio-icon-top;
left: $alert-md-radio-icon-left;
left: $alert-md-radio-icon-start;

width: $alert-md-radio-icon-width;
height: $alert-md-radio-icon-height;
Expand Down Expand Up @@ -449,7 +449,7 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
.alert-md [aria-checked=true] .alert-checkbox-inner {
position: absolute;
top: $alert-md-checkbox-icon-top;
left: $alert-md-checkbox-icon-left;
left: $alert-md-checkbox-icon-start;

width: $alert-md-checkbox-icon-width;
height: $alert-md-checkbox-icon-height;
Expand Down
8 changes: 4 additions & 4 deletions src/components/alert/alert.wp.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ $alert-wp-radio-border-color: $input-wp-border-color !default;
$alert-wp-radio-icon-top: 2px !default;

/// @prop - Left of the icon in the radio alert
$alert-wp-radio-icon-left: 2px !default;
$alert-wp-radio-icon-start: 2px !default;

/// @prop - Width of the icon in the radio alert
$alert-wp-radio-icon-width: 8px !default;
Expand Down Expand Up @@ -218,7 +218,7 @@ $alert-wp-checkbox-background-on: color($colors-wp, primary) !defau
$alert-wp-checkbox-icon-top: -2px !default;

/// @prop - Left of the icon in the checkbox alert
$alert-wp-checkbox-icon-left: 3px !default;
$alert-wp-checkbox-icon-start: 3px !default;

/// @prop - Width of the icon in the checkbox alert
$alert-wp-checkbox-icon-width: 6px !default;
Expand Down Expand Up @@ -373,7 +373,7 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default;
.alert-wp .alert-radio-inner {
position: absolute;
top: $alert-wp-radio-icon-top;
left: $alert-wp-radio-icon-left;
left: $alert-wp-radio-icon-start;
display: none;

width: $alert-wp-radio-icon-width;
Expand Down Expand Up @@ -451,7 +451,7 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default;
.alert-wp [aria-checked=true] .alert-checkbox-inner {
position: absolute;
top: $alert-wp-checkbox-icon-top;
left: $alert-wp-checkbox-icon-left;
left: $alert-wp-checkbox-icon-start;

width: $alert-wp-checkbox-icon-width;
height: $alert-wp-checkbox-icon-height;
Expand Down
16 changes: 14 additions & 2 deletions src/components/button/button-icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,30 @@
pointer-events: none;
}

[icon-left] ion-icon {
[icon-left] ion-icon, // @deprecated
[icon-start] ion-icon {
@include button-icon;

padding-right: .3em;
}

[icon-right] ion-icon {
[icon-right] ion-icon, // @deprecated
[icon-end] ion-icon {
@include button-icon;

padding-left: .4em;
}

[dir="rtl"] [icon-start] ion-icon {
padding-left: .4em;
padding-right: initial;
}

[dir="rtl"] [icon-end] ion-icon {
padding-right: .3em;
padding-left: initial;
}

.button[icon-only] {
padding: 0;

Expand Down
4 changes: 2 additions & 2 deletions src/components/button/button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,12 @@ import { isTrueProperty } from '../../util/util';
* <button ion-button round outline>Outline + Round</button>
*
* <!-- Icons -->
* <button ion-button icon-left>
* <button ion-button icon-start>
* <ion-icon name="star"></ion-icon>
* Left Icon
* </button>
*
* <button ion-button icon-right>
* <button ion-button icon-end>
* Right Icon
* <ion-icon name="star"></ion-icon>
* </button>
Expand Down
4 changes: 2 additions & 2 deletions src/components/button/test/block/pages/page-one/page-one.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
</p>

<p>
<a ion-button block href="#" icon-left><ion-icon name="help-circle"></ion-icon> a[ion-button][block] icon</a>
<button ion-button block icon-left><ion-icon name="help-circle"></ion-icon> button[ion-button][block] icon</button>
<a ion-button block href="#" icon-start><ion-icon name="help-circle"></ion-icon> a[ion-button][block] icon</a>
<button ion-button block icon-start><ion-icon name="help-circle"></ion-icon> button[ion-button][block] icon</button>
</p>

<p>
Expand Down
4 changes: 2 additions & 2 deletions src/components/button/test/full/pages/page-one/page-one.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@
</p>

<p>
<a ion-button full href="#" icon-left>
<a ion-button full href="#" icon-start>
<ion-icon name="help-circle"></ion-icon>
a[ion-button][full] + icon
</a>
<button ion-button full icon-left>
<button ion-button full icon-start>
<ion-icon name="help-circle"></ion-icon>
button[ion-button][full] + icon
</button>
Expand Down
24 changes: 12 additions & 12 deletions src/components/button/test/icons/pages/page-one/page-one.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,22 @@
<ion-content padding>

<div>
<button ion-button icon-left>
<button ion-button icon-start>
<ion-icon name="home"></ion-icon>
Left Icon
</button>
<a ion-button icon-left>
<a ion-button icon-start>
<ion-icon name="home"></ion-icon>
Left Icon
</a>
</div>

<div>
<button ion-button icon-right>
<button ion-button icon-end>
Right Icon
<ion-icon name="star"></ion-icon>
</button>
<a ion-button icon-right>
<a ion-button icon-end>
Right Icon
<ion-icon name="star"></ion-icon>
</a>
Expand All @@ -41,22 +41,22 @@
</div>

<div>
<button ion-button large icon-left>
<button ion-button large icon-start>
<ion-icon name="help-circle"></ion-icon>
Left, Large
</button>
<a ion-button large icon-left>
<a ion-button large icon-start>
<ion-icon name="help-circle"></ion-icon>
Left, Large
</a>
</div>

<div>
<button ion-button large icon-right>
<button ion-button large icon-end>
Right, Large
<ion-icon name="settings"></ion-icon>
</button>
<a ion-button large icon-right>
<a ion-button large icon-end>
Right, Large
<ion-icon name="settings"></ion-icon>
</a>
Expand All @@ -72,22 +72,22 @@
</div>

<div>
<button ion-button small icon-left>
<button ion-button small icon-start>
<ion-icon name="checkmark"></ion-icon>
Left, Small
</button>
<a ion-button small icon-left>
<a ion-button small icon-start>
<ion-icon name="checkmark"></ion-icon>
Left, Small
</a>
</div>

<div>
<button ion-button small icon-right>
<button ion-button small icon-end>
Right, Small
<ion-icon name="arrow-forward"></ion-icon>
</button>
<a ion-button small icon-right>
<a ion-button small icon-end>
Right, Small
<ion-icon name="arrow-forward"></ion-icon>
</a>
Expand Down
Loading