Ionic 4.0.0 RTL issues

This issue is to collect and keep track of RTL bugs vs. master so we can make sure to properly update and fix them.

Below are:

• a list of some utilities presenting issues in RC.0,
• and a list of components with tests included in the test suite.

Legend

Symbol	Description
✅	Tested. Found compliant.
☑️	Tested. Initially not compliant or Regression. Solved by PR specified in description.
❓	Not necessarily an issue, or not a core-specific issue, or design decision.
⚠️	Not tested. Help needed.
❌	Tested. Not completely compliant. Should list the defects.

Fixed issues

CSS Utilities

• ✅ Text Alignment: text-start, text-end, text-justify, & their responsive versions
• ☑️ Float Elements: float-start, float-end, & their responsive versions (regression: https://github.com/ionic-team/ionic/issues/17012#issuecomment-455384111) (PR #18315 solves issue in Chrome)
• ✅ Element Padding: padding-start, padding-end
• ✅ Element Margin: margin-start, margin-end
• ✅ Flex Container Properties: justify-content-start, justify-content-end

Grid

• ✅ Offsetting columns (iOS/MD) (PR: #16702)
• ✅ Push and pull (iOS/MD) (PR: #16702)

Components

• ✅ action-sheet
• alert:
  • ✅ scroller with radio in MD: position correctly (see https://gyazo.com/d1602f045193380be6d02432a7e61878)
• ✅ anchor
• ✅ avatar
• ✅ badge
• ✅ button
  • ✅ slotted icon in button in iOS
  • ✅ slotted icon in button in MD
• ✅ buttons
• ✅ card
• ✅ card-header
• ✅ checkbox
• ✅ chip
• ✅ content
• datetime
  • ☑️ picker in iOS/MD: fix start/end columns’ horizontal positioning when there are 2 or 3 picker columns (PR #18339)
  • ☑️ with floating or stacked label: the datetime text should stay in the document flow (regression) (PR #18340)
  • ✅ picker in iOS/MD: keep the order of columns as in LTR when using time and/or DD/MM/YYYY date format (see #16294) (PR: #17018)
• fab
  • ☑️ horizontal position: position ion-fab correctly (PR #18325)
• ✅ fab-button
• ✅ footer
• ✅ grid
  • ✅ col offsets, push, and pulls: fix offsets, pushs and pulls (PR: #16702)
• ✅ header
• ✅ icon (PR #17196)
  • ✅ arrow icons in iOS: automatic invert
  • ✅ arrow icons in MD: automatic invert
  • ✅ flip-rtl: add property to flip icons
  • ✅ detail-icon: use correct direction (“<” instead of “>”) (see #14958) (PR: #17016 REVERTED) (PR #17196)
• ✅ img
• ✅ infinite-scroll
• ✅ input (specific floating label issues are listed in the relevant components, and the issue with label and input vertical alignment is not specific to RTL)
• ✅ item (specific select, range, and floating label issues in relevant components)
• item sliding
  • ☑️ swiping direction: fix swiping direction & buttons positions (#14328) (#18366)
• label
  • ☑️ position=“floating” in iOS/MD: fix horizontal floating position relative to ion-item (PR #18315)
• ✅ list
• ✅ loading
• menu
  • ☑️ outer shadow in iOS/MD: invert shadows (https://github.com/ionic-team/ionic/issues/17012#issuecomment-456685725) (PR #17383)
  • ❌ scrollbar in long menu: same issue than AlertController (https://github.com/ionic-team/ionic/issues/17012#issuecomment-454978489 / https://github.com/ionic-team/ionic/issues/17012#issuecomment-456685725 / https://gyazo.com/1d3033c073c854d9e09c89d934ecf50d
• ✅ menu-button
• ✅ modal
• ✅ nav
• ✅ nav-pop
• ✅ nav-push
• ✅ nav-set-root
• ✅ note
• ✅ picker
• popover
  • ✅ position in MD: position properly (PR: #16745)
  • ☑️ enter animation in MD: invert animation direction (PRs #17382 + #17645)
• progress-bar
  • ☑️ default and reverse directions: both are the same; one of them should be inverted (PR #17464)
  • ☑️ indeterminate / buffer: fix animations (PR #17464)
• ✅ radio
• ✅ radio-group
• range
  • ☑️ active range section in iOS/MD: fix position (PR #17384)
  • ☑️ knobs in iOS/MD: fix position (PR #17384)
  • ☑️ pins in MD: fix (background) position (PR #18321)
• ✅ refresher
• ✅ reorder-group
• ✅ ripple-effect
• searchbar (#15884)
  • ✅ cancel icon in MD: invert? Maybe not since the cancelButtonIcon property allows setting own icon? ➡️icon is now inverted thanks to PR #17196
  • ☑️ cancel icon in MD: invert horizontal position (PR #18325)
  • ☑️ clear icon in iOS: invert horizontal position (PR #18325)
  • ☑️ clear icon in MD: invert horizontal position (PR #18325)
  • ☑️ search icon in iOS: invert horizontal position (PR #18325)
  • ☑️ search icon in MD: invert horizontal position (PR #18325)
• segment
  • ☑️ first and last buttons in iOS: fix borders (PR #18326)
  • ❌ border in Safari: border width is not switching
• select
  • ☑️ select icon in iOS: fix position of the inner element (#18315)
  • ✅ AlertController interface: same issues than alert component
• ✅ skeleton-text
• ✅ slides
• ✅ spinner
• ✅ split-pane
• tab-bar
  • ☑️ badges: invert horizontal position (PR #18325 solves issue in Chrome)
• ✅ tabs
• ✅ text
• ✅ textarea (label and input vertical alignment issue is not specific to RTL)
• ✅ thumbnail
• ✅ toast
• toggle
  • ✅ swipe gesture: fix gesture direction
  • ☑️ checked toggle in iOS / MD: the handle is off (regression:
  • ❌ swipe gesture: fix gesture direction in Safari https://gyazo.com/b93302e08a9c43f312899736ab26717b / https://github.com/ionic-team/ionic/issues/17012#issuecomment-455076497) (PR #18325 fixes issue in Chrome)
  • ☑️ swipe end in iOS mode: before gesture end, the handle looks off and goes beyond the left side (PR #18325 fixes issue in Chrome)
• toolbar (#15357) (PR #17196)
  • ✅ back button in iOS: use correct direction (“>” instead of “<”)
  • ✅ back button in MD: use correct direction (“->” instead of “<-”)
• ✅ virtual-scroll
• swipe to go back
  • gesture direction (https://github.com/ionic-team/ionic/issues/17012#issuecomment-494659630)

Existing Issues as of 4.4.1

• item-divider
  • ❌ slots margins in MD: in both slot="start" and slot="end", a small 2px margin appears on one side in LTR, but not on the opposite side in RTL (see https://i.imgur.com/4W5TFs2.png for an illustration of the problem: the box model shows the slotted ion-button))
• menu
  • animation is not rtl-aware: https://github.com/ionic-team/ionic-framework/issues/19489
• tab-bar
  • ❌ badges in Safari: invert horizontal position
• text
  • ❌ Float Elements: float-start, float-end, & their responsive versions in Safari

Contributing

Please help with the untested components, or double-check the tested ones if you feel like it. Thank you for the contribution anyway!

If you’re not familiar with the included test suite:

1. Fork the Ionic repo;
2. Use the master branch;
3. Setup your local copy;
4. Run the test suite locally;
5. When you navigate to the component you want to test, you can add ?rtl=true to the url in order to check the RTL version;
6. Submit a comment with the issue.

See the contributing documentation for more information.

You can also test your own app using @ionic/angular@dev

[brandyscarney]

Fixes!

I’ve merged the following fixes for RTL that will make it into the release tomorrow (4.4.1):

• floating/stacked labels are now positioning properly
• range pin has the arrow on the bottom instead of on the right like previously
• searchbar buttons are positioning properly
• tab badge is positioning properly (in Chrome only at the moment)
• fab buttons are positioning properly
• toggle icon is in correct place and not going out of bounds
• segment border is flipped so that it targets the proper first and last buttons in iOS

Latest Dev Build

I released a dev build if you’d like to try it sooner: 4.5.0-dev.201905212141.24e9cf0

Known Bugs

I went through all of this list and I found the following are absolutely still bugs:

• tab-button badges (broken in Safari)
• item sliding direction
• button in item (slot end in item is broken by the margin-left unset, likely in the padding-horizontal mixin)
• datetime text is not aligning with the label

Need Verification

I did not get a chance to check the following:

• datetime multiple columns
• menu / menu-toggle

If anyone could please let me know if there is something I’ve missed or if you have done any debugging and might know where the problem is for some of these it would be very helpful. Thank you!

[Newbie012]

@abennouna Seems like your repo has solved most of my RTL issues (haven’t found a bug yet).