fix(rtl): add icon-start and icon-end attributes (#11737)

* feat(icon): add start/end * fix(icon): add all relevant deprecations * fix(deprecation): add deprecation to missing selector * revert(tests): revert icon-start/end from tests
ionic-team · Jun 2, 2017 · a40b872 · a40b872
1 parent 57dc22d
commit a40b872
Show file tree

Hide file tree

Showing 24 changed files with 98 additions and 63 deletions.
diff --git a/demos/src/button/pages/page-one/page-one.html b/demos/src/button/pages/page-one/page-one.html
@@ -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>

diff --git a/demos/src/item-sliding/pages/page-one/page-one.html b/demos/src/item-sliding/pages/page-one/page-one.html
@@ -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

diff --git a/demos/src/loading/pages/page-one/page-one.html b/demos/src/loading/pages/page-one/page-one.html
@@ -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>

diff --git a/demos/src/navbar/pages/page-one/page-one.html b/demos/src/navbar/pages/page-one/page-one.html
@@ -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>
@@ -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>

diff --git a/demos/src/tabs/pages/page-one/page-one.html b/demos/src/tabs/pages/page-one/page-one.html
@@ -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>

diff --git a/demos/src/title/pages/page-one/page-one.html b/demos/src/title/pages/page-one/page-one.html
@@ -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>
@@ -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>

diff --git a/demos/src/toolbar/pages/page-one/page-one.html b/demos/src/toolbar/pages/page-one/page-one.html
@@ -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>
@@ -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>

diff --git a/src/components/action-sheet/action-sheet-component.ts b/src/components/action-sheet/action-sheet-component.ts
@@ -22,13 +22,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="cancelButton">' +
-          '<button ion-button="action-sheet-button" (click)="click(cancelButton)" class="action-sheet-cancel disable-hover" [attr.icon-left]="cancelButton.icon ? \'\' : null" [ngClass]="cancelButton.cssClass">' +
+          '<button ion-button="action-sheet-button" (click)="click(cancelButton)" class="action-sheet-cancel disable-hover" [attr.icon-start]="cancelButton.icon ? \'\' : null" [ngClass]="cancelButton.cssClass">' +
             '<ion-icon [name]="cancelButton.icon" *ngIf="cancelButton.icon" class="action-sheet-icon"></ion-icon>' +
             '{{cancelButton.text}}' +
           '</button>' +

diff --git a/src/components/alert/alert.ios.scss b/src/components/alert/alert.ios.scss
@@ -193,8 +193,10 @@ $alert-ios-radio-min-width:                     30px !default;
 /// @prop - Top of the icon in the radio alert
 $alert-ios-radio-icon-top:                      -7px !default;
 
-/// @prop - Left of the icon in the radio alert
+// deprecated
 $alert-ios-radio-icon-left:                     7px !default;
+/// @prop - Start of the icon in the radio alert
+$alert-ios-radio-icon-start:                    $alert-ios-radio-icon-left !default;
 
 /// @prop - Width of the icon in the radio alert
 $alert-ios-radio-icon-width:                    6px !default;
@@ -277,8 +279,10 @@ $alert-ios-checkbox-background-color-on:        color($colors-ios, primary) !def
 /// @prop - Top of the icon in the checkbox alert
 $alert-ios-checkbox-icon-top:                   4px !default;
 
-/// @prop - Left of the icon in the checkbox alert
+// deprecated
 $alert-ios-checkbox-icon-left:                  7px !default;
+/// @prop - Start of the icon in the checkbox alert
+$alert-ios-checkbox-icon-start:                 $alert-ios-checkbox-icon-left !default;
 
 /// @prop - Width of the icon in the checkbox alert
 $alert-ios-checkbox-icon-width:                 4px !default;
@@ -446,7 +450,7 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // -----------------------------------------
 
 .alert-ios [aria-checked=true] .alert-radio-inner {
-  @include position($alert-ios-radio-icon-top, null, null, $alert-ios-radio-icon-left);
+  @include position($alert-ios-radio-icon-top, null, null, $alert-ios-radio-icon-start);
 
   position: absolute;
 
@@ -519,7 +523,7 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // -----------------------------------------
 
 .alert-ios [aria-checked=true] .alert-checkbox-inner {
-  @include position($alert-ios-checkbox-icon-top, null, null, $alert-ios-checkbox-icon-left);
+  @include position($alert-ios-checkbox-icon-top, null, null, $alert-ios-checkbox-icon-start);
 
   position: absolute;
 

diff --git a/src/components/alert/alert.md.scss b/src/components/alert/alert.md.scss
@@ -249,8 +249,10 @@ $alert-md-radio-border-color-on:              $alert-md-button-text-color !defau
 /// @prop - Top of the icon in the alert radio
 $alert-md-radio-icon-top:                     2px !default;
 
-/// @prop - Left of the icon in the alert radio
+// deprecated
 $alert-md-radio-icon-left:                    2px !default;
+/// @prop - Start of the icon in the radio alert
+$alert-md-radio-icon-start:                   $alert-md-radio-icon-left !default;
 
 /// @prop - Width of the icon in the alert radio
 $alert-md-radio-icon-width:                   8px !default;
@@ -323,8 +325,10 @@ $alert-md-checkbox-border-color-on:           $alert-md-button-text-color !defau
 /// @prop - Top of the icon in the checkbox alert
 $alert-md-checkbox-icon-top:                  0 !default;
 
-/// @prop - Left of the icon in the checkbox alert
+// deprecated
 $alert-md-checkbox-icon-left:                 3px !default;
+/// @prop - Start of the icon in the checkbox alert
+$alert-md-checkbox-icon-start:                $alert-md-checkbox-icon-left !default;
 
 /// @prop - Width of the icon in the checkbox alert
 $alert-md-checkbox-icon-width:                6px !default;
@@ -481,7 +485,7 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 // ---------------------------------------------------
 
 .alert-md .alert-radio-inner {
-  @include position($alert-md-radio-icon-top, null, null, $alert-md-radio-icon-left);
+  @include position($alert-md-radio-icon-top, null, null, $alert-md-radio-icon-start);
   @include border-radius($alert-md-radio-icon-border-radius);
 
   position: absolute;
@@ -559,7 +563,7 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 }
 
 .alert-md [aria-checked=true] .alert-checkbox-inner {
-  @include position($alert-md-checkbox-icon-top, null, null, $alert-md-checkbox-icon-left);
+  @include position($alert-md-checkbox-icon-top, null, null, $alert-md-checkbox-icon-start);
 
   position: absolute;
 

diff --git a/src/components/alert/alert.wp.scss b/src/components/alert/alert.wp.scss
@@ -262,8 +262,10 @@ $alert-wp-radio-border-color:                  $input-wp-border-color !default;
 /// @prop - Top of the icon in the radio alert
 $alert-wp-radio-icon-top:                      2px !default;
 
-/// @prop - Left of the icon in the radio alert
+// deprecated
 $alert-wp-radio-icon-left:                     2px !default;
+/// @prop - Start of the icon in the radio alert
+$alert-wp-radio-icon-start:                    $alert-wp-radio-icon-left !default;
 
 /// @prop - Width of the icon in the radio alert
 $alert-wp-radio-icon-width:                    8px !default;
@@ -328,8 +330,10 @@ $alert-wp-checkbox-background-on:              color($colors-wp, primary) !defau
 /// @prop - Top of the icon in the checkbox alert
 $alert-wp-checkbox-icon-top:                   -2px !default;
 
-/// @prop - Left of the icon in the checkbox alert
+// deprecated
 $alert-wp-checkbox-icon-left:                  3px !default;
+/// @prop - Start of the icon in the checkbox alert
+$alert-wp-checkbox-icon-start:                 $alert-wp-checkbox-icon-left !default;
 
 /// @prop - Width of the icon in the checkbox alert
 $alert-wp-checkbox-icon-width:                 6px !default;
@@ -495,7 +499,7 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 // ---------------------------------------------------
 
 .alert-wp .alert-radio-inner {
-  @include position($alert-wp-radio-icon-top, null, null, $alert-wp-radio-icon-left);
+  @include position($alert-wp-radio-icon-top, null, null, $alert-wp-radio-icon-start);
   @include border-radius($alert-wp-radio-icon-border-radius);
 
   position: absolute;
@@ -575,7 +579,7 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-wp [aria-checked=true] .alert-checkbox-inner {
-  @include position($alert-wp-checkbox-icon-top, null, null, $alert-wp-checkbox-icon-left);
+  @include position($alert-wp-checkbox-icon-top, null, null, $alert-wp-checkbox-icon-start);
 
   position: absolute;
 

diff --git a/src/components/button/button-icon.scss b/src/components/button/button-icon.scss
@@ -11,13 +11,15 @@
   pointer-events: none;
 }
 
-[icon-left] ion-icon {
+[icon-left] ion-icon, // deprecated
+[icon-start] ion-icon {
   @include button-icon;
 
   @include padding-horizontal(null, .3em);
 }
 
-[icon-right] ion-icon {
+[icon-right] ion-icon, // deprecated
+[icon-end] ion-icon {
   @include button-icon;
 
   @include padding-horizontal(.4em, null);

diff --git a/src/components/button/button.ts b/src/components/button/button.ts
@@ -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>

diff --git a/src/components/item/item-sliding.scss b/src/components/item/item-sliding.scss
@@ -51,7 +51,8 @@ ion-item-options .button {
   box-sizing: content-box;
 }
 
-ion-item-options:not([icon-left]) .button:not([icon-only]) {
+ion-item-options:not([icon-left]) .button:not([icon-only]), // deprecated
+ion-item-options:not([icon-start]) .button:not([icon-only]) {
   .button-inner {
     flex-direction: column;
   }

diff --git a/src/components/item/item-sliding.ts b/src/components/item/item-sliding.ts
@@ -91,11 +91,11 @@ const enum SlidingState {
  * ### Button Layout
  * If an icon is placed with text in the option button, by default it will
  * display the icon on top of the text. This can be changed to display the icon
- * to the left of the text by setting `icon-left` as an attribute on the
+ * to the left of the text by setting `icon-start` as an attribute on the
  * `<ion-item-options>` element.
  *
  * ```html
- * <ion-item-options icon-left>
+ * <ion-item-options icon-start>
  *    <button ion-button (click)="archive(item)">
  *      <ion-icon name="archive"></ion-icon>
  *      Archive

diff --git a/src/components/tabs/tabs.ios.scss b/src/components/tabs/tabs.ios.scss
@@ -106,14 +106,18 @@ $tabs-ios-tab-icon-size:            30px !default;
   vertical-align: top;
 }
 
-.tabs-ios[tabsLayout=icon-right] .tab-button .tab-button-text,
-.tabs-ios[tabsLayout=icon-left] .tab-button .tab-button-text {
+.tabs-ios[tabsLayout=icon-right] .tab-button .tab-button-text, // deprecated
+.tabs-ios[tabsLayout=icon-left] .tab-button .tab-button-text, // deprecated
+.tabs-ios[tabsLayout=icon-end] .tab-button .tab-button-text,
+.tabs-ios[tabsLayout=icon-start] .tab-button .tab-button-text {
   font-size: 1.4rem;
   line-height: 1.1;
 }
 
-.tabs-ios[tabsLayout=icon-right] .tab-button ion-icon,
-.tabs-ios[tabsLayout=icon-left] .tab-button ion-icon {
+.tabs-ios[tabsLayout=icon-right] .tab-button ion-icon, // deprecated
+.tabs-ios[tabsLayout=icon-left] .tab-button ion-icon, // deprecated
+.tabs-ios[tabsLayout=icon-end] .tab-button ion-icon,
+.tabs-ios[tabsLayout=icon-start] .tab-button ion-icon {
   min-width: 24px;
   height: 26px;
 

diff --git a/src/components/tabs/tabs.md.scss b/src/components/tabs/tabs.md.scss
@@ -90,14 +90,18 @@ $tabs-md-tab-text-transition:                 transform .3s ease-in-out !default
 /// @prop - Transform for the active tab button icon when the layout is icon-top, icon-only, or title-only
 $tabs-md-tab-icon-transform-active:           translate3d(0, -2px, 0) !default;
 
-/// @prop - Transform for the active tab button icon when the layout is icon-right
+// deprecated
 $tabs-md-tab-icon-right-transform-active:     translate3d(2px, 0, 0) !default;
+/// @prop - Transform for the active tab button icon when the layout is icon-end
+$tabs-md-tab-icon-end-transform-active:       $tabs-md-tab-icon-right-transform-active !default;
 
 /// @prop - Transform for the active tab button icon when the layout is icon-bottom
 $tabs-md-tab-icon-bottom-transform-active:    translate3d(0, 2px, 0) !default;
 
-/// @prop - Transform for the active tab button icon when the layout is icon-left
+// deprecated
 $tabs-md-tab-icon-left-transform-active:      translate3d(-2px, 0, 0) !default;
+/// @prop - Transform for the active tab button icon when the layout is icon-start
+$tabs-md-tab-icon-start-transform-active:     $tabs-md-tab-icon-left-transform-active !default;
 
 /// @prop - Transform origin for the tab button text
 $tabs-md-tab-icon-transform-origin:           50% 150% !default;
@@ -190,19 +194,21 @@ $tabs-md-tab-icon-size:                       2.4rem !default;
   transform: $tabs-md-tab-icon-transform-active;
 }
 
-// Tab layout: icon-right
-.tabs-md[tabsLayout=icon-right] .tab-button[aria-selected=true] .tab-button-icon {
-  transform: $tabs-md-tab-icon-right-transform-active;
+// Tab layout: icon-end
+.tabs-md[tabsLayout=icon-right] .tab-button[aria-selected=true] .tab-button-icon, // deprecated
+.tabs-md[tabsLayout=icon-end] .tab-button[aria-selected=true] .tab-button-icon {
+  transform: $tabs-md-tab-icon-end-transform-active;
 }
 
 // Tab layout: icon-bottom
 .tabs-md[tabsLayout=icon-bottom] .tab-button[aria-selected=true] .tab-button-icon {
   transform: $tabs-md-tab-icon-bottom-transform-active;
 }
 
-// Tab layout: icon-left
-.tabs-md[tabsLayout=icon-left] .tab-button[aria-selected=true] .tab-button-icon {
-  transform: $tabs-md-tab-icon-left-transform-active;
+// Tab layout: icon-start
+.tabs-md[tabsLayout=icon-left] .tab-button[aria-selected=true] .tab-button-icon, // deprecated
+.tabs-md[tabsLayout=icon-start] .tab-button[aria-selected=true] .tab-button-icon {
+  transform: $tabs-md-tab-icon-start-transform-active;
 }