fix(forms): hide input control text under valid icon

[julien-deramond]

Fixes #1305

This PR is a proposal to fix #1305 by:

• adding the same padding-right rule than in Bootstrap
• avoiding to display the valid icon for Quantity Selector (not enough space)

Dear reviewer please check all possible cases in forms when inputs are valid.

Live previews

• Forms > Validation > Custom styles
• Forms > Validation > Supported elements

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	3090c1e
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/634d52540733ac000873e464
😎 Deploy Preview	https://deploy-preview-1306--boosted.netlify.app/docs/5.2/components/tooltips
📱 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.

[louismaximepiton]

The actual implementation seems to be great, but here are few questions:

Color picker could be removed too ? Or maybe do it as Bs ?

Few points that could be handled in other PR('s):

• We should remove .is-invalid l.249 in validation.md Handled with last merge of Bs
• We should be careful for input[role="switch"][required]:not(:checked) invalid state (due to a filter):
  

[MewenLeHo]

I think we still need the changes suggested by @louismaximepiton in his comment.
Or at least we should create a distinct issue for the problem raised by LM.

[julien-deramond]

@MewenLeHo or @louismaximepiton Please check this new version including 87892ff which should fix .form-control-color and .form-check-input use cases 🤞

[MewenLeHo]

@MewenLeHo or @louismaximepiton Please check this new version including 87892ff which should fix .form-control-color and .form-check-input use cases 🤞

LGTM 👌

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication