RTL: ProductTour checkpoint arrow style error

[ARMBouhali]

As the title suggests, the ProductTour RTL support is incomplete.

Descrption

As I was testing frontend-app-learning both in local dev (master) and in our [demo site] (fennx.fennectech.net) (nutmeg.1) I've noticed that user tours in Arabic have 2 style issues with the checkpoint dialog arrow: (with screenshots)

Issue 1

when popper tooltip placement is top or bottom. the arrow appears shifted to the right by half the size of the dialog.

• Placement: top (expected blue arrow in the center top of the dialog, appearing far to the left)

• Placement: top (expected gray arrow in the center bottom of the dialog, appearing far to the left)

Issue 2

when popper tooltip placement is left or right, the arrow direction is reversed.

• Placement: right (gray arrow expected to the left, appearing on the right)

I currently lack a working paragon dev environment to provide a fix myself. I also lack information about why the ProductTour arrow was styled this way in the first place.

Possible reason for issue 1

• Thepopper library does a good job listening to changes on the #pgn__checkpoint element and positions the arrow accordingly.
• The style overrides provided in src/ProductTour/Checkpoint.scss define the shape of the arrow and adjust its position slightly, but they enter in conflict with element.style applied by popper to the #pgn__checkpoint-arrow element. The overrides work well for LTR, but things need to be rewritten for RTL support.
• I tried to disable almost every positioning rule in Checkpoint.scss applied to #pgn__checkpoint-arrow and I could have the arrow nearly centered.

I'd be glad if the person who wrote this part of the style could assist us in providing a fix for the two issues above. Thanks in advance

[ARMBouhali]

@ghassanmas that PR looks strange. I think I was misunderstood. The issues are with the tooltip arrow that points to the user tour's checkpoint anchor (outline, user tour link, tabs, etc.)

[ARMBouhali]

As I have noticed. The docs website for paragon does not show The learning MFE uses v19.18.3 of paragon. Maybe it has been solved?

[ARMBouhali]

the same is happening with this frontend-app-authn password tooltip Paragon version: 19.10.2