Add size (or similar) prop to form input

Our design specs for inputs indicate that there are certain sizes (widths) that are allowed.

While the underlying BFormInput component already has a size prop, that changes the padding/margins around the input. In any case, our styles override that behaviour anyway. I suggest we repurpose the existing size prop to implement these widths.

Screenshot_from_2020-07-24_19-01-36

The sizes are (based on the design spec):

Name (Max) Width
xs 80px
sm 160px
md 240px
lg 320px
xl 560px

Questions

  • What would be the default size? Currently, inputs take up all available width; i.e., they're unbounded. Should that still be possible?
  • Is setting this via max-width sufficient?
Edited by Mark Florian