Page MenuHomePhabricator

Add Components section to Design Style Guide
Closed, ResolvedPublic


Components are the missing link (ahem!) in the Wikimedia Design Style Guide.
We've already put the overview files in place at “Resources” section.

The description of those components with links to the OOUI/WikimediaUI theme demos is still needed.

Expected Outcome

  • Adding Components section
  • Structure it on meta navigation level according to design team discussion and agreement of June '19; ✓ mark for rollout necessary.


  • Actions
    • Links ✓
    • Buttons ✓
  • Selection
    • (Limited selection):
    • Checkboxes ✓
    • Radio buttons ✓
    • Toggle buttons ✓
    • Switches ✓
    • (Selection from a list):
    • Dropdowns ✓
    • Combo boxes
    • Combo icon button
    • Tags (chips, pills) ✓
  • Entry
    • (Freeform):
    • Text inputs and textarea ✓
    • (Specific/bounded entry):
    • Text input with validation ✓
    • Number input [spinners]
    • sliders (and dials)
    • File upload +
    • Calendar
    • Color picker
  • Display
    • Text and styles ✓
    • Feedback messages (static/banners): info, success/confirmations, warnings, errors ✓
    • Feedback messages (temporary): snackbars
    • Loading indicators
    • Tooltips/popups
  • Structure the single component pages according to T217154
  • Update and fine-tailor the components overview files to structure above

We will start with the basic components in order to get results out, gather feedback from a wider group of designers/developers and iterate.

Event Timeline

Volker_E created this task.Jul 30 2019, 2:14 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 30 2019, 2:14 PM
Restricted Application added a project: UI-Standardization. · View Herald TranscriptJul 30 2019, 2:31 PM
Volker_E updated the task description. (Show Details)Oct 15 2019, 3:54 AM
Volker_E updated the task description. (Show Details)Oct 22 2019, 4:50 AM

Current state of Git repo:
From the basic components defined to be for roll-out necessary, toggle switches and tags are currently still to be added.

Volker_E updated the task description. (Show Details)Oct 22 2019, 4:59 PM
Volker_E updated the task description. (Show Details)

The repo has finally deployed after ~2weeks being stuck in T235677.

Volker_E added a subscriber: cmadeo.Nov 8 2019, 8:26 PM

From conversation with @cmadeo, she reviewed exemplified Checkboxes:

  • Use clearer in-image labels for checkboxes “selected”/“unselected” vs “neutral point”
  • Does “Designing” make sense in the current structure when it's a repetition of introductory paragraph?

From my POV we also would like to provide an overview of some of the main design decisions without getting to abstract in order to share openly the design, internationalization, usability and accessibility thoughts behind…

From conversation with @alexhollender, he reviewed exemplified Links:

  • In the look & feel of components, interactivity is lacking somewhat

Responded, that we aim to pursue being template and leaving interactivity mostly to the implementation demos.
Alex would yet consider usage of some motion, even if it's just an animated Gif representation.

  • Is indentation of the components images best way? With added interactivity (see above) it would become more clear, now image example could be confusing to some.
  • “Using” section would work better when compared to other components, exemplified on when to use links vs buttons…

That's a rightful argument, and has been part of the original intention for “Using”. We should further strengthen this idea behind the section.

  • Mobile vs desktop in imagery, which of all of this is catered/meant for?

Point taken, the integration of :hover states is clearly desktop targeted. No clear idea how to better cater the difference without massive maintenance overhead right now.

Volker_E updated the task description. (Show Details)Nov 11 2019, 8:12 AM
Volker_E closed this task as Resolved.Nov 12 2019, 8:28 AM
Volker_E claimed this task.
Volker_E removed a project: Patch-For-Review.
Volker_E updated the task description. (Show Details)

The section has been published in
Putting this on resolved and will take further, unresolved inputs over to a follow-up task.