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

• [x] I have read the contributing guidelines

Accessibility

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

Design

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

Development

• [x] 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

• [x] 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[bot]]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	138252d389b8404a6240e951f8a84f2f259351a0
🔍 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.

[sonarqubecloud[bot]]

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!

[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.

https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/1860/commits/f30721b8b0dcfd9f829143a078258d6d11686541 takes care of it.

[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 ?

[sonarqubecloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication