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

[AmitMY]

TO BE MERGED AFTER #11342

Short description of what this resolves:

icons position on rtl

Changes proposed in this pull request:

• add icon-start and icon-end notations
• deprecate icon-left and icon-right
• replace in all core ionic files usage of icon-left and icon-right

Why not fully support icon-left and icon-right?

Because it is a css styling only, there will need to be use of float or dir which are both undesired, so the only remaining option is to deprecate the old way

Ionic Version: 3.x

[jlucfarias]

This is a good ideia but if someone need to set the icon always in left/right? I think that icon-left and icon-right should be keeped

[AmitMY]

@John-Luke I kept them exactly the same as their current bahvior. (which is not that great)
Do you think it will be OK to use float in this case? I just hate floating stuff and want another opinion before using it.

[AmitMY]

@brandyscarney Anything to fix here?

[brandyscarney]

@AmitMY So this is renaming icon-left to icon-start, icon-right to icon-end but it isn't a breaking change since the CSS styling to support the old way is still there. It looks good to me.

I don't think you need to introduce rearranging the icons using icon-left or icon-right in this PR. I'm sure it could be improved upon, but this is a good start. CC @manucorporat for approval.

[manucorporat]

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

[AmitMY]

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

[manucorporat]

same here! it is not aligned hahha sorry :D

and I think this is breaking change too, we want to avoid them:
what if we do:

// deprecated
$alert-left-label:            7px !default;
/// @prop - 
$alert-start-label:          $alert-left-label !default;

alert-label {
  left: $alert-start-label;
}

[AmitMY]

I am not sure we are looking at the same thing..
I did not change 'alert-left-label' at all.. this will come in a future RTL-alert PR, in some time

I will fix the alignment in about an hour. Anything else u can spot?

[brandyscarney]

@AmitMY Sorry he was just using that as an example variable. So basically if we rename:

$tabs-md-tab-icon-left-transform-active to $tabs-md-tab-icon-start-transform-active

(or any other variables) it will be considered a breaking change if any users are overriding these variables. It's an easy fix, sure, but it's still technically breaking and would prevent us from merging this until the 4.0 release. We're suggesting doing the following:

// deprecated
$tabs-md-tab-icon-left-transform-active:            translate3d(-2px, 0, 0) !default;

/// @prop - 
$tabs-md-tab-icon-start-transform-active:           $tabs-md-tab-icon-left-transform-active !default;

in-the-selector-the-variable-is-used {
  transform: $tabs-md-tab-icon-start-transform-active;
}

This would introduce *-start as the new variable (and it would be documented) but if they are using the *-left variable to override styles it would still be used. Does that make sense? 🙂

[AmitMY]

Oh ok.
I fixed the bad spacing, and added the deprecated variables. Anything else?

[AmitMY]

@manucorporat Anything else/approve?

[AmitMY]

Closing in favor of #11737