From a40b872975c679c96ba20de0b431f706b70ea408 Mon Sep 17 00:00:00 2001 From: Amit Moryossef Date: Fri, 2 Jun 2017 21:00:18 +0300 Subject: [PATCH] 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 --- demos/src/button/pages/page-one/page-one.html | 4 ++-- .../item-sliding/pages/page-one/page-one.html | 2 +- .../src/loading/pages/page-one/page-one.html | 2 +- demos/src/navbar/pages/page-one/page-one.html | 4 ++-- demos/src/tabs/pages/page-one/page-one.html | 4 ++-- demos/src/title/pages/page-one/page-one.html | 4 ++-- .../src/toolbar/pages/page-one/page-one.html | 4 ++-- .../action-sheet/action-sheet-component.ts | 4 ++-- src/components/alert/alert.ios.scss | 12 ++++++---- src/components/alert/alert.md.scss | 12 ++++++---- src/components/alert/alert.wp.scss | 12 ++++++---- src/components/button/button-icon.scss | 6 +++-- src/components/button/button.ts | 4 ++-- src/components/item/item-sliding.scss | 3 ++- src/components/item/item-sliding.ts | 4 ++-- src/components/tabs/tabs.ios.scss | 12 ++++++---- src/components/tabs/tabs.md.scss | 22 ++++++++++++------- src/components/tabs/tabs.scss | 18 ++++++++++----- src/components/tabs/tabs.ts | 2 +- src/components/tabs/tabs.wp.scss | 12 ++++++---- src/components/toolbar/toolbar.ios.scss | 4 ++-- src/components/toolbar/toolbar.md.scss | 4 ++-- src/components/toolbar/toolbar.wp.scss | 4 ++-- src/config/config.ts | 2 +- 24 files changed, 98 insertions(+), 63 deletions(-) diff --git a/demos/src/button/pages/page-one/page-one.html b/demos/src/button/pages/page-one/page-one.html index 8ffce86c9d2..96bd1f09662 100644 --- a/demos/src/button/pages/page-one/page-one.html +++ b/demos/src/button/pages/page-one/page-one.html @@ -39,12 +39,12 @@

Outlines

Icons

- - diff --git a/demos/src/item-sliding/pages/page-one/page-one.html b/demos/src/item-sliding/pages/page-one/page-one.html index 6a05e0f3ff6..505a804b18c 100644 --- 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 @@

{{login.name}}

- + diff --git a/demos/src/navbar/pages/page-one/page-one.html b/demos/src/navbar/pages/page-one/page-one.html index 1359b1b6c8d..c08dbcf33b5 100644 --- a/demos/src/navbar/pages/page-one/page-one.html +++ b/demos/src/navbar/pages/page-one/page-one.html @@ -55,7 +55,7 @@ Solid - @@ -69,7 +69,7 @@ - diff --git a/demos/src/tabs/pages/page-one/page-one.html b/demos/src/tabs/pages/page-one/page-one.html index 3fd33310a35..14c90b77454 100644 --- a/demos/src/tabs/pages/page-one/page-one.html +++ b/demos/src/tabs/pages/page-one/page-one.html @@ -41,7 +41,7 @@ - + @@ -49,7 +49,7 @@ - + diff --git a/demos/src/title/pages/page-one/page-one.html b/demos/src/title/pages/page-one/page-one.html index 1359b1b6c8d..c08dbcf33b5 100644 --- a/demos/src/title/pages/page-one/page-one.html +++ b/demos/src/title/pages/page-one/page-one.html @@ -55,7 +55,7 @@ Solid - @@ -69,7 +69,7 @@ - diff --git a/demos/src/toolbar/pages/page-one/page-one.html b/demos/src/toolbar/pages/page-one/page-one.html index 1359b1b6c8d..c08dbcf33b5 100644 --- a/demos/src/toolbar/pages/page-one/page-one.html +++ b/demos/src/toolbar/pages/page-one/page-one.html @@ -55,7 +55,7 @@ Solid - @@ -69,7 +69,7 @@ - diff --git a/src/components/action-sheet/action-sheet-component.ts b/src/components/action-sheet/action-sheet-component.ts index 7de66952c81..7cbb802ce6b 100644 --- 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'; '
' + '
{{d.title}}
' + '
{{d.subTitle}}
' + - '' + '
' + '
' + - '' + diff --git a/src/components/alert/alert.ios.scss b/src/components/alert/alert.ios.scss index 2baf340f602..75d83908aca 100644 --- 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 index 37cfb9d7627..3921b43d178 100644 --- 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 index 896aef0a32f..c20bf270ccc 100644 --- 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 index e9f8bc80efe..9a603ff14cc 100644 --- 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 index 115919432cf..787ddfc335d 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -42,12 +42,12 @@ import { isTrueProperty } from '../../util/util'; * * * - * * - * diff --git a/src/components/item/item-sliding.scss b/src/components/item/item-sliding.scss index 10ff2695de5..c705c2d2a4d 100644 --- 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 index 007f3ae8edc..9e35d704ab1 100644 --- 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 * `` element. * * ```html - * + * *