From 61f35aaa8a5cfeea7d63a5a7e8ca5e9d49e91a93 Mon Sep 17 00:00:00 2001
From: Julien Vannier <julien.vannier66@gmail.com>
Date: Wed, 28 Jan 2026 18:24:32 +0100
Subject: [PATCH 1/2] Support zero values for skins in the OSS::ProgressBar

---
 addon/components/o-s-s/progress-bar.hbs       | 35 ++++++++++++-------
 tests/dummy/app/templates/visual.hbs          | 11 ++++++
 .../components/o-s-s/progress-bar-test.ts     | 35 +++++++++++--------
 3 files changed, 55 insertions(+), 26 deletions(-)

diff --git a/addon/components/o-s-s/progress-bar.hbs b/addon/components/o-s-s/progress-bar.hbs
index 1bafa09ce..7420804ad 100644
--- a/addon/components/o-s-s/progress-bar.hbs
+++ b/addon/components/o-s-s/progress-bar.hbs
@@ -6,18 +6,29 @@
   <div class="oss-progress-bar__outer">
     {{#if this.hasSkins}}
       <div class="oss-progress-bar__segments">
-        {{#each this.progressSegments as |skin|}}
-          {{#if (this.isSegmentVisible skin=skin)}}
-            <div
-              class={{this.getSegmentClasses skin=skin}}
-              role="progressbar"
-              aria-valuenow={{this.getSegmentValue skin=skin}}
-              aria-valuemin="0"
-              aria-valuemax="100"
-              style={{this.progressBarStyle value=(this.getSegmentValue skin=skin)}}
-            ></div>
-          {{/if}}
-        {{/each}}
+        {{#if (eq this.totalProgress 0)}}
+          <div
+            class="oss-progress-bar__inner"
+            role="progressbar"
+            aria-valuenow="0"
+            aria-valuemin="0"
+            aria-valuemax="100"
+            style={{this.progressBarStyle value=0}}
+          ></div>
+        {{else}}
+          {{#each this.progressSegments as |skin|}}
+            {{#if (this.isSegmentVisible skin=skin)}}
+              <div
+                class={{this.getSegmentClasses skin=skin}}
+                role="progressbar"
+                aria-valuenow={{this.getSegmentValue skin=skin}}
+                aria-valuemin="0"
+                aria-valuemax="100"
+                style={{this.progressBarStyle value=(this.getSegmentValue skin=skin)}}
+              ></div>
+            {{/if}}
+          {{/each}}
+        {{/if}}
       </div>
     {{else}}
       <div
diff --git a/tests/dummy/app/templates/visual.hbs b/tests/dummy/app/templates/visual.hbs
index 49f5a677a..d9309f4e6 100644
--- a/tests/dummy/app/templates/visual.hbs
+++ b/tests/dummy/app/templates/visual.hbs
@@ -37,6 +37,11 @@
       Multi-skin Progress bars
     </div>
     <div class="fx-row fx-gap-px-24 fx-xalign-center">
+      <OSS::ProgressBar
+        @skins={{hash success=0 warning=0 danger=0}}
+        @displayValue={{true}}
+        @label="Multi-segment example (0%)"
+      />
       <OSS::ProgressBar @skins={{this.progressBarSkins}} @label="Multi-segment live example (70%-100%)" />
       <OSS::ProgressBar
         @skins={{hash success=30 warning=25 danger=15}}
@@ -55,6 +60,12 @@
         @label="Partial progress (55%)"
         @coloredBackground={{true}}
       />
+      <OSS::ProgressBar
+        @skins={{hash pending=0}}
+        @displayValue={{true}}
+        @label="Pending (0%)"
+        @coloredBackground={{true}}
+      />
       <OSS::ProgressBar
         @skins={{hash pending=45}}
         @displayValue={{true}}
diff --git a/tests/integration/components/o-s-s/progress-bar-test.ts b/tests/integration/components/o-s-s/progress-bar-test.ts
index 3a84c2f53..85d6371f6 100644
--- a/tests/integration/components/o-s-s/progress-bar-test.ts
+++ b/tests/integration/components/o-s-s/progress-bar-test.ts
@@ -186,13 +186,13 @@ module('Integration | Component | o-s-s/progress-bar', function (hooks) {
 
   module('@skins arg behaviour', function () {
     test('if the value is defined, the progress bar has the correct multi skin class', async function (assert) {
-      await render(hbs`<OSS::ProgressBar @value={{this.checkedValue}} @skins={{this.skins}} />`);
+      await render(hbs`<OSS::ProgressBar @skins={{this.skins}} />`);
 
       assert.dom('.oss-progress-bar').hasClass('oss-progress-bar--multi-skin');
     });
 
     test('if the value is defined, the progress bar has the correct success, warning, and danger classes', async function (assert) {
-      await render(hbs`<OSS::ProgressBar @value={{this.checkedValue}} @skins={{this.skins}} />`);
+      await render(hbs`<OSS::ProgressBar @skins={{this.skins}} />`);
 
       assert.dom('.oss-progress-bar__inner').hasClass('oss-progress-bar__inner--pending');
       assert.dom('.oss-progress-bar__inner:nth-of-type(2)').hasClass('oss-progress-bar__inner--success');
@@ -200,26 +200,35 @@ module('Integration | Component | o-s-s/progress-bar', function (hooks) {
       assert.dom('.oss-progress-bar__inner:nth-of-type(4)').hasClass('oss-progress-bar__inner--danger');
     });
 
+    test('if the values are equals to 0, it renders an empty progress bar', async function (assert) {
+      this.skins = { pending: 0, success: 0, warning: 0, danger: 0 };
+      await render(hbs`<OSS::ProgressBar @skins={{this.skins}} />`);
+
+      assert
+        .dom('.oss-progress-bar .oss-progress-bar__inner')
+        .hasAttribute('style', 'width: 0%;--progress-bar-animation-width: 0%');
+    });
+
     test('if the value is defined, the progress bar has the correct pending value', async function (assert) {
-      await render(hbs`<OSS::ProgressBar @value={{this.checkedValue}} @skins={{this.skins}} />`);
+      await render(hbs`<OSS::ProgressBar @skins={{this.skins}} />`);
 
       assert.dom('.oss-progress-bar__inner--pending').hasAttribute('aria-valuenow', '10');
     });
 
     test('if the value is defined, the progress bar has the correct success value', async function (assert) {
-      await render(hbs`<OSS::ProgressBar @value={{this.checkedValue}} @skins={{this.skins}} />`);
+      await render(hbs`<OSS::ProgressBar @skins={{this.skins}} />`);
 
       assert.dom('.oss-progress-bar__inner--success').hasAttribute('aria-valuenow', '30');
     });
 
     test('if the value is defined, the progress bar has the correct warning value', async function (assert) {
-      await render(hbs`<OSS::ProgressBar @value={{this.checkedValue}} @skins={{this.skins}} />`);
+      await render(hbs`<OSS::ProgressBar @skins={{this.skins}} />`);
 
       assert.dom('.oss-progress-bar__inner--warning').hasAttribute('aria-valuenow', '25');
     });
 
     test('if the value is defined, the progress bar has the correct danger value', async function (assert) {
-      await render(hbs`<OSS::ProgressBar @value={{this.checkedValue}} @skins={{this.skins}} />`);
+      await render(hbs`<OSS::ProgressBar @skins={{this.skins}} />`);
 
       assert.dom('.oss-progress-bar__inner--danger').hasAttribute('aria-valuenow', '15');
     });
@@ -232,13 +241,11 @@ module('Integration | Component | o-s-s/progress-bar', function (hooks) {
         );
       });
 
-      await render(
-        hbs`<OSS::ProgressBar @value={{this.checkedValue}} @skins={{hash success=30 warning=45 danger=35}} />`
-      );
+      await render(hbs`<OSS::ProgressBar @skins={{hash success=30 warning=45 danger=35}} />`);
     });
 
     test('if the value is updated, the classes also update', async function (assert) {
-      await render(hbs`<OSS::ProgressBar @value={{this.checkedValue}} @skins={{this.skins}} />`);
+      await render(hbs`<OSS::ProgressBar @skins={{this.skins}} />`);
 
       this.set('skins', { success: 50, warning: 30, danger: 20 });
 
@@ -249,28 +256,28 @@ module('Integration | Component | o-s-s/progress-bar', function (hooks) {
     });
 
     test('if only the pending value is defined, the progress bar has the correct pending value', async function (assert) {
-      await render(hbs`<OSS::ProgressBar @value={{this.checkedValue}} @skins={{hash pending=33}} />`);
+      await render(hbs`<OSS::ProgressBar @skins={{hash pending=33}} />`);
 
       assert.dom('.oss-progress-bar__inner--pending').exists();
       assert.dom('.oss-progress-bar__inner--pending').hasAttribute('aria-valuenow', '33');
     });
 
     test('if only the success value is defined, the progress bar has the correct success value', async function (assert) {
-      await render(hbs`<OSS::ProgressBar @value={{this.checkedValue}} @skins={{hash success=33}} />`);
+      await render(hbs`<OSS::ProgressBar @skins={{hash success=33}} />`);
 
       assert.dom('.oss-progress-bar__inner--success').exists();
       assert.dom('.oss-progress-bar__inner--success').hasAttribute('aria-valuenow', '33');
     });
 
     test('if only the warning value is defined, the progress bar has the correct warning value', async function (assert) {
-      await render(hbs`<OSS::ProgressBar @value={{this.checkedValue}} @skins={{hash warning=33}} />`);
+      await render(hbs`<OSS::ProgressBar @skins={{hash warning=33}} />`);
 
       assert.dom('.oss-progress-bar__inner--warning').exists();
       assert.dom('.oss-progress-bar__inner--warning').hasAttribute('aria-valuenow', '33');
     });
 
     test('if only the danger value is defined, the progress bar has the correct danger value', async function (assert) {
-      await render(hbs`<OSS::ProgressBar @value={{this.checkedValue}} @skins={{hash danger=33}} />`);
+      await render(hbs`<OSS::ProgressBar @skins={{hash danger=33}} />`);
 
       assert.dom('.oss-progress-bar__inner--danger').exists();
       assert.dom('.oss-progress-bar__inner--danger').hasAttribute('aria-valuenow', '33');

From 69f6d5eb2b415c2b66102446f8eb88aa41194439 Mon Sep 17 00:00:00 2001
From: Julien Vannier <julien.vannier66@gmail.com>
Date: Thu, 29 Jan 2026 09:51:51 +0100
Subject: [PATCH 2/2] Simplify code logic for OSS::ProgressBar

---
 addon/components/o-s-s/progress-bar.hbs | 23 +++++------------------
 addon/components/o-s-s/progress-bar.ts  |  8 ++------
 tests/dummy/app/controllers/visual.ts   | 24 ++++++++++++++++++++++++
 tests/dummy/app/templates/visual.hbs    |  5 +++++
 4 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/addon/components/o-s-s/progress-bar.hbs b/addon/components/o-s-s/progress-bar.hbs
index 7420804ad..3dadf794c 100644
--- a/addon/components/o-s-s/progress-bar.hbs
+++ b/addon/components/o-s-s/progress-bar.hbs
@@ -6,29 +6,16 @@
   <div class="oss-progress-bar__outer">
     {{#if this.hasSkins}}
       <div class="oss-progress-bar__segments">
-        {{#if (eq this.totalProgress 0)}}
+        {{#each this.progressSegments as |skin|}}
           <div
-            class="oss-progress-bar__inner"
+            class={{this.getSegmentClasses skin=skin}}
             role="progressbar"
-            aria-valuenow="0"
+            aria-valuenow={{this.getSegmentValue skin=skin}}
             aria-valuemin="0"
             aria-valuemax="100"
-            style={{this.progressBarStyle value=0}}
+            style={{this.progressBarStyle value=(this.getSegmentValue skin=skin)}}
           ></div>
-        {{else}}
-          {{#each this.progressSegments as |skin|}}
-            {{#if (this.isSegmentVisible skin=skin)}}
-              <div
-                class={{this.getSegmentClasses skin=skin}}
-                role="progressbar"
-                aria-valuenow={{this.getSegmentValue skin=skin}}
-                aria-valuemin="0"
-                aria-valuemax="100"
-                style={{this.progressBarStyle value=(this.getSegmentValue skin=skin)}}
-              ></div>
-            {{/if}}
-          {{/each}}
-        {{/if}}
+        {{/each}}
       </div>
     {{else}}
       <div
diff --git a/addon/components/o-s-s/progress-bar.ts b/addon/components/o-s-s/progress-bar.ts
index 866b9f6d4..3e25f48e8 100644
--- a/addon/components/o-s-s/progress-bar.ts
+++ b/addon/components/o-s-s/progress-bar.ts
@@ -36,12 +36,8 @@ export default class OSSProgressBar extends Component<OSSProgressBarArgs> {
     }
   }
 
-  isSegmentVisible = helper((_, { skin }: { skin: ProgressBarSkins }): boolean => {
-    return this.hasSkins && (this.skins[skin] || 0) > 0;
-  });
-
   getSegmentValue = helper((_, { skin }: { skin: ProgressBarSkins }): number => {
-    return this.hasSkins ? this.skins[skin] || 0 : 0;
+    return this.skins[skin] ?? 0;
   });
 
   progressBarStyle = helper((_, { value }: { value: number }): ReturnType<typeof htmlSafe> => {
@@ -59,7 +55,7 @@ export default class OSSProgressBar extends Component<OSSProgressBarArgs> {
   }
 
   get progressSegments(): ProgressBarSkins[] {
-    return this.hasSkins ? (Object.keys(this.skins) as ProgressBarSkins[]) : [];
+    return Object.keys(this.skins) as ProgressBarSkins[];
   }
 
   get computedStyles(): string {
diff --git a/tests/dummy/app/controllers/visual.ts b/tests/dummy/app/controllers/visual.ts
index 5adb0a37a..02407c670 100644
--- a/tests/dummy/app/controllers/visual.ts
+++ b/tests/dummy/app/controllers/visual.ts
@@ -116,9 +116,14 @@ export default class Visual extends Controller {
   @tracked progressBarWarning: number = 25;
   @tracked progressBarDanger: number = 15;
 
+  @tracked progressBarSuccess2: number = 30;
+  @tracked progressBarWarning2: number = 25;
+  @tracked progressBarDanger2: number = 15;
+
   constructor() {
     super();
     this.liveProgressBar();
+    this.liveProgressBarZero();
   }
 
   get progressBarSkins(): Record<string, number> {
@@ -129,6 +134,14 @@ export default class Visual extends Controller {
     };
   }
 
+  get progressBarSkins2(): Record<string, number> {
+    return {
+      success: this.progressBarSuccess2,
+      warning: this.progressBarWarning2,
+      danger: this.progressBarDanger2
+    };
+  }
+
   liveProgressBar = (negative: boolean = false): void => {
     const value = negative ? -1 : 1;
     setTimeout(() => {
@@ -140,6 +153,17 @@ export default class Visual extends Controller {
     }, 2000);
   };
 
+  liveProgressBarZero = (negative: boolean = false): void => {
+    const value = negative ? -1 : 1;
+    setTimeout(() => {
+      this.progressBarSuccess2 = value === 1 ? 0 : 20;
+      this.progressBarWarning2 = value === 1 ? 0 : 10;
+      this.progressBarDanger2 = value === 1 ? 0 : 5;
+
+      this.liveProgressBarZero(!negative);
+    }, 2000);
+  };
+
   @action
   redirectTo(route: string): void {
     console.log('Redirect to', route);
diff --git a/tests/dummy/app/templates/visual.hbs b/tests/dummy/app/templates/visual.hbs
index d9309f4e6..0d9f5a749 100644
--- a/tests/dummy/app/templates/visual.hbs
+++ b/tests/dummy/app/templates/visual.hbs
@@ -42,6 +42,11 @@
         @displayValue={{true}}
         @label="Multi-segment example (0%)"
       />
+      <OSS::ProgressBar
+        @skins={{this.progressBarSkins2}}
+        @displayValue={{true}}
+        @label="Multi-segment zero example live"
+      />
       <OSS::ProgressBar @skins={{this.progressBarSkins}} @label="Multi-segment live example (70%-100%)" />
       <OSS::ProgressBar
         @skins={{hash success=30 warning=25 danger=15}}