The existing implementation of the on-boarding dialog uses a OOUI.ProcessDialog and provides support for navigating back and forward steps with the mobile gesture swipe (see MultiPaneDialog.js and SwipePane.js )
Acceptance criteria
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | None | T367429 [Epic] FY 2024-25 Growth Maintenance Work | |||
| Open | Sgs | T296646 [Epic] Migration of front-end modules to Vue.js components | |||
| Resolved | KStoller-WMF | T329033 [Internship] Modernization of web interfaces using Vue.js | |||
| In Progress | None | T329037 Refactor the "Add a link" on-boarding dialog to Vue | |||
| Resolved | • VYanez-WMF | T335044 Add support for swiping between steps on mobile |
The current implementation of the <OnboardingDialog> provides named slots step1, step2, step3 for rendering arbitrary content on each step. The navigation between steps directly relates with the css animation in the transition between them (T334472). Since this feature request is directly related with steps navigation (and mobile devices) I think it would be better to separate the on-boarding from the step navigation. That would mean having a component structure similar to:
<OnboardingDialog> <MultiPane> <template #pane1> </template> <template #pane2> </template> <template #pane3> </template> </MultiPane> </OnboardingDialog>
The <MultiPane> component would be responsible for the step navigation (even if the controls are placed elsewhere), using swipe on mobile and applying the transition. The <OnboardingDialog> would remain responsible for the open/close and checkbox state.
Change 913133 had a related patch set uploaded (by Viviana Yanez; author: Viviana Yanez):
[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: add support for swiping between steps on mobile
Change 913133 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: add support for swiping between steps on mobile