####Background
DST designers have been noticing and [[ https://www.notion.so/wikimediadesign/edddfb2eced04ff2b903c9dc4f3c7813?v=9727767d289a4dde87c1bc51993f9c3d | 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 [[ https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/%E2%9D%96-Codex-components?node-id=1891%3A4420 | 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:
#####Tokens and styles
#####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 demoHorizontal 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.
#####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? 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?
#####Spacing:
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.
#####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...).
####Components#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] Once the new text style (Body M, 14/22) is applied to button labels, buttons' vertical paddings should be updated to 4px.
[Design + Tokens + code update] The above change will create an inconsistency between icon only (6px block padding) and the rest of buttons. A potential new spacing token of 6px should be introduced in the spacing scale.
[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 [[ https://gerrit.wikimedia.org/r/c/design/codex/+/821769 | 821769 ]] for contextA potential new spacing token of 6px should be introduced in the spacing scale.
#####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.
#####Select:
- [Design + potential Code update] Decide whether the Select component should be styled as a neutral Button or as an Input component
- [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)
##### ToggleButton:
- [Design] Have 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