Page MenuHomePhabricator

Help panel: lighter styling for help panel button
Closed, ResolvedPublic

Description

As part of the work for "add an image", we are going to change the style of the help panel button on both desktop and mobile, for all situations where it appears (whether inside a structured task or not).

Instead of being blue with a white question mark...

image.png (136×146 px, 4 KB)

...it's going to be white with a blue question mark (and blue outline):

image.png (294×318 px, 21 KB)

Figma: https://www.figma.com/file/ULhJr1isDstRbGE5vjYDsr/Add-images-structured-task?node-id=3042%3A8783

Event Timeline

MMiller_WMF created this task.

Hi @Sgs I'm looking at T293147: Structured Tasks: Change how the inspector is collapsed on mobile where the help button will be present as well (but the mechanism for attaching it to the document & positioning it will be different). Perhaps it would make sense to make the help panel button a class (instead of having it be inline in HelpPanel.cta.js) so that ext.growthExperiments.StructuredTask can also include the same class as a dependency.and use the same element or perhaps the CSS could be shared via a mixin.

Sgs changed the task status from Open to In Progress.Oct 14 2021, 4:38 PM

@mewoph it totally makes sense. I will start taking the ButtonWidget code from HelpPanel to a separate component.

@RHo there's a slight divergence between the Figma designs and standard OOUI states (active and focus). Very slight difference in the icon color (active and focus) and the border/outline (active). We can add extra styles to match the designs. For the focus border I think it's worth since makes the tab navigation coherent.

Progressive help cta.jpg (720×960 px, 51 KB)

@RHo there's a slight divergence between the Figma designs and standard OOUI states (active and focus). Very slight difference in the icon color (active and focus) and the border/outline (active). We can add extra styles to match the designs. For the focus border I think it's worth since makes the tab navigation coherent.

Progressive help cta.jpg (720×960 px, 51 KB)

Hi @Sgs, I agree that it would be better to add the extra styles in the design so that the box-shadow is kept for the "floating" style on focus. Thanks for the detailed review and clear recommendation!

@mewoph I extracted the help cta style and instantiation to a separate component (See 731349). I would need your input to clarify what to do with the getHelpPanelCtaButton in HelpPanel.php:30 since it also holds some button properties.

Also we have several points where mw-ge-help-panel-cta-button CSS id is set or used. Maybe we could consolidate some of these. ie modules/helppanel/ext.growthExperiments.HelpPanel.cta.js:36

Hi @Sgs, for the button from getHelpPanelCtaButton, unfortunately the attributes would have to be kept in sync manually with the new component (we have several of this pattern where PHP & JS attributes need to align). Right now when the button is returned in the initial HTML, it's infused by OO.ui.ButtonWidget so I think instead this can be infused by the new HelpPanelButton class.

For consolation, do you mean creating a variable for the ID? I think the duplication may have been there because doing $(selectorInVariable) would trigger MediaWiki's lint rule to spell out the selector name in full.

When this change will be ready to be deployed, I think we should announce it to communities through Tech News. It is small, but it is a good way to remind our communities that these features exist.

Thanks for the insights @mewoph

Hi @Sgs, for the button from getHelpPanelCtaButton, unfortunately the attributes would have to be kept in sync manually with the new component (we have several of this pattern where PHP & JS attributes need to align). Right now when the button is returned in the initial HTML, it's infused by OO.ui.ButtonWidget so I think instead this can be infused by the new HelpPanelButton class.

I pushed another patch using infuse method from the HelpPanelButton class. See https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/+/731349

For consolation, do you mean creating a variable for the ID? I think the duplication may have been there because doing $(selectorInVariable) would trigger MediaWiki's lint rule to spell out the selector name in full.

Yes that's what I mean. Alright better to wait for other ways of solving this problem (ie: Vue adoption)

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

[mediawiki/extensions/GrowthExperiments@master] Help panel: lighter styling for help button

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

