feat(forms): change rendering of help texts based on UI Kit v5

[hannahiss]

Related issues

Fixes #1767

Description

Set new styles for form-text (help-text) for UI kit V5:

• set font-size to 14px
• set font-weight to bold
• set font-color to #666666
• set line-height to 16px

Before:

After:

Design:

There is a tiny shift of 1px between the text and the input compared to the design, like for error message, we'll have to validate this in design review (or not)

Motivation & Context

Apply changes in design after DSM V5 release

Types of change

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

Live previews

• https://deploy-preview-1779--boosted.netlify.app/docs/5.3/forms/form-control/#form-text

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

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
• (NA) My new component is added in Storybook
• (NA) 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	2f13c95
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/642d1ac4b151ad00085d2305
😎 Deploy Preview	https://deploy-preview-1779--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 settings.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[louismaximepiton]

I can see a shift of 1px between the text and the input compared to the design, but let's keep it for the design review!

[hannahiss]

I can see a shift of 1px between the text and the input compared to the design, but let's keep it for the design review!

Yes, you're right, but it is consistent with error messages though...

Still awaiting for design review, we'll see what Franco will say (card "Dev. Design review >> Forms Help text")

[Franco-Riccitelli]

Looks good. As you mentioned in your comment in this pull request, there is a 1 px difference in the positioning to the visual specification.
 If it is possible to move the Help text 1 px down, that would be perfect. Thanks

[hannahiss]

From DSM or Zeplin, it is asked 6px of top margin, but it makes 10px from the bottom of the input and the top of the uppercase letters, see screenshots below:

DSM (Validation error message):

Zeplin (Validation error message)

Zeplin (Form text):

---

In Boosted, we have currently (not changed), for error message 9px:

So, when I implement Help text, I have the same than for error, 9px:

---

So, does it mean that error messages should be 1 px lower too? @julien-deramond @Franco-Riccitelli

[julien-deramond]

Just some details to change (see suggestions).
IMO we can merge this PR as is because it is consistent with the alignment of valid/invalid messages. The alignment issue observed should be tackled in a separate issue.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication