Need for compact inputs / components

[janhassel]

Summary

The current component designs are very limiting in how interface can be designed. Particularly produtivity (web)applications are suffering strongly from these limitations. There is strong need for more compact versions of the components (whether it be through a prop or an overall feature flag).

Justification

Picture a sidepanel with number inputs – a fairly common UX pattern. Take a look at Keynote, Sketch or Figma for example.

When using the smallest available number inputs (32px high, 150px wide) and a spacing of 8px in between, the width of the
sidepanel is 213% of the size of sketch's sidepanel. A sidepanel with this width is not feasible and wouldn't even fit in the sm breakpoint.

"Must have" functionality

Offer compact versions of components, reducing their inner paddings and min-widths. Potentially find altermative solutions for validation messages to keep the width down).

[aagonzales]

Yeah we should evaluate if we need min-widths on input components. Or maybe change it depending on component size. I've brought this topic up with the team today so hopefully we can get some traction on it soon.

Related issue: #6202

[tw15egan]

I agree, unless the visuals of the component are changed under a certain width, input components should simply fill 100% of their container. That way, a small width can be specified on the container and the inputs will shrink to fit, without a min-width preventing that. I think this can be broken into two different issues

• Removing min-width on form components
• Provide an xs size variant to reduce the overall height

[janhassel]

@tw15egan for the xs size it would be helpful to reduce the component's padding. The number input currently uses spacing-05 I think, which could be reduced to spacing-03 maybe?

[wnm3]

We are very limited in space provided in an iframe to 266x699 so having absolute control over spacing is necessary. Overriding CSS becomes excessive and seems to undo the benefits of using a design framework. I'd even go as far as asking for xxs where minimum padding and margins are used allowing us to add back what is needed to improve the view and giving us control over component placement, alignment.