Background
According to the design specs, most interactive components should be 32px tall at the base font size. 32px is defined as min-size-interactive-pointer and is the min-height of these components.
However, there is a discrepancy between the height of these components as implemented in the Codex component library:
- Select, TextInput, and components that use TextInput (Combobox, Lookup, SeachInput, and TypeaheadSearch) are 32.84px tall (in Codex Demo)
- Button, ToggleSwitch, and FilterChipInput are 32px tall
Solution
- We could fix the too-tall components by reducing the line-height from line-height-x-small, a deprecated token, to line-height-xx-small, which is what they should be anyway.
Implications
This will cause a slight change in TypeaheadSearch since the height of the input will be reduced. We should ensure that this does not cause a regression, especially between the server-rendered input and the Vue version. This should not be an issue since both versions use the same styles now, but we should note it anyway.
Findings & follow-ups
- TextInputs with type="date" are even taller at 34.84px. Changing the line-height from x-small to xx-small will reduce its height from 34.84px to 32.84px. Something inside the box model's content adds an extra 2px to the height of the date inputs. T356284
- Note: There's a discrepancy between changes run on localhost versus Netlify preview.
Acceptance criteria
- Decide how to fix the height discrepancy
- Implement and test with PatchDemo
