Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ionic 4.0.0 RTL issues #17012

Open
abennouna opened this issue Jan 9, 2019 · 111 comments

Comments

@abennouna
Copy link
Contributor

commented Jan 9, 2019

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: #17012 (comment)) (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:
  • 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)
  • label
    • ☑️ position="floating" in iOS/MD: fix horizontal floating position relative to ion-item (PR #18315)
  • list
  • loading
  • menu
  • 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)
  • 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
  • toolbar (#15357) (PR #17196)
    • back button in iOS: use correct direction (">" instead of "<")
    • back button in MD: use correct direction ("->" instead of "<-")
  • virtual-scroll

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)
  • item-sliding
    • ☑️ swiping direction: fix swiping direction & buttons positions (#14328) (#18366)
  • menu
  • ⚠️ menu-toggle
  • segment
    • border in Safari: border width is not switching
  • tab-bar
    • badges in Safari: invert horizontal position
  • toggle
    • swipe gesture: fix gesture direction in Safari
  • ⚠️ swipe-to-go-back
  • 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

@Newbie012

This comment has been minimized.

Copy link

commented Jan 10, 2019

Scroller inside <ion-select> on RTL isn't positioned correctly.
Demo - https://gyazo.com/d1602f045193380be6d02432a7e61878

@abennouna

This comment has been minimized.

Copy link
Contributor Author

commented Jan 10, 2019

Yes indeed, but I had a hard time debugging it to understand what's going on there... I'll just add it to the list then

@abennouna

This comment has been minimized.

Copy link
Contributor Author

commented Jan 10, 2019

@Newbie012 I noticed it's only the case with the AlertController interface, and in MD. Can you please verify?

@Newbie012

This comment has been minimized.

Copy link

commented Jan 10, 2019

@abennouna True

@abennouna

This comment has been minimized.

Copy link
Contributor Author

commented Jan 10, 2019

Thanks @Newbie012, added to the list under the alert component

@brandyscarney brandyscarney pinned this issue Jan 11, 2019

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Jan 11, 2019

I updated the original issue to include links to some of the open RTL issues. We can either keep those open for tracking or close them to track here.

@twinssbc

This comment has been minimized.

Copy link

commented Jan 13, 2019

@abennouna I notice that dir option is removed form ion-slides in v4 which is supposed to RTL when using slides component. May I know will it be added back or is there any alternative way to achieve it?

@abennouna

This comment has been minimized.

Copy link
Contributor Author

commented Jan 13, 2019

@twinssbc slides work in RTL mode out of the box as long as the document is in RTL. Are you referring to something else? PS: There is an issue though if you want to switch direction dynamically: you'd have to reload the document to keep swiper events working correctly

@abuassar

This comment has been minimized.

Copy link

commented Jan 13, 2019

@abennouna I would like to thank you for your effort in making sure that all RTL issues are fixed.
Jazakallahu Khairan

I just want to mention that items inside ion-item-divider in RTL has different margins with both slot="start" and slot="end" than in LTR

@abennouna

This comment has been minimized.

Copy link
Contributor Author

commented Jan 13, 2019

@abuassar 🤝don't mention it!

Good call! I see a 2px margin that disappears in RTL mode, only in MD. Can you confirm please?

@abennouna abennouna changed the title [WIP] Ionic 4 RC RTL issues Ionic 4 RC RTL issues Jan 13, 2019

@abuassar

This comment has been minimized.

Copy link

commented Jan 14, 2019

@abuassar 🤝don't mention it!

Good call! I see a 2px margin that disappears in RTL mode, only in MD. Can you confirm please?

It is not just 2px error, please check the following screen shots:

START uses slot="start"
END uses slot="end"
MIDDLE is without a slot

RTL
ionic4-rtl

LTR
ionic4-ltr

and here is how to recreate the issue
app.component.html:

https://gist.github.com/abuassar/bdee78a37e36cf1c5e7ddc506eed141d

@abuassar

This comment has been minimized.

Copy link

commented Jan 14, 2019

unfortunately I found the same issue with ion-item:

START uses slot="start"
END uses slot="end"
MIDDLE is without a slot

ion-item-issue

demo:
app.component.html
https://gist.github.com/abuassar/d957e7b6d5079cd7f30550c91b7c4617

@abennouna

This comment has been minimized.

Copy link
Contributor Author

commented Jan 14, 2019

@abuassar am I right to assume you're not using the latest master with PR #16987? I updated the issue description to explain the test context. Here's the current render of the issue in item-divider: https://i.imgur.com/4W5TFs2.png

@abuassar

This comment has been minimized.

Copy link

commented Jan 14, 2019

@abennouna you are right, I'm using rc1 as I thought it has the fix.

Would you please guide me how to use latest master with the said PR?

@abennouna

This comment has been minimized.

Copy link
Contributor Author

commented Jan 14, 2019

@abuassar I updated the issue description with the following in the "Contributing" part:

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

  1. Fork the Ionic repo;
  2. Use the rtl branch (or use the master branch and merge the PR #16987);
  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.

Please let me know if it's unclear.

@twinssbc

This comment has been minimized.

Copy link

commented Jan 14, 2019

@twinssbc slides work in RTL mode out of the box as long as the document is in RTL. Are you referring to something else? PS: There is an issue though if you want to switch direction dynamically: you'd have to reload the document to keep swiper events working correctly

@abennouna I can confirm that slides work in the default RTL mode, no extra option is required.

brandyscarney added a commit that referenced this issue Jan 15, 2019

@brandyscarney brandyscarney referenced this issue Jan 15, 2019

Merged

fix(alert): update styles for rtl #17129

6 of 6 tasks complete

brandyscarney added a commit that referenced this issue May 21, 2019

brandyscarney added a commit that referenced this issue May 21, 2019

fix(rtl): updates searchbar, fab and toggle icon positioning in rtl (#…
…18325)

- fixes tab badge (in Chrome)
- fixes searchbar buttons
- fixes fab positioning
- fixes toggle

references #17012

brandyscarney added a commit that referenced this issue May 21, 2019

brandyscarney added a commit that referenced this issue May 21, 2019

@brandyscarney

This comment has been minimized.

Copy link
Member

commented May 21, 2019

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!

@alaa-alshamy

This comment has been minimized.

Copy link

commented May 22, 2019

@brandyscarney
swiping to go back direction is wrong it should be reverse

this is very important issue i hope u can fix it with this release :)

@abennouna

This comment has been minimized.

Copy link
Contributor Author

commented May 22, 2019

@brandyscarney

Known Bugs

...

  • button in item (slot end in item is broken by the margin-left unset, likely in the padding-horizontal mixin)

FYI, I can't reproduce in the "item/buttons" test.

  • datetime text is not aligning with the label

--> PR #18340

Need Verification

I did not get a chance to check the following:

  • datetime multiple columns

Width still broken --> PR #18339

  • menu / menu-toggle

not sure about this one.

@brandyscarney

This comment has been minimized.

Copy link
Member

commented May 22, 2019

Awesome thank you @abennouna! I merged your fixes. 🙂

@brandyscarney

This comment has been minimized.

Copy link
Member

commented May 22, 2019

I'm not able to reproduce the following:

Float Elements: float-start, float-end, & their responsive versions (regression: #17012 (comment))

ltr rtl
localhost_3333_src_components_text_test_basic(Galaxy S5) localhost_3333_src_components_text_test_basic_rtl=true(Galaxy S5)
@abennouna

This comment has been minimized.

Copy link
Contributor Author

commented May 22, 2019

I'm not able to reproduce the following:

Float Elements: float-start, float-end, & their responsive versions (regression: #17012 (comment))

Sorry @brandyscarney you're right, I think I tested that before pulling from master 🤨🤦

@brandyscarney

This comment has been minimized.

Copy link
Member

commented May 22, 2019

Thanks @alaa-alshamy! I've added it to the issue. There won't be a fix for it in the release today as it still needs investigation, debugging and a solution found. 🙂

brandyscarney added a commit that referenced this issue May 22, 2019

merge release-4.4.1
* docs(process): update release process

* docs(fab-list): update the activated description (#18026)

* docs(breaking): add ionDrag event arguments change (#17989)

* docs(slides): add swiper prefix in animation usage (#18073)

* feat(searchbar): add disabled property (#17935)

closes #17921

* fix(reorder-group): remove required parameter for the complete method (#18084)

also updates documentation surrounding the reorder & infinite scroll

fixes #16302

* docs(components): update method and parameter descriptions (#18075)

* fix(datetime): default to current date when value is null (#18105)

fixes #18099

* docs(toolbar): fix end slot documentation (#18092)

* fix(item): use the global activated background for md ripple color (#16752)

fixes #16585

* fix(textarea): reposition textarea when keybard appears (#18098)

fixes #17847

* fix(button): apply round property to button sizes in iOS (#18125)

fixes #18108

* fix(): add prefixed transform for older versions of chrome (#18128)

fixes #17729

* fix(segment): decrease icon size on ios and stretch segment buttons to fill height (#17751)

fixes #17069

* fix(): sanitize components using innerHTML (#18083)

fixes #18065

* Release 4.3.1 (#18152) (#18154)

* fix(angular): support replaceUrl with angular <7.2 (#18106)

* fix(angular): support replaceUrl with angular <7.2

* run linter

* fix(): sanitize components using innerHTML (#18146)

* 4.3.1 (#18150)

* doc(loading): remove mention of undefined "content" property (#18126)

* feat(img): add ionImgWillLoad event and emit ionImgDidLoad when image is loaded (#18159)

- Adds `ionImgWillLoad` event that emits when the img src is set
- Moves the `ionImgDidLoad` event emit so that it happens when the image actually finishes loading

fixes #17652 closes #18161

* fix(toast): allow button-color CSS variable to be overridden (#18133)

fixes #18127

* fix(label): use primary color on focus for md input labels (#18183)

fixes #15602

* feat(item-sliding): add open method (#17964)

resolves #17899

* feat(menu-button): add css variables for padding (#18188)

fixes #18187

* feat(card): add button functionality (#17997)

closes #17773

* feat(textarea): add option to expand textarea as value changes (#16916)

* feat(textarea): add autoGrow - set height to scrollHeight

* change 1px to inherit, remove additional 4px

* feat(refresher): add pullFactor property to control speed (#16697)

closes #15425

* fix(input): clear on edit from inside native input (#17115)

fixes #17055

* test(angular): increase timeout for tab switch (#18221)

* 4.4.0

* Release 4.3.1 (#18152)

* fix(angular): support replaceUrl with angular <7.2 (#18106)

* fix(angular): support replaceUrl with angular <7.2

* run linter

* fix(): sanitize components using innerHTML (#18146)

* 4.3.1 (#18150)

* merge release-4.4.0

* docs(process): update release process

* docs(fab-list): update the activated description (#18026)

* docs(breaking): add ionDrag event arguments change (#17989)

* docs(slides): add swiper prefix in animation usage (#18073)

* feat(searchbar): add disabled property (#17935)

closes #17921

* fix(reorder-group): remove required parameter for the complete method (#18084)

also updates documentation surrounding the reorder & infinite scroll

fixes #16302

* docs(components): update method and parameter descriptions (#18075)

* fix(datetime): default to current date when value is null (#18105)

fixes #18099

* docs(toolbar): fix end slot documentation (#18092)

* fix(item): use the global activated background for md ripple color (#16752)

fixes #16585

* fix(textarea): reposition textarea when keybard appears (#18098)

fixes #17847

* fix(button): apply round property to button sizes in iOS (#18125)

fixes #18108

* fix(): add prefixed transform for older versions of chrome (#18128)

fixes #17729

* fix(segment): decrease icon size on ios and stretch segment buttons to fill height (#17751)

fixes #17069

* fix(): sanitize components using innerHTML (#18083)

fixes #18065

* Release 4.3.1 (#18152) (#18154)

* fix(angular): support replaceUrl with angular <7.2 (#18106)

* fix(angular): support replaceUrl with angular <7.2

* run linter

* fix(): sanitize components using innerHTML (#18146)

* 4.3.1 (#18150)

* doc(loading): remove mention of undefined "content" property (#18126)

* feat(img): add ionImgWillLoad event and emit ionImgDidLoad when image is loaded (#18159)

- Adds `ionImgWillLoad` event that emits when the img src is set
- Moves the `ionImgDidLoad` event emit so that it happens when the image actually finishes loading

fixes #17652 closes #18161

* fix(toast): allow button-color CSS variable to be overridden (#18133)

fixes #18127

* fix(label): use primary color on focus for md input labels (#18183)

fixes #15602

* feat(item-sliding): add open method (#17964)

resolves #17899

* feat(menu-button): add css variables for padding (#18188)

fixes #18187

* feat(card): add button functionality (#17997)

closes #17773

* feat(textarea): add option to expand textarea as value changes (#16916)

* feat(textarea): add autoGrow - set height to scrollHeight

* change 1px to inherit, remove additional 4px

* feat(refresher): add pullFactor property to control speed (#16697)

closes #15425

* fix(input): clear on edit from inside native input (#17115)

fixes #17055

* test(angular): increase timeout for tab switch (#18221)

* 4.4.0

* fix other merge conflict

* chore(): resolve conflicts from older hotifx

* Release 4.3.1 (#18152)

* fix(angular): support replaceUrl with angular <7.2 (#18106)

* fix(angular): support replaceUrl with angular <7.2

* run linter

* fix(): sanitize components using innerHTML (#18146)

* 4.3.1 (#18150)

* merge release-4.4.0

* docs(process): update release process

* docs(fab-list): update the activated description (#18026)

* docs(breaking): add ionDrag event arguments change (#17989)

* docs(slides): add swiper prefix in animation usage (#18073)

* feat(searchbar): add disabled property (#17935)

closes #17921

* fix(reorder-group): remove required parameter for the complete method (#18084)

also updates documentation surrounding the reorder & infinite scroll

fixes #16302

* docs(components): update method and parameter descriptions (#18075)

* fix(datetime): default to current date when value is null (#18105)

fixes #18099

* docs(toolbar): fix end slot documentation (#18092)

* fix(item): use the global activated background for md ripple color (#16752)

fixes #16585

* fix(textarea): reposition textarea when keybard appears (#18098)

fixes #17847

* fix(button): apply round property to button sizes in iOS (#18125)

fixes #18108

* fix(): add prefixed transform for older versions of chrome (#18128)

fixes #17729

* fix(segment): decrease icon size on ios and stretch segment buttons to fill height (#17751)

fixes #17069

* fix(): sanitize components using innerHTML (#18083)

fixes #18065

* Release 4.3.1 (#18152) (#18154)

* fix(angular): support replaceUrl with angular <7.2 (#18106)

* fix(angular): support replaceUrl with angular <7.2

* run linter

* fix(): sanitize components using innerHTML (#18146)

* 4.3.1 (#18150)

* doc(loading): remove mention of undefined "content" property (#18126)

* feat(img): add ionImgWillLoad event and emit ionImgDidLoad when image is loaded (#18159)

- Adds `ionImgWillLoad` event that emits when the img src is set
- Moves the `ionImgDidLoad` event emit so that it happens when the image actually finishes loading

fixes #17652 closes #18161

* fix(toast): allow button-color CSS variable to be overridden (#18133)

fixes #18127

* fix(label): use primary color on focus for md input labels (#18183)

fixes #15602

* feat(item-sliding): add open method (#17964)

resolves #17899

* feat(menu-button): add css variables for padding (#18188)

fixes #18187

* feat(card): add button functionality (#17997)

closes #17773

* feat(textarea): add option to expand textarea as value changes (#16916)

* feat(textarea): add autoGrow - set height to scrollHeight

* change 1px to inherit, remove additional 4px

* feat(refresher): add pullFactor property to control speed (#16697)

closes #15425

* fix(input): clear on edit from inside native input (#17115)

fixes #17055

* test(angular): increase timeout for tab switch (#18221)

* 4.4.0

* chore(): resolve merge conflicts from older hotfix

* docs(process): update release process

* docs(fab-list): update the activated description (#18026)

* docs(breaking): add ionDrag event arguments change (#17989)

* docs(slides): add swiper prefix in animation usage (#18073)

* feat(searchbar): add disabled property (#17935)

closes #17921

* fix(reorder-group): remove required parameter for the complete method (#18084)

also updates documentation surrounding the reorder & infinite scroll

fixes #16302

* docs(components): update method and parameter descriptions (#18075)

* fix(datetime): default to current date when value is null (#18105)

fixes #18099

* docs(toolbar): fix end slot documentation (#18092)

* fix(item): use the global activated background for md ripple color (#16752)

fixes #16585

* fix(textarea): reposition textarea when keybard appears (#18098)

fixes #17847

* fix(button): apply round property to button sizes in iOS (#18125)

fixes #18108

* fix(): add prefixed transform for older versions of chrome (#18128)

fixes #17729

* fix(segment): decrease icon size on ios and stretch segment buttons to fill height (#17751)

fixes #17069

* fix(): sanitize components using innerHTML (#18083)

fixes #18065

* Release 4.3.1 (#18152) (#18154)

* fix(angular): support replaceUrl with angular <7.2 (#18106)

* fix(angular): support replaceUrl with angular <7.2

* run linter

* fix(): sanitize components using innerHTML (#18146)

* 4.3.1 (#18150)

* doc(loading): remove mention of undefined "content" property (#18126)

* feat(img): add ionImgWillLoad event and emit ionImgDidLoad when image is loaded (#18159)

- Adds `ionImgWillLoad` event that emits when the img src is set
- Moves the `ionImgDidLoad` event emit so that it happens when the image actually finishes loading

fixes #17652 closes #18161

* fix(toast): allow button-color CSS variable to be overridden (#18133)

fixes #18127

* fix(label): use primary color on focus for md input labels (#18183)

fixes #15602

* feat(item-sliding): add open method (#17964)

resolves #17899

* feat(menu-button): add css variables for padding (#18188)

fixes #18187

* feat(card): add button functionality (#17997)

closes #17773

* feat(textarea): add option to expand textarea as value changes (#16916)

* feat(textarea): add autoGrow - set height to scrollHeight

* change 1px to inherit, remove additional 4px

* feat(refresher): add pullFactor property to control speed (#16697)

closes #15425

* fix(input): clear on edit from inside native input (#17115)

fixes #17055

* test(angular): increase timeout for tab switch (#18221)

* fix other merge conflict

* fix(react): Support for adding css classes via `className` in Ionic React components (#18231)

* fix(react): adding classname to react props

* fix(react): updating rtl to latest to fix ts error

* fix(react): changes to support className

* fix(loading): allow html content (#18242)

fixes #18135

* fix(icon): remove stroke and move fill to host element (#18241)

This removes the weird border around custom SVGs used in an ion-icon.

fixes #16483

* bug(security): allow name and slot attributes when sanitizing (#18246)

* allow name attribute

* also add slot

* fix(input): keep entire input in view when scrolling with keyboard open (#18253)

fixes #17457

* fix(tab-button): apply background-focused when tabbing into tab button (#17502)

fixes #17042

* test(theming): update theming tests

* fix(react): defaultHref fixes (#18278)

* fix(react): making children prop optional on overlay components

* fix(react): passing in defaultHref so it can be used if there is no prev view

* fix(react): making children prop optional on overlay components (#18243)

* fix(buttons): use theme/color toolbar colors for buttons (#18191)

- Updates the iOS buttons in a toolbar to use the proper global theming variables
- Updates the iOS segment to use the correct background variable when checked
- Updates the iOS back button and menu button to use the proper color in a toolbar
- Updates the iOS buttons in a toolbar w/ color to use the proper contrast colors (background, borders, text, hover, focus), mostly solid and outline buttons were affected
- Updates the CSS that applies the global toolbar variables so that it won't affect toolbars w/ a color

fixes #18184, fixes #17840

* fix(overlay): hide scrollbars on non-scrollable content (#16767)

fixes #14178

* fix(slides): disable swiper touch preventDefault (#16728)

* fix(slides): disable swiper touch preventDefault

* fix(slides): update Swiper types

* add screenshots to test

* add screenshot descriptions

* fix(toolbar): update md toolbar button spacing and padding to match spec (#17537)

- Removes the padding from the main toolbar and individually style the components inside of it
- Adds a `has-icon-only` class to button, this is used to switch between `unbounded` and `bounded` ripples on buttons in a toolbar. If the button is clear and only has an icon, we use the unbounded "circular" ripple effect, otherwise still use the bounded one. This matches the MD spec, without making the other buttons look off.
- Using the class above, style the button differently to match the MD spec
- Updates the back button and menu button to use the proper size / icon size
- Removes the opacity on an activated back button, it should use the ripple for activated
- Moves the margin to the slots in a toolbar by grabbing the "first" and "last" slot and applying a class to them
- Makes the segment in a toolbar use the min height from the toolbar
- Updates the back button so that it matches the MD spec
- Updates the header box shadow to use the old v3 datauri 

fixes #16950 fixes #14444

* fix(tabs): initialize select in the willLoad before the select call is made (#18300)

#17957

* fix(angular): preserve queryParams and fragment when going back (#18298)

fixes #16744

* fix(angular): ensure active page is not removed from change detection (#18299)

fixes #18293

* docs(toast-controller): fix description typo  (#18312)

Fix typo in component description text.

* test(components): add rtl tests and remove skips (#18319)

references #17012

* fix(css): update rtl function to prepend selectors with host-context properly (#18315)

references #17012

* chore(): remove debug and log statements (#18245)

fixes #18190

* docs(datetime): add note about timezones, fix typo (#18289)

* fix(range): update border-radius on range pin for rtl (#18321)

references #17012

* fix(angular): preserve special characters encoding when going back (#18323)

* fix(rtl): updates searchbar, fab and toggle icon positioning in rtl (#18325)

- fixes tab badge (in Chrome)
- fixes searchbar buttons
- fixes fab positioning
- fixes toggle

references #17012

* fix(segment): update segment border for rtl (#18326)

references #17012

* fix(datetime): update label direction in rtl (#18340)

* fix(picker): update the column positions in rtl (#18339)

references #17012

* fix(button): only apply has-icon-only if icon has the slot for icon-only (#18343)

fixes #18329

* tests(): add missing test statements (#18346)

* 4.4.1

* remove react changelog
@loopezz

This comment has been minimized.

Copy link

commented May 23, 2019

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!

Seems like the segment border fix doesn't work on iOS. I have updated to @ionic/angular 4.4.2.
Screenshot 2019-05-23 at 16 27 25

@brandyscarney

This comment has been minimized.

Copy link
Member

commented May 23, 2019

Thanks @loopezz! I added it to the original issue.

I just submitted a PR to fix the item sliding gesture / open method here: #18366

I published a dev build if anyone would like to test it out: 4.5.0-dev.201905231504.7ab9479

brandyscarney added a commit that referenced this issue May 23, 2019

@shahramSo

This comment has been minimized.

Copy link

commented Jun 1, 2019

Ionic 4.4.2 issue:
ion-item-sliding doesn't work correctly in rtl mode,
When index.htlm direction is dir"rtl"
Buttons is not appeared in RTL mode.
Please let me know if there is any workaround.
Thanks

@abennouna

This comment has been minimized.

Copy link
Contributor Author

commented Jun 8, 2019

I'm not able to reproduce the following:

Float Elements: float-start, float-end, & their responsive versions (regression: #17012 (comment))

@brandyscarney I can reproduce now in Safari.

Also, not sure if it helps: take float-start, the generated rules are grouped and it appears Safari ignores rules that it can't parse:

.ion-float-start,
[float-start] {
  float: left !important;
}
[dir=rtl] .ion-float-start,
:host-context([dir=rtl]) .ion-float-start,
[dir=rtl] [float-start],
:host-context([dir=rtl]) [float-start] {
  float: right !important;
}

(Safari needs the non-:host-contextones)

Stylesheet
stylesheet

Actually parsed CSS
parsed

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Jun 11, 2019

Thanks @abennouna! Can you update the issue for this? Maybe we need to update the add-root-selector to return them as two separate selectors?

@brandyscarney brandyscarney moved this from On deck ⚾️ to Backlog 🤖 in Ionic Core Jun 11, 2019

@abennouna

This comment has been minimized.

Copy link
Contributor Author

commented Jun 12, 2019

@brandyscarney issue updated. Returning 2 selectors in add-root-selector solves this issue. Hopefully no breaking-changes 😅

@shahramSo

This comment has been minimized.

Copy link

commented Jun 12, 2019

@abennouna What about ion-item-sliding RTL issue?

@abennouna

This comment has been minimized.

Copy link
Contributor Author

commented Jun 12, 2019

@shahramSo The fix is part of the 4.4.2 release. Can you share a minimal repo to reproduce your issue?

Sorry for that, see Brandy’s comment below 👇

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Jun 12, 2019

@shahramSo The item sliding issue is fixed, it just hasn't been in a release yet. It will be in the 4.5.0 release today if all goes well, but if you need it urgently see my comment here for the dev release: #17012 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.