-
Notifications
You must be signed in to change notification settings - Fork 4.7k
Description
⏸️ On hold while we first focus on #41973
To clean up size inconsistencies between form components (e.g. button, input, select), we'd first like to standardize on a default height of 36px. This matches the default height of the Button component, and is an appropriate size for most contexts. It is also an acceptable "interim" size to be at before we introduce the larger 40px size variants.
Migration plan
- Follow the style deprecation procedure to add a
__next36pxDefaultSizeprop, but do not add a formaldeprecate()warning. (This prop will be used as an internal feature flag to coordinate the rollout of the size changes. Externally, the size changes will land without a formal deprecation.) - If the component already has a
sizeprop, opting into__next36pxDefaultSizeshould only affect the"default"variant. - If the component currently defaults to 40px, those styles can be moved to a "large" size variant. (
size = "__unstable-large") - If the component already has a 40px "large" variant, that variant can stay.
Components to migrate
Stage 1
These are the "primitive" components that need to be addressed first. Adding 36px variants to these will allow other components built on them to provide 36px variants.
- InputControl InputControl: Add flag for larger default size #40622
- NumberControl InputControl: Add flag for larger default size #40622
- UnitControl UnitControl: Add flag for larger default size #40627
- SelectControl SelectControl: Add flag for larger default size #42456
- CustomSelectControl CustomSelectControl: Add flag for larger default size #39401
- FormTokenField ComboboxControl / FormTokenField: Add flag for larger default size #40746
- ComboboxControl ComboboxControl / FormTokenField: Add flag for larger default size #40746
Stage 2
These are the higher-level components built using the primitive components. Those marked with * do not require a __next36pxDefaultSize prop at all and can land the size changes immediately, since they are already in an inconsistent state.
- AnglePickerControl*
- BorderControl/BorderBoxControl BorderControl: Make height consistent with other controls #40920
- BoxControl
- ColorPicker* ColorPicker: Downsize inputs to 36px #41795
- CustomGradientPicker*
- FocalPointPicker
- FontSizePicker*
- RangeControl
Out of scope
- TextControl/TextareaControl — The plan is to phase these out in favor of InputControl.