Page MenuHomePhabricator

Component design improvements
Open, In Progress, MediumPublicSpike

Description

Background

DST designers have been noticing and documenting inconsistencies and needed design improvements that should be solved and applied to Codex components. In general, the changes will only need to be applied to our Figma component's library, but there might be code updates needed as well.

Goal

We decided to collect all problem areas in a task for visibility. We'll create dedicated tasks to record every needed change and/or exploration:

Spacing:

The horizontal paddings of fields and buttons should be unified: We currently apply a padding of 12px to Buttons, 8px to Inputs, and 12px (left) and 8px (right) to Select. Unifying these values will keep compositions more vertically aligned.

Font sizes:

Codex code components display a font-size of 16px (with a 22px line-height), while all our components in Figma display a 14/20 font by default (aligned with Vector). How might we solve this inconsistency? Should we apply a 14px font size to our demo to consistently showcase the desktop version of components while we figure out our approach to responsiveness?

Transitions:

[Design] Some components are missing transition values in their spec sheets. We should decide if we want to include them to describe only general behavior or also for state transitions (hover, active, etc...).

Accessibility and keyboard navigation:

[Design + potential code update] We should make sure to add keyboard navigation specs to all components and validate their correspondence with the demo.

Buttons:
  • [Design + code update] The horizontal padding between icon and button labels should be 8px.
  • [Design + code update] The background and text color displayed by neutral normal and quiet buttons in their different states should match.
  • [Design + Tokens + Code update] We should evaluate applying a semi-transparent background color (instead of solid) to quiet buttons on hover, this is in order to make them reusable in more contexts (e.g., on non-white backgrounds). See the patch 821769 for context
  • [Design + code update] Buttons in the Codex display the desktop version with a different base font size and they are 32px height while in the Figma specs are 32px for desktop and 34px for mobile. We need to decide if we want to use different size for mobile (although 34px for mobile is too small since the clickable are should be at least 40px)
ButtonGroup:

The design of this component should be fixed so

  • [Design] The border colors of the individual buttons reflect the buttons' states
  • [Design] The component works with autolayout
Checkbox:
  • Checkbox group: In OOUI, the elements in checkbox groups have an 8px space between them. The Wikimedia Style guide indicates that the gap should be 16px between checkboxes, and most likely 8px between the title and the group. (Once reached, a consistent decision should be applied to radiobutton and toggle switch groups too)
  • Missing states: Error, Error focus
  • Create horizontal group variant
Combobox:

[Design] The Combobox design component is missing the following states: Filled focus, Error, Error focus

DropdownButton

[Design] Define its relationships with Button (variant or separate component?) and design it accordingly.

Progress bar
  • Consider applying @background-color-disabled-subtle instead of @background-color-base (#fff) to disabled progress bars.
Select:
  • Design + potential Code update] Decide whether the Select component should be styled as a neutral Button or as an Input component (background and border color decisions depend on this approach)
  • [Design] The following states are missing: Error, Error focus, Error filled
  • [Design] The code Select displays a handle/chevron icon of size 12px, while the designs display a 20px icon.
  • [Design + Code update] Validate Select's DefaultIcon vs TextInput's startIcon: the first one is #202122, the latter 72777d in each case in correspondence with their respective placeholder labels.
  • [Code update] In OOUI, the disabled Select chevron should use opacity-low
Text input:
  • [Design] Create a boolean placeholder property
  • [Design] Create variant (or prop) of Text Input with label
  • [Design] Introduce helper text and prop (T302071)
    1. ToggleButton:
  • [Design] Explore introducing a disabled on state different from disabled off state (similar to other binary components)
Toggle Switch:
  • [Design] Create horizontal group variant
  • [Design] The following states are missing: Error, Error focus

Event Timeline

DAbad changed the task status from Open to In Progress.Tue, Aug 16, 4:46 PM
DAbad triaged this task as Medium priority.
DAbad changed the subtype of this task from "Task" to "Spike".

Commenting on component questions:

  • Horizontal paddings of fields should be unified: We currently apply a padding of 12px to Buttons, 8px to Inputs, and 12px (left) and 8px (right) to Select, . Unifying these values will keep compositions more vertically aligned.

This has come out of the need to differentiate between clickable buttons (in the design past embossed) and inputs (in the design past inset in our flat design approach. It's a good idea to have users understand easier what's an input field and what's a button. Removing the padding would take away another cue. It's just one token we would save here and align things that are not the same.

  • Font sizes: Codex code components display a font-size of 16px (with a 22px line-height), while all our components in Figma display a 14/20 (soon 14/22) font by default (aligned with Vector). How might we solve this inconsistency?

With themes from my POV. It's probably a fine decision to have those differences from an device usability perspective?

  • Transitions: Some components are missing transition values in their spec sheets. We should decide if we want to include them to describe only general behavior or also for state transitions (hover, active, etc...)

Design-only decision.

  • Accessibility and keyboard navigation: We should make sure to add keyboard navigation specs to all components.

Very true. Design-only action.

  • Button:
    • The horizontal padding between icon and button labels should be 8px.

We did this as the icon and the label build a combined group and setting them further apart was dissolving that relationship.

  • Once the new text style (Body M, 14/22) is applied to button labels, buttons' vertical paddings should be updated to 4px.

Agreed.

  • The above change will create an inconsistency between icon only (6px padding) and the rest of buttons

Probably acceptable.

  • ButtonGroup: The design of this component should be fixed so
    • The border colors of the individual buttons reflect the buttons' states

Very hard, if not impossible to technically implement.

  • The component works with autolayout

What does this mean?

  • Checkbox:
    • Checkbox group: In OOUI, the elements in checkbox groups have an 8px space between them. The Wikimedia Style guide indicates that the gap should be 16px between checkboxes, and most likely 8px between the title and the group. (Once reached, a consistent decision should be applied to radiobutton and toggle switch groups too)

Agreed

  • DropdownButton: Define its relationships with Button (variant or separate comppnent?) and design accordingly.

What is meant with that? The one from OOUI?

  • Links: Is there a use case for disabled links?

No, there is no disabled Link. It's just no component we have any identified need or which has ever been part of HTML to begin with.

  • Select:
    • Validate Select's DefaultIcon vs TextInput's startIcon: the first one is #202122, the latter 72777d in each case in correspondence with their respective placeholder labels.
    • In OOUI, the disabled Select chevron should use opacity-low

Agreed.

  • Text input:
    • Create a boolean placeholder property

Expand?

  • Create variant (or prop) of Text Input with label