feat(RTL): better RTL support #11121
Conversation
…re the same in rtl
|
Can I get any comment on this? Am I doing something wrong? is this to be merged sometime, should I change anything? Should I split this into 5 separate PRs? |
new one is better for border case old one faced
| // Float | ||
| // -------------------------------------------------- | ||
|
|
||
| [pull-left], |
There was a problem hiding this comment.
Could we do pull-left, pull-right, pull-start, and pull-end here and make them work like the text-* attributes do? Or is there a reason not to?
There was a problem hiding this comment.
Done, moved to a separate PR: #11214
| padding-right: initial; | ||
| } | ||
|
|
||
| [dir="rtl"] [icon-right] ion-icon { |
There was a problem hiding this comment.
The same question as above with icon-*.
There was a problem hiding this comment.
That's gonna be a problem.
icon-left is for CSS, so when you do:
<button ion-button icon-left>
Button
<ion-icon name="chatbubbles"></ion-icon>
</button>
It doesn't move the icon to the left, just adds some wrong padding.
| @@ -8,6 +8,7 @@ $ionicons-font-path: $font-path !default; | |||
|
|
|||
| @import "ionicons-icons"; | |||
| @import "ionicons-variables"; | |||
| @import "~hail2u-scss-functions/string/_str-replace"; | |||
There was a problem hiding this comment.
I'm not sure about this for icons. I wonder if there is a better way to decide if the icon should or shouldn't be flipped on rtl. We're thinking maybe we could add some metadata to the icon itself and look at it that way? We need to discuss this more but maybe this could be split out from this PR for further discussion.
There was a problem hiding this comment.
Hmm.. ok
How about for starters, do:
ion-icon[area-label^="arrow"] { @extends [flip] } ?
To be honest, most of the icons don't matter, its just the arrows that are going the other way..
|
@AmitMY Yeah could you split this into separate PRs. It's easier to merge them and review them that way. 😄 |
|
@brandyscarney Thanks. |
Short description of what this resolves:
Changes proposed in this pull request:
text-startandtext-end. Work exactly the same onltr, but flips directions onrtl.This also avoids confusion, when doing
text-leftonrtlit means left, buttext-startmeans rightpull-rightandpull-left(bootstrap style naming) forfloat, and flipped on RTLicon-leftandicon-rightpaddingIonic Version: 3.x
Fixes:
Partially: #11115
Fully: #10685