Skip to content

feat(GlFormInput): Add size prop

Mark Florian requested to merge 911-add-input-size-classes into master

What does this MR do?

feat(GlFormInput): Add size prop

This implements form input sizing according to our design specifications.

These are the available sizes:

Name (Max) Width
xs 80px
sm 160px
md 240px
lg 320px
xl 560px
(unset or null) n/a (the default, which is how inputs currently behave)

Addresses #911 (closed).

Integration MR

I'm not sure this is necessary, but I'd like to check at least nothing breaks

The integration MR reveals a fair amount of breakage, due to snapshot tests on shallow mounted components with form input children. I'm considering attempting a different strategy, where the default size is null, such that the size prop doesn't get added to the snapshot.

I've changed the implementation now so that consuming application test suites shouldn't be broken by this.

gitlab!37968 (closed)

Does this MR meet the acceptance criteria?

Conformity

  • Code review guidelines.
  • GitLab UI's contributing guidlines.
  • If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
  • [-] If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
  • If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • [-] Added the ~"component:*" label(s) if applicable.
Edited by Mark Florian

Merge request reports