Buttons: make .btn-secondary default state with transparent background

[louismaximepiton]

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

Related issues

NA

Description

Change default state background to transparent.

Motivation & Context

Better fit design needs. For example this use case:

Types of change

• Refactoring (non-breaking change)

Live previews

• https://deploy-preview-2004--boosted.netlify.app/docs/5.3/components/buttons/#outline-buttons

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)

• 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	6ea8e99
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/647edf35c060d300080bed68
😎 Deploy Preview	https://deploy-preview-2004--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.

[MewenLeHo]

Looks good after the fix 🚀

[julien-deramond]

@louismaximepiton Have you checked with the designers? Are these buttons on a transparent background in the kits, DSM, etc.? It's not mentioned in the description of the PR.

[louismaximepiton]

With the spec review of 25/04:
The default background of these buttons should be transparent. (cf. https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486/i/48901890)

[julien-deramond]

Please double-check every use case including the use of .btn-light and/or .btn-secondary in the library and the documentation.

I can see that the back to top button isn't working anymore because of its transparency:

[louismaximepiton]

Good catch, I don't how we missed that.

For instance, the issues to tackle:

• Back to top

• Dropdowns -> Issue with the split dropdown -> Not a big fan of the workaround. Should we force background for dropdowns ?
  

• Input groups -> Should we force background for default state ?
  

• Quantity selector -> Force default background ?
  

• Clearfix, barely visible

• /docs/5.3/utilities/position/#examples -> the border goes under the button. -> Need to force default background ?

• We already force background for pagination.

Seing all of this, wondering if the transparent background isn't the isolated case. Maybe a solution here could be to add something like: .bg-transparent-no-important or .btn-transparent-bg and use it everytime we need it for components that have changing states. 😅

[julien-deramond]

Maybe we can try to reintroduce https://getbootstrap.com/docs/5.3/components/buttons/#outline-buttons from Bootstrap but only for .btn-outline-secondary. Would mean no modification of existing components.

[julien-deramond]

Please update the description so that it explains/summarizes the new stuff finally implemented in the PR for our future selves. I've crossed out the original description sentence which is not valid anymore.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[julien-deramond]

LGTM! Let's create an issue to study if we could provide a button-outline-variant mixin as done upstream, but not mandatory here.