Create a style guide or pattern library for OFN styles

[jaycmb]

Problem Description

Currently there is no OFN CSS library or style guide where all UI styles are documented in one place. This leads to inconsistencies of styles across the product (both shopfront & admin), that are confusing to shoppers and admin users.

Solution

A library that includes all styles in use across different elements

• Fonts & Font Sizes
• Button Styles & States (Active, Disabled etc.)
• Dropdowns
• ......

This will help

• discovering inconsistencies across the product and unifying styles
• developers & designer which styles to choose when developing new features

[Erioldoesdesign]

I started this work when i first joined by starting a document for 'Interface inventory' https://docs.google.com/presentation/d/1wkM5XUaHpLq-rB4HQ14-IDO__26PFpLiVMmjXhqLaY0/edit?usp=sharing

here's the folder with the up to date screen grabs: https://drive.google.com/drive/folders/18gcoAUyhP_nTQ_VNQZINtVvGcQ2HplJR?usp=sharing

the idea of this exercise being done before a pattern/CSS library is to detail the inconsistencies in the UI.

[jaycmb]

Cool! I think having that screen grabs in a structured way would be a good start for a "directory" of which styles are currently used and where.

[Erioldoesdesign]

There's also a growing style component guide in Figma: https://www.figma.com/file/A1RDmHC9dMxhjF7JTtiMuB/Components-library?node-id=0%3A1

[Erioldoesdesign]

I also have access to some work that Yuko did in 2018 on this here: https://zpl.io/2GXg6g9

I believe one of the problems is that there is not an 'open' single source of truth for the visual style guide of OFN. My frame of reference is from Ushahidi's Pattern Library docs here

I'd be curious to hear what @jibees thinks about how to build a style guide that is open.

[jibees]

Hi. (sorry, I'm late, I didn't see this notification) I totally agree on building such a styleguide: as you mentioned I think it's very relevant and useless to have on single source of truth, both for developers and designers (but maybe for product manager too). Having it on Figma, or maybe elsewhere could be a good first step but is, to my opinion, not enough. To trust such a styleguide and avoid inconsistencies, this is important that the styleguide use the same code as our app. Also having a styleguide makes sense in a components world, to be sure having consistents and customized components, and not reinventing the wheel each times. To conclude, I truly recommend to implements a styleguide inside or beside our application, but using the same code (css, layout, ...)

[Matt-Yorkley]

I'm sensing a very large amount of excitement about implementing a styleguide. Couple of questions:

• We'll just be adding the new components to the styleguide as we create them, right? Not creating a catalogue of all the existing UI elements?
• The one that's been proposed is StoryBook, which works directly with ViewComponents code?
• It would probably make more sense to implement this after the first round of Product Uplift has actually been finished, right? We won't actually have any components until then, and the ones we do create might not be very stable at the beginning (eg they'll be changing regularly)?

[jibees]

Hi @Matt-Yorkley , Here's my answers, according to what I understand, and what I'm expecting:

• Yes, adding only new component as we create is, to me, a good way to start around StyleGuide. Maybe later, we could add components to StyleGuide if we have to modified it. And maybe even later, we could do some effort to add each component we use. But let's start with the lean way: adding only new components.
• As I understood, StoryBook can be use into a rails app if we use https://github.com/github/view_component to create component (which seems to be, without talking about any StyleGuide, a good idea), and if we install https://github.com/jonspalmer/view_component_storybook which is basically a proxy to run storybook inside a Rails app. You can see some of my thoughts inside this document : https://docs.google.com/document/d/1YFQLm0WyfJp1WkHUqr-uhlUtOo5PD8inPzaVkGZ69iA/edit
• The main idea was to take advantage of having a new interface to design/develop (with new components) and setting up a StyleGuide as for many reasons we suspect to be a good idea. Not sure to understand your point: what do you mean by first round? For example, @jaycmb created the first issue for the first component we could have in our StyleGuide (needs to implements the surrounding structure first) : https://github.com/openfoodfoundation/openfoodnetwork/issues/7199.

[jibees]

Hi there ! StyleGuide is done: https://github.com/openfoodfoundation/openfoodnetwork/pull/7284 ! 🎉 Now we need to choose between two CSS framework, that's why I created two issues, to test them: https://github.com/openfoodfoundation/openfoodnetwork/issues/7500 https://github.com/openfoodfoundation/openfoodnetwork/issues/7501