Sgs lowered the priority of this task from High to Medium.Oct 20 2021, 10:09 AM
Sgs raised the priority of this task from Medium to High.
Sgs moved this task from In Progress to Code Review on the Growth-Team (Current Sprint) board.
Quiddity added a subscriber: Quiddity.

When this change will be ready to be deployed, I think we should announce it to communities through Tech News. It is small, but it is a good way to remind our communities that these features exist.

I'm reluctant to include an entry for a minor design tweak, if it's just for the side-benefit of reminding users about ongoing feature development. I will leave it out for now.

Test wiki created on Patch Demo by SGimeno (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/19df722f34/w/

Test wiki created on Patch Demo by SGimeno (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/f7c0c93022/w/

@RHo I have created a patchdemo instance (https://patchdemo.wmflabs.org/wikis/f7c0c93022/w/) so the updated styles can be confirmed.

@RHo I have created a patchdemo instance (https://patchdemo.wmflabs.org/wikis/f7c0c93022/w/) so the updated styles can be confirmed.

Hi @Sgs - thanks for spinning this up for review. A couple of things:
i. the Desktop version of the help panel is different from expected on the selected and selected focus states:

Expected styling for selected (with "?" turning into the downwards chevron
image.png (508×842 px, 64 KB)
Actual
image.png (1×834 px, 217 KB)

Having said that, I am fine with this as a button instead of a toggle button if it will add substantial work to change the code.

ii. Help icon has an unexpected opacity:.87 instead of 1 across the different states:

image.png (288×932 px, 72 KB)

This is more noticeable on the focused state where the border colour is the expected Accent50 and the help is a lighter colour:
image.png (172×158 px, 11 KB)

Test wiki created on Patch Demo by SGimeno (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/dfe1f602a1/w/

Thanks for the feedback @RHo, I pushed another patch to address both issues. You can check the demo here

Hi @Sgs - thanks for spinning this up for review. A couple of things:
i. the Desktop version of the help panel is different from expected on the selected and selected focus states:

Expected styling for selected (with "?" turning into the downwards chevron
image.png (508×842 px, 64 KB)
Actual
image.png (1×834 px, 217 KB)

Having said that, I am fine with this as a button instead of a toggle button if it will add substantial work to change the code.

The current implementation is using a standard ButtonWidget from OOUI not the ToggleButtonWidget so we have to handle the toggled state manually. Could be improved in the future but for now I think the behavior mimics well the toggle button.

Question: Where does the question mark with blue background state apply in our case?

Screenshot 2021-10-25 at 18.08.16.png (292×756 px, 40 KB)

Test wiki created on Patch Demo by SGimeno (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/51fedddf72/w/

Thanks for the feedback @RHo, I pushed another patch to address both issues. You can check the demo here

Hi @Sgs - thanks for spinning this up for review. A couple of things:
i. the Desktop version of the help panel is different from expected on the selected and selected focus states:

Expected styling for selected (with "?" turning into the downwards chevron
image.png (508×842 px, 64 KB)
Actual
image.png (1×834 px, 217 KB)

Having said that, I am fine with this as a button instead of a toggle button if it will add substantial work to change the code.

The current implementation is using a standard ButtonWidget from OOUI not the ToggleButtonWidget so we have to handle the toggled state manually. Could be improved in the future but for now I think the behavior mimics well the toggle button.

Question: Where does the question mark with blue background state apply in our case?

Screenshot 2021-10-25 at 18.08.16.png (292×756 px, 40 KB)

Oh I included it in there as the beginning of the transition to the downwards chevron icon but actually you would never see it in our case. Sorry for that confusion, I can remove it from the figma!

Thanks for the updates and the Patch 👍🏻

Change 731349 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Help panel: lighter styling for help button

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

Test wiki on Patch Demo by SGimeno (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/51fedddf72/w/

Test wiki on Patch Demo by SGimeno (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/dfe1f602a1/w/

Test wiki on Patch Demo by SGimeno (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/19df722f34/w/

Test wiki on Patch Demo by SGimeno (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/f7c0c93022/w/

Checked in wmf.7 - looks as per the task specs.