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:

Font sizes (T363845)

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?

Grid (T298198)

[Design] We'll have to replace the current grid used in the Responsive section of the components specs sheets and adjust the specs.

RTL components in Figma (T305196)

[Design] We're right now detaching component instances to document their RTL version. Instead, we should consider being more inclusive and provide RTL variants of all our components.

Spacing (T340858)

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.

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.

Icon

[Design] In order to allow using different icon sizes within the components in the Figma library, we should reuse the icon component instead of instances from the icon library in the Codex deesign library.

✓ 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