Update icons to v2.1 and manage future updates - #3729
Conversation
github-project-automation
Bot
moved this to In Progress / Draft
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
boosted-bot
moved this from In Progress / Draft
to Need Dev Review
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
… more sipmle to retrieve by a search
…ut and improve SVG path reporting
…s - 1st working version
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
… in components, to be able to directly see where we use component alert icons in code
There was a problem hiding this comment.
🟡 Not ready to approve
There are confirmed icon variable naming mismatches (undefined CSS vars) and an unused import/const that likely break lint/build until fixed.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
This review doesn't count toward merge requirements. Sign up for the private preview to control whether Copilot approvals count.
Pull request overview
This PR updates OUDS Web icon assets to v2.1, aligns documentation/examples with renamed sprite symbols, and introduces helper scripts to compare/update sprite and composite icon sources across the 3 brands.
Changes:
- Refresh composite icon data-URIs and generated CSS custom props (renamed to
--bs-alert-*-iconscheme). - Update docs (MDX/Astro/YAML sidebars) to reference new sprite symbol IDs.
- Add
compare-composite-icons/compare-sprite-iconsNode scripts to ease future icon upgrades.
File summaries
| File | Description |
|---|---|
site/src/scss/_toc.scss |
Adds a temporary TOC expand icon styling for the docs layout. |
site/src/layouts/DocsLayout.astro |
Reworks the TOC collapse button to rely on CSS-based icon styling. |
site/src/content/docs/getting-started/migration.mdx |
Minor tag class adjustment in migration notes. |
site/src/content/docs/getting-started/migration-from-boosted.mdx |
Minor tag class adjustment in migration notes. |
site/src/content/docs/getting-started/accessibility.mdx |
Updates sprite icon reference to the new symbol name. |
site/src/content/docs/components/table.mdx |
Replaces deprecated/renamed file icon symbol references. |
site/src/content/docs/components/icon.mdx |
Updates example icons and status icon symbol IDs to v2.1 naming. |
site/src/components/shortcodes/JsDismiss.astro |
Updates dismiss button example to btn-close and removes the old icon usage. |
site/src/components/home/MastHead.astro |
Updates hero buttons to new sprite symbol IDs. |
site/data/sidebar-utilities.yml |
Updates sidebar icon name to new symbol ID. |
site/data/sidebar-layout.yml |
Updates sidebar icon name to new symbol ID. |
site/data/sidebar-getting-started.yml |
Updates sidebar icon name to new symbol ID. |
site/data/sidebar-components.yml |
Updates sidebar icon names to new symbol IDs. |
scss/tests/snapshot-tests/__snapshots__/ouds-web.css |
Updates CSS snapshots to reflect renamed icon vars/data URIs. |
scss/forms/_text-input.scss |
Switches invalid-state icon var from error-icon to alert-error-icon. |
scss/forms/_select-input.scss |
Switches invalid-state icon var from error-icon to alert-error-icon. |
scss/forms/_control-item.scss |
Points control-item icons to new composite-defined variables. |
scss/_variables.scss |
Updates Bootstrap compatibility variables to the new alert icon custom props. |
scss/_tags.scss |
Updates tag icons to use --bs-alert-*-icon custom props. |
scss/_root.scss |
Changes how $svg-as-custom-props keys are emitted as CSS custom properties. |
scss/_links.scss |
Switches link chevron mask source to a composite token icon. |
scss/_buttons.scss |
Updates close button mask-image source to the composite “expurge” icon. |
scss/_alert.scss |
Updates alert icon vars to use --bs-alert-*-icon custom props. |
packages/sosh/scss/tokens/_composite.scss |
Reorganizes and updates embedded icon data URIs to v2.1 and updates custom-props map. |
packages/orange/scss/tokens/_composite.scss |
Reorganizes and updates embedded icon data URIs to v2.1 and updates custom-props map. |
packages/orange-compact/scss/tokens/_composite.scss |
Reorganizes and updates embedded icon data URIs to v2.1 and updates custom-props map. |
package.json |
Adds npm scripts for the new icon-compare tooling. |
build/compare-sprite-icons.mjs |
Adds tooling to compare/refresh per-brand SVG sprite symbols from source folders. |
build/compare-composite-icons.mjs |
Adds tooling to compare/refresh per-brand composite SCSS icon data URIs (with dedup). |
Review details
Files not reviewed (2)
- scss/tests/snapshot-tests/snapshots/ouds-web-bootstrap.css: Generated file
- scss/tests/snapshot-tests/snapshots/ouds-web.css: Generated file
- Files reviewed: 28/33 changed files
- Comments generated: 3
- Review effort level: Lite
We're testing this review assessment. Please use 👍 or 👎 to tell us if it's correct.
| // OUDS mod | ||
| @each $icon, $svg in $svg-as-custom-props { | ||
| --#{$prefix}#{$icon}-icon: #{escape-svg($svg)}; | ||
| --#{$prefix}#{$icon}: #{escape-svg($svg)}; | ||
| } | ||
| // End mod |
There was a problem hiding this comment.
🟡 Changes recommended
It introduces at least one broken npm script reference and a runtime CSS variable mismatch in $list-group-icons that will lead to unresolved icon masks.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
This review doesn't count toward merge requirements. Sign up for the private preview to control whether Copilot approvals count.
Review details
Files not reviewed (2)
- scss/tests/snapshot-tests/snapshots/ouds-web-bootstrap.css: Generated file
- scss/tests/snapshot-tests/snapshots/ouds-web.css: Generated file
Suppressed comments (4)
scss/_variables.scss:1799
- The $list-group-icons map references CSS custom props that are not defined by the updated $svg-as-custom-props keys (uses alert-warning-external-icon and alert-important-icon). This will produce unresolved var(--bs-...) at runtime and is already reflected in generated CSS snapshots. Use the new keys alert-warning-icon and alert-error-icon to match packages/*/scss/tokens/_composite.scss.
$list-group-icons: (
"success": escape-svg(var(--#{$prefix}alert-success-icon)),
"info": escape-svg(var(--#{$prefix}alert-info-icon)),
"warning": escape-svg(var(--#{$prefix}alert-warning-external-icon)),
"danger": escape-svg(var(--#{$prefix}alert-important-icon))
build/update-sprite-icons.mjs:20
- The usage examples reference "npm run update-sprite-icons", but package.json defines the script as "compare-sprite-icons". Update the usage block so it matches the actual npm script name (or rename the npm script accordingly).
// Usage:
// npm run update-sprite-icons "<icons-directory>"
// npm run update-sprite-icons --icons-root "<icons-directory>"
// npm run update-sprite-icons --icons-root "<icons-directory>" --version 2.1
build/update-sprite-icons.mjs:3
- Header comment name doesn't match the file name (currently says compare-sprite-icons.mjs). This is confusing given the npm scripts reference build/update-sprite-icons.mjs.
This issue also appears on line 17 of the same file.
// compare-sprite-icons.mjs
build/update-composite-icons.mjs:3
- Header comment name doesn't match the file name (currently says update-component-icons.mjs). This makes it harder to connect the script to package.json's compare-composite-icons entry.
// update-component-icons.mjs
- Files reviewed: 29/34 changed files
- Comments generated: 1
- Review effort level: Lite
We're testing this review assessment. Please use 👍 or 👎 to tell us if it's correct.
louismaximepiton
left a comment
louismaximepiton
left a comment
There was a problem hiding this comment.
The banner in tarteaucitron doesn't seem like to have any icon anymore
|
|
||
| // * Switch * | ||
| // orange/Component/switch/selected-switch v2.1 | ||
| $switch-selected-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='m17.413 8.962-6.207 7.2a.998.998 0 0 1-.758.338.997.997 0 0 1-.757-.338l-3.103-3.6A.857.857 0 0 1 6.375 12c0-.248.109-.473.284-.636l.388-.36c.175-.163.418-.264.686-.264.24 0 .461.082.63.217l1.891 1.943 5.738-5.157c.173-.15.407-.243.663-.243.536 0 .97.403.97.9a.86.86 0 0 1-.212.562Z' clip-rule='evenodd'/></svg>") !default; |
There was a problem hiding this comment.
There are some evenodd in this path, is that normal ? so there are probably some others
There was a problem hiding this comment.
Yes, there are some remaining fill-rule and clip-path and some other strange stuff but there have been delivered like this by Jérôme. I think the source must be fixed, because if we fix it via our script, we could potentially have a bug... What do you think @vprothais ?
| "success": escape-svg(var(--#{$prefix}alert-success-icon)), | ||
| "info": escape-svg(var(--#{$prefix}alert-info-icon)), | ||
| "warning": escape-svg(var(--#{$prefix}alert-warning-icon)), | ||
| "danger": escape-svg(var(--#{$prefix}alert-error-icon)) |
There was a problem hiding this comment.
escape-svg won't escape nothing in here, we can safely remove I think
|
|
||
| // TODO Hack until we have the expand button | ||
| button.btn-next::after { | ||
| mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='m3 9.167 9 9.333 9-9.333L18.429 6.5 12 13.167 5.571 6.5 3 9.167Z' clip-rule='evenodd'/></svg>"); |
There was a problem hiding this comment.
Here I can remove it since it is just temporary. I can even remove fill="currentColor" in here.
For the tarteaucitron panel, I fixed the icon by pointing to |
# Conflicts: # packages/orange-compact/scss/tokens/_composite.scss # packages/orange/scss/tokens/_composite.scss # packages/sosh/scss/tokens/_composite.scss # scss/_links.scss # scss/forms/_select-input.scss # scss/forms/_text-input.scss # scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css # scss/tests/snapshot-tests/__snapshots__/ouds-web.css # site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg # site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg # site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg
Types of change
Related issues
Closes #3652
Context & Motivation
This PR is to update all OUDS icons to v2.1 across all 3 themes(Orange, Sosh, Orange Compact) and simplify the future updates of icons.
It updates the SVG paths in sprite and composite files, reorganizes icon naming, removes useless icons and adds two new build scripts for automated icon comparison/update.
Description
1. Composite Icons (
_composite.scss) — All 3 BrandsThe icon section of
_composite.scsshas been completely reorganized with clear section headers by component (// * Alert *,// * Badge *,// * Button *, etc.), replacing the previous flat layout. When identical icons are detected, they are reused to lighten the distributed css files.Changes for Orange and Orange-compact component icons
$alert-icon-success$alert-icon-info$alert-icon-warning-external$alert-icon-warning-internal$alert-icon-important$badge-icon-positive$badge-icon-info$badge-icon-warning-external$badge-icon-warning-internal$badge-icon-negative$breadcrumb-divider$breadcrumb-divider-icon$btn-previous-icon$btn-next-icon$btn-expurge-icon$cross-icon-stroke$bullet-list-marker-level-0$bullet-list-marker-level-1$bullet-list-marker-level-2$bullet-list-empty-marker$bullet-list-marker-tick$checkbox-selected-icon$form-check-input-checked-bg-image$checkbox-undetermined-icon$form-check-input-indeterminate-bg-image$chip-tick-icon$link-previous-icon$chevron-icon$radio-button-selected-icon$form-check-radio-checked-bg-image$select-input-chevron$select-input-expanded-chevron$switch-selected-icon$form-switch-checked-bg-imageChanges for Sosh component icons
$alert-icon-success$alert-icon-info$alert-icon-warning-external$alert-icon-warning-internal$alert-icon-important$badge-icon-positive$badge-icon-info$badge-icon-warning-external$badge-icon-warning-internal$badge-icon-negative$breadcrumb-divider$breadcrumb-divider-icon$btn-previous-icon$btn-next-icon$btn-expurge-icon$cross-icon-stroke$bullet-list-marker-level-0$bullet-list-marker-level-1$bullet-list-marker-level-2$bullet-list-empty-marker$bullet-list-marker-tick$checkbox-selected-icon$form-check-input-checked-bg-image$checkbox-undetermined-icon$form-check-input-indeterminate-bg-image$chip-tick-icon$link-previous-icon$chevron-icon$radio-button-selected-icon$form-check-radio-checked-bg-image$select-input-chevron$select-input-expanded-chevron$switch-selected-icon$form-switch-checked-bg-imageCSS Custom Properties Map Renamed
The
$svg-as-custom-propsmap keys were renamed and the suffix '-icon' previously added in root is now visible in here to ease the search of these custom props usages. There are still supposed to follow a consistent-iconsuffix convention:"chevron""chevron-icon""close"$btn-expurge-iconwhere needed and this custom prop was no longer used (some legacy usages still remain pointing directly to$cross-iconor other icons in variables.scss"success""alert-success-icon""info""alert-info-icon""warning""alert-warning-icon""warning-internal""alert-warning-internal-icon""error""alert-error-icon"The new update script also adds duplicated icons inside this map (for now
breadcrumb-divider-iconandbtn-previous-iconso they can be reused without overloading the bundle.Legacy Icons Preserved
The following legacy icons remain unchanged for backward compatibility with draft/legacy components, they should totally disappear over time:
$chevron-icon(pagination, carousel, back-to-top)$cross-icon,$burger-icon,$burger-icon-small(header)$add-icon,$remove-icon,$add-icon-sm,$remove-icon-sm(quantity-selector)$play-icon,$pause-icon(carousel)$helper-icon(text-input Bootstrap compatibility)2. Sprite Icons (
ouds-web-sprite.svg) — All 3 BrandsIcons renamed (ID changed)
main)alert-importantfunctional-status-negativealert-warning-accessiblefunctional-status-warningalert-infofunctional-status-infoalert-successfunctional-status-positivefile-earmark-richtextfile-documentbook-halfinformation-manualgrid-filldisplay-gridrepair-toolsmulti-tool-repairIcons redrawn (same ID, new paths)
copy0 0 1000 10000 0 24 24check20 0 1000 10000 0 24 24design-token-figma0 0 1000 10000 0 24 24ui-auto-mode0 0 1000 10000 0 24 24ui-dark-mode0 0 1000 10000 0 24 24ui-light-mode0 0 1000 10000 0 24 24buy0 0 1000 10000 0 24 24search0 0 1000 10000 0 24 24live-chat0 0 1000 10000 0 24 24location-pin-compass0 0 1000 10000 0 24 24mobile-network-coverage0 0 1000 10000 0 24 24child-protection0 0 1000 10000 0 24 24side-panel-show-chevron0 0 960 9600 0 24 24bug0 0 960 9600 0 24 24message-talk0 0 960 9600 0 24 24external-link0 0 960 9600 0 24 24Icons reformatted (same ID, minor changes)
downloadstyle="fill-rule:evenodd"→fill-rule="evenodd" clip-rule="evenodd"settingsstyle=→ SVG attribute; minor coordinates fixedtrashstyle=→ SVG attribute; coordinates adjusted (.6→.599,7.2→7.199,15→22.2)component-atom.246→.245,.641→.637, etc.)lightning-charge-fillIcons kept unchanged
heart-emptylock-closedaccessibility-visionhideinternetthemetraffic-coneIcons removed (no replacement)
main)alert-warning-tickdeleteexpurgechevron-expandglobe2internetmagicmenu-button-wide-fillpalette2themebraces-asteriskmulti-tool-repairtransfersui-radiosSummary
mainlightning-charge-fill(Bootstrap Icons legacy for Stackblitz).0 0 24 24(exceptlightning-charge-fillat0 0 16 16).external-linkis marked for removal with tokens v2.6.Checklists
Checklist (for Core Team only)
Progression (for Core Team only)
mainfollowing conventional commitLive previews