Fix design issues on social buttons

[hannahiss]

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

Related issues

Issues seen when reviewing issue #1766 and PR #1778

Description

What has been seen by Franco:

• global quality of social icons is not really good and some icons are not compliant with real ones
• design issues:
  • hover color of Snapchat should be black and not white
  • Facebook icon is not correct
  • LinkedIn icon size should be 18x18 instead of 20x20

Franco proposed new icons, they have been optimized with svgo and cleaned up of unnecessary attributes, and result is obviously visually better but bundle size is really bigger. Note that some aliasing is still visible in zoom 100% but seems due to browser display (ok in 200%).

Icons look and size comparison, and proposition:

icon	old size	new size	Look enhancement	proposition
Facebook	141 bytes	257 bytes	really better	use new icon
Instagram	840 bytes	1 664 bytes	slightly better (visible only with zoom 200%)	keep old icon
WhatsApp	511 bytes	1 216 bytes	slightly better (visible only with zoom 200%)	keep old icon
LinkedIn	239 bytes	413 bytes	really better	use new icon
Youtube	414 bytes	411 bytes	slightly better (visible only with zoom 200%)	use new icon
Snapchat	206 bytes	1 532 bytes	really better	find other icon?
Pinterest	292 bytes	832 bytes	a bit better and bigger	keep old icon?
Email	502 bytes	380 bytes	a bit better and bigger	use new icon
Total	122 748 bytes	126 353 bytes

Comparison before (above) and after (below):

No changes on icons Twitter (for now) and TikTok (already new).

Technical changes in .btn-social class:

• transform can now be specified on all icons if needed, not only LinkedIn (to make code more generic)
• new possibility to change hover color if specified in $btn-social-networks in _variables.scss

Motivation & Context

Changes asked by Franco after a review on social icons.

Types of change

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

Live previews

• https://deploy-preview-2073--boosted.netlify.app/docs/5.3/components/buttons/#social-buttons
• https://deploy-preview-2073--boosted.netlify.app/docs/5.3/components/footer/#follow-us-bar
• https://deploy-preview-2073--boosted.netlify.app/docs/5.3/examples/footers/

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
• (NA) 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
• (NA) Manually run BrowserStack tests
• (NA) 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	43784d6
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/6596d5eccd828600096f6b90
😎 Deploy Preview	https://deploy-preview-2073--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.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[hannahiss]

During the web weekly synch on 29th August, we agreed on putting this PR "on hold" and start a technical study about using external svgs instead of embedded ones in our css file. We have to check how to manage other styles like transform, size and hiver color (class, css variable?)

[julien-deramond]

Quick prototype can be done with the following idea:

<a href="#" class="btn btn-icon btn-social" style="--bs-network-color: #3b5998;
--bs-network-logo: url(&quot;data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M19 6h5V0h-5c-4 0-7 3-7 7v3H8v6h4v16h6V16h5l1-6h-6V7l1-1z'%3e%3c/path%3e%3c/svg%3e&quot;);">
  <span class="visually-hidden">Facebook</span>
</a>

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 7e08d0d2d..d0590f11b 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -248,6 +248,10 @@
     --#{$prefix}btn-active-border-color: #{$white};
     --#{$prefix}btn-disabled-color: #{$gray-700};
   }
+
+  &::before {
+    mask-size: 32; /* It can be a CSS var as well if needed */
+  }
 }
 
 @each $name in map-keys($btn-social-networks) {

Then the doc could present the different icons and CSS variables to use as inline CSS, or explain that projects can still create their .btn-network and just define the 2 CSS vars within this class definition.