Per discussions in slack thread it seems the DST is not planning to allow Codex dialog customization in the short term. We would need a revisited design that fits what is currently achievable. Any recommendations @JFernandez-WMF @RHo?

In T329037#8696996, @Sgs wrote:

Per discussions in slack thread it seems the DST is not planning to allow Codex dialog customization in the short term. We would need a revisited design that fits what is currently achievable. Any recommendations @JFernandez-WMF @RHo?

Hi @Sgs - I am working with DST to get more info soon, but generally I am against strongly revisiting the design as a way to shoehorn it in a component that is perhaps not fit for purpose.
And specifically in this case, I do think the onboarding screens should not be included as adopting the dialog component, since it is using a Multi-step Process dialog (T315535, not yet prioritised). In the course of gathering use-cases, it could also be determined that a separate onboarding component, but that is TBD.

Change 900624 had a related patch set uploaded (by Viviana Yanez; author: Viviana Yanez):

[mediawiki/extensions/GrowthExperiments@master] Frontend docs: allow serving files from outside the project root

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

Change 900624 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Frontend docs: allow serving files from outside the project root

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

In the meantime of come up with the best way to build this onboarding dialog, we found that if we were to use the current Codex Dialog we would need to solve the following differences with the design specs:

• full bleed image, we need to overwrite Codex classes to avoid the padding on dialog content
• same applies to the full screen on mobile
• the size of the next / prev buttons, which are 12px wider than the Codex Icon-only button that we are currently using

In T329037#8697915, @RHo wrote:

In T329037#8696996, @Sgs wrote:

Per discussions in slack thread it seems the DST is not planning to allow Codex dialog customization in the short term. We would need a revisited design that fits what is currently achievable. Any recommendations @JFernandez-WMF @RHo?

Hi @Sgs - I am working with DST to get more info soon, but generally I am against strongly revisiting the design as a way to shoehorn it in a component that is perhaps not fit for purpose.
And specifically in this case, I do think the onboarding screens should not be included as adopting the dialog component, since it is using a Multi-step Process dialog (T315535, not yet prioritised). In the course of gathering use-cases, it could also be determined that a separate onboarding component, but that is TBD.

Thanks for the feedback, I understand your concern of the existing dialog being based on OOUI's ProcessDialog. To my understading, a general purpose on-boarding dialog does not have the same requirements nor constraints that OOUI process dialog. In any case I'm sure we can find ways to achieve what both on-boarding and process dialogs need extending parts of the existing Codex dialog. I filed T332767: OnboardingDialog: Add OnboardingDialog component pattern to Codex to clarify and discuss around on-boarding use cases.

In T329037#8717179, @VYanez-WMF wrote:

In the meantime of come up with the best way to build this onboarding dialog, we found that if we were to use the current Codex Dialog we would need to solve the following differences with the design specs:

• full bleed image, we need to overwrite Codex classes to avoid the padding on dialog content

Hopefully this can be clarified in T332767

• same applies to the full screen on mobile

T321893 is the relevant task about full screen dialogs. We could echo about this in T332767 but I think this issue has to be solved across all dialog variants, not just the on-boarding

• the size of the next / prev buttons, which are 12px wider than the Codex Icon-only button that we are currently using

This change seems small enough that we could clarify if we need to make some update into the Codex button component or slightly modify Growth's design. cc @RHo @JFernandez-WMF

I would also add:

• The background-color: #f4f9ff does not exist among Codex's color design tokens
• For the matching of the header background-color with the image background-color we need to overwrite the vertical padding of the dialog (as different of the horizontal that is overwritten because of the image)

Change 895801 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] documentation/frontend: Create "Add link" onboarding dialog demo

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

Hi @VYanez-WMF - thanks for the demo of WIP so far! Some initial feedback/questions though I understand there is still a design review:

• Image loading on slow connections - should we consider a loading indicator or some skeleton loader (could just be a pulsing colour change) for when the image is loading?
• The expectation is that both the header and footer should be fixed.

Demo	current dialog showing fixed header and footer

Hey @RHo ! Thanks for your feedback!

• Image loading on connections - should we consider a loading indicator or some skeleton loader (could just be a pulsing colour change) for when the image is loading?

There are still some design requirements that we have to implement such as the transitions between step and we will consider also adding a loading indicator.

• The expectation is that both the header and footer should be fixed.

Yes, this has to be fixed and the fullscreen mode on small devices also has to be implemented yet

Change 903701 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: add onboarding dialog toggle test

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

Change 903741 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: remove undefined @default handler

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

Change 904053 had a related patch set uploaded (by Viviana Yanez; author: Viviana Yanez):

[mediawiki/extensions/GrowthExperiments@master] documentation/frontend: update to Codex v0.8.0

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

Change 904053 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] documentation/frontend: update to Codex v0.8.0

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

Change 903701 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: add onboarding dialog toggle test

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

Change 903741 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: remove undefined @default handler

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

Change 902451 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: create a separate demo for the onboarding dialog

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

Change 904229 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: refactor v-model usage in dialogs

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

Change 902451 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: create a separate demo for the onboarding dialog

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

Change 906605 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: Onboarding dialog refactor follow-up

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

Change 906605 abandoned by Sergio Gimeno:

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: refactor addlinkdialog to use Codex v0.8.0 dialog slots

Reason:

squashed in Ie26f5dff193c759184096b8d72ac703562fea687

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

@JFernandez-WMF @RHo Do you have alternative text we will need to add to the images on this dialog for accessibility reasons?
And the same for the AddImage dialog in T329038 Thank you :)

Thanks for noticing this @VYanez-WMF! @JFernandez-WMF will provide ALT text for both Add image, Add Section image, and Add links onboarding messages.

In T329037#8778077, @VYanez-WMF wrote:

@JFernandez-WMF @RHo Do you have alternative text we will need to add to the images on this dialog for accessibility reasons?
And the same for the AddImage dialog in T329038 Thank you :)

Change 904229 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: refactor v-model usage in dialogs

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

In T329037#8785617, @RHo wrote:

Thanks for noticing this @VYanez-WMF! @JFernandez-WMF will provide ALT text for both Add image, Add Section image, and Add links onboarding messages.

In T329037#8778077, @VYanez-WMF wrote:

@JFernandez-WMF @RHo Do you have alternative text we will need to add to the images on this dialog for accessibility reasons?
And the same for the AddImage dialog in T329038 Thank you :)

Should we consider those images as decorative, and thus not needing alt text (https://www.w3.org/WAI/tutorials/images/decorative/)? If that's the case, we should set alt="" and probably also add role="presentation".

In T329037#8788819, @kostajh wrote:

In T329037#8785617, @RHo wrote:

Thanks for noticing this @VYanez-WMF! @JFernandez-WMF will provide ALT text for both Add image, Add Section image, and Add links onboarding messages.

In T329037#8778077, @VYanez-WMF wrote:

@JFernandez-WMF @RHo Do you have alternative text we will need to add to the images on this dialog for accessibility reasons?
And the same for the AddImage dialog in T329038 Thank you :)

Should we consider those images as decorative, and thus not needing alt text (https://www.w3.org/WAI/tutorials/images/decorative/)? If that's the case, we should set alt="" and probably also add role="presentation".

I do think the images add a bit more context so makes sense to have ALT text.

Hola @VYanez-WMF! We've written alt text for the onboarding illustrations for Add a link, along with Add an image and Add an image to an article section. I'll comment here the alt text for Add a link and in T329038: Refactor the "Add an image" on-boarding dialog to Vue for Add an image.

FYI all alt text is being tracked in T335523: Alt text for onboarding images: Add a link, Add an image and Add a section image .

Alt text for Add a link

Illustration	Alt text
	Illustration of the moon article, with the articles Earth and Satellite being suggested as links that could be added to the associated text.
	Illustration of the moon article, next to the article there's a robot representing a machine suggestion - asking if a word on the Moon article should be linked to the Cheese article.
	Illustration of an article sentence showing link suggestions for two different words. Next to the suggestion there's a blue check icon and a red cross icon for the options to accept or reject the suggestion.

Thank you for your patience!

Change 913157 had a related patch set uploaded (by Viviana Yanez; author: Viviana Yanez):

[mediawiki/extensions/GrowthExperiments@master] documentation/frontend: Add alt text to Addlink dialog images

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

Change 913157 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] documentation/frontend: Add alt text to Addlink dialog images

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

@RHo @JFernandez-WMF Is it ok to apply to AddLink Onboarding dialog and to AddImage onboarding dialog the latest design specifications we have for the Onboarding Dialog Pattern?

In T329037#8849846, @VYanez-WMF wrote:

@RHo @JFernandez-WMF Is it ok to apply to AddLink Onboarding dialog and to AddImage onboarding dialog the latest design specifications we have for the Onboarding Dialog Pattern?

Hi @VYanez-WMF - yes that sgtm! However, do you mean for us to update the Growth Features spec in Figma here as well to point to the Onboarding dialog pattern? If so, I will create a task for @JFernandez-WMF to update Growth figma design documentation,

Thanks @RHo! I just wanted to confirm before applying style modifications to Growth onboarding dialogs.
Yes, it would be nice to have Growth Features spec updated but is not a need right now as we can work with the Onboarding Pattern Figma spec.

In T329037#8859692, @VYanez-WMF wrote:

Thanks @RHo! I just wanted to confirm before applying style modifications to Growth onboarding dialogs.
Yes, it would be nice to have Growth Features spec updated but is not a need right now as we can work with the Onboarding Pattern Figma spec.

SGTM, thanks for confirming! I've created T336889 to update, along with a few other updates needed on that figma file :)