Improvement of toggle buttons borders

[MewenLeHo]

Related issues

Closes second part of #2163

Description

Coming from the work on font prototype where we now have multiple single toggle buttons not included in a .btn-group:

  <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
  <label class="btn btn-primary mb-5" for="btn-check" onclick="toggleLines()">Toggle yellow lines display</label>

  <input type="checkbox" class="btn-check" id="btn-bg" autocomplete="off">
  <label class="btn btn-primary mb-5" for="btn-bg" onclick="toggleBackground()">Toggle red background display</label>

Simple solution was to make the selector a bit more specific.

Motivation & Context

Before the change:

After the change:

Types of change

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

Live previews

• https://deploy-preview-2239--boosted.netlify.app/docs/5.3/forms/checks-radios/#toggle-buttons/

Checklist

Contribution

• I have read the contributing guidelines

Accessibility

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

Design

• (na) My change respects the design guidelines defined in Orange Design System
• (na) My change is compatible with a 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

• (na) 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 well displayed 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
• (na) Design review
• (na) A11y review

After the merge

• Manually launch Percy tests

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	771e737
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/650a8253a23fc6000800f5e1
😎 Deploy Preview	https://deploy-preview-2239--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.

[louismaximepiton]

I think there's no need to have a migration note on this one.

[julien-deramond]

There's a regression in the second example of https://deploy-preview-2239--boosted.netlify.app/docs/5.3/forms/checks-radios/#with-icon with the hover style:

[louismaximepiton]

Ah yes Good catch my bad on this.

[louismaximepiton]

Couldn't find any other breaking change. Can't find of another way to achieve this behavior.