learningequality
Research solution for popovers
Summary
Currently, to achieve popover-like elements
- we use
"popper.js": "1.16.1"under the hood ofKTooltip - some of the long-time-ago-forked Keen UI components utilize
"tippy.js": "4.2.1"
These are quite old versions that blocked some refactoring and proved to be hard to upgrade. We need to either upgrade or replace by another library or native platform APIs, depending on when when we work on this. On that opportunity, it’d be ideal to move towards using a single solution.
This issue tracks current and future use-cases and their requirements, and collects related libraries and native platform APIs. Its goal is to research and decide on next steps.
Use-cases
KTooltipKDropdownMenu- Kolibri onboarding flow https://github.com/learningequality/kolibri/issues/12103
Requirements
The following are must-haves directly motivated by our use-cases.
- Satisfies our browserlist
- a11y-first
- Performant
- Can be teleported to a chosen element
- For integration with
KOverlay - Rather than automatically attached to body which is said to have severe performance issues
- For integration with
- Integrates well with Vue Composition API
- Composition API used widely in the codebase
- Not being able to integrate the current libraries with the Composition API easily blocked some work in https://github.com/learningequality/kolibri-design-system/pull/583
- Not limited to plain text only, can receive rich HTML content via slot or similar
- To support Kolibri onboarding flow (Slack thread)
- Crucial requirement for scalability
- Can adjust its size and position cleverly
- For example when rendered close to page’s edges
Related
- @AlexVelezLl and @bjester discussed complications with
tippy.jsinKDropdownMenu: https://github.com/learningequality/kolibri-design-system/pull/583, https://github.com/learningequality/kolibri-design-system/issues/634 ( ) - @rtibbles mentioned problems with upgrading
popper.js - @LianaHarris360's work on the Kolibri's onboarding flow where she uses one of the newer popover libraries
Libraries
(not evaluated against the requirements yet)
- VueTippy
- Floating Vue
- Floating UI (previously Popper)
- …?
Native APIs
- Popover API
- As of Aug 2024 doesn’t satisfy the browserlist
- https://github.com/oddbird/popover-polyfill is available, however has a long list of “Caveats”
Current Kolibri Browser Support List:
- 'Android > 4.4.3',
- 'Chrome >= 49',
- 'ChromeAndroid >= 49',
- 'Edge >= 18',
- 'Firefox >= 52',
- 'FirefoxAndroid >= 68',
- 'iOS >= 9.3',
- 'Opera >= 67',
- 'QQAndroid >= 10.4',
- 'Safari >= 11.1',
- 'Samsung >= 4',
- 'UCAndroid >= 12.12',
Floating-UI Browser Support List:
- Chrome >= 73
- Firefox >= 78
- Edge >= 79
- Safari >= 12.0
- iOS >= 12.0
- Opera >= 53
Floating-vue (powered by Floating-UI) Browser Support List:
This package has been renamed from v-tooltip to floating-vue and now uses floating-ui instead of popperjs.
- Chrome >= 73
- Firefox >= 78
- Edge >= 79
- Safari >= 12.0
- iOS >= 12.0
- Opera >= 53
VueTippy (powered by Tippy.js) Browser Support List:
This package is a Vue.js 3 wrapper for Tippy.js All modern browsers are supported. Proxy mobile browsers like Opera Mini are not supported.
- Integrates well with Vue Composition API
- Not limited to plain text only, can receive rich HTML content via slot or similar
Leaving a note here from the meeting with @LianaHarris360 @marcellamaki @AlexVelezLl regarding on of the use-cases (Kolibri onboarding tutorial) that could be eventually related to this broader issue: Regarding the browsers support, we may go with the progressive enhancement approach for some features or compromise some of the other requirements. More to come as we keep exploring this area in the upcoming months :)
Hi @asmit27rai, thanks for volunteering! I'm sorry, this issue is not available. It's best to choose one of the unassigned "help wanted". We keep adding new ones so keep an eye on it regularly!
Research, proof of concept, and most important decisions are completed https://github.com/learningequality/kolibri-design-system/pull/1114 so I will close. Will be opening issues for final implementations.