paragon icon indicating copy to clipboard operation
paragon copied to clipboard

Published 20 hours ago • verified publisher icon openedx

RTL: ProductTour checkpoint arrow style error

Open ARMBouhali opened this issue 2 years ago • 2 comments

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) Screenshot from 2022-09-19 17-31-38

  • Placement: top (expected gray arrow in the center bottom of the dialog, appearing far to the left) Screenshot from 2022-09-19 17-30-42

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) Screenshot from 2022-09-19 17-36-11

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 avatar Sep 19 '22 17:09 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 avatar Oct 06 '22 11:10 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 avatar Oct 06 '22 14:10 ARMBouhali

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

ARMBouhali avatar Nov 09 '22 09:11 ARMBouhali