Align height of components that have the same size property value

[DBD324]

Summary

Many components use the 'size' property to allow different sized variants of the components to be used. However, some components have different heights even though they use the same size value.

For example, a default sized icon button is 32px high, whereas a default sized primary button is 40px high.

This causes issues when trying to align content and requires manual work to align them following the guidance around vertical rhythm.

💬 Description

This ticket involves reviewing all components and aligning the size property across them all. Some components do not currently use the size property, and therefore will need additional size variants adding to them, for example, switch and text field.

Need to test combinations of components together so that they are easy to align in rows of content without having to add additional alignment to containers.

Guidance suggests that default sized components should be used alongside other default sized components, so this change will make it easier to do that.

💰 User value

This makes aligning components much easier and contributes to creating a better sense of vertical rhythm throughout a pages contents.

Additional info

Tell us anything else useful to help us understand your suggestion.