Page MenuHomePhabricator
Create Task
Maniphest T231489

Add storybook to MobileFrontend to guard against potential UI regressions
Closed, ResolvedPublic5 Estimated Story Points
Actions

Description

As a precursor to the proposed changes to Icon's in MobileFrontend (T229440) we need a way to check for UI regressions. Storybook (which we used in Popups) would provide us with this more confidence when making big UI changes like this. Patches have been written and are in need of review. This is time well spent. As well as helping minimise regressions in the icon overhaul task, designers will be able to communicate with developers in a common language e.g. "I'd like to make these changes to the X component"

Demo

This patch tracks the remaining work to make this happen.

See also: StoryPops — Or — The benefits of component isolation with Storybook

Details

SubjectRepoBranchLines +/-
Storybook line height should mirror Minerva for consistencymediawiki/extensions/MobileFrontendmaster+6 -2
Document all our components in storybookmediawiki/extensions/MobileFrontendmaster+3 K -211
Icons should not be defined in stylesheetsmediawiki/extensions/MobileFrontendmaster+15 -14
Dev: Provide sensible fallbacks on mw.config values that don't existmediawiki/extensions/MobileFrontendmaster+41 -23
Customize query in gerrit

Related Objects

Event Timeline

Jdlrobson created this task.Aug 28 2019, 7:26 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 28 2019, 7:26 PM
Jdlrobson triaged this task as High priority.Aug 28 2019, 7:27 PM
Jdlrobson moved this task from Ready for Development to Needs Code Review on the Web-Team-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.
gerritbot added a comment.Aug 28 2019, 7:27 PM

Change 531758 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Dev: Don't access globals inside components

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

gerritbot added a project: Patch-For-Review.Aug 28 2019, 7:27 PM

Change 531742 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Icons should not be defined in stylesheets

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

gerritbot added a comment.Aug 28 2019, 7:28 PM

Change 529138 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Document all our components in storybook

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

gerritbot added a comment.Aug 29 2019, 4:32 PM

Change 531758 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Dev: Provide sensible fallbacks on mw.config values that don't exist

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

ReleaseTaggerBot added a project: MW-1.34-notes (1.34.0-wmf.21; 2019-09-03).Aug 29 2019, 5:00 PM
gerritbot added a comment.Aug 29 2019, 9:35 PM

Change 531742 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Icons should not be defined in stylesheets

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

Jdlrobson set the point value for this task to 5.Aug 30 2019, 6:11 PM
gerritbot added a comment.Aug 30 2019, 10:12 PM

Change 529138 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Document all our components in storybook

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

Jdlrobson moved this task from Needs Code Review to Ready for Signoff on the Web-Team-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.Aug 30 2019, 10:51 PM
Jdlrobson added a subscriber: • alexhollender_WMF.

A storybook is born https://doc.wikimedia.org/MobileFrontend/master/js/ui/

@alexhollender we should use this in our design reviews. It will reflect master (more or less) at all times.

Maintenance_bot removed a project: Patch-For-Review.Aug 30 2019, 11:10 PM
phuedx claimed this task.Sep 2 2019, 5:11 PM
phuedx added a comment.Sep 3 2019, 12:15 PM

This looks great 💪

I think that there might be some typography/vertical rhythm styles that haven't been brought in, which I noticed when looking at https://doc.wikimedia.org/MobileFrontend/master/js/ui/?path=/story/editor--sourceeditoroverlay-with-anon-warning:

doc.wikimedia.org…Production
doc.wikimedia.org.png (369×644 px, 35 KB)
prod.png (441×864 px, 37 KB)

Is this something that needs to be fixed?

Jdlrobson added a comment.Sep 3 2019, 5:37 PM

T

In T231489#5460878, @phuedx wrote:

This looks great 💪

I think that there might be some typography/vertical rhythm styles that haven't been brought in, which I noticed when looking at https://doc.wikimedia.org/MobileFrontend/master/js/ui/?path=/story/editor--sourceeditoroverlay-with-anon-warning:

doc.wikimedia.org…Production
doc.wikimedia.org.png (369×644 px, 35 KB)
prod.png (441×864 px, 37 KB)

Is this something that needs to be fixed?

Sadly there's a few discrepancies when comparing production and Minerva side by side, due to how our CSS is organized.
The line-height is defined on .content elements in Minerva. It's not really associated with a component, so probably best thing is to just copy this across to the storybook general CSS.

gerritbot added a comment.Sep 3 2019, 5:37 PM

Change 534204 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Storybook line height should mirror Minerva for consistency

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

gerritbot added a project: Patch-For-Review.Sep 3 2019, 5:37 PM
Jdlrobson moved this task from Ready for Signoff to Needs Code Review on the Web-Team-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.Sep 3 2019, 5:37 PM
gerritbot added a comment.Sep 4 2019, 12:57 AM

Change 534204 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Storybook line height should mirror Minerva for consistency

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

ReleaseTaggerBot edited projects, added MW-1.34-notes (1.34.0-wmf.22; 2019-09-10); removed MW-1.34-notes (1.34.0-wmf.21; 2019-09-03).Sep 4 2019, 1:00 AM
Maintenance_bot removed a project: Patch-For-Review.Sep 4 2019, 1:10 AM
Jdlrobson moved this task from Needs Code Review to Needs More Work on the Web-Team-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.Sep 4 2019, 1:22 AM

When testing this early with Volker noticed a few ve related errors that i should look into!

Jdlrobson moved this task from Needs More Work to Ready for Signoff on the Web-Team-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.Sep 4 2019, 5:20 PM
Jdlrobson added a subscriber: Jdrewniak.Sep 4 2019, 5:29 PM

There is a problem with the storybook https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/534493 that would be good to fix while we are here @Jdrewniak but I think this task can be considered done at this point.

phuedx closed this task as Resolved.Sep 5 2019, 6:11 PM

This Looks GREAT to me 💪 Excellent work, @Jdlrobson, y'all!

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL