Skip to content

Support zero values for skins in the OSS::ProgressBar #629

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.

Sign up for GitHub

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

Merged
JulienVannier66 merged 2 commits into from
Jan 29, 2026
Merged

Support zero values for skins in the OSS::ProgressBar #629

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
61f35aa
Support zero values for skins in the OSS::ProgressBar
JulienVannier66 Jan 28, 2026
69f6d5e
Simplify code logic for OSS::ProgressBar
JulienVannier66 Jan 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 8 additions & 10 deletions addon/components/o-s-s/progress-bar.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,14 @@
{{#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}}
<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>
{{/each}}
</div>
{{else}}
Expand Down
8 changes: 2 additions & 6 deletions addon/components/o-s-s/progress-bar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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> => {
Expand All @@ -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 {
Expand Down
24 changes: 24 additions & 0 deletions tests/dummy/app/controllers/visual.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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> {
Expand All @@ -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(() => {
Expand All @@ -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);
Expand Down
16 changes: 16 additions & 0 deletions tests/dummy/app/templates/visual.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,16 @@
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.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}}
Expand All @@ -55,6 +65,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}}
Expand Down
35 changes: 21 additions & 14 deletions tests/integration/components/o-s-s/progress-bar-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,40 +186,49 @@ 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');
assert.dom('.oss-progress-bar__inner:nth-of-type(3)').hasClass('oss-progress-bar__inner--warning');
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}} />`);
Copy link
Member

@Miexil Miexil Jan 29, 2026

Choose a reason for hiding this comment

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

we are removing the @value argument as it isn't used when using "skin-mode" right ?

Copy link
Contributor Author

@JulienVannier66 JulienVannier66 Jan 29, 2026

Choose a reason for hiding this comment

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

Yes, @skins type is skins?: Partial<Record<ProgressBarSkins, number>>;. This is due to a copy/paste error when writing the tests for @skins. When passing @skins, the @value is not read.


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');
});
Expand All @@ -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 });

Expand All @@ -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');
Expand Down
Loading