From 2118b5553c37436efb75ee1b9d7af1c161e0f648 Mon Sep 17 00:00:00 2001 From: Silvio Wolf Date: Thu, 15 Feb 2024 17:11:48 +0100 Subject: [PATCH 1/6] docs(progress-bar): add guidelines --- .../docs/controls/_progress-bar_styleguide.md | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 packages/documentation/docs/controls/_progress-bar_styleguide.md diff --git a/packages/documentation/docs/controls/_progress-bar_styleguide.md b/packages/documentation/docs/controls/_progress-bar_styleguide.md new file mode 100644 index 00000000000..52a64e18b00 --- /dev/null +++ b/packages/documentation/docs/controls/_progress-bar_styleguide.md @@ -0,0 +1,40 @@ +A progress bar is used to visually convey the status or completion of a task or process. Its primary purpose is to offer a clear indication of how much of the task has been completed and how much remains. + +![Progress bar anatomy](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2094-345&mode=design&t=fa4W7cvdm8pVsQFn-11) + +1. Indicator: Shows the progress of a process, with the indeterminate option the the Indicator bar moves from left to right in a continuous loop +2. Background Track: The area that the indicator fills or moves across, represents the total duration of the process +3. Content slot (optional): Used for additional information about the process, the content itself should handle a possible overflow + + +![Progress bar examples](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2098-372&mode=design&t=fa4W7cvdm8pVsQFn-11) + +5. Progress bar without using the slot +6. Using the slot to to show additional information +7. Indeterminate process, the slot is used for displaying an icons and text +8. Error + +## Options + +- Indeterminate (7): Used for processes with yet unknown duration, the indicator animates continuously from left to right until the process is complete or the duration of the process is known +- Error: Is used to indicate that the process did not successfully complete. + + +## Behavior +The width of a progress bar can be customized appropriately for its context. Make sure the elements in the slot take care about the overflow behavior. + +## Dos and Don'ts +- Do use the progress bar for longer lasting processes with a known duration – as a rule of thumb: durations > 3 seconds. +- Do use the option "indeterminate" if the duration is unknown yet. This can happen at the beginning of the process while the duration is being calculated. +- Do use the slot for information about the process like a percentage value of the progress or the name of the current step in the process. +- Do use a label above or left from the progress bar to name the process. +- Don’t use the progress bar for short processes < 3 seconds, use the [Spinner](./spinner.md) or the loading option of [Button](./buttons/) instead +- Don’t use the progress bar for processes with always unknown duration, use the [Spinner](./spinner.md) instead. + +## Related patterns +- [Spinner](./spinner.md) +- loading option of [Button](./buttons/) + + + + From a5fb022ba954d9de433b35022600fca4c3294dcf Mon Sep 17 00:00:00 2001 From: Silvio Wolf Date: Wed, 21 Feb 2024 11:43:41 +0100 Subject: [PATCH 2/6] docs(progress bar): update text --- .../docs/controls/_progress-bar_styleguide.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/documentation/docs/controls/_progress-bar_styleguide.md b/packages/documentation/docs/controls/_progress-bar_styleguide.md index 52a64e18b00..1bf1b4124ee 100644 --- a/packages/documentation/docs/controls/_progress-bar_styleguide.md +++ b/packages/documentation/docs/controls/_progress-bar_styleguide.md @@ -2,17 +2,17 @@ A progress bar is used to visually convey the status or completion of a task or ![Progress bar anatomy](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2094-345&mode=design&t=fa4W7cvdm8pVsQFn-11) -1. Indicator: Shows the progress of a process, with the indeterminate option the the Indicator bar moves from left to right in a continuous loop +1. Indicator: Shows the current progress of a process, with the indeterminate option the the Indicator bar moves from left to right in a continuous loop 2. Background Track: The area that the indicator fills or moves across, represents the total duration of the process 3. Content slot (optional): Used for additional information about the process, the content itself should handle a possible overflow ![Progress bar examples](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2098-372&mode=design&t=fa4W7cvdm8pVsQFn-11) -5. Progress bar without using the slot -6. Using the slot to to show additional information -7. Indeterminate process, the slot is used for displaying an icons and text -8. Error +5. The slot is not used +6. The slot is used to show additional information +7. Indeterminate process, the slot shows icon and text +8. The progress bar is set to "error" ## Options @@ -26,8 +26,8 @@ The width of a progress bar can be customized appropriately for its context. Mak ## Dos and Don'ts - Do use the progress bar for longer lasting processes with a known duration – as a rule of thumb: durations > 3 seconds. - Do use the option "indeterminate" if the duration is unknown yet. This can happen at the beginning of the process while the duration is being calculated. -- Do use the slot for information about the process like a percentage value of the progress or the name of the current step in the process. -- Do use a label above or left from the progress bar to name the process. +- Do use the slot to display information about the process like a percentage value or the name of the current step in the process. +- Do place a label above or left from the progress bar to name the process. - Don’t use the progress bar for short processes < 3 seconds, use the [Spinner](./spinner.md) or the loading option of [Button](./buttons/) instead - Don’t use the progress bar for processes with always unknown duration, use the [Spinner](./spinner.md) instead. From f608efbfa6d2c9b24d9136181f73591e7dc0c192 Mon Sep 17 00:00:00 2001 From: tokyojen <143795032+tokyojen@users.noreply.github.com> Date: Wed, 21 Feb 2024 14:19:05 +0100 Subject: [PATCH 3/6] docs::progress_bar_styleguide_update --- .../docs/controls/_progress-bar_styleguide.md | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/documentation/docs/controls/_progress-bar_styleguide.md b/packages/documentation/docs/controls/_progress-bar_styleguide.md index 1bf1b4124ee..a0c7cac4c24 100644 --- a/packages/documentation/docs/controls/_progress-bar_styleguide.md +++ b/packages/documentation/docs/controls/_progress-bar_styleguide.md @@ -1,35 +1,35 @@ -A progress bar is used to visually convey the status or completion of a task or process. Its primary purpose is to offer a clear indication of how much of the task has been completed and how much remains. +Progress bars visually convey the status or completion of a task or process. Their primary purpose is to clearly display how much of a task has been completed and how much remains. ![Progress bar anatomy](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2094-345&mode=design&t=fa4W7cvdm8pVsQFn-11) -1. Indicator: Shows the current progress of a process, with the indeterminate option the the Indicator bar moves from left to right in a continuous loop -2. Background Track: The area that the indicator fills or moves across, represents the total duration of the process -3. Content slot (optional): Used for additional information about the process, the content itself should handle a possible overflow +1. Indicator: Shows the current progress of a process. With the indeterminate option, the indicator bar moves from left to right in a continuous loop. +2. Background track: The area that the indicator fills or moves across represents the total duration of the process. +3. Content slot (optional): Use for additional information about the process. The content should handle a possible overflow by itself. ![Progress bar examples](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2098-372&mode=design&t=fa4W7cvdm8pVsQFn-11) -5. The slot is not used -6. The slot is used to show additional information -7. Indeterminate process, the slot shows icon and text -8. The progress bar is set to "error" +5. Slot not used +6. Slot used to show additional information +7. Indeterminate process slot shows icon and text +8. Progress bar set to "error" ## Options -- Indeterminate (7): Used for processes with yet unknown duration, the indicator animates continuously from left to right until the process is complete or the duration of the process is known -- Error: Is used to indicate that the process did not successfully complete. +- Indeterminate (7): Use for processes with an unknown duration. The indicator animates continuously from left to right until the process is complete or the duration of the process is known. +- Error: Use to indicate unsuccessful processes. ## Behavior -The width of a progress bar can be customized appropriately for its context. Make sure the elements in the slot take care about the overflow behavior. +The width of a progress bar can be customized, however, make sure the slot elements can manage the overflow behavior. ## Dos and Don'ts -- Do use the progress bar for longer lasting processes with a known duration – as a rule of thumb: durations > 3 seconds. -- Do use the option "indeterminate" if the duration is unknown yet. This can happen at the beginning of the process while the duration is being calculated. -- Do use the slot to display information about the process like a percentage value or the name of the current step in the process. -- Do place a label above or left from the progress bar to name the process. -- Don’t use the progress bar for short processes < 3 seconds, use the [Spinner](./spinner.md) or the loading option of [Button](./buttons/) instead -- Don’t use the progress bar for processes with always unknown duration, use the [Spinner](./spinner.md) instead. +- Do use progress bars for longer processes with a known duration (we recommend using them when processes are longer than 3 seconds) +- Do use the option "indeterminate" when the duration is unknown +- Do use the slot to display information about the process (we typically use a percentage value or the name of the current step in the process) +- Do place a label above or left from the progress bar to name the process +- Don’t use the progress bar for short processes (under 3 seconds) instead use a [Spinner](./spinner.md) or the loading option of the [Button](./buttons/) +- Don’t use the progress bar for processes of an unknown duration, instead use the [Spinner](./spinner.md) ## Related patterns - [Spinner](./spinner.md) From 17415fd71e577b5cb52f6e6cbea2cc7e25043a08 Mon Sep 17 00:00:00 2001 From: Silvio Wolf Date: Fri, 23 Feb 2024 19:05:53 +0100 Subject: [PATCH 4/6] docs(progress-bar): update guidelines --- .../documentation/docs/controls/_progress-bar_styleguide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/_progress-bar_styleguide.md b/packages/documentation/docs/controls/_progress-bar_styleguide.md index a0c7cac4c24..cfb94245d28 100644 --- a/packages/documentation/docs/controls/_progress-bar_styleguide.md +++ b/packages/documentation/docs/controls/_progress-bar_styleguide.md @@ -29,7 +29,7 @@ The width of a progress bar can be customized, however, make sure the slot eleme - Do use the slot to display information about the process (we typically use a percentage value or the name of the current step in the process) - Do place a label above or left from the progress bar to name the process - Don’t use the progress bar for short processes (under 3 seconds) instead use a [Spinner](./spinner.md) or the loading option of the [Button](./buttons/) -- Don’t use the progress bar for processes of an unknown duration, instead use the [Spinner](./spinner.md) +- Don’t use the progress bar for page or content loading processes, instead use the spinner. [Spinner](./spinner.md) ## Related patterns - [Spinner](./spinner.md) From eba825a31ece4bf65a2418518996f533c01c6df1 Mon Sep 17 00:00:00 2001 From: Silvio Wolf Date: Wed, 28 Feb 2024 11:30:41 +0100 Subject: [PATCH 5/6] docs(progress bar): fix link and punctuation --- .../documentation/docs/controls/_progress-bar_styleguide.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/documentation/docs/controls/_progress-bar_styleguide.md b/packages/documentation/docs/controls/_progress-bar_styleguide.md index cfb94245d28..174ddde6742 100644 --- a/packages/documentation/docs/controls/_progress-bar_styleguide.md +++ b/packages/documentation/docs/controls/_progress-bar_styleguide.md @@ -28,8 +28,8 @@ The width of a progress bar can be customized, however, make sure the slot eleme - Do use the option "indeterminate" when the duration is unknown - Do use the slot to display information about the process (we typically use a percentage value or the name of the current step in the process) - Do place a label above or left from the progress bar to name the process -- Don’t use the progress bar for short processes (under 3 seconds) instead use a [Spinner](./spinner.md) or the loading option of the [Button](./buttons/) -- Don’t use the progress bar for page or content loading processes, instead use the spinner. [Spinner](./spinner.md) +- Don’t use the progress bar for short processes (under 3 seconds) instead use a [Spinner](./spinner.md) or the loading option of the [Button](./buttons/button.md) +- Don’t use the progress bar for page or content loading processes, instead use the [Spinner](./spinner.md) ## Related patterns - [Spinner](./spinner.md) From c7414f1aea4cd1b582366752064a7d6997f903d2 Mon Sep 17 00:00:00 2001 From: Silvio Wolf <115155312+silviowolf@users.noreply.github.com> Date: Fri, 1 Mar 2024 15:35:13 +0100 Subject: [PATCH 6/6] Update packages/documentation/docs/controls/_progress-bar_styleguide.md Co-authored-by: Lukas Maurer --- .../documentation/docs/controls/_progress-bar_styleguide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/_progress-bar_styleguide.md b/packages/documentation/docs/controls/_progress-bar_styleguide.md index 174ddde6742..3f88f65df96 100644 --- a/packages/documentation/docs/controls/_progress-bar_styleguide.md +++ b/packages/documentation/docs/controls/_progress-bar_styleguide.md @@ -33,7 +33,7 @@ The width of a progress bar can be customized, however, make sure the slot eleme ## Related patterns - [Spinner](./spinner.md) -- loading option of [Button](./buttons/) +- loading option of [Button](./buttons/button.md)