Page MenuHomePhabricator

Finalize Design Style Guide's “Components” section
Closed, DeclinedPublic

Description

“Components” section is still lacking a number of components originally identified to be

Available Components as of today
  • Links
  • Buttons
  • Button Groups
  • Checkboxes
  • Radio Buttons
  • Toggle Switches
  • Dropdowns
  • Comboboxes
  • Text inputs and textareas
  • Number inputs
  • File inputs
  • Messages
Pool of components that might be useful to include
  • Dialogs
    • Alerts
    • Confirms
    • Prompts, Messages
  • Process dialogs and higher complex interface dialogs
    • Process dialogs
    • Booklet dialog
    • Search results dialog (VE special dialog)
  • Tabs
  • Toolbars
  • Hover cards / Page previews
  • Loading indicators
  • Progress and activity indicators
  • Tooltips
  • Notifications
  • Data tables
  • Cards
  • Menus
    • Overflow menus
  • Expandables/collapsables
  • Date, time, color pickers
  • Chips / Lozenges
  • Sheets: Bottom or Side
  • Reorder or Drag and drop
  • Breadcrumbs
  • Badges and tags
  • Pagination
  • Avatars
  • Sliders
  • Lists

Components chosen for Oct-Dec 2020

5 highest voted, prioritized components were:

  • Overlays/Modals
  • Progress indicators
  • Language selector
  • Lists advanced
  • Dialogs

Relevant information

T217154: Structure of a “Component” page

Event Timeline

Volker_E updated the task description. (Show Details)
Volker_E updated the task description. (Show Details)
Volker_E renamed this task from Finalize components section to Finalize “Components” section .Aug 12 2020, 2:45 PM
Volker_E added subscribers: RHo, mwilliams.

I've added a handful of potential components to the "Components to include" section. Some could be very low priority or not useful to us at all, but attempting to make the list comprehensive.

I propose adding the following too:

  • Spacing and layouting : Towards a grid system where all components have consistant layouting and spacing.
  • Script support: The idea of scripts having stacked conjuncts, need for vertical space considerations, script directionality.
  • Responsive design: All the components and their behavior in various screensizes

This is a good list. An additional items could be the Language selector/picker. Some ideas for improving and standardizing the component in this document.

Probably low priority, but would like to propose:

  • Panels / Fieldsets
  • Dialog - Hover cards / Page previews
  • Success / Warning / Error / Info notices

The list looks good. Proposing a couple of low priority items.

  • Footer
  • Overflow menu

+1 to this list, particularly the components that are editor-focused.

  • For Visual Editor : mobile and desktop specs for edit cards, toolbars, loading, transitions,

I'd also be keen to see a relational diagram of how to use the different navigations - I know that @alexhollender and I both have versions of something that looks like:

Screen Shot 2020-09-21 at 8.57.58 AM.png (576×1 px, 258 KB)

  • Success / Warning / Error / Info notices

Would you expand on that under light of https://design.wikimedia.org/style-guide/components/messages.html

I'd also be keen to see a relational diagram of how to use the different navigations - I know that @alexhollender and I both have versions of something that looks like:

Screen Shot 2020-09-21 at 8.57.58 AM.png (576×1 px, 258 KB)

Relational diagram seems to be better off in a separate task and, from a current planning perspective probably more leaning into yet to be defined “Patterns” section. Happy if you like to drive that @iamjessklein

  • Success / Warning / Error / Info notices

Would you expand on that under light of https://design.wikimedia.org/style-guide/components/messages.html

Sorry, forgot about that. Nothing to expand :)

Volker_E triaged this task as High priority.Oct 7 2020, 1:09 PM
Volker_E moved this task from Backlog to In Dev/Progress on the Wikimedia Design Style Guide board.

In the last Design Style Guide meeting we've (designers of Wikimedia Design team and one of Wikimedia Deutschland) have prioritized components by importance and current product team needs with every designer having votes.
The 5 highest rated components were:

  • Overlays/Modals
  • Progress indicators
  • Language selector
  • Lists advanced and
  • Dialogs

We've also had meta topic Spacing and grid top-voted, but I've raised concern that this might be far out given our complex in-production mix and non-connected rules. We've then agreed to break it down and consider starting with smaller steps like our base size spacing variables.

We need to limit the number of components to achieve our set goal for this quarter given the designer's prioritized team specific goals and the current situation.

Volker_E renamed this task from Finalize “Components” section to Finalize Design Style Guide's “Components” section .Oct 20 2020, 2:45 PM

With DSG deprecated in favor of its more powerful successor Codex, please see “Proposed New Components” column on the Codex workboard https://phabricator.wikimedia.org/tag/codex/