When users navigate back or forth in AddLink dialog, a horizontal slide transition displays between steps.
We will implement this using Vue built-in Transition component.
Description
Description
Details
Details
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Frontend documentation: add transitions to OnboardingDialogs steps | mediawiki/extensions/GrowthExperiments | master | +231 -156 |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | None | T340453 [Epic] FY 2023-24 Growth Maintenance Work | |||
| Open | None | T325082 Eslint: configure browser compatibility | |||
| 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 | T334472 Add transitions between dialog steps | |||
| Resolved | Sgs | T335371 Add RTL support on dialog transitions |
Event Timeline
Comment Actions
Change 908970 had a related patch set uploaded (by Viviana Yanez; author: Sergio Gimeno):
[mediawiki/extensions/GrowthExperiments@master] WIP: Frontend documentation: add transitions to OnboardingDialogs steps
Comment Actions
Change 908970 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: add transitions to OnboardingDialogs steps
Comment Actions
The transition has been implemented and can be tested in both On-boarding and Add Link demos.
Comment Actions
Below is the gif for the transition on testwiki wmf.6 on slow network connection and with disabled cache:
Also checked: FF and Chrome, wmf.6 and wmf.5 (and betalabs) - the current transition is consistent with the gif above.
@Sgs - the patch is included into MediaWiki_1.41/wmf.6 - can you take a look at the transition in production and confirm that it works as expected?
Comment Actions
Below is the gif for the transition on testwiki wmf.6 on slow network connection and with disabled cache:
Also checked: FF and Chrome, wmf.6 and wmf.5 (and betalabs) - the current transition is consistent with the gif above.
@Sgs - the patch is included into MediaWiki_1.41/wmf.6 - can you take a look at the transition in production and confirm that it works as expected?
This isn't yet in MediaWiki, but rather in the standalone demo site (https://doc.wikimedia.org/GrowthExperiments/master/js/frontend/). "Test in production" is probably not the right column for this, we should just resolve the task?
Comment Actions
Right. I agree we can mark the Frontend documentation tasks as Resolved as soon they are merged. We will perform the regular QA and Test in production steps once we integrate the prototype into MW in T331986: Integrate the Vue version of the Add a link on-boarding in GrowthExperiments. Still, we would probably want to perform a final design review in https://doc.wikimedia.org/GrowthExperiments/master/js/frontend/ before merging T331986. Should we create a task for that?
@RHo and @bmartinezcalvo are working on the definition of the Onboarding pattern so I guess we're still missing an iteration of work in the documentation before the final integration.
Comment Actions
I would propose doing final design review and QA when the Vue code is run via MediaWiki, and is available via a feature flag (?use-vue or something like that), so that what the reviewers look at is what the end-users will be seeing when we enable it for everyone.
Comment Actions
Thx, @kostajh and @Sgs! I am thinking now of the best way to keep track of tasks on Vue-related changes, so it'd be easier to compare existing behavior with Vue behavior (and not mistaken either of them as a bug).
If this task's scope is to implement transition on the standalone demo site, then it may be closed as Resolved.
Maybe it makes sense then to list this task (and others like it) under T331986: Integrate the Vue version of the Add a link on-boarding in GrowthExperiments? On the other hand, if T331986 will just have the links (e.g. https://doc.wikimedia.org/GrowthExperiments/master/js/frontend/) it should be enough.
Comment Actions
That sounds good, filed as T335568
I think the fact this task exists is a side effect of not foreseeing it in T329037: Refactor the "Add a link" on-boarding dialog to Vue and add it as an acceptance criteria. I think it's ok for us to create T329037 sub-tasks for missed requirements. Since we don't want to overload the QA column for interim iterations that are deployed to a non-MW production site, the proposal would be to perform those phases in T331986. I can update the description there to have a more complete list of acceptance criterias and use cases for facilitating QA. How does that sound? This is an experimental workflow so all feedback related to enhancing our productivity is very welcome at this stage.
Comment Actions
I think the fact this task exists is a side effect of not foreseeing it in T329037: Refactor the "Add a link" on-boarding dialog to Vue and add it as an acceptance criteria. I think it's ok for us to create T329037 sub-tasks for missed requirements. Since we don't want to overload the QA column for interim iterations that are deployed to a non-MW production site, the proposal would be to perform those phases in T331986. I can update the description there to have a more complete list of acceptance criterias and use cases for facilitating QA. How does that sound? This is an experimental workflow so all feedback related to enhancing our productivity is very welcome at this stage.
Adding more criteria to T333658 sounds great. Or it might be, as I mention, just a link to the doc/demo.