Spacing in input fields

[coldlink]

What is the purpose of this change?

To update the spacing in input field components (TextInput/TextArea) between the input element and the labels to match closer to design requirements.

What does this change?

• Adding a 2px margin-top to the supporting text in the label component, to space it from the main label text
• Updates the TextInput component to apply the spacings between the label component, inline messages, and input field.
• Updates the TextArea component to apply the spacings between the label component, inline messages, and input field.
• A margin wasn't added when an inline error/success was visible, as there is already quite a bit of space when it's visible.

Screenshots

Checklist

Accessibility

• Tested with screen reader
• Navigable with keyboard
• Colour contrast passed
• The component doesn't use only colour to convey meaning

Cross browser and device testing

• Tested with touch screen device

Responsiveness

• Tested at all breakpoints
• Tested with with long text
• Stretched to fill a wide container

Documentation

• Full API surface area is documented in the README
• Examples in Storybook

Known issues

[SiAdcock]

Thanks so much for all your hard work @coldlink! 💎