Internal issue 2776 - Checkbox and radio buttons don't behave in the same when when going from default to small

[ticket-sync[bot]]

Checkbox and radio buttons don't behave in the same when when doing from default to small. When radio button goes from default to small the gaps between the individual components gets smaller however the individual components stay the same. When checkbox goes from default to small the components change size as well as the gaps between individual components getting smaller. Hence, there is inconsistency between how components behave when going from default to small.

[mi6-577]

Checkbox goes from 32x32 (inc padding) / 24x24 (checkbox icon) to 24x24 (inc padding) / 16x16 (checkbox icon) Radio button remains at 32x32 (inc padding) / 24x24 (radio button ellipse only)

Solution:

• Introduce small sizing variant for Atoms/Radio button icon to match checkbox 24x24 (inc padding) / 16x16 ellipses only
• Introduce small variants of Atoms/Radio button, Single Radio button
• Modify small variants for Two option radio group, Radio group

[mi6-577]

• renamed sizing options on Radio button to small and medium (in line with other components)
• added small variants to radio button atoms and components
• ensure small single radio button (conditional) utilises small text field variant

Figma changes made, ready for dev