Removing MediaWiki-Page-editing so that this doesn't clutter searches related to actually editing pages in MediaWiki. This project should only be on the parent task, probably (T89970). [batch edit]

These are some of the early explorations on how we could enable users to dismiss a survey without providing an answer. These options include a close "x" button, a close banner, and different positioning and layout approaches.

• Version 000 uses the OOUI quiet button widget.
• Version 001 uses the same button but tries to create a stronger separation of concerns by constraining the survey content in a "separate" column. This approach might be not ideal for longer surveys that need the full width available.
• Version 002 and 003 explore the idea of a banner below the survey but it feels that it's taking too much space for such small interaction.
• Version 004 tries a different position of the dismiss button which might be not very familiar, close buttons are usually positioned in the top right/left corner.
• Version 005 reinforces the meaning of the close button with an additional label which might not be necessary as the "x" is a quiet common pattern and metaphor.

Taking all of this into account we further explored option 000. In order to better separate the content of the survey from the additional interactions such as the close button we are going to use the same close button as the popup component.

The following screens display the different interaction states: default, hover, active and focused.

If we think this is a valuable solution we'll go forward and prepare the redlines for implementation.

Looks good to me. The only thing I'd highlight (more on the design front than the engineering one) is that the spacing is inconsistent with the popup content.

To illustrate what I mean:

In this one 👆 the spacing is all the same across the whole popup, including the X to close.

And in the QuickSurvey mockup the X and its bounding box have different spacing to the survey container than the rest of the elements in the container (unlike the referenced popup).

This is not a problem per se, just wanted to highlight it in case it wasn't intentional, and if it is intentional then we would need what the spacing is supposed to be so that it makes sense and we don't make it up.

Details for the implementation side: QuickSurveys uses WVUI, and this is how they would look like: https://doc.wikimedia.org/wvui/master/ui/?path=/story/components-button--configurable&args=type:quiet;default:;icon:wvuiIconClose;disabled:false The bounding box isn't square, and the background + borders are different from the mockups.

There are also plain icons https://doc.wikimedia.org/wvui/master/ui/?path=/story/components-icon--configurable&args=icon:wvuiIconClose that we could use to construct our own button for this case, but I'm not sure how good of an idea that would be.

To summarize, @aminalhazwani:

• Is the spacing difference in the x buttons intentional? If so, we need some details about it for implementation
• Can you look at the button component in WVUI and check if that is out of style guide or if it could work?

Initially the x button position was intentional (I was afraid that the button was too close to the survey question and might creating some confusion: am I dismissing the survey or am I answering it) but after talking with Pau this morning we opted for a different solution, more aligned with the overall layout.

I check the (quiet) button component from WVUI and it may be too prominent for our needs.

I also noticed that in our design Figma library we have a (quiet) icon-only button which is not available in WVUI at the moment. It's a square button instead of a rectangular one. But also in this case I believe that this button (32x32px) is too prominent for our needs.

That is why I opted for the x button from the popup component, which it is uses a 14x14px icon. But the x button in the popup has no bounding box nor states in the design Figma library so I added a bounding box and the necessary interaction states (default, hover, active, focused). In this case the icon cointainer would be a 24x24px button.

These are the proposed specs, do you know @Jhernandez how we can propose new additions to the WVUI? I can also ping Volker if necessary.

Colors for icon fill, hover, active and focused states follow the same patters as the other buttons in the WVUI. If we need those colors specified also here I'll gladly add them.

I love reading the process and options, thanks for taking the time!

In T184760#7428299, @aminalhazwani wrote:

[...]

>
Colors for icon fill, hover, active and focused states follow the same patters as the other buttons in the WVUI. If we need those colors specified also here I'll gladly add them.

Can we add these to the task description? Looking solid to me.

These are the proposed specs, do you know @Jhernandez how we can propose new additions to the WVUI? I can also ping Volker if necessary.

I have no idea about how this works. I know they are working on another new library but that is not ready so the options are:

• Add a new kind of icon-only-small-button to WVUI
• Build this close button in QuickSurveys with the wvuiIconClose icon and maybe upstream it in the new library in the future

I think getting input from Volker would be helpful to know where we stand at this moment.

@Volker_E do you recommend we add something to WVUI? Or we build something custom for QuickSurveys on top of WVUI? Or use something else?

Thanks @Jhernandez! Here's the specs for the different icon states:

State	Screenshot	Specs
Default		Icon fill: Base 10 #202122. Button background: transparent.
Hover		Icon fill: Base 10 #202122. Button background: Base 90 #f8f9fa. Corner radius: 2px.
Active		Icon fill: Base 10 #202122. Button background: Base 80 #eaecf0. Border: Base 30 1px solid #72777d. Corner radius: 2px.
Focus		Icon fill: Base 10 #202122. Button background: transparent. Border: Accent 50 2px solid #36c. Corner radius: 2px.

I've updated the description.

For QA for this ticket, we only care about the "X" button's position and spacing of that. Nothing else.

@aminalhazwani Do you want the survey title to wrap around the X if it is very long? (like the one in the example survey) or do you want the X to take all the vertical space in the title?

This?

xxxx xx xxxx xxx x  [x]
xxxx x xxxx xxxxxx
xxx xxx xxxxxx xxx xxxx

[xxx] [xxx]

Or this:

xxxx xx xxxx xxx x  [x]
xxxx x xxxx xxxxxx
xxx xxx xxxxxx xxx
xxxx

[xxx] [xxx]

@aminalhazwani The last row on the table with the designs is focus not hover right?

Change 734736 had a related patch set uploaded (by Jhernandez; author: Jhernandez):

[mediawiki/extensions/QuickSurveys@master] Add close button to the surveys

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

@aminalhazwani Do you want the survey title to wrap around the X if it is very long? (like the one in the example survey) or do you want the X to take all the vertical space in the title?

The X taking all the vertical space for the title only.

@aminalhazwani The last row on the table with the designs is focus not hover right?

Yes, that is a typo, thanks for catching that! I fixed it both in the description and in the comment above.

👍 awesome thanks!

@Jhernandez I have a question on the patch. It might need to be stepped back because I notice the hover state it's quite like the mockups.

The color comes from the wikimedia-ui-base that the design team maintains https://github.com/wikimedia/wikimedia-ui-base/blob/master/wikimedia-ui-base.less#L89-L90

@background-color-quiet--hover:   rgba( 0, 24, 73, ( 7 / 255 ) ); // = `@wmui-color-base90` on white.
@background-color-quiet--active:  rgba( 0, 36, 73, ( 21 / 255 ) ); // = `@wmui-color-base80` on white.

@aminalhazwani said he's going to check what other parts of the product use quiet buttons in non-white backgrounds to see how we should proceed.

I did some investigation in product and I found two different implementations of the rule defined in the .less file.

wikimedia-ui-base.less

@background-color-quiet--hover:   rgba( 0, 24, 73, ( 7 / 255 ) ); // = `@wmui-color-base90` on white.
@background-color-quiet--active:  rgba( 0, 36, 73, ( 21 / 255 ) ); // = `@wmui-color-base80` on white.

In the navigation bar, with Legacy Vector disabled the hover state of the navigation button is set to rgba( 0, 24, 73, ( 7 / 255 ) ); instead of @wmui-color-base90 since the button is on a white background.

In the preference pane the hover state of the tabs is set to rgba(255, 255, 255, 0.3) instead of rgba( 0, 24, 73, ( 7 / 255 ) ); since it's on a non-white background.

I pinged Volker last week but I would not want this to be a potential blocker. With all things consider we could keep the color that comes from the from the wikimedia-ui-base @background-color-quiet--hoverand change it later if the design team opts for a different approach.

@aminalhazwani to confirm--you're asking to keep the patch as is, correct?

In T184760#7475020, @mepps wrote:

@aminalhazwani to confirm--you're asking to keep the patch as is, correct?

Correct, thanks @mepps!

Change 734736 merged by jenkins-bot:

[mediawiki/extensions/QuickSurveys@master] Add close button to the surveys

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

@mepps, I thought this task couldn't be moved to QA until ticket 'T293798 QA needs a Quick Survey test environment on beta' was completed?

I have spoken with @mepps, and will move this ticket back to Review/Feedback until ticket 'T293798 QA needs a Quick Survey test environment on beta' is completed.

I have verified the information listed in the ticket Description has been implemented…

During testing I did find one minor issue (with the spacing of the ‘X’ button on some mobile devices or small screens being too close to the survey verbiage) and I have already spoken with the Designer and Developer regarding the issue…

After speaking with them it was decided a bug will be filed by the Designer for the spacing issue…

Since this issue is more of a cosmetic issue and is not something that effects the functionality or behavior of the ‘X’ button, and no other issues have been found during my testing, this ticket will be pushed to Product Sign Off…

Testing was performed at the following urls:
https://en.wikipedia.beta.wmflabs.org/wiki/User:EssexIgyan/sandbox
https://en.wikipedia.beta.wmflabs.org/wiki/User:Erayfield/sandbox

Compatibility Testing was performed on the following:
Desktop  – Chrome version 96 Windows 10 / Microsoft Edge version 95 Windows 10 / Firefox version 94 Windows 10 / Opera version 81 Windows 10 / Safari version 14 Mac OS Big Sur.
Mobile Devices – Android version 11 phone emulator / Android version 8.1 Galaxy A10 tablet / iOS version 15 iPad Pro 5th generation / iOS version 15 iPhone 13 Pro Max.

Below are some screenshots of new code changes on various devices and browser:
(NOTE: please disregard blurriness of screenshots, this is due to device simulation and is not related to the code changes):

Screenshots for iOS 15.0 iPhone 13 Pro Max phone:

Screenshots from Android version 11 phone emulator:

Chrome Browser Version 96:

Thanks @Djackson-ctr !