Change icons in Boosted-sprite with real Solaris icons

[hannahiss]

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

Related issues

PR #2022 changed mobile network coverage icon (which was not the good one) separately.

Description

• replace icons with downloaded Solaris icons from DSM, after svgo passed (svgo config below):
  • all icons with same viewbox "0 0 24 24"
  • remove unused/useless icon attributes
• rename icons with real icons names to make them more easy to find in Solaris icons:
  • tooltip => assistance
  • contact => live-chat
  • locate => location-pin-compass
  • coverage => mobile-network-coverage
  • protection => child-protection

svgo config:

module.exports = {
  plugins: [
    // set of built-in plugins enabled by default
    {
      name: 'preset-default',
      params: {
        overrides: {
        // do not remove viewBox attribute
        'removeViewBox': false,
        },
      },
    },
    // removes width and height in presence of viewBox
    'removeDimensions',
    // removes the xmlns attribute for inline SVG
    'removeXMLNS',
    // remove some specific attributes by pattern
    {
      name: "removeAttrs",
      params: {
        attrs: "class"
      }
    }
  ],
};

Motivation & Context

After working on icons, I have seen that they are not formatted exactly the same way (different viewports), which can be confusing. Moreover, they are different from the ones that can be downloaded from DSM. The goal is to make a correct example of sprite file for developers, make it easier and clearer to manipulate.

The look of icons should remain exactly the same, except for inner margins of circled icons: for theses icons, inner margins should be included inside svg and it was not. It will change the rendered size of these icons.

Types of change

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

Live previews

• https://deploy-preview-1929--boosted.netlify.app/docs/5.3/extend/icons/#sprite
• https://deploy-preview-1929--boosted.netlify.app/docs/5.3/components/buttons/#with-icon
• https://deploy-preview-1929--boosted.netlify.app/docs/5.3/components/footer/
• https://deploy-preview-1929--boosted.netlify.app/docs/5.3/content/tables/#with-icons-or-thumbnails
• https://deploy-preview-1929--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
• 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
• (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

After the merge

• Manually launch Percy tests

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	a0952be
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/64e70ae2212af9000881ff88
😎 Deploy Preview	https://deploy-preview-1929--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

[MewenLeHo]

Any need to update migration guide?

[MewenLeHo]

Ok for the recent changes but IMO an update of the migration guide is still needed.

[MewenLeHo]

As discussed during today's daily, we can go without updating the migration guide so ok.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[julien-deramond]

The look of icons should remain exactly the same.

There are discrepancies between:

• https://boosted.netlify.app/docs/5.3/components/buttons/#with-icon and https://deploy-preview-1929--boosted.netlify.app/docs/5.3/components/buttons/#with-icon and all icons examples in this page (sounds rather small with the new version)
• https://boosted.netlify.app/docs/5.3/extend/icons/ and https://deploy-preview-1929--boosted.netlify.app/docs/5.3/extend/icons/ (might not be that important but I preferred to mention it)

I'm wondering if these success, info, danger, and warning icons are built the same way as the others. Because I've checked all the other ones modified in this PR, and this is the only place I can see such a difference.

IDK if it comes from a refresh issue but the rendering of these icons is not incredible (a bit blurry at https://deploy-preview-1929--boosted.netlify.app/docs/5.3/forms/checks-radios/#with-icon):

[hannahiss]

Comment after web spec meeting on 22th August:

The look of icons should remain exactly the same.

That description is not quite exact: it remains the same, except inner margins, which will change the rendering size of icons => I update the PR description.

IDK if it comes from a refresh issue but the rendering of these icons is not incredible (a bit blurry at https://deploy-preview-1929--boosted.netlify.app/docs/5.3/forms/checks-radios/#with-icon):

Icon is the same than in library, aliasing is due to browser rendering...

PR remains unchanged

[julien-deramond]

LGTM. There's only the "settings" icon to reintroduce and we're good to merge it.