Page MenuHomePhabricator

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

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

Related Gerrit Patches:
mediawiki/extensions/MobileFrontend : masterStorybook line height should mirror Minerva for consistency
mediawiki/extensions/MobileFrontend : masterDocument all our components in storybook
mediawiki/extensions/MobileFrontend : masterIcons should not be defined in stylesheets
mediawiki/extensions/MobileFrontend : masterDev: Provide sensible fallbacks on mw.config values that don't exist

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 28 2019, 7:26 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

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

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

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

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

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

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

Jdlrobson added a subscriber: alexhollender.

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.

phuedx claimed this task.Sep 2 2019, 5:11 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

Is this something that needs to be fixed?

T

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

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.

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

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

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

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

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!