Components: Audit use of size prop across components

[mirka]

What problem does this address?

Some components have a size prop that behave in slightly different ways. This may lead to confusion and bugs.

What is your proposed solution?

Audit the usage of the size prop across components, and see if there are safeguards we can put in to prevent confusion and mistakes.

Known components

• Control components (InputControl, SelectControl, etc.) have a size prop to control height variants.
• Card: Has a size prop to control padding sizes. The prop name is ambiguous, maybe rename to paddingSize?
• Text: Has a size prop to control font-size. The prop name is appropriate, but the complexity here is that it accepts either a number (interpreted as a ratio of base font size), preset enum string, or CSS value string. Maybe we should simplify. (Acutal bug that could've been prevented with TS if the accepted values were simpler InputControl: Fix incorrect size prop passing to Text #42793)

[ciampo]

Brainstorming a few ideas.

• maybe we should never have a prop called just size, and instead be a bit specific with the prop name ? I.e. size as intended for control components could be renamed to sizeVariant, size on the Text component should be called fontSize, and size on the Card component could be renamed as you suggested to paddingSizeVariant (although, as you know, I'm never a fan of exposing "implementation details" such as "padding" in a prop name)
• More in general, I like the idea that props that allow only a fixed list of preset values (e.g. small, medium, large) have variant added as a suffix