The problem
Right now, we have a mismatch in input to button sizing. Our text input fields only have one height at 40 px, which means to align a button next to the input field, we must use the "large" variant of the button. This creates areas in the design system where, despite having two button variants, we're forced to always use the "large" regardless of the context because of the input field height.
The solution
There's a need for more compact input fields that align with the "default" button height of 32px. I propose creating a "medium" variant for select, combobox, text-input, and multiselect dropdown (which uses the select), in order to align with the default button height.
This variant would thus use pharos-spacing-one-quarter-x instead of pharos-spacing-one-half for its vertical padding in the input box.
Alternatives considered
We've looked into other button sizes and other ways to create smaller variants with font sizing and different padding. This option avoids breaking our existing design conventions and potentially creating mismatched experiences by keeping nearly everything consistent aside from the vertical padding.
Additional information
Add any additional notes or further context about the request here.
The problem
Right now, we have a mismatch in input to button sizing. Our text input fields only have one height at 40 px, which means to align a button next to the input field, we must use the "large" variant of the button. This creates areas in the design system where, despite having two button variants, we're forced to always use the "large" regardless of the context because of the input field height.
The solution
There's a need for more compact input fields that align with the "default" button height of 32px. I propose creating a "medium" variant for select, combobox, text-input, and multiselect dropdown (which uses the select), in order to align with the default button height.
This variant would thus use pharos-spacing-one-quarter-x instead of pharos-spacing-one-half for its vertical padding in the input box.
Alternatives considered
We've looked into other button sizes and other ways to create smaller variants with font sizing and different padding. This option avoids breaking our existing design conventions and potentially creating mismatched experiences by keeping nearly everything consistent aside from the vertical padding.
Additional information
Add any additional notes or further context about the request here.