Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change icons in Boosted-sprite with real Solaris icons #1929

Merged
merged 22 commits into from
Aug 24, 2023

Conversation

hannahiss
Copy link
Member

@hannahiss hannahiss commented Mar 29, 2023

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

Checklist

Contribution

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

@netlify
Copy link

netlify bot commented Mar 29, 2023

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

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@julien-deramond julien-deramond added v5 docs Improvements or additions to documentation labels Mar 29, 2023
@sonarcloud
Copy link

sonarcloud bot commented Apr 4, 2023

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

# Conflicts:
#	site/layouts/shortcodes/orange-footer.html
@hannahiss hannahiss marked this pull request as ready for review June 7, 2023 08:06
@hannahiss hannahiss marked this pull request as draft June 7, 2023 08:15
@hannahiss hannahiss removed the on hold label Jun 8, 2023
@hannahiss hannahiss marked this pull request as ready for review June 8, 2023 13:22
@hannahiss hannahiss self-assigned this Jun 9, 2023
Copy link
Contributor

@MewenLeHo MewenLeHo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any need to update migration guide?

hannahiss

This comment was marked as outdated.

@hannahiss hannahiss requested a review from MewenLeHo June 30, 2023 13:34
Copy link
Contributor

@MewenLeHo MewenLeHo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

@MewenLeHo MewenLeHo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@julien-deramond

This comment was marked as resolved.

@sonarcloud
Copy link

sonarcloud bot commented Jul 10, 2023

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

@julien-deramond
Copy link
Member

The look of icons should remain exactly the same.

There are discrepancies between:

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):

Screenshot 2023-07-10 at 14 25 26

@hannahiss
Copy link
Member Author

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

Copy link
Member

@julien-deramond julien-deramond left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@julien-deramond julien-deramond merged commit 40b26a2 into main Aug 24, 2023
12 checks passed
@julien-deramond julien-deramond deleted the main-his-solaris-icons-sprite branch August 24, 2023 07:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to documentation v5
Projects
Development

Successfully merging this pull request may close these issues.

3 participants