From 8fa444c9861264cdbb3f38a2c2722bc99ec17747 Mon Sep 17 00:00:00 2001 From: Luke Vo Date: Wed, 27 Dec 2023 16:26:06 -0600 Subject: [PATCH 1/5] fix(progress): progress buffer defaults to negative. --- progress/internal/linear-progress.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/progress/internal/linear-progress.ts b/progress/internal/linear-progress.ts index 46176782b..69757b42e 100644 --- a/progress/internal/linear-progress.ts +++ b/progress/internal/linear-progress.ts @@ -16,8 +16,9 @@ import {Progress} from './progress.js'; export class LinearProgress extends Progress { /** * Buffer amount to display, a fraction between 0 and `max`. + * If negative, the buffer is not displayed. */ - @property({type: Number}) buffer = 1; + @property({type: Number}) buffer = -1; // Note, the indeterminate animation is rendered with transform %'s // Previously, this was optimized to use px calculated with the resizeObserver @@ -30,14 +31,14 @@ export class LinearProgress extends Progress { }; const dotStyles = { transform: `scaleX(${ - (this.indeterminate ? 1 : this.buffer / this.max) * 100 + (this.indeterminate || this.buffer < 0 ? 1 : this.buffer / this.max) * 100 }%)`, }; // Only display dots when visible - this prevents invisible infinite // animation. const hideDots = - this.indeterminate || this.buffer >= this.max || this.value >= this.max; + this.indeterminate || this.buffer < 0 || this.buffer >= this.max || this.value >= this.max; return html`
From e4b8ef521ffc9ae6a4ff7679f2dfe44ddaa0da97 Mon Sep 17 00:00:00 2001 From: Luke Vo Date: Wed, 27 Dec 2023 20:32:02 -0600 Subject: [PATCH 2/5] Added null check for buffer (due to possibility of attribute removal) --- progress/internal/linear-progress.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/progress/internal/linear-progress.ts b/progress/internal/linear-progress.ts index 69757b42e..5b146535f 100644 --- a/progress/internal/linear-progress.ts +++ b/progress/internal/linear-progress.ts @@ -31,14 +31,15 @@ export class LinearProgress extends Progress { }; const dotStyles = { transform: `scaleX(${ - (this.indeterminate || this.buffer < 0 ? 1 : this.buffer / this.max) * 100 + // == null is used to check for both null and undefined when buffer attribute is removed + (this.indeterminate || this.buffer == null || this.buffer < 0 ? 1 : this.buffer / this.max) * 100 }%)`, }; // Only display dots when visible - this prevents invisible infinite // animation. const hideDots = - this.indeterminate || this.buffer < 0 || this.buffer >= this.max || this.value >= this.max; + this.indeterminate || this.buffer == null || this.buffer < 0 || this.buffer >= this.max || this.value >= this.max; return html`
From a8a9d5658122832bc96f14d4eb962f4def6722d4 Mon Sep 17 00:00:00 2001 From: Luke Vo Date: Thu, 15 Feb 2024 17:28:38 +0700 Subject: [PATCH 3/5] Buffer default value is now 0 and added some code cleanup. --- progress/internal/linear-progress.ts | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/progress/internal/linear-progress.ts b/progress/internal/linear-progress.ts index 5b146535f..555e32669 100644 --- a/progress/internal/linear-progress.ts +++ b/progress/internal/linear-progress.ts @@ -16,9 +16,9 @@ import {Progress} from './progress.js'; export class LinearProgress extends Progress { /** * Buffer amount to display, a fraction between 0 and `max`. - * If negative, the buffer is not displayed. + * If the value is 0 or negative, the buffer is not displayed. */ - @property({type: Number}) buffer = -1; + @property({type: Number}) buffer = 0; // Note, the indeterminate animation is rendered with transform %'s // Previously, this was optimized to use px calculated with the resizeObserver @@ -29,17 +29,20 @@ export class LinearProgress extends Progress { (this.indeterminate ? 1 : this.value / this.max) * 100 }%)`, }; + + const bufferValue = Math.min(this.buffer ?? 0, this.max); + const hasBuffer = bufferValue > 0; + + const dotSize = this.indeterminate || !hasBuffer ? 1 : bufferValue / this.max; + const dotStyles = { - transform: `scaleX(${ - // == null is used to check for both null and undefined when buffer attribute is removed - (this.indeterminate || this.buffer == null || this.buffer < 0 ? 1 : this.buffer / this.max) * 100 - }%)`, + transform: `scaleX(${dotSize * 100}%)`, }; // Only display dots when visible - this prevents invisible infinite // animation. const hideDots = - this.indeterminate || this.buffer == null || this.buffer < 0 || this.buffer >= this.max || this.value >= this.max; + this.indeterminate || !hasBuffer || this.value >= this.max; return html`
From 2512f55c1da2a15019c6c34607c6089c0fe9d22c Mon Sep 17 00:00:00 2001 From: Luke Vo Date: Sat, 17 Feb 2024 11:54:59 +0700 Subject: [PATCH 4/5] Removed linear progress buffer clamping --- progress/internal/linear-progress.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/progress/internal/linear-progress.ts b/progress/internal/linear-progress.ts index 555e32669..7eb9c5a49 100644 --- a/progress/internal/linear-progress.ts +++ b/progress/internal/linear-progress.ts @@ -30,7 +30,7 @@ export class LinearProgress extends Progress { }%)`, }; - const bufferValue = Math.min(this.buffer ?? 0, this.max); + const bufferValue = this.buffer ?? 0; const hasBuffer = bufferValue > 0; const dotSize = this.indeterminate || !hasBuffer ? 1 : bufferValue / this.max; From c7e26b5e93b0e088f0491e386c40038e373eae80 Mon Sep 17 00:00:00 2001 From: Luke Vo Date: Wed, 21 Feb 2024 09:09:31 +0700 Subject: [PATCH 5/5] Added back the buffer check vs. max value --- progress/internal/linear-progress.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/progress/internal/linear-progress.ts b/progress/internal/linear-progress.ts index 7eb9c5a49..c54b9066e 100644 --- a/progress/internal/linear-progress.ts +++ b/progress/internal/linear-progress.ts @@ -42,7 +42,7 @@ export class LinearProgress extends Progress { // Only display dots when visible - this prevents invisible infinite // animation. const hideDots = - this.indeterminate || !hasBuffer || this.value >= this.max; + this.indeterminate || !hasBuffer || bufferValue >= this.max || this.value >= this.max; return html`