Update badge icon 1.3.0 by hannahiss · Pull Request #3576 · Orange-OpenSource/Orange-Boosted-Bootstrap

hannahiss · 2026-05-13T16:32:10Z

Types of change

Non-breaking change
Breaking change (fix or feature that would change existing functionality and usage)

Related issues

Closes #3541

Context & Motivation

Tokens update to 2.4.0

Description

Addition of 2 new sizes (Xsmall and Small)
For the “Positive”, “Info”, “Warning”, and “Negative” status variants:
- Replacement of the vector icon with a new asset without internal padding.
- Removal of space-inset tokens → 0px
For the “Neutral” and “Accent” status variants and for the 2 new sizes:
- Size: Xsmall → Addition of a new token space-inset-xsmall
- Size: Small → Addition of a new token space-inset-small

Checklists

Checklist (for Core Team only)

The changes need to be in the migration guide
The changes are well displayed in Storybook (be careful if example order has changed for DSM)
The changes are compatible with RTL
Manually test browser compatibility with BrowserStack (Chrome 120, Firefox 121, Edge 120, Safari 15.6, iOS Safari, Chrome & Firefox on Android)

Progression (for Core Team only)

Code review
Design review
A11y review
Commit on ouds/main following conventional commit

Live previews

https://deploy-preview-3576--boosted.netlify.app/docs/components/badges

netlify · 2026-05-13T16:33:44Z

❌ Deploy Preview for boosted failed. Why did it fail? →

Name	Link
🔨 Latest commit	`0649a7a`
🔍 Latest deploy log	https://app.netlify.com/projects/boosted/deploys/6a04a78f14dcc80008b3339b

netlify · 2026-05-13T16:35:08Z

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	`67dee85`
🔍 Latest deploy log	https://app.netlify.com/projects/boosted/deploys/6a227ce3c6e3190008cdfd2c
😎 Deploy Preview	https://deploy-preview-3576--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

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

Copilot

Pull request overview

This PR updates the badge-icon component to align with the newer design tokens (system tokens 2.4.0) and the “Update badge - icon 1.3” spec, including new icon assets and additional supported sizes.

Changes:

Added xsmall and small size variants for badge-icon documentation and styling.
Reworked functional status badge-icon rendering to use new SVG mask assets (including a two-layer warning icon) and updated padding tokens.
Added new badge icon SVG token assets per brand and updated Bundlewatch thresholds to reflect the CSS size increase.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
site/src/content/docs/components/badges.mdx	Updates badge-icon docs/examples for new sizes and disabled/variant states.
scss/_badges.scss	Refactors badge-icon styling (new size vars, status variant mixin, mask-based icons).
packages/sosh/scss/tokens/_composite.scss	Adds new badge icon SVG assets (positive/info/warning/negative).
packages/orange/scss/tokens/_composite.scss	Adds new badge icon SVG assets (positive/info/warning/negative).
packages/orange-compact/scss/tokens/_composite.scss	Adds new badge icon SVG assets (positive/info/warning/negative).
.bundlewatch.config.json	Updates max bundle sizes to accommodate CSS growth from new assets/styles.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

MaxLardenois · 2026-05-22T09:44:50Z

I changed the styles of the :not(sthg):not(sthg) to :not(sthg, sthg)

MaxLardenois

LGTM

MaxLardenois · 2026-05-22T13:23:33Z

    {
      "path": "./packages/orange/dist/css/ouds-web.css",
-      "maxSize": "65.5 kB"
+      "maxSize": "66.75 kB"


Oooff, as they say...

jerome-regnier · 2026-05-29T07:54:40Z

Design review Figma :
https://www.figma.com/design/yKtkEY1DOl7YDvmt7jq0QF/-OUDS-Core-Lib--Review?node-id=71865-883&t=zuVPozNTCGKlH0wS-1

👌 OK Design

louismaximepiton · 2026-05-29T06:47:09Z

@@ -1,46 +1,107 @@
+//
+// Mixins


We used to have the mixins in a separate file in scss/mixins, don't know if we have to move it or not.

louismaximepiton · 2026-05-29T06:52:05Z

-    &.badge-info {
-      --#{$prefix}badge-color: #{$ouds-color-content-on-status-info-emphasized};
-      --#{$prefix}badge-background-color: #{$ouds-color-surface-status-info-emphasized};
+  &.badge-positive:not(.badge-neutral, .badge-accent) {


I think where there is a variant class, we can safely remove :not(...)

louismaximepiton · 2026-05-29T06:54:17Z

-        mask-image: escape-svg(var(--#{$prefix}badge-warning-icon));
-      }
-    }
+  &.badge.badge-disabled { // Artificially increase the selector's weight to overwrite colors when badge is disabled


If above works, we can remove .badge in here

louismaximepiton · 2026-05-29T08:21:32Z


+// Badge
+// badge-icon tick-confirmation-fill v1.6
+$badge-icon-positive: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g clip-path='url(#a)'><path fill-rule='evenodd' d='M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm5.878 6.363a1.054 1.054 0 0 0-1.485.142l-6.902 8.363-1.75-3.709a1.055 1.055 0 1 0-1.908.901l2.46 5.21a1.055 1.055 0 0 0 1.767.221l7.96-9.643a1.053 1.053 0 0 0-.142-1.485Z' clip-rule='evenodd'/></g><defs><clipPath id='a'><path fill='#fff' d='M0 0h24v24H0z'/></clipPath></defs></svg>") !default;


I don't understand why these icons are filled, we could have only the inside of them, here they are semi transparent, so it might lead to issues on a11y side, it's heavier, it makes us change the behavior of the badge ... not convinced, but I'd like to hear why this choice has been made on design side.

louismaximepiton · 2026-05-29T08:24:30Z

+    height: var(--#{$prefix}badge-size);
+    padding: 0;
+
+    .badge-status-icon {


Could be outside of .badge-icon to lesser specificity

louismaximepiton · 2026-05-29T08:26:48Z

+.badge-xsmall:not(.badge-count) {
  --#{$prefix}badge-size: #{px-to-rem($ouds-badge-size-xsmall)};
+
+  &:not(:has(.badge-status-icon)) {


It feels tricky to me, I'd rather set it for everyone and remove the padding on .badge-icon:has(.badge-status-icon)

louismaximepiton · 2026-05-29T08:27:26Z

+  }
+
+  .badge-icon {
+    font-size: calc(#{$ouds-badge-size-xsmall} - (2 * var(--#{$prefix}badge-padding-icon-xsmall)));


We could probably set a CSS var in this case

hannahiss added 2 commits May 13, 2026 17:54

Start update

9879375

Revert dist

0649a7a

github-project-automation Bot added this to 🟣 [Orange-Boosted-Bootstrap] PRs Board May 13, 2026

github-project-automation Bot moved this to In Progress / Draft in 🟣 [Orange-Boosted-Bootstrap] PRs Board May 13, 2026

useless currentcolor

2bb6cb4

revert dist

4418e15

hannahiss added 2 commits May 13, 2026 18:38

.

06d0722

Ok for functional badge-icon with new icons

05d5449

hannahiss linked an issue May 19, 2026 that may be closed by this pull request

[OUDS] [Component] Update badge - icon 1.3 #3541

Open

hannahiss added 2 commits May 20, 2026 14:30

Version ok for all states, to be simplified

3161543

Simplified version ok for all states

72460e5

vprothais requested a review from Copilot May 21, 2026 13:52

Copilot started reviewing on behalf of vprothais May 21, 2026 13:52 View session

Copilot AI reviewed May 21, 2026

View reviewed changes

Comment thread scss/_badges.scss

Comment thread scss/_badges.scss

Comment thread site/src/content/docs/components/badges.mdx Outdated

Comment thread site/src/content/docs/components/badges.mdx

Comment thread site/src/content/docs/components/badges.mdx Outdated

fix: review

86c0074

update bundlwatch

d85c591

MaxLardenois approved these changes May 22, 2026

View reviewed changes

boosted-bot moved this from In Progress / Draft to Need Lead Dev Review in 🟣 [Orange-Boosted-Bootstrap] PRs Board May 22, 2026

hannahiss force-pushed the update-badge-icon-1.3.0 branch 3 times, most recently from 242709f to d85c591 Compare May 27, 2026 17:42

hannahiss added 3 commits May 27, 2026 19:56

fixes after Max's review

d96cf38

visually hidden text harmonization

0a062e5

bundlewatch

375d79f

hannahiss marked this pull request as ready for review May 28, 2026 07:39

boosted-bot moved this from Need Lead Dev Review to Need Dev Review in 🟣 [Orange-Boosted-Bootstrap] PRs Board May 28, 2026

hannahiss assigned vprothais May 28, 2026

Fix disabled colors

3320e96

jerome-regnier added the 👌 OK Design label May 29, 2026

louismaximepiton reviewed May 29, 2026

View reviewed changes

First fixes after LM review

67dee85

Conversation

hannahiss commented May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Types of change

Related issues

Context & Motivation

Description

Checklists

Checklist (for Core Team only)

Progression (for Core Team only)

Live previews

Uh oh!

netlify Bot commented May 13, 2026

❌ Deploy Preview for boosted failed. Why did it fail? →

Uh oh!

netlify Bot commented May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for boosted ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MaxLardenois commented May 22, 2026

Uh oh!

MaxLardenois left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jerome-regnier commented May 29, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

hannahiss commented May 13, 2026 •

edited

Loading

netlify Bot commented May 13, 2026 •

edited

Loading