From b0934979906af9243c457716dfc839d5ee93413e Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Tue, 14 May 2024 13:17:32 +0100 Subject: [PATCH 01/45] add indeterminate example --- .../core/src/progress/LinearProgress/LinearProgress.tsx | 4 +++- packages/core/stories/progress/linear-progress.stories.tsx | 7 +++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/core/src/progress/LinearProgress/LinearProgress.tsx b/packages/core/src/progress/LinearProgress/LinearProgress.tsx index cf47703973..462b854017 100644 --- a/packages/core/src/progress/LinearProgress/LinearProgress.tsx +++ b/packages/core/src/progress/LinearProgress/LinearProgress.tsx @@ -34,6 +34,7 @@ export interface LinearProgressProps extends ComponentPropsWithoutRef<"div"> { * Value between 0 and max. */ value?: number; + variant?: "determinate" | "indeterminate"; } export const LinearProgress = forwardRef( @@ -45,6 +46,7 @@ export const LinearProgress = forwardRef( min = 0, value = 0, bufferValue = 0, + variant = "determinate", ...rest }, ref @@ -66,7 +68,7 @@ export const LinearProgress = forwardRef( return (
= () => ( export const ProgressingBufferValue: StoryFn = () => ( ); + +export const Indeterminate = Default.bind({}); +Indeterminate.args = { + hideLabel: true, + value: 38, + variant: "indeterminate", +}; From e36d22d7c0ba6301bde286f75727ed071221356a Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Tue, 14 May 2024 13:45:48 +0100 Subject: [PATCH 02/45] add animations --- .../LinearProgress/LinearProgress.css | 53 +++++++++++++++++++ .../LinearProgress/LinearProgress.tsx | 7 ++- 2 files changed, 58 insertions(+), 2 deletions(-) diff --git a/packages/core/src/progress/LinearProgress/LinearProgress.css b/packages/core/src/progress/LinearProgress/LinearProgress.css index 721e46567c..c12854e0f1 100644 --- a/packages/core/src/progress/LinearProgress/LinearProgress.css +++ b/packages/core/src/progress/LinearProgress/LinearProgress.css @@ -56,3 +56,56 @@ white-space: nowrap; padding-left: var(--salt-spacing-100); } + +.saltLinearProgress-indeterminate.saltLinearProgress-bar { + position: absolute; + left: 0px; + bottom: 0px; + top: 0px; + transition: transform 0.2s linear 0s; + transform-origin: left center; + width: auto; + animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) 0s infinite normal none running indeterminate-progress-bar; + /* animation: 2s linear infinite indeterminate-progress-bar; */ +} + +@keyframes indeterminate-progress-bar { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } +} + +/* .saltLinearProgress-indeterminate .saltLinearProgress-track { + position: absolute; + left: 0px; + bottom: 0px; + top: 0px; + transition: transform 0.2s linear 0s; + transform-origin: left center; + width: auto; + animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite normal none running track-animation; +} + +@keyframes track-animation { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } +} */ diff --git a/packages/core/src/progress/LinearProgress/LinearProgress.tsx b/packages/core/src/progress/LinearProgress/LinearProgress.tsx index 462b854017..28b91c8524 100644 --- a/packages/core/src/progress/LinearProgress/LinearProgress.tsx +++ b/packages/core/src/progress/LinearProgress/LinearProgress.tsx @@ -68,7 +68,7 @@ export const LinearProgress = forwardRef( return (
( {...rest} >
-
+
{bufferValue > 0 ? (
) : null} From 8cb818f605dd289741fa630dcd43db83ec7ba086 Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Wed, 15 May 2024 10:43:55 +0100 Subject: [PATCH 03/45] add default props --- .../LinearProgress/LinearProgress.css | 2 +- .../LinearProgress/LinearProgress.tsx | 22 +++++++++++++------ .../progress/linear-progress.stories.tsx | 2 -- 3 files changed, 16 insertions(+), 10 deletions(-) diff --git a/packages/core/src/progress/LinearProgress/LinearProgress.css b/packages/core/src/progress/LinearProgress/LinearProgress.css index c12854e0f1..432089a816 100644 --- a/packages/core/src/progress/LinearProgress/LinearProgress.css +++ b/packages/core/src/progress/LinearProgress/LinearProgress.css @@ -65,7 +65,7 @@ transition: transform 0.2s linear 0s; transform-origin: left center; width: auto; - animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) 0s infinite normal none running indeterminate-progress-bar; + animation: 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) 0s infinite normal none running indeterminate-progress-bar; /* animation: 2s linear infinite indeterminate-progress-bar; */ } diff --git a/packages/core/src/progress/LinearProgress/LinearProgress.tsx b/packages/core/src/progress/LinearProgress/LinearProgress.tsx index 28b91c8524..83c86dfb46 100644 --- a/packages/core/src/progress/LinearProgress/LinearProgress.tsx +++ b/packages/core/src/progress/LinearProgress/LinearProgress.tsx @@ -34,6 +34,10 @@ export interface LinearProgressProps extends ComponentPropsWithoutRef<"div"> { * Value between 0 and max. */ value?: number; + /** + * The variant to use. + * Defaults to "determinate". + */ variant?: "determinate" | "indeterminate"; } @@ -58,8 +62,11 @@ export const LinearProgress = forwardRef( window: targetWindow, }); - const progress = ((value - min) / (max - min)) * 100; - const buffer = ((bufferValue - min) / (max - min)) * 100; + const isIndeterminate = variant === "indeterminate"; + const progress = isIndeterminate ? 60 : ((value - min) / (max - min)) * 100; + const buffer = isIndeterminate + ? 0 + : ((bufferValue - min) / (max - min)) * 100; const barStyle: CSSProperties = {}; const bufferStyle: CSSProperties = {}; @@ -86,11 +93,12 @@ export const LinearProgress = forwardRef( ) : null}
- {!hideLabel && ( - - {`${Math.round(progress)} %`} - - )} + {!hideLabel || + (!isIndeterminate && ( + + {`${Math.round(progress)} %`} + + ))}
); } diff --git a/packages/core/stories/progress/linear-progress.stories.tsx b/packages/core/stories/progress/linear-progress.stories.tsx index a69c55bccf..79318e371d 100644 --- a/packages/core/stories/progress/linear-progress.stories.tsx +++ b/packages/core/stories/progress/linear-progress.stories.tsx @@ -94,7 +94,5 @@ export const ProgressingBufferValue: StoryFn = () => ( export const Indeterminate = Default.bind({}); Indeterminate.args = { - hideLabel: true, - value: 38, variant: "indeterminate", }; From 648f16b659c4718a7999df4f6c4e307b74b3ed7b Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Wed, 15 May 2024 16:13:34 +0100 Subject: [PATCH 04/45] tweak animation --- packages/core/src/progress/LinearProgress/LinearProgress.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/core/src/progress/LinearProgress/LinearProgress.css b/packages/core/src/progress/LinearProgress/LinearProgress.css index 432089a816..67c6d5694f 100644 --- a/packages/core/src/progress/LinearProgress/LinearProgress.css +++ b/packages/core/src/progress/LinearProgress/LinearProgress.css @@ -65,8 +65,7 @@ transition: transform 0.2s linear 0s; transform-origin: left center; width: auto; - animation: 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) 0s infinite normal none running indeterminate-progress-bar; - /* animation: 2s linear infinite indeterminate-progress-bar; */ + animation: 2s linear infinite indeterminate-progress-bar; } @keyframes indeterminate-progress-bar { From d0a310daa5d8254276ebbe93be90e5944062f600 Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Wed, 15 May 2024 16:35:15 +0100 Subject: [PATCH 05/45] add temp examples for design review --- .../LinearProgress/LinearProgress.tsx | 9 +++++- .../progress/linear-progress.stories.tsx | 28 ++++++++++++++++--- 2 files changed, 32 insertions(+), 5 deletions(-) diff --git a/packages/core/src/progress/LinearProgress/LinearProgress.tsx b/packages/core/src/progress/LinearProgress/LinearProgress.tsx index 83c86dfb46..40988917e5 100644 --- a/packages/core/src/progress/LinearProgress/LinearProgress.tsx +++ b/packages/core/src/progress/LinearProgress/LinearProgress.tsx @@ -39,6 +39,8 @@ export interface LinearProgressProps extends ComponentPropsWithoutRef<"div"> { * Defaults to "determinate". */ variant?: "determinate" | "indeterminate"; + animationSpeed?: string; // TODO: Temp prop to be removed + progressLineWidth?: number; // TODO: Temp prop to be removed } export const LinearProgress = forwardRef( @@ -51,6 +53,8 @@ export const LinearProgress = forwardRef( value = 0, bufferValue = 0, variant = "determinate", + animationSpeed = "2s", + progressLineWidth = 60, ...rest }, ref @@ -63,7 +67,9 @@ export const LinearProgress = forwardRef( }); const isIndeterminate = variant === "indeterminate"; - const progress = isIndeterminate ? 60 : ((value - min) / (max - min)) * 100; + const progress = isIndeterminate + ? progressLineWidth + : ((value - min) / (max - min)) * 100; const buffer = isIndeterminate ? 0 : ((bufferValue - min) / (max - min)) * 100; @@ -71,6 +77,7 @@ export const LinearProgress = forwardRef( const bufferStyle: CSSProperties = {}; barStyle.width = `${progress}%`; + barStyle.animation = `${animationSpeed} linear infinite indeterminate-progress-bar`; bufferStyle.width = `${buffer}%`; return ( diff --git a/packages/core/stories/progress/linear-progress.stories.tsx b/packages/core/stories/progress/linear-progress.stories.tsx index 79318e371d..eb98cbcef0 100644 --- a/packages/core/stories/progress/linear-progress.stories.tsx +++ b/packages/core/stories/progress/linear-progress.stories.tsx @@ -92,7 +92,27 @@ export const ProgressingBufferValue: StoryFn = () => ( ); -export const Indeterminate = Default.bind({}); -Indeterminate.args = { - variant: "indeterminate", -}; +// export const Indeterminate = Default.bind({}); +// Indeterminate.args = { +// variant: "indeterminate", +// }; + +// TODO: temp example to be removed +export const Indeterminate: StoryFn = () => ( + + +

Animation speed = 2s

+ +
+

Animation speed = 1s

+ + + +

Progress line width = 60%

+ +
+

Progress line width = 33%

+ + + +); From 9abf06f83cd65598b42b9e8a42e982e0f4d2b5ec Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Thu, 16 May 2024 09:14:10 +0100 Subject: [PATCH 06/45] add example --- .../core/stories/progress/linear-progress.stories.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/core/stories/progress/linear-progress.stories.tsx b/packages/core/stories/progress/linear-progress.stories.tsx index eb98cbcef0..21587698fd 100644 --- a/packages/core/stories/progress/linear-progress.stories.tsx +++ b/packages/core/stories/progress/linear-progress.stories.tsx @@ -114,5 +114,15 @@ export const Indeterminate: StoryFn = () => (

Progress line width = 33%

+ +

+ Progress line width = 66% Animation speed = 1.8s +

+ + ); From 4c1c29c001893fc1e351c1318d7dfde897624fa3 Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Thu, 16 May 2024 09:30:09 +0100 Subject: [PATCH 07/45] add ease in ease out example --- packages/core/src/progress/LinearProgress/LinearProgress.tsx | 4 +++- packages/core/stories/progress/linear-progress.stories.tsx | 3 ++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/core/src/progress/LinearProgress/LinearProgress.tsx b/packages/core/src/progress/LinearProgress/LinearProgress.tsx index 40988917e5..fcec69aa7b 100644 --- a/packages/core/src/progress/LinearProgress/LinearProgress.tsx +++ b/packages/core/src/progress/LinearProgress/LinearProgress.tsx @@ -40,6 +40,7 @@ export interface LinearProgressProps extends ComponentPropsWithoutRef<"div"> { */ variant?: "determinate" | "indeterminate"; animationSpeed?: string; // TODO: Temp prop to be removed + animationTiming?: string; // TODO: Temp prop to be removed progressLineWidth?: number; // TODO: Temp prop to be removed } @@ -54,6 +55,7 @@ export const LinearProgress = forwardRef( bufferValue = 0, variant = "determinate", animationSpeed = "2s", + animationTiming = "linear", progressLineWidth = 60, ...rest }, @@ -77,7 +79,7 @@ export const LinearProgress = forwardRef( const bufferStyle: CSSProperties = {}; barStyle.width = `${progress}%`; - barStyle.animation = `${animationSpeed} linear infinite indeterminate-progress-bar`; + barStyle.animation = `${animationSpeed} ${animationTiming} infinite indeterminate-progress-bar`; bufferStyle.width = `${buffer}%`; return ( diff --git a/packages/core/stories/progress/linear-progress.stories.tsx b/packages/core/stories/progress/linear-progress.stories.tsx index 21587698fd..9240d3e8f6 100644 --- a/packages/core/stories/progress/linear-progress.stories.tsx +++ b/packages/core/stories/progress/linear-progress.stories.tsx @@ -116,12 +116,13 @@ export const Indeterminate: StoryFn = () => (

- Progress line width = 66% Animation speed = 1.8s + Progress line width = 66% Animation speed = 1.8s Ease In/ Ease Out

From beb7c1b2a03c9d7e992346f595f6808684610293 Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Fri, 17 May 2024 10:39:50 +0100 Subject: [PATCH 08/45] amend keyframes --- packages/core/src/progress/LinearProgress/LinearProgress.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/progress/LinearProgress/LinearProgress.css b/packages/core/src/progress/LinearProgress/LinearProgress.css index 67c6d5694f..b75bdc8d62 100644 --- a/packages/core/src/progress/LinearProgress/LinearProgress.css +++ b/packages/core/src/progress/LinearProgress/LinearProgress.css @@ -70,7 +70,7 @@ @keyframes indeterminate-progress-bar { 0% { - left: -35%; + left: -90%; right: 100%; } 60% { From dd048ec3b00bb4640e4962660c14c1cd9efa20f2 Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Tue, 21 May 2024 16:00:53 +0100 Subject: [PATCH 09/45] Revert "add temp examples for design review" This reverts commit b3aa69379f68b1e13b632984326b08071983d6e2. --- .../LinearProgress/LinearProgress.tsx | 11 +----- .../progress/linear-progress.stories.tsx | 39 ++----------------- 2 files changed, 5 insertions(+), 45 deletions(-) diff --git a/packages/core/src/progress/LinearProgress/LinearProgress.tsx b/packages/core/src/progress/LinearProgress/LinearProgress.tsx index fcec69aa7b..83c86dfb46 100644 --- a/packages/core/src/progress/LinearProgress/LinearProgress.tsx +++ b/packages/core/src/progress/LinearProgress/LinearProgress.tsx @@ -39,9 +39,6 @@ export interface LinearProgressProps extends ComponentPropsWithoutRef<"div"> { * Defaults to "determinate". */ variant?: "determinate" | "indeterminate"; - animationSpeed?: string; // TODO: Temp prop to be removed - animationTiming?: string; // TODO: Temp prop to be removed - progressLineWidth?: number; // TODO: Temp prop to be removed } export const LinearProgress = forwardRef( @@ -54,9 +51,6 @@ export const LinearProgress = forwardRef( value = 0, bufferValue = 0, variant = "determinate", - animationSpeed = "2s", - animationTiming = "linear", - progressLineWidth = 60, ...rest }, ref @@ -69,9 +63,7 @@ export const LinearProgress = forwardRef( }); const isIndeterminate = variant === "indeterminate"; - const progress = isIndeterminate - ? progressLineWidth - : ((value - min) / (max - min)) * 100; + const progress = isIndeterminate ? 60 : ((value - min) / (max - min)) * 100; const buffer = isIndeterminate ? 0 : ((bufferValue - min) / (max - min)) * 100; @@ -79,7 +71,6 @@ export const LinearProgress = forwardRef( const bufferStyle: CSSProperties = {}; barStyle.width = `${progress}%`; - barStyle.animation = `${animationSpeed} ${animationTiming} infinite indeterminate-progress-bar`; bufferStyle.width = `${buffer}%`; return ( diff --git a/packages/core/stories/progress/linear-progress.stories.tsx b/packages/core/stories/progress/linear-progress.stories.tsx index 9240d3e8f6..79318e371d 100644 --- a/packages/core/stories/progress/linear-progress.stories.tsx +++ b/packages/core/stories/progress/linear-progress.stories.tsx @@ -92,38 +92,7 @@ export const ProgressingBufferValue: StoryFn = () => ( ); -// export const Indeterminate = Default.bind({}); -// Indeterminate.args = { -// variant: "indeterminate", -// }; - -// TODO: temp example to be removed -export const Indeterminate: StoryFn = () => ( - - -

Animation speed = 2s

- -
-

Animation speed = 1s

- - - -

Progress line width = 60%

- -
-

Progress line width = 33%

- - - -

- Progress line width = 66% Animation speed = 1.8s Ease In/ Ease Out -

- - - -); +export const Indeterminate = Default.bind({}); +Indeterminate.args = { + variant: "indeterminate", +}; From cc732df2651b3e822e5f98850fe4c7d2165980a2 Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Tue, 21 May 2024 16:11:07 +0100 Subject: [PATCH 10/45] change line width and animation speed --- .../LinearProgress/LinearProgress.css | 28 +------------------ .../LinearProgress/LinearProgress.tsx | 2 +- 2 files changed, 2 insertions(+), 28 deletions(-) diff --git a/packages/core/src/progress/LinearProgress/LinearProgress.css b/packages/core/src/progress/LinearProgress/LinearProgress.css index b75bdc8d62..b7e8e17f40 100644 --- a/packages/core/src/progress/LinearProgress/LinearProgress.css +++ b/packages/core/src/progress/LinearProgress/LinearProgress.css @@ -65,7 +65,7 @@ transition: transform 0.2s linear 0s; transform-origin: left center; width: auto; - animation: 2s linear infinite indeterminate-progress-bar; + animation: 1.8s linear infinite indeterminate-progress-bar; } @keyframes indeterminate-progress-bar { @@ -82,29 +82,3 @@ right: -90%; } } - -/* .saltLinearProgress-indeterminate .saltLinearProgress-track { - position: absolute; - left: 0px; - bottom: 0px; - top: 0px; - transition: transform 0.2s linear 0s; - transform-origin: left center; - width: auto; - animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite normal none running track-animation; -} - -@keyframes track-animation { - 0% { - left: -200%; - right: 100%; - } - 60% { - left: 107%; - right: -8%; - } - 100% { - left: 107%; - right: -8%; - } -} */ diff --git a/packages/core/src/progress/LinearProgress/LinearProgress.tsx b/packages/core/src/progress/LinearProgress/LinearProgress.tsx index 83c86dfb46..06fa5d9e7a 100644 --- a/packages/core/src/progress/LinearProgress/LinearProgress.tsx +++ b/packages/core/src/progress/LinearProgress/LinearProgress.tsx @@ -63,7 +63,7 @@ export const LinearProgress = forwardRef( }); const isIndeterminate = variant === "indeterminate"; - const progress = isIndeterminate ? 60 : ((value - min) / (max - min)) * 100; + const progress = isIndeterminate ? 66 : ((value - min) / (max - min)) * 100; const buffer = isIndeterminate ? 0 : ((bufferValue - min) / (max - min)) * 100; From e325b7f162f1bdaa874463b1c29707196cfb6b22 Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Wed, 22 May 2024 11:57:27 +0100 Subject: [PATCH 11/45] remove aria value now when indeterminate --- .../__e2e__/progress/LinearProgress.cy.tsx | 7 +++++++ .../src/progress/LinearProgress/LinearProgress.tsx | 13 ++++++------- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/core/src/__tests__/__e2e__/progress/LinearProgress.cy.tsx b/packages/core/src/__tests__/__e2e__/progress/LinearProgress.cy.tsx index 876114eca6..c481d2fe71 100644 --- a/packages/core/src/__tests__/__e2e__/progress/LinearProgress.cy.tsx +++ b/packages/core/src/__tests__/__e2e__/progress/LinearProgress.cy.tsx @@ -18,4 +18,11 @@ describe("GIVEN a LinearProgress", () => { cy.findByRole("progressbar").contains("75 %"); cy.findByRole("progressbar").should("not.contain.text", "0"); // test regression #3202 }); + + it("SHOULD render indeterminate progress bar", () => { + cy.mount(); + cy.findByRole("progressbar").should("have.attr", "aria-valuemax", "100"); + cy.findByRole("progressbar").should("have.attr", "aria-valuemin", "0"); + cy.findByRole("progressbar").should("not.have.attr", "aria-valuenow"); + }); }); diff --git a/packages/core/src/progress/LinearProgress/LinearProgress.tsx b/packages/core/src/progress/LinearProgress/LinearProgress.tsx index 06fa5d9e7a..83c7485b6e 100644 --- a/packages/core/src/progress/LinearProgress/LinearProgress.tsx +++ b/packages/core/src/progress/LinearProgress/LinearProgress.tsx @@ -80,7 +80,7 @@ export const LinearProgress = forwardRef( role="progressbar" aria-valuemax={max} aria-valuemin={min} - aria-valuenow={Math.round(value)} + aria-valuenow={isIndeterminate ? undefined : Math.round(value)} {...rest} >
@@ -93,12 +93,11 @@ export const LinearProgress = forwardRef( ) : null}
- {!hideLabel || - (!isIndeterminate && ( - - {`${Math.round(progress)} %`} - - ))} + {!hideLabel && !isIndeterminate && ( + + {`${Math.round(progress)} %`} + + )}
); } From cdc9f11cb3011e7e2583b7491e49c2bd1cb8d4ea Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Wed, 22 May 2024 12:00:34 +0100 Subject: [PATCH 12/45] add QA story --- packages/core/stories/progress/progress.qa.stories.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/core/stories/progress/progress.qa.stories.tsx b/packages/core/stories/progress/progress.qa.stories.tsx index 78b8e8b584..db67cee7d7 100644 --- a/packages/core/stories/progress/progress.qa.stories.tsx +++ b/packages/core/stories/progress/progress.qa.stories.tsx @@ -35,6 +35,12 @@ export const ExamplesGrid: StoryFn = (props) => { hideLabel /> + ); }; From 266f3221d0d3a061e7101c9884df0a118d553fee Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Wed, 22 May 2024 12:10:33 +0100 Subject: [PATCH 13/45] add changeset --- .changeset/four-bugs-reply.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/four-bugs-reply.md diff --git a/.changeset/four-bugs-reply.md b/.changeset/four-bugs-reply.md new file mode 100644 index 0000000000..2b802a2ba2 --- /dev/null +++ b/.changeset/four-bugs-reply.md @@ -0,0 +1,5 @@ +--- +"@salt-ds/core": patch +--- + +Added variant prop to `LinearProgress` component. It defaults to `determinate` and the new `indeterminate` variant will display a moving line to represent an unspecified wait time. From 2272e103a93030fab49382e7c1a49d60b0dd54e9 Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Thu, 23 May 2024 09:44:42 +0100 Subject: [PATCH 14/45] update changeset --- .changeset/four-bugs-reply.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/four-bugs-reply.md b/.changeset/four-bugs-reply.md index 2b802a2ba2..6affc842e3 100644 --- a/.changeset/four-bugs-reply.md +++ b/.changeset/four-bugs-reply.md @@ -1,5 +1,5 @@ --- -"@salt-ds/core": patch +"@salt-ds/core": minor --- Added variant prop to `LinearProgress` component. It defaults to `determinate` and the new `indeterminate` variant will display a moving line to represent an unspecified wait time. From ca3165537d33b1c6e18c8d04e0e6ca74daec63d4 Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Thu, 23 May 2024 10:23:09 +0100 Subject: [PATCH 15/45] add example to site --- site/src/examples/progress/Linear.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/site/src/examples/progress/Linear.tsx b/site/src/examples/progress/Linear.tsx index 73ac5e9890..5c434fe75c 100644 --- a/site/src/examples/progress/Linear.tsx +++ b/site/src/examples/progress/Linear.tsx @@ -1,6 +1,9 @@ import { ReactElement } from "react"; -import { LinearProgress } from "@salt-ds/core"; +import { LinearProgress, StackLayout } from "@salt-ds/core"; export const Linear = (): ReactElement => ( - + + + + ); From 4ba1bfa248b13d178a5a30f99ad8e18206367384 Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Tue, 28 May 2024 10:46:27 +0100 Subject: [PATCH 16/45] update changeset --- .changeset/four-bugs-reply.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.changeset/four-bugs-reply.md b/.changeset/four-bugs-reply.md index 6affc842e3..e92a9624bd 100644 --- a/.changeset/four-bugs-reply.md +++ b/.changeset/four-bugs-reply.md @@ -3,3 +3,5 @@ --- Added variant prop to `LinearProgress` component. It defaults to `determinate` and the new `indeterminate` variant will display a moving line to represent an unspecified wait time. + +`` From faec1ef282159f392619cf398eb3ccc1a7505327 Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Tue, 28 May 2024 10:53:31 +0100 Subject: [PATCH 17/45] add separate site example add separate site example --- site/docs/components/progress/examples.mdx | 8 ++++++++ site/src/examples/progress/Linear.tsx | 7 ++----- site/src/examples/progress/LinearIndeterminate.tsx | 6 ++++++ site/src/examples/progress/index.ts | 1 + 4 files changed, 17 insertions(+), 5 deletions(-) create mode 100644 site/src/examples/progress/LinearIndeterminate.tsx diff --git a/site/docs/components/progress/examples.mdx b/site/docs/components/progress/examples.mdx index 926feaa691..cd79036393 100644 --- a/site/docs/components/progress/examples.mdx +++ b/site/docs/components/progress/examples.mdx @@ -26,6 +26,14 @@ Use linear or circular depending on the context, layout and functionality of an + + +## Indeterminate linear progress + +Use an indeterminate linear progress to display an unspecified wait time such as a loading state. + + + ## Hide label diff --git a/site/src/examples/progress/Linear.tsx b/site/src/examples/progress/Linear.tsx index 5c434fe75c..73ac5e9890 100644 --- a/site/src/examples/progress/Linear.tsx +++ b/site/src/examples/progress/Linear.tsx @@ -1,9 +1,6 @@ import { ReactElement } from "react"; -import { LinearProgress, StackLayout } from "@salt-ds/core"; +import { LinearProgress } from "@salt-ds/core"; export const Linear = (): ReactElement => ( - - - - + ); diff --git a/site/src/examples/progress/LinearIndeterminate.tsx b/site/src/examples/progress/LinearIndeterminate.tsx new file mode 100644 index 0000000000..68bf421fd2 --- /dev/null +++ b/site/src/examples/progress/LinearIndeterminate.tsx @@ -0,0 +1,6 @@ +import { ReactElement } from "react"; +import { LinearProgress } from "@salt-ds/core"; + +export const LinearIndeterminate = (): ReactElement => ( + +); diff --git a/site/src/examples/progress/index.ts b/site/src/examples/progress/index.ts index 2363afa574..9c2222195e 100644 --- a/site/src/examples/progress/index.ts +++ b/site/src/examples/progress/index.ts @@ -1,5 +1,6 @@ export * from "./Circular"; export * from "./Linear"; +export * from "./LinearIndeterminate"; export * from "./HiddenLabel"; export * from "./WithBuffer"; export * from "./WithMaxVal"; From ae836834d42d4ee1fa4031eb88a67e63c9acf36b Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Thu, 30 May 2024 13:26:04 +0100 Subject: [PATCH 18/45] add indetermiante to determinate example --- .../progress/linear-progress.stories.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/core/stories/progress/linear-progress.stories.tsx b/packages/core/stories/progress/linear-progress.stories.tsx index 79318e371d..0d49c02817 100644 --- a/packages/core/stories/progress/linear-progress.stories.tsx +++ b/packages/core/stories/progress/linear-progress.stories.tsx @@ -1,3 +1,4 @@ +import { useState, useEffect } from "react"; import { Meta, StoryFn } from "@storybook/react"; import { Button, @@ -5,6 +6,7 @@ import { StackLayout, CircularProgress, LinearProgress, + LinearProgressProps, } from "@salt-ds/core"; import { useProgressingValue } from "./useProgressingValue"; @@ -96,3 +98,19 @@ export const Indeterminate = Default.bind({}); Indeterminate.args = { variant: "indeterminate", }; + +export const IndeterminateToDeterminate: StoryFn< + typeof LinearProgress +> = () => { + const [variant, setVariant] = + useState("indeterminate"); + + useEffect(() => { + const timer = setTimeout(() => setVariant("determinate"), 4000); + return () => { + clearTimeout(timer); + }; + }, []); + + return ; +}; From 7c72e69af1c6240c538890eb18cfdc090ac47063 Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Thu, 30 May 2024 13:49:34 +0100 Subject: [PATCH 19/45] add progressing value --- .../progress/linear-progress.stories.tsx | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/core/stories/progress/linear-progress.stories.tsx b/packages/core/stories/progress/linear-progress.stories.tsx index 0d49c02817..da21d0c5a2 100644 --- a/packages/core/stories/progress/linear-progress.stories.tsx +++ b/packages/core/stories/progress/linear-progress.stories.tsx @@ -105,12 +105,24 @@ export const IndeterminateToDeterminate: StoryFn< const [variant, setVariant] = useState("indeterminate"); + const [value, setValue] = useState(0); + useEffect(() => { const timer = setTimeout(() => setVariant("determinate"), 4000); - return () => { - clearTimeout(timer); - }; + return () => clearTimeout(timer); }, []); - return ; + useEffect(() => { + if (variant === "determinate" && value < 100) { + const interval = setInterval( + () => setValue((currentValue) => currentValue + 1), + 20 + ); + return () => clearInterval(interval); + } + }, [value, variant]); + + return ( + + ); }; From 395f1ac76220d712e971299680c47dc1620356eb Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Fri, 31 May 2024 10:08:07 +0100 Subject: [PATCH 20/45] display label when indeterminate --- packages/core/src/progress/LinearProgress/LinearProgress.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/progress/LinearProgress/LinearProgress.tsx b/packages/core/src/progress/LinearProgress/LinearProgress.tsx index 83c7485b6e..db3f19b90e 100644 --- a/packages/core/src/progress/LinearProgress/LinearProgress.tsx +++ b/packages/core/src/progress/LinearProgress/LinearProgress.tsx @@ -93,9 +93,9 @@ export const LinearProgress = forwardRef( ) : null}
- {!hideLabel && !isIndeterminate && ( + {!hideLabel && ( - {`${Math.round(progress)} %`} + {isIndeterminate ? `—%` : `${Math.round(progress)}%`} )}
From b21dc5faaad3bb6cff6cb3b13a0e54c9370bc095 Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Mon, 3 Jun 2024 10:55:37 +0100 Subject: [PATCH 21/45] add dialog example --- .../progress/linear-progress.stories.tsx | 46 ++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) diff --git a/packages/core/stories/progress/linear-progress.stories.tsx b/packages/core/stories/progress/linear-progress.stories.tsx index da21d0c5a2..5a004b9c6b 100644 --- a/packages/core/stories/progress/linear-progress.stories.tsx +++ b/packages/core/stories/progress/linear-progress.stories.tsx @@ -7,7 +7,12 @@ import { CircularProgress, LinearProgress, LinearProgressProps, + ValidationStatus, + Toast, + ToastContent, + Text, } from "@salt-ds/core"; +import { CloseIcon } from "@salt-ds/icons"; import { useProgressingValue } from "./useProgressingValue"; import "./progress.stories.css"; @@ -107,6 +112,16 @@ export const IndeterminateToDeterminate: StoryFn< const [value, setValue] = useState(0); + const [toastStatus, setToastStatus] = useState<{ + header: string; + status: ValidationStatus; + message: string; + }>({ + header: "File uploading", + status: "info", + message: "File upload to shared drive in progress.", + }); + useEffect(() => { const timer = setTimeout(() => setVariant("determinate"), 4000); return () => clearTimeout(timer); @@ -122,7 +137,36 @@ export const IndeterminateToDeterminate: StoryFn< } }, [value, variant]); + useEffect(() => { + if (value === 100) { + setToastStatus({ + header: "Upload complete", + status: "success", + message: "File has successfully been uploaded to shared drive.", + }); + } + }, [value]); + return ( - + + +
+ + {toastStatus.header} + +
{toastStatus.message}
+ {value !== 100 && ( + + )} +
+ + + ); }; From cc4216a6290ce8a6bf6e33d62bb27b6330ba5267 Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Mon, 3 Jun 2024 16:00:44 +0100 Subject: [PATCH 22/45] update cypress test --- .../core/src/__tests__/__e2e__/progress/LinearProgress.cy.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/__tests__/__e2e__/progress/LinearProgress.cy.tsx b/packages/core/src/__tests__/__e2e__/progress/LinearProgress.cy.tsx index c481d2fe71..89776c640f 100644 --- a/packages/core/src/__tests__/__e2e__/progress/LinearProgress.cy.tsx +++ b/packages/core/src/__tests__/__e2e__/progress/LinearProgress.cy.tsx @@ -15,7 +15,7 @@ describe("GIVEN a LinearProgress", () => { cy.mount(); cy.findByRole("progressbar").should("have.attr", "aria-valuemax", "40"); cy.findByRole("progressbar").should("have.attr", "aria-valuemin", "20"); - cy.findByRole("progressbar").contains("75 %"); + cy.findByRole("progressbar").contains("75%"); cy.findByRole("progressbar").should("not.contain.text", "0"); // test regression #3202 }); From ae0072b03c9c424b0045f909744e57b21e201320 Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Tue, 4 Jun 2024 12:11:49 +0100 Subject: [PATCH 23/45] remove animation on QA stories --- packages/core/stories/progress/progress.qa.stories.css | 3 +++ packages/core/stories/progress/progress.qa.stories.tsx | 4 +++- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 packages/core/stories/progress/progress.qa.stories.css diff --git a/packages/core/stories/progress/progress.qa.stories.css b/packages/core/stories/progress/progress.qa.stories.css new file mode 100644 index 0000000000..b4c59b3281 --- /dev/null +++ b/packages/core/stories/progress/progress.qa.stories.css @@ -0,0 +1,3 @@ +.noAnimation.saltLinearProgress .saltLinearProgress-indeterminate.saltLinearProgress-bar { + animation: none; +} diff --git a/packages/core/stories/progress/progress.qa.stories.tsx b/packages/core/stories/progress/progress.qa.stories.tsx index db67cee7d7..cd16b4953c 100644 --- a/packages/core/stories/progress/progress.qa.stories.tsx +++ b/packages/core/stories/progress/progress.qa.stories.tsx @@ -3,6 +3,8 @@ import { Meta, StoryFn } from "@storybook/react"; import { CircularProgress, LinearProgress } from "@salt-ds/core"; import { QAContainer, QAContainerProps } from "docs/components"; +import "./progress.qa.stories.css"; + export default { title: "Core/Progress/Progress QA", component: CircularProgress, @@ -37,7 +39,7 @@ export const ExamplesGrid: StoryFn = (props) => { From ce5ed8b14545149d24f21f9160d18dd7e4a495a6 Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Tue, 4 Jun 2024 13:11:03 +0100 Subject: [PATCH 24/45] add space to linear progress label --- .../core/src/__tests__/__e2e__/progress/LinearProgress.cy.tsx | 2 +- packages/core/src/progress/LinearProgress/LinearProgress.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/__tests__/__e2e__/progress/LinearProgress.cy.tsx b/packages/core/src/__tests__/__e2e__/progress/LinearProgress.cy.tsx index 89776c640f..c481d2fe71 100644 --- a/packages/core/src/__tests__/__e2e__/progress/LinearProgress.cy.tsx +++ b/packages/core/src/__tests__/__e2e__/progress/LinearProgress.cy.tsx @@ -15,7 +15,7 @@ describe("GIVEN a LinearProgress", () => { cy.mount(); cy.findByRole("progressbar").should("have.attr", "aria-valuemax", "40"); cy.findByRole("progressbar").should("have.attr", "aria-valuemin", "20"); - cy.findByRole("progressbar").contains("75%"); + cy.findByRole("progressbar").contains("75 %"); cy.findByRole("progressbar").should("not.contain.text", "0"); // test regression #3202 }); diff --git a/packages/core/src/progress/LinearProgress/LinearProgress.tsx b/packages/core/src/progress/LinearProgress/LinearProgress.tsx index db3f19b90e..d8a5f9fce1 100644 --- a/packages/core/src/progress/LinearProgress/LinearProgress.tsx +++ b/packages/core/src/progress/LinearProgress/LinearProgress.tsx @@ -95,7 +95,7 @@ export const LinearProgress = forwardRef(
{!hideLabel && ( - {isIndeterminate ? `—%` : `${Math.round(progress)}%`} + {isIndeterminate ? `— %` : `${Math.round(progress)} %`} )}
From e5af792b963e46111475c86355b0c0b8adf2616d Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Mon, 10 Jun 2024 11:18:48 +0100 Subject: [PATCH 25/45] add toast example to site --- .../examples/progress/LinearIndeterminate.tsx | 80 +++++++++++++++++-- 1 file changed, 75 insertions(+), 5 deletions(-) diff --git a/site/src/examples/progress/LinearIndeterminate.tsx b/site/src/examples/progress/LinearIndeterminate.tsx index 68bf421fd2..59aceea606 100644 --- a/site/src/examples/progress/LinearIndeterminate.tsx +++ b/site/src/examples/progress/LinearIndeterminate.tsx @@ -1,6 +1,76 @@ -import { ReactElement } from "react"; -import { LinearProgress } from "@salt-ds/core"; +import { ReactElement, useEffect, useState } from "react"; +import { + Button, + LinearProgress, + LinearProgressProps, + Toast, + ToastContent, + ValidationStatus, + Text, +} from "@salt-ds/core"; +import { CloseIcon } from "@salt-ds/icons"; -export const LinearIndeterminate = (): ReactElement => ( - -); +export const LinearIndeterminate = (): ReactElement => { + const [variant, setVariant] = + useState("indeterminate"); + + const [value, setValue] = useState(0); + + const [toastStatus, setToastStatus] = useState<{ + header: string; + status: ValidationStatus; + message: string; + }>({ + header: "File uploading", + status: "info", + message: "File upload to shared drive in progress.", + }); + + useEffect(() => { + const timer = setTimeout(() => setVariant("determinate"), 4000); + return () => clearTimeout(timer); + }, []); + + useEffect(() => { + if (variant === "determinate" && value < 100) { + const interval = setInterval( + () => setValue((currentValue) => currentValue + 1), + 20 + ); + return () => clearInterval(interval); + } + }, [value, variant]); + + useEffect(() => { + if (value === 100) { + setToastStatus({ + header: "Upload complete", + status: "success", + message: "File has successfully been uploaded to shared drive.", + }); + } + }, [value]); + + return ( + + +
+ + {toastStatus.header} + +
{toastStatus.message}
+ {value !== 100 && ( + + )} +
+ + + + ); +}; From 34bf12fdb1ff4f4cb9091ca409de837c5e8c0425 Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Wed, 19 Jun 2024 16:50:52 +0100 Subject: [PATCH 26/45] add indeterminate bar width var --- .../core/src/progress/LinearProgress/LinearProgress.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/core/src/progress/LinearProgress/LinearProgress.tsx b/packages/core/src/progress/LinearProgress/LinearProgress.tsx index d8a5f9fce1..b366ab9d7b 100644 --- a/packages/core/src/progress/LinearProgress/LinearProgress.tsx +++ b/packages/core/src/progress/LinearProgress/LinearProgress.tsx @@ -41,6 +41,8 @@ export interface LinearProgressProps extends ComponentPropsWithoutRef<"div"> { variant?: "determinate" | "indeterminate"; } +const INDETERMINATE_BAR_WIDTH = 66; + export const LinearProgress = forwardRef( function LinearProgress( { @@ -63,7 +65,9 @@ export const LinearProgress = forwardRef( }); const isIndeterminate = variant === "indeterminate"; - const progress = isIndeterminate ? 66 : ((value - min) / (max - min)) * 100; + const progress = isIndeterminate + ? INDETERMINATE_BAR_WIDTH + : ((value - min) / (max - min)) * 100; const buffer = isIndeterminate ? 0 : ((bufferValue - min) / (max - min)) * 100; From 69a9b1d097e77fe73becb1efe101f6e73ae097b4 Mon Sep 17 00:00:00 2001 From: "Moreira, Joana M" Date: Fri, 21 Jun 2024 14:15:30 +0100 Subject: [PATCH 27/45] change animation to ease in out --- packages/core/src/progress/LinearProgress/LinearProgress.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/progress/LinearProgress/LinearProgress.css b/packages/core/src/progress/LinearProgress/LinearProgress.css index b7e8e17f40..b482036ec2 100644 --- a/packages/core/src/progress/LinearProgress/LinearProgress.css +++ b/packages/core/src/progress/LinearProgress/LinearProgress.css @@ -65,7 +65,7 @@ transition: transform 0.2s linear 0s; transform-origin: left center; width: auto; - animation: 1.8s linear infinite indeterminate-progress-bar; + animation: 1.8s ease-in-out infinite indeterminate-progress-bar; } @keyframes indeterminate-progress-bar { From 1f7bbd8474a26953e65ba929a2960616adde54c9 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Mon, 24 Jun 2024 14:08:46 +0100 Subject: [PATCH 28/45] Remove site example change state --- .../examples/progress/LinearIndeterminate.tsx | 60 ++----------------- 1 file changed, 6 insertions(+), 54 deletions(-) diff --git a/site/src/examples/progress/LinearIndeterminate.tsx b/site/src/examples/progress/LinearIndeterminate.tsx index 59aceea606..41b5d3cecd 100644 --- a/site/src/examples/progress/LinearIndeterminate.tsx +++ b/site/src/examples/progress/LinearIndeterminate.tsx @@ -1,71 +1,23 @@ -import { ReactElement, useEffect, useState } from "react"; import { Button, LinearProgress, - LinearProgressProps, + Text, Toast, ToastContent, - ValidationStatus, - Text, } from "@salt-ds/core"; import { CloseIcon } from "@salt-ds/icons"; +import { ReactElement } from "react"; export const LinearIndeterminate = (): ReactElement => { - const [variant, setVariant] = - useState("indeterminate"); - - const [value, setValue] = useState(0); - - const [toastStatus, setToastStatus] = useState<{ - header: string; - status: ValidationStatus; - message: string; - }>({ - header: "File uploading", - status: "info", - message: "File upload to shared drive in progress.", - }); - - useEffect(() => { - const timer = setTimeout(() => setVariant("determinate"), 4000); - return () => clearTimeout(timer); - }, []); - - useEffect(() => { - if (variant === "determinate" && value < 100) { - const interval = setInterval( - () => setValue((currentValue) => currentValue + 1), - 20 - ); - return () => clearInterval(interval); - } - }, [value, variant]); - - useEffect(() => { - if (value === 100) { - setToastStatus({ - header: "Upload complete", - status: "success", - message: "File has successfully been uploaded to shared drive.", - }); - } - }, [value]); - return ( - +
- {toastStatus.header} + File uploading -
{toastStatus.message}
- {value !== 100 && ( - - )} + File upload to shared drive in progress. +
- - setSelectedType(e.target.value)} - > - - - - - - - {selectedType === "circular" && ( - - )} - {selectedType === "linear" && ( - - )} + + + + + - + ); }; diff --git a/site/src/examples/progress/WithProgVal.tsx b/site/src/examples/progress/WithProgVal.tsx index 3233fbc575..caba320207 100644 --- a/site/src/examples/progress/WithProgVal.tsx +++ b/site/src/examples/progress/WithProgVal.tsx @@ -1,14 +1,12 @@ -import { ReactElement, useState, useEffect, useCallback } from "react"; import { Button, + CircularProgress, FlexItem, - FlexLayout, FlowLayout, - RadioButton, - RadioButtonGroup, - CircularProgress, LinearProgress, + StackLayout, } from "@salt-ds/core"; +import { ReactElement, useCallback, useEffect, useState } from "react"; function useProgressingValue(updateInterval = 100) { const [value, setValue] = useState(0); @@ -60,10 +58,9 @@ function useProgressingValue(updateInterval = 100) { export const WithProgVal = (): ReactElement => { const { handleReset, handleStart, handleStop, isProgressing, value } = useProgressingValue(); - const [selectedType, setSelectedType] = useState("circular"); return ( - + - - setSelectedType(e.target.value)} - > - - - - - - - {selectedType === "circular" && ( - - )} - {selectedType === "linear" && ( - - )} + + + + + - + ); }; From 8f0b7c23ce5a4211b3df373beb9bcd53c9693c45 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Mon, 1 Jul 2024 16:42:23 +0100 Subject: [PATCH 34/45] Remove `noAnimation` --- packages/core/stories/progress/progress.qa.stories.css | 3 --- packages/core/stories/progress/progress.qa.stories.tsx | 8 +------- 2 files changed, 1 insertion(+), 10 deletions(-) delete mode 100644 packages/core/stories/progress/progress.qa.stories.css diff --git a/packages/core/stories/progress/progress.qa.stories.css b/packages/core/stories/progress/progress.qa.stories.css deleted file mode 100644 index b4c59b3281..0000000000 --- a/packages/core/stories/progress/progress.qa.stories.css +++ /dev/null @@ -1,3 +0,0 @@ -.noAnimation.saltLinearProgress .saltLinearProgress-indeterminate.saltLinearProgress-bar { - animation: none; -} diff --git a/packages/core/stories/progress/progress.qa.stories.tsx b/packages/core/stories/progress/progress.qa.stories.tsx index 22e1cf7974..b221fed2af 100644 --- a/packages/core/stories/progress/progress.qa.stories.tsx +++ b/packages/core/stories/progress/progress.qa.stories.tsx @@ -3,8 +3,6 @@ import { Meta, StoryFn } from "@storybook/react"; import { CircularProgress, LinearProgress } from "@salt-ds/core"; import { QAContainer, QAContainerProps } from "docs/components"; -import "./progress.qa.stories.css"; - export default { title: "Core/Progress/Progress QA", component: CircularProgress, @@ -37,11 +35,7 @@ export const ExamplesGrid: StoryFn = (props) => { hideLabel /> - + ); }; From 855ee22460b470e1cdf88724901acbdbec1b2478 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Wed, 3 Jul 2024 12:28:32 +0100 Subject: [PATCH 35/45] Update to use transform --- .changeset/four-bugs-reply.md | 2 +- .../LinearProgress/LinearProgress.css | 17 ++++++-------- .../LinearProgress/LinearProgress.tsx | 22 ++++++++----------- .../stories/progress/progress.qa.stories.css | 0 .../stories/progress/progress.qa.stories.tsx | 9 +++++++- 5 files changed, 25 insertions(+), 25 deletions(-) create mode 100644 packages/core/stories/progress/progress.qa.stories.css diff --git a/.changeset/four-bugs-reply.md b/.changeset/four-bugs-reply.md index 04da56861e..54f2b9c4cb 100644 --- a/.changeset/four-bugs-reply.md +++ b/.changeset/four-bugs-reply.md @@ -2,6 +2,6 @@ "@salt-ds/core": minor --- -Updated `LinearProgress` to display a moving line to represent an unspecified wait time, when no `value` is set. +Updated `LinearProgress` to display a moving line to represent an unspecified wait time, when `value` is `undefined`. `` diff --git a/packages/core/src/progress/LinearProgress/LinearProgress.css b/packages/core/src/progress/LinearProgress/LinearProgress.css index b482036ec2..6f05c3eb79 100644 --- a/packages/core/src/progress/LinearProgress/LinearProgress.css +++ b/packages/core/src/progress/LinearProgress/LinearProgress.css @@ -62,23 +62,20 @@ left: 0px; bottom: 0px; top: 0px; - transition: transform 0.2s linear 0s; transform-origin: left center; - width: auto; - animation: 1.8s ease-in-out infinite indeterminate-progress-bar; + width: 66%; + animation: 1.8s ease-in-out infinite salt-indeterminate-progress-bar; } -@keyframes indeterminate-progress-bar { +@keyframes salt-indeterminate-progress-bar { 0% { - left: -90%; - right: 100%; + transform: translateX(-100%); } 60% { - left: 100%; - right: -90%; + /* 155% is slightly more than moving the bar off screen (with width of 66%) */ + transform: translateX(155%); } 100% { - left: 100%; - right: -90%; + transform: translateX(200%); } } diff --git a/packages/core/src/progress/LinearProgress/LinearProgress.tsx b/packages/core/src/progress/LinearProgress/LinearProgress.tsx index 5ec8ac5656..9c7435d7a2 100644 --- a/packages/core/src/progress/LinearProgress/LinearProgress.tsx +++ b/packages/core/src/progress/LinearProgress/LinearProgress.tsx @@ -1,4 +1,4 @@ -import { ComponentPropsWithoutRef, CSSProperties, forwardRef } from "react"; +import { ComponentPropsWithoutRef, forwardRef } from "react"; import { clsx } from "clsx"; import { makePrefixer } from "../../utils"; import { Text } from "../../text"; @@ -36,8 +36,6 @@ export interface LinearProgressProps extends ComponentPropsWithoutRef<"div"> { value?: number; } -const INDETERMINATE_BAR_WIDTH = 66; - export const LinearProgress = forwardRef( function LinearProgress( { @@ -59,18 +57,16 @@ export const LinearProgress = forwardRef( }); const isIndeterminate = value === undefined && bufferValue === undefined; - const progress = isIndeterminate - ? INDETERMINATE_BAR_WIDTH - : value === undefined - ? 0 - : ((value - min) / (max - min)) * 100; + const progress = + value === undefined ? 0 : ((value - min) / (max - min)) * 100; const buffer = bufferValue === undefined ? 0 : ((bufferValue - min) / (max - min)) * 100; - const barStyle: CSSProperties = {}; - const bufferStyle: CSSProperties = {}; - - barStyle.width = `${progress}%`; - bufferStyle.width = `${buffer}%`; + const barStyle = { + width: isIndeterminate ? undefined : `${progress}%`, + }; + const bufferStyle = { + width: `${buffer}%`, + }; return (
= (props) => { hideLabel /> - + ); }; From d6c3c42c83a69000cc95a260de0b0a74cf9d7831 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Wed, 3 Jul 2024 12:43:53 +0100 Subject: [PATCH 36/45] Update example and site --- .../progress/linear-progress.stories.tsx | 72 +------------------ site/docs/components/progress/examples.mdx | 1 + 2 files changed, 4 insertions(+), 69 deletions(-) diff --git a/packages/core/stories/progress/linear-progress.stories.tsx b/packages/core/stories/progress/linear-progress.stories.tsx index 1690128a98..c0fc6d7b9e 100644 --- a/packages/core/stories/progress/linear-progress.stories.tsx +++ b/packages/core/stories/progress/linear-progress.stories.tsx @@ -1,17 +1,11 @@ -import { useState, useEffect } from "react"; -import { Meta, StoryFn } from "@storybook/react"; import { Button, - FlowLayout, - StackLayout, CircularProgress, + FlowLayout, LinearProgress, - ValidationStatus, - Toast, - ToastContent, - Text, + StackLayout, } from "@salt-ds/core"; -import { CloseIcon } from "@salt-ds/icons"; +import { Meta, StoryFn } from "@storybook/react"; import { useProgressingValue } from "./useProgressingValue"; import "./progress.stories.css"; @@ -99,63 +93,3 @@ export const ProgressingBufferValue: StoryFn = () => ( ); export const Indeterminate = Default.bind({}); - -export const IndeterminateToDeterminate: StoryFn< - typeof LinearProgress -> = () => { - const [value, setValue] = useState(undefined); - - const [toastStatus, setToastStatus] = useState<{ - header: string; - status: ValidationStatus; - message: string; - }>({ - header: "File uploading", - status: "info", - message: "File upload to shared drive in progress.", - }); - - useEffect(() => { - const timer = setTimeout(() => setValue(0), 4000); - return () => clearTimeout(timer); - }, []); - - useEffect(() => { - if (value !== undefined && value < 100) { - const interval = setInterval( - () => setValue((currentValue) => (currentValue ?? 0) + 1), - 20 - ); - return () => clearInterval(interval); - } - }, [value]); - - useEffect(() => { - if (value === 100) { - setToastStatus({ - header: "Upload complete", - status: "success", - message: "File has successfully been uploaded to shared drive.", - }); - } - }, [value]); - - return ( - - -
- - {toastStatus.header} - -
{toastStatus.message}
- {value !== 100 && ( - - )} -
- - - - ); -}; diff --git a/site/docs/components/progress/examples.mdx b/site/docs/components/progress/examples.mdx index 093c2c933d..2e331b215a 100644 --- a/site/docs/components/progress/examples.mdx +++ b/site/docs/components/progress/examples.mdx @@ -31,6 +31,7 @@ Use linear or circular depending on the context, layout and functionality of an ## Indeterminate linear progress Use an indeterminate linear progress to display an unspecified wait time such as a loading state. +This is preferred over spinner when `value` is being loaded, or vertial space is constrained. From 7d90748ffb7da688af09a57083111414a55f4f96 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Wed, 3 Jul 2024 13:12:13 +0100 Subject: [PATCH 37/45] Update changeset --- .changeset/four-bugs-reply.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.changeset/four-bugs-reply.md b/.changeset/four-bugs-reply.md index 54f2b9c4cb..77dfea43b1 100644 --- a/.changeset/four-bugs-reply.md +++ b/.changeset/four-bugs-reply.md @@ -5,3 +5,5 @@ Updated `LinearProgress` to display a moving line to represent an unspecified wait time, when `value` is `undefined`. `` + +`value` and `bufferValue` are no longer default to `0`. Previously above code would render a 0% progress bar, which was not a good reflection of intent. You can still achieve it by passing in `value={0}` as prop. From ebf3b881b210a200f670101806ad701aa85e76ac Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Wed, 3 Jul 2024 13:13:40 +0100 Subject: [PATCH 38/45] Update min/max site heading --- site/docs/components/progress/examples.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/docs/components/progress/examples.mdx b/site/docs/components/progress/examples.mdx index 2e331b215a..6dddf59b0b 100644 --- a/site/docs/components/progress/examples.mdx +++ b/site/docs/components/progress/examples.mdx @@ -37,7 +37,7 @@ This is preferred over spinner when `value` is being loaded, or vertial space is -## With minimum value +## Min and max values Specify the `min` and `max` values of the progress indicator. The default range is 0 - 100. From 0db72ed39afed236b77f3bd415d01b14175e81e9 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Wed, 3 Jul 2024 13:16:20 +0100 Subject: [PATCH 39/45] Update buffer doc --- site/docs/components/progress/examples.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/docs/components/progress/examples.mdx b/site/docs/components/progress/examples.mdx index 6dddf59b0b..b270274bb7 100644 --- a/site/docs/components/progress/examples.mdx +++ b/site/docs/components/progress/examples.mdx @@ -46,7 +46,7 @@ Specify the `min` and `max` values of the progress indicator. The default range ## With buffer -Specify a buffer value to indicate loading state. The buffer does not have a label and will not affect the progress label. +Specify a buffer value to indicate loading state. The buffer is a pending value so will not affect the progress label. From 0c22b4d4d44cc89469b2b7d7f4a8014cc93f1ab0 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Wed, 3 Jul 2024 13:20:29 +0100 Subject: [PATCH 40/45] Update props jsdoc --- .../core/src/progress/LinearProgress/LinearProgress.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/core/src/progress/LinearProgress/LinearProgress.tsx b/packages/core/src/progress/LinearProgress/LinearProgress.tsx index 9c7435d7a2..a8bf70caa9 100644 --- a/packages/core/src/progress/LinearProgress/LinearProgress.tsx +++ b/packages/core/src/progress/LinearProgress/LinearProgress.tsx @@ -12,7 +12,8 @@ const withBaseName = makePrefixer("saltLinearProgress"); export interface LinearProgressProps extends ComponentPropsWithoutRef<"div"> { /** * The value of the buffer indicator. - * Value between 0 and max. + * Value between `min` and `max`. + * When no `value` and `bufferValue` is passed in, show as indeterminate state. */ bufferValue?: number; /** @@ -31,7 +32,8 @@ export interface LinearProgressProps extends ComponentPropsWithoutRef<"div"> { min?: number; /** * The value of the progress indicator. - * Value between 0 and max. + * Value between `min` and `max`. + * When no `value` and `bufferValue` is passed in, show as indeterminate state. */ value?: number; } From d1f985a93a665fa8eeb20ecf8652d19fdd2e6485 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Wed, 3 Jul 2024 14:25:26 +0100 Subject: [PATCH 41/45] Add back noAnimation css --- packages/core/stories/progress/progress.qa.stories.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/core/stories/progress/progress.qa.stories.css b/packages/core/stories/progress/progress.qa.stories.css index e69de29bb2..b4c59b3281 100644 --- a/packages/core/stories/progress/progress.qa.stories.css +++ b/packages/core/stories/progress/progress.qa.stories.css @@ -0,0 +1,3 @@ +.noAnimation.saltLinearProgress .saltLinearProgress-indeterminate.saltLinearProgress-bar { + animation: none; +} From 9097191709070c1750c51c157dbe7323ac6253ac Mon Sep 17 00:00:00 2001 From: Zhihao Cui <5257855+origami-z@users.noreply.github.com> Date: Wed, 3 Jul 2024 14:37:00 +0100 Subject: [PATCH 42/45] Apply suggestions from code review Co-authored-by: Josh Wooding <12938082+joshwooding@users.noreply.github.com> --- .changeset/four-bugs-reply.md | 2 +- site/docs/components/progress/examples.mdx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.changeset/four-bugs-reply.md b/.changeset/four-bugs-reply.md index 77dfea43b1..18f07adafc 100644 --- a/.changeset/four-bugs-reply.md +++ b/.changeset/four-bugs-reply.md @@ -6,4 +6,4 @@ Updated `LinearProgress` to display a moving line to represent an unspecified wa `` -`value` and `bufferValue` are no longer default to `0`. Previously above code would render a 0% progress bar, which was not a good reflection of intent. You can still achieve it by passing in `value={0}` as prop. +`value` and `bufferValue` are no longer default to `0`. Previously above code would render a 0% progress bar, which was not a good reflection of intent. You can still achieve it by passing in `value={0}`. diff --git a/site/docs/components/progress/examples.mdx b/site/docs/components/progress/examples.mdx index b270274bb7..2d3c32b519 100644 --- a/site/docs/components/progress/examples.mdx +++ b/site/docs/components/progress/examples.mdx @@ -35,14 +35,14 @@ This is preferred over spinner when `value` is being loaded, or vertial space is - + ## Min and max values Specify the `min` and `max` values of the progress indicator. The default range is 0 - 100. - + ## With buffer @@ -58,7 +58,7 @@ Dynamically represent a progressing value in the progress indicator. -## With progressing buffer value +## With progressing buffer Dynamically represent a progressing buffer value in the progress indicator. From 2474bc7abc0b2ccaa4a40ae7d4eb9a1b192b98f1 Mon Sep 17 00:00:00 2001 From: navkaur76 <112858906+navkaur76@users.noreply.github.com> Date: Wed, 3 Jul 2024 16:36:16 +0100 Subject: [PATCH 43/45] Update examples.mdx Updated description of when to use indeterminate linear progress --- site/docs/components/progress/examples.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/site/docs/components/progress/examples.mdx b/site/docs/components/progress/examples.mdx index 2d3c32b519..6fe4bf10a7 100644 --- a/site/docs/components/progress/examples.mdx +++ b/site/docs/components/progress/examples.mdx @@ -30,8 +30,7 @@ Use linear or circular depending on the context, layout and functionality of an ## Indeterminate linear progress -Use an indeterminate linear progress to display an unspecified wait time such as a loading state. -This is preferred over spinner when `value` is being loaded, or vertial space is constrained. +Use an indeterminate linear progress to indicate ongoing progress until a determinate value can be specified. From 607c7dc68ca06b62e45517ced38c4a384e1a6b32 Mon Sep 17 00:00:00 2001 From: Zhihao Cui <5257855+origami-z@users.noreply.github.com> Date: Fri, 5 Jul 2024 15:36:14 +0100 Subject: [PATCH 44/45] Update .changeset/four-bugs-reply.md Co-authored-by: Josh Wooding <12938082+joshwooding@users.noreply.github.com> --- .changeset/four-bugs-reply.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/four-bugs-reply.md b/.changeset/four-bugs-reply.md index 18f07adafc..64b4e01358 100644 --- a/.changeset/four-bugs-reply.md +++ b/.changeset/four-bugs-reply.md @@ -6,4 +6,4 @@ Updated `LinearProgress` to display a moving line to represent an unspecified wa `` -`value` and `bufferValue` are no longer default to `0`. Previously above code would render a 0% progress bar, which was not a good reflection of intent. You can still achieve it by passing in `value={0}`. +*Note*: `value` and `bufferValue` are no longer default to `0`. Previously above code would render a 0% progress bar, which was not a good reflection of intent. You can still achieve it by passing in `value={0}`. From 2533ded8dba340f615cd090b60dbec81acd0ff46 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Mon, 8 Jul 2024 09:26:22 +0100 Subject: [PATCH 45/45] Prettier --- .changeset/four-bugs-reply.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/four-bugs-reply.md b/.changeset/four-bugs-reply.md index 64b4e01358..04de5c8136 100644 --- a/.changeset/four-bugs-reply.md +++ b/.changeset/four-bugs-reply.md @@ -6,4 +6,4 @@ Updated `LinearProgress` to display a moving line to represent an unspecified wa `` -*Note*: `value` and `bufferValue` are no longer default to `0`. Previously above code would render a 0% progress bar, which was not a good reflection of intent. You can still achieve it by passing in `value={0}`. +_Note_: `value` and `bufferValue` are no longer default to `0`. Previously above code would render a 0% progress bar, which was not a good reflection of intent. You can still achieve it by passing in `value={0}`.