Proposal: Extend 'short' field size support to all form inputs

[lukefirth]

Summary

Compact styling support for most form input types is available in certain components today via the 'field size prop (eg dropdown but not others, eg text input). We have proposal designs and would like to discuss collaboration on development for this in whatever manner is most appropriate.

Justification

Bringing older product sets into the world of Carbon, generally with a far more 'compact' opinion around design approach (more inputs per page, in higher density). In many of these examples, the product cannot easily re-architect the UX of many of these forms to break up the inputs into more steps easily, and are struggling with a 1-1ish mapping at the current input sizes. Allowing this compact size will greatly improve their ability to consume and work in Carbon.

Desired UX and success metrics

Essentially this is simply adding the same field size prop to all form inputs, reducing their height from 40px to 32px, eg:

Note: A naming convention should likely be applied for varying sizes. Eg: Today data table rows have 'compact', 'short' , etc. I would recommend that we extend those sizing names to any other component sizes - hence this becoming the 'short' version of inputs at 32px.

I can provide more extensive examples, sketch files with these already mocked up and in use etc if required, as well as an internal repo issue link with more extensive documentation.

"Must have" functionality

Described above - extended support of form inputs to support 'short' field sizes in both the kit and the react component library.

Specific timeline issues / requests

Timelines being defined by the primary team in our unit that has these as a requirement. Like with everything, always, the sooner the better.

Available extra resources

The IoT PAL team has a number of development resources working to support requests like these on its own timeline. Naturally when this requirement becomes 'due' we would like to ensure we are able to do this with core Carbon, rather than in the IoT PAL. CC @davidicus

[joshblack]

I believe we've been chipping away at adding these styles to additional form components right @tw15egan ?

[lukefirth]

Great! In fact, with some digging, we did find that Text input has this feature too, just not hooked up to the storybook.

For reference, our killer set of this 32px height requirement would be:

• Date picker
• Dropdown (already seems to support it via the field size feature)
• Number input
• Search (already seems to support it via the 'size' feature
• Text input (already seems to support it via the field size feature)

At which point I'd also like to extend this request to cover inclusion of these in the sketch library if at all possible, which if necessary we can help out with symbol creation, examples etc.

[tw15egan]

Correct, I can go through the components and add in the functionality. For now, it will use the existing size convention of sm and xl to determine the sizes (defaulting to 40px).

For v11 we will change these prop names to map to small and large which are more semantically correct.

[tw15egan]

Just put up #5459 and #5460 that will add the size variants to DatePicker and NumberInput, which should take care of all the form elements. TextInput knob will be surfaced once v10.10.0 is released (Storybook is showing 10.9.3), and these changes will come in a minor patch following.

[tw15egan]

Going to close this out, as it seems like we've added the size variants to all form elements. Let me know if I missed any and I can add in that functionality. We can use #5455 to request this to be added to any other components