This issue can be tested by using ?new-onboarding=0 or ?new-onboarding=1 on Special:Homepage
Note that the error 'Cannot read properties of undefined (reading 'openWindow')' when using ?new-onboarding=1 will be fixed on https://phabricator.wikimedia.org/T331986

Sounds good! Thanks for your help @bmartinezcalvo @RHo

Topics inside this dialog are shown inside an interactive chip element:

After changes in the Cdx-dialog styles in T332124, we are currently setting the following overwrites in the OnboardingDialog:

• to avoid padding in the body and display the full bleed image

&.cdx-dialog--dividers,
&.cdx-dialog--has-custom-header,
&.cdx-dialog--has-custom-footer {
	.cdx-dialog__body {
		padding: 0;
		}
	}

• to keep the same header and footer padding when the dialog has scrollable content

	&.cdx-dialog--dividers {
		.cdx-dialog__header {
			padding-bottom: 0;
		}

In order to take advantage of Resource Loader image preloading optimisation and filenames ending conversion to adapt to images to RTL, we decided to rollback to implement the dialog images as background-images.
However this approach introduced a portability issue, because the static assets are inlined as base64 URLs in Vite (https://github.com/vitejs/vite/issues/4454) and images are not adapting to RTL.
We are considering using a plugin as https://github.com/vitejs/vite/issues/4454#issuecomment-1478992832 or https://github.com/ManBearTM/vite-plugin-no-bundle so we can keep using background-images.
Other possible solution would be to going back to use an image tag and add logic to apply the RTL image changes, but we would need then to solve the performance issue on image loading.

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.

Yes, noticed that. I wonder if it is related to the character directionality strong, weak or neutral types because if using a RTL lang it seems to be showing the correct direction, so I am not sure which changes we should introduce.

@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?

@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 :)

Hey @RHo ! Thanks for your feedback!

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

Hi,
I am working on T329037, as part of the Modernization of Growth Team web interfaces using Vue.js. We would like to use fullscreen mobile Dialog for addlink and addimage onboarding dialogs. Is it on your plans to start working on it anytime soon?