Let's teleport + make 'sidebar' icon flip in RTL languages

[MisRob]

Description

Adds support for teleporting that is performant and simple to use.

• The teleport root element is inserted to an application's document body during KDS initialization
  • Removes the need for manual insert
  • Ensures we never attach teleported elements, such as tooltips, to document.body itself, which is said to cause severe performance problems (https://css-tricks.com/dont-attach-tooltips-to-document-body/)
• Adds new KTeleport component
  • Wrapper around vue2-teleport's Teleport with restricted API that only allows teleporting to the KDS teleport root element.
  • Removes Teleport in favor of KTeleport in KModal
• Adds appendToRoot prop to KTooltip
  • In support of Studio migration to KDS where in a few instances, teleport is needed for tooltips to display correctly ([DO NOT MERGE UNTIL NEW KDS RELEASE] Almost complete icons migration from Vuetify to KDS studio#4633)
  • Contains smaller refactor of Popper.vue to allow the tooltip be attached to an element different from document.body

Additional minor changes:

• Removes unnecessary live region mount from the useKLiveRegion documentation page
• Make the sidebar icon flip in RTL languages

Changelog

• Description: Inserts the overlay container element #k-overlay to an application's document body during KDS initialization.

• Products impact: KDS initialization

• Addresses: -

• Components: -

• Breaking: no

• Impacts a11y: no

• Guidance: Remove any custom teleportation logic and use new KDS components and props instead.

• Description: Adds new KOverlay component

• Products impact: New API

• Addresses: -

• Components: KOverlay

• Breaking: no

• Impacts a11y: no

• Guidance: -

• Description: Renames KModal's appendToRoot prop to appendToOverlay

• Products impact: Updated API

• Addresses: -

• Components: KModal

• Breaking: yes

• Impacts a11y: no

• Guidance: Rename KModal's appendToRoot prop to appendToOverlay

• Description: Adds new prop, appendToOverlay, to KTooltip

• Products impact: New API

• Addresses: -

• Components: KTooltip

• Breaking: no

• Impacts a11y: no

• Guidance: -

• Description: Makes the sidebar icon flip in RTL languages

• Products impact: Bugfix

• Addresses: -

• Components: Icons

• Breaking: no

• Impacts a11y: yes

• Guidance: -

References

Motivated by learningequality/studio#4633 and some recent discussions with @rtibbles and @AlexVelezLl about the ways we used to teleport.

Steps to test

• Can you find any regressions in KTooltip's and KModal's?
• Is the teleport root region properly mounted?
• Can you observe any performance problems?
• Preview documentation
  • https://deploy-preview-722--kolibri-design-system.netlify.app/kteleport/
  • https://deploy-preview-722--kolibri-design-system.netlify.app/installation/

Implementation notes

I used similar approach to inserting live regions. There's a composable that encapsulates all logic related to mounting and retrieving the teleport root element. It is implemented in a way that minimizes querying DOM as much as I could think of.

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical and brittle code paths are covered by unit tests
• The change is described in the changelog section above

Reviewer guidance

• Is the code clean and well-commented?
• Are there tests for this change?
• Are all UI components LTR and RTL compliant (if applicable)?
• Add other things to check for here

After review

• The changelog item has been pasted to the CHANGELOG.md

[AlexVelezLl]

Looks good to me! I was just wondering if "Teleport root element" is the best naming for this new layer. I have seen in other design systems that they call it an "Overlay" layer. And I think this could be a more informative naming, and use names like "KOverlay" and "useOverlayEl".

One motivation is for example that the name "KTeleport" could be misleading for this new component. One could think that this is a teleport like any other teleport component where we could use it to teleport something to anywhere, without the restriction of teleporting it just into the "teleport root element". Where something like a KOverlay could be more accurate as the name suggest that anything inside will be inside the overlay layer. (I am also taking as reference the v-overlay component in vuetify).

Just food for thought, but would like to hear any comments about this.

[AlexVelezLl]

I see value in explaining here the motivation to include this layer to educate more people about this pattern. And also when should we use this component.

[nucleogenesis]

I gave the code a thorough look and didn't spot any issues.

Overall, I really appreciate the thorough commenting throughout - it made grokking things throughout very straightforward.

Saving the el to window is a clever way to avoid all the dom queries too!

One non-blocking thought I had is that I wonder if maybe some of our components might be worth defaulting appendToRoot to true - particularly KModal comes to mind - I can't think of any case where it'd be better to have a KModal in any particular place in the DOM beside the root. With that said, though, I can appreciate the default values for props being consistent across components.

There are many reviewers requested here so I'll just toss my hat into the ring of "approved" but will leave final approval to a subsequent reviewer

[MisRob]

Thank for good feedback @AlexVelezLl and @nucleogenesis. Opened a thread on Slack.

[MisRob]

@AlexVelezLl

Looks good to me! I was just wondering if "Teleport root element" is the best naming for this new layer. I have seen in other design systems that they call it an "Overlay" layer. And I think this could be a more informative naming, and use names like "KOverlay" and "useOverlayEl".

Good feedback and didn't hear any objections from the team. Will do in this PR.

@nucleogenesis

One non-blocking thought I had is that I wonder if maybe some of our components might be worth defaulting appendToRoot to true

Thanks too. Won't do in this PR since it's still unclear. I have a meeting scheduled to chat about this with @radinamatic, and also for me to understand better impacts of teleporting on a11y. Then we will know more and can do in follow-up if desired.

[MisRob]

@AlexVelezLl renaming done - also note that I renamed KModals appendToRoot to appendToOverlay to be consistent with the overlay language as well as the same prop on KTooltip. This will be a breaking change, however we don't use it very frequently yet in Kolibri, so better to do it asap I'd say.

Could you give it a final review, please?

[AlexVelezLl]

LGTM! Code changes makes sense, and I have tried adding appendToOverlay to some Tooltips and modals in Kolibri and everything seems to be working fine. Thank you @MisRob!