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

[mediawiki/extensions/GrowthExperiments@master] ReviseTone: add overflow control to the quiz pill

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

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

[mediawiki/extensions/GrowthExperiments@master] ReviseTone: move quiz game logic in a component

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

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

[mediawiki/extensions/GrowthExperiments@master] ReviseTone: add onboarding dialog

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

Change #1198086 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] ReviseTone: add overflow control to the quiz pill

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

Change #1198087 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] ReviseTone: move quiz game logic in a component

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

Change #1198088 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] ReviseTone: add onboarding dialog before editing

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

I tested in patch demo. (Note that you will need to login, enable Growth features, and then visit your Homepage to view a Revise Tone suggestion).

From my perspective the onboarding quiz looks good!

Two minor issues I noticed:

The responses to the correct answer after question three seems to have a missing space between sentences. But fixing that can be part of: T407580: Revise Tone: finalize copy and translations

And a minor difference from designs: the "I already know this" and "Don't show again" options are available from every onboarding screen, rather than just from the first.

I don't see that as a release blocker, but maybe that's a follow-up task we should log if @AAlhazwani-WMF thinks we should adjust this to match other Structured Task onboarding?

In T407362#11347212, @KStoller-WMF wrote:

I tested in patch demo. (Note that you will need to login, enable Growth features, and then visit your Homepage to view a Revise Tone suggestion).
And a minor difference from designs: the "I already know this" and "Don't show again" options are available from every onboarding screen, rather than just from the first.

I don't see that as a release blocker, but maybe that's a follow-up task we should log if @AAlhazwani-WMF thinks we should adjust this to match other Structured Task onboarding?

+1! @Sgs would it be possible to display the button and the checkbox only on step 1?

while testing things on mobile, i've noticed that for a split second the dialog is displayed fullscreen (thou with the borders still visible)..

but then it changes to this..

i've also started to optimize spacing and layout, while testing things on beta.. here's a summary of the changes that i did with the stylus browser extension [1]

.ext-growthExperiments-OnboardingDialog__header__top_row {
    height: auto;
    padding: 1rem .75rem 0 1.5rem;
}

.ext-growthExperiments-OnboardingDialog__header__title {
    padding: 1rem 1.5rem .75rem;
}

.ext-growthExperiments-QuizGame__introduction {
    padding: .75rem 2.75rem;
}

.ext-growthExperiments-QuizGame__pills {
    align-items: flex-start;
    padding: .75rem 1.5rem;
}

.ext-growthExperiments-ReviseTone-QuizPill {
    margin: 0;
    width: 100%; /* @size-full */
}

.ext-growthExperiments-ReviseTone-QuizPill-Pill {
    width: auto;
    min-width: auto;
}

.ext-growthExperiments-OnboardingDialog.cdx-dialog .cdx-dialog__footer {
    padding: 1rem 1.5rem;
}

.ext-growthExperiments-OnboardingDialog__footer__navigation {
    margin-bottom: 0;   
}

.cdx-checkbox:not(.cdx-checkbox--inline) {
    margin-bottom: 0;
}

.ext-growthExperiments-ReviseTone-QuizPill-Description {
    width: auto;
    padding-left: 0;
    margin-bottom: 0;
    line-height: 1.25rem; /* @line-height-x-small */
}

.ext-growthExperiments-ReviseTone-QuizPill-Pill--success {
    color: #177860; /* @color-success */
    border-color: #099979; /* @border-color-success */
}

.ext-growthExperiments-ReviseTone-QuizPill-Pill--error {
    color: #bf3c2c; /* @color-error */
    border-color: #f54739; /* @border-color-error */
}

another thing that i've noticed is that the (horizontal) swipe is a bit jarring (it has its own momentum, and while swiping the page also moves vertically). i would remove it and only keep the buttons in the footer for the navigation.

i've also noticed that on minerva we display the external link icon in a different color, which looks like a visual bug..

if it's non-trivial, i would hide the icon as we do on desktop. i would also add a target=_blank to links as on mobile is harder to open pages in a new tab.

[1]: https://github.com/openstyles/stylus

In T407362#11358224, @AAlhazwani-WMF wrote:

i've also noticed that on minerva we display the external link icon in a different color, which looks like a visual bug..

if it's non-trivial, i would hide the icon as we do on desktop. i would also add a target=_blank to links as on mobile is harder to open pages in a new tab.

Mh, right now this is part of the message. We could change this from an external to an internal link (as it will often be that), and that should hide the icon. Not sure how to do the target=_blank though without splitting the link out of the message.

In T407362#11358224, @AAlhazwani-WMF wrote:

+1! @Sgs would it be possible to display the button and the checkbox only on step 1?

We can, but it is the opposite design decision DST made in T332767 when proposing the Multi-step dialog pattern and turning it into a Codex example https://doc.wikimedia.org/codex/main/components/demos/dialog.html#multi-step-dialog

In T407362#11358326, @Sgs wrote:

In T407362#11358224, @AAlhazwani-WMF wrote:

+1! @Sgs would it be possible to display the button and the checkbox only on step 1?

We can, but it is the opposite design decision DST made in T332767 when proposing the Multi-step dialog pattern and turning it into a Codex example https://doc.wikimedia.org/codex/main/components/demos/dialog.html#multi-step-dialog

understood! lemme double check with them.. especially how they'd like to address this situation

In T407362#11358224, @AAlhazwani-WMF wrote:

i've also started to optimize spacing and layout, while testing things on beta.. here's a summary of the changes that i did with the stylus browser extension [1]

.ext-growthExperiments-OnboardingDialog__header__top_row {
    height: auto;
    padding: 1rem .75rem 0 1.5rem;
}

.ext-growthExperiments-OnboardingDialog__header__title {
    padding: 1rem 1.5rem .75rem;
}

.ext-growthExperiments-QuizGame__introduction {
    padding: .75rem 2.75rem;
}

.ext-growthExperiments-QuizGame__pills {
    align-items: flex-start;
    padding: .75rem 1.5rem;
}

.ext-growthExperiments-ReviseTone-QuizPill {
    margin: 0;
    width: 100%; /* @size-full */
}

.ext-growthExperiments-ReviseTone-QuizPill-Pill {
    width: auto;
    min-width: auto;
}

.ext-growthExperiments-OnboardingDialog.cdx-dialog .cdx-dialog__footer {
    padding: 1rem 1.5rem;
}

.ext-growthExperiments-OnboardingDialog__footer__navigation {
    margin-bottom: 0;   
}

.cdx-checkbox:not(.cdx-checkbox--inline) {
    margin-bottom: 0;
}

.ext-growthExperiments-ReviseTone-QuizPill-Description {
    width: auto;
    padding-left: 0;
    margin-bottom: 0;
    line-height: 1.25rem; /* @line-height-x-small */
}

.ext-growthExperiments-ReviseTone-QuizPill-Pill--success {
    color: #177860; /* @color-success */
    border-color: #099979; /* @border-color-success */
}

.ext-growthExperiments-ReviseTone-QuizPill-Pill--error {
    color: #bf3c2c; /* @color-error */
    border-color: #f54739; /* @border-color-error */
}

@Sgs FYI i've updated this comment to reflect the spacing from codex dialogs

In T407362#11358478, @AAlhazwani-WMF wrote:

In T407362#11358326, @Sgs wrote:

In T407362#11358224, @AAlhazwani-WMF wrote:

+1! @Sgs would it be possible to display the button and the checkbox only on step 1?

We can, but it is the opposite design decision DST made in T332767 when proposing the Multi-step dialog pattern and turning it into a Codex example https://doc.wikimedia.org/codex/main/components/demos/dialog.html#multi-step-dialog

understood! lemme double check with them.. especially how they'd like to address this situation

@Sgs i've reached out to codex.. so, if we to keep the 'Don't show again' visible at all steps there's a higher likelyhood that it will clash with the 'get started' buttons on mobile. we should build a logic to make it reflow if there is not enough space.. especially for languages that may have longer labels.. is something like this possible?

another idea that i was thinking about.. that we could apply here, but that it could also be applied to all of our onboarding dialogs is to don't show the checkbox (ever!), but after dismissing or completing the onboarding we tell* people that they can always re-access it via the help button/panel.

*we could use motion to communicate this w/o the need of additional copy, here's a quick and rough test, imagine you've just clicked on 'get started' (open gif below)

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

[mediawiki/extensions/GrowthExperiments@master] styles(OnboardingDialog): add spacing optimizations

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

In T407362#11358478, @AAlhazwani-WMF wrote:

Is this screenshot from Figma or one of our sites? I cannot reproduce the overlap issue, if I set a long text for that label it already breaks down into two rows:

In T407362#11373624, @AAlhazwani-WMF wrote:

Although I like this design proposal it is sadly expensive to implement. There are two chunks of work, (1) we need to build a custom animation to show/hide from the help panel instead of from the top of the viewport, and the technologies we use for the two components have some friction, Revise tone dialog is Vue-codex, but the rest of dialogs are OOUI, and the Help panel is OOUI. Then there's also the work to re-implement the user preference handling as now the default would be to "not show again" which is the opposite of the current; this chunk is easier as there are less unkowns. I'm totally open for working on this but we would need to create a dedicated task and fill the details there. cc @KStoller-WMF so she can give us the product pov.

re the optimizations from T407362#11358525, they will be testable once 1205136 is merged.

In T407362#11374144, @Sgs wrote:

In T407362#11358478, @AAlhazwani-WMF wrote:

Is this screenshot from Figma or one of our sites?

from https://doc.wikimedia.org/codex/latest/components/demos/dialog.html#multi-step-dialog if you open the dialog in mobile view, and then navigate to the 3rd step you see can the issue. attaching a gif

I cannot reproduce the overlap issue, if I set a long text for that label it already breaks down into two rows:

well, better so!

In T407362#11373624, @AAlhazwani-WMF wrote:

Although I like this design proposal it is sadly expensive to implement. There are two chunks of work, (1) we need to build a custom animation to show/hide from the help panel instead of from the top of the viewport, and the technologies we use for the two components have some friction, Revise tone dialog is Vue-codex, but the rest of dialogs are OOUI, and the Help panel is OOUI. Then there's also the work to re-implement the user preference handling as now the default would be to "not show again" which is the opposite of the current; this chunk is easier as there are less unkowns. I'm totally open for working on this but we would need to create a dedicated task and fill the details there. cc @KStoller-WMF so she can give us the product pov.

fair enough, we could address this separately if we like the idea of removing the "don't show again" checkboxes from the/all onboarding dialogs..

re the optimizations from T407362#11358525, they will be testable once 1205136 is merged.

thank you!

Change #1205136 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] styles(OnboardingDialog): add spacing optimizations

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

The optimizations are now testable in beta, cc @AAlhazwani-WMF, feel free to resolve the task if you are satisfied with the design review.