Skip to content

Components: Increase default sizes to 36px height #39397

@mirka

Description

@mirka

⏸️ 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 __next36pxDefaultSize prop, but do not add a formal deprecate() 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 size prop, opting into __next36pxDefaultSize should 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.

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.

Out of scope

  • TextControl/TextareaControl — The plan is to phase these out in favor of InputControl.

Metadata

Metadata

Assignees

Labels

[Package] Components/packages/components[Type] Tracking IssueTactical breakdown of efforts across the codebase and/or tied to Overview issues.

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions