Increase 1px margin for form messages to conform to design

[hannahiss]

Note: Please transform - [ ] into - (NA) in the description when things are not applicable

Related issues

Linked to issues #1761 and #1767.
Based on the discussions that happened in #1779 (direct link).

Description

During the changes made on form texts to conform to new UI kit V5, it has been seen that the margin between form inputs and messages (both form texts and validation messages) was lacking 1px.

Motivation & Context

This change is required to have the exact same height between the bottom of the input field and the top of the uppercase letters at 10px, both in Boosted and in designs.

Types of change

• Bug fix (non-breaking which fixes an issue)

Live previews

• https://deploy-preview-1948--boosted.netlify.app/docs/5.3/forms/form-control/#form-text
• https://deploy-preview-1948--boosted.netlify.app/docs/5.3/forms/validation/#custom-styles

Checklist

Contribution

• I have read the contributing guidelines

Accessibility

• My change follows accessibility good practices; I have at least run axe

Design

• My change respects the design guidelines defined in Orange Design System
• My change is compatible with responsive display

Development

• My change follows the developer guide
• I have added JavaScript unit tests to cover my changes
• I have added SCSS unit tests to cover my changes

Documentation

• My change introduces changes to the documentation and/or I have updated the documentation accordingly

Checklist (for Core Team only)

• My change introduces changes to the migration guide
• My new component is added in Storybook
• My new component is compatible with RTL
• Manually run BrowserStack tests
• Manually test browser compatibility with BrowserStack (Chrome >= 60, Firefox >= 60 (+ ESR), Edge, Safari >= 12, iOS Safari, Chrome & Firefox on Android)
• Code review
• Design review
• A11y review

After the merge

• Manually launch Percy tests

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	bbcbce0
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/64a2ab124cefe6000897e4d0
😎 Deploy Preview	https://deploy-preview-1948--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[louismaximepiton]

LGTM

[Franco-Riccitelli]

All looks good. No issues.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication