fix(progress-indicator): accept 0 as a valid value (#2068)

* fix(progress-indicator): accept 0 as a valid value

* chore: added changeset

.changeset/early-bats-dance.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+fix(progress-indicator): accept 0 as a valid value

packages/ui/components/progress-indicator/src/LionProgressIndicator.js

@@ -150,7 +150,7 @@ export class LionProgressIndicator extends LocalizeMixin(LitElement) {
       }
     } else {
       if (changedProperties.has('value')) {
-        if (!this.value || typeof this.value !== 'number') {
+        if ((!this.value && this.value !== 0) || typeof this.value !== 'number') {
           this.removeAttribute('value');
         } else if (this.value < this.min) {
           this.value = this.min;

packages/ui/components/progress-indicator/test/lion-progress-indicator.test.js

@@ -149,7 +149,9 @@ describe('lion-progress-indicator', () => {
       const el = await fixture(
         html`<lion-progress-indicator value="30"></lion-progress-indicator> `,
       );
-      el.setAttribute('value', '');
+      // when the attribute is defined, lit set the property to Number(attributeValue)
+      // this means, setting the value to an empty string will be valid because Number('') is 0
+      el.setAttribute('value', 'invalid-value');
       await el.updateComplete;
       expect(el.indeterminate).to.be.true;
       await el.updateComplete;
@@ -158,6 +160,21 @@ describe('lion-progress-indicator', () => {
       expect(el.hasAttribute('aria-valuemax')).to.be.false;
       expect(el.getAttribute('aria-label')).to.equal('Loading');
     });
+
+    it('can update value to 0', async () => {
+      const el = await fixture(
+        html`<lion-progress-indicator value="0"></lion-progress-indicator> `,
+      );
+      await el.updateComplete;
+      expect(el.indeterminate).to.be.false;
+    });
+
+    // empty string will be converted to 0 by lit because value is declared as number
+    it('can update value to 0 if the set value is empty string', async () => {
+      const el = await fixture(html`<lion-progress-indicator value=""></lion-progress-indicator> `);
+      await el.updateComplete;
+      expect(el.indeterminate).to.be.false;
+    });
   });
 
   describe('Subclasers', () => {