Alerts: Change warning icon

[louismaximepiton]

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

Related issues

Close one item of #1761.

Description

Change the $warning-icon that is only used for .alert-warning

Motivation & Context

Be conform to UI kit v5.

Types of change

• Refactoring (non-breaking change)

Live previews

• https://deploy-preview-2240--boosted.netlify.app/docs/components/alerts

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 a responsive display

Development

• My change follows the developer guide
• I have added JavaScript unit tests to cover my changes
• 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
• 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
• Design review
• A11y review

After the merge

• Manually launch Percy tests

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	7507bee
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/6509439f3eb83800081d3bd6
😎 Deploy Preview	https://deploy-preview-2240--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.

[julien-deramond]

Haven't checked the code yet but something indirectly linked: https://deploy-preview-2240--boosted.netlify.app/docs/5.3/extend/icons/#sprite is using the previous icon, maybe we need to change it to use the new one OR find another icon example. It could mean removing <symbol fill="currentColor" viewBox="0 0 24 24" id="warning">...</symbol> from our icons sprite.

[julien-deramond]

Tested with combinations of old browsers/OSs and everything seems to be rendered correctly.

TBH I'm not a huge fan of the "warning": ("icon": escape-svg($warning-icon)), syntax but it's lighter compared to a clean one where for each $alert-icons we would have to define this icon value and then another one to true for instance. So let's go with it.

IMO https://deploy-preview-2240--boosted.netlify.app/docs/5.3/utilities/colors/#oranges-colors and https://deploy-preview-2240--boosted.netlify.app/docs/5.3/extend/icons/ can work temporarily if this code would happen to be released without #2075.

Just two minor comments to tackle and we're good to go.

[julien-deramond]

LGTM