Refactor OnboardingStep component to named slots
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	• VYanez-WMF
	Apr 11 2023, 12:16 PM

Description

We can eliminate OnboardingStep component and pass content to each step using named slots. This seems more conventional in Vue - MW code like Codex than pairing/coupling components, eg: <List> and <ListItem>.

Acceptance criteria

OnboardingStep component is removed
OnboardingDialog can be used as it was with OnboardingStep but with an arbitrary number of steps: step1, step2... stepN
AddLinkDialog does not need to know about currentIndex or step navigation handling
OnboardingDialog emits events when there are navigation interactions and/or the currentIndex value changes so AddLinkDialog can subscribe to those events and instrument them
AddLinkDialog can read the value of currentIndex or step navigation interactions through events

Nice to have

OnboardingDialog can be used without any step and use the default slot to render some content on its body

Details

	Subject	Repo	Branch	Lines +/-
	Frontend documentation: refactor OnboardingStep to named slots	mediawiki/extensions/GrowthExperiments	master	+456 -354

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
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	T334471 Refactor OnboardingStep component to named slots

Event Timeline

• VYanez-WMF created this task.Apr 11 2023, 12:16 PM

Sgs changed the task status from Open to In Progress.Apr 12 2023, 10:18 AM

Sgs moved this task from Incoming to In Progress on the Growth-Team (Sprint 0 (Growth Team)) board.

Sgs added a project: GrowthExperiments.Apr 12 2023, 10:26 AM

Sgs updated the task description. (Show Details)

Change 908475 had a related patch set uploaded (by Viviana Yanez; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: refactor OnboardingStep to named slots

https://gerrit.wikimedia.org/r/908475

gerritbot added a project: Patch-For-Review.Apr 13 2023, 8:36 AM

Sgs updated the task description. (Show Details)Apr 17 2023, 11:44 AM

This is an internal refactor to remove the need of the component <OnboardingStep>, the visual aspect and behavior of the demos should remain intact. Moving to test in production since we don't have an staging area yet for the frontend documentation. Documentation on the usage of the slots will be added within T333346.