Checks&Radios: Increase the size to follow the brand

[louismaximepiton]

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

Related issues

NA

Description

Working on an example, I found this issue, so here is a separate PR to tackle this.

Motivation & Context

Checks and Radios are too small compared to the design.

Types of change

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

Live previews

• https://deploy-preview-1860--boosted.netlify.app/docs/forms/checks-radios

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
• (NA) I have added JavaScript unit tests to cover my changes
• (NA) 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)

• (NA) 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	138252d
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/65967b710328b70008b8c163
😎 Deploy Preview	https://deploy-preview-1860--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.

[MewenLeHo]

A little suggestion and it's ok for me ;)

[MewenLeHo]

LGTM 🚀

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[Franco-Riccitelli]

Checkboxes and Radio buttons are now the correct size. All looks good to me.

[Aniort]

in terms of size, good to me
but i glanced at this page and I saw the chapter "star rating"
What a surprise when I saw that the unchecked stars are in gray to not contrasted enough although they convey information and are activable.
We must increase contrast!

[Aniort]

contrast on "star rating" chapter

[louismaximepiton]

It will be tackled in another PR. Thanks a lot for your review!

Edit: Will be tackled via #2005

[julien-deramond]

IMO this PR should also tackle a change of margins for the .form-checks.
With the new size, they are really close together by default:

Thoughts @louismaximepiton?

[louismaximepiton]

As far as I can see, it seems like 20px is common at Orange, should I set it to 20 or maybe only 10? 5? Might be asked to a designer maybe 🤔 Or maybe change the min-height to 1.875rem that would be closer to what Bootstrap propose?

Thinking out loud here but shouldn't we avoid small margin like .125rem?

[louismaximepiton]

Designer:

I think the default vertical space between checkboxes should be 15 px.

f30721b takes care of it.

[julien-deramond]

There's at least an issue in https://deploy-preview-1860--boosted.netlify.app/docs/5.3/forms/validation/#browser-defaults where the space between the checkbox and the button seems too important (compared to https://boosted.netlify.app/docs/5.3/forms/validation/#browser-defaults).

Please double-check all places in the documentation where there are some .form-check and the surrounding spacings.

[louismaximepiton]

Should be resolved right now.
For instance checked:

• dropdown page
• list-group page
• table page
• navbar sticky example page
• check&radios page
• layout page maybe the horizontal layout is quite weird because of the proximity between radios and checks but it shouldn't be used anyway
• overview page
• validation page

Should I update any design description in order to note somewhere the spacings we agreed on ?

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[julien-deramond]

Haven't checked everything yet but the migration guide note's missing to maybe explain to users that there's a new rendering (probably not impactful) but that there's a new rule that can be impactful regarding the fact that there's a forced bottom margin for .form-checks.

Based on the latter, in tables.md, there are a lot of <div class="form-check mb-0"> that should be modified to take into account this rule because the .mb-0 is now useless. Please check all the margin utilities used alongside the new modifications brought by this PR to remove useless classes if needed.

[julien-deramond]

I'm not convinced by this rule, need to think about it. There's no such rule in Bootstrap and it might lead to discrepancies while using libraries based on Bootstrap (just by switching the CSS to Boosted one).

[louismaximepiton]

In Bootstrap the margin bottom is 2px so I think it won't break much. However, our margin-bottom not on last-child might break some designs.