From b260a0b8366b56bb25f2df50b398d1793de3d98a Mon Sep 17 00:00:00 2001 From: Sarah Date: Thu, 10 Oct 2024 13:14:35 -0700 Subject: [PATCH 1/6] chore(docs): fix formatting on Progress Steps docs --- .../pages/components/progress-steps/index.mdx | 17 ++++------------- 1 file changed, 4 insertions(+), 13 deletions(-) diff --git a/packages/paste-website/src/pages/components/progress-steps/index.mdx b/packages/paste-website/src/pages/components/progress-steps/index.mdx index a7f202485d..fd432d6737 100644 --- a/packages/paste-website/src/pages/components/progress-steps/index.mdx +++ b/packages/paste-website/src/pages/components/progress-steps/index.mdx @@ -242,22 +242,13 @@ Each step within the Progress Steps component has a label which can be set to ad Use Progress Steps: - - To guide users through a sequence of steps necessary to complete a task. - - When user interaction is required at certain points in a process and actions are necessary to complete a goal. - - +- To guide users through a sequence of steps necessary to complete a task. +- When user interaction is required at certain points in a process and actions are necessary to complete a goal. Use Timeline: - - To display the history or sequence of events, focusing on what has happened over time. - - When user interaction is secondary, and progress does not depend on user actions, ensuring the process continues - even without direct user input. - - +- To display the history or sequence of events, focusing on what has happened over time. +- When user interaction is secondary, and progress does not depend on user actions, ensuring the process continues even without direct user input. ## Composition Notes From fcd8780a058567d120af3598bee24c96f2a9dd51 Mon Sep 17 00:00:00 2001 From: Sarah Date: Thu, 10 Oct 2024 13:37:24 -0700 Subject: [PATCH 2/6] chore: combine timeline comparison with ordered display list --- .../pages/components/progress-steps/index.mdx | 20 ++++++------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/packages/paste-website/src/pages/components/progress-steps/index.mdx b/packages/paste-website/src/pages/components/progress-steps/index.mdx index fd432d6737..b95b944694 100644 --- a/packages/paste-website/src/pages/components/progress-steps/index.mdx +++ b/packages/paste-website/src/pages/components/progress-steps/index.mdx @@ -93,7 +93,7 @@ Each step can communicate one of these statuses: - **Error**: The user has interacted with this step but more action is required that will prevent completing the full task. - **Incomplete + Disabled**: This step is not yet reached by a user. -### Ordered Display List vs Progress Steps +### Ordered Display List vs Progress Steps vs Timeline **Progress Steps** @@ -104,6 +104,11 @@ Each step can communicate one of these statuses: [Ordered Display Lists](/components/list#ordered-display-list) structure tasks but don’t show progression or status through a multi-step task. +**Timeline** + +- Timeline displays the history or sequence of events, focusing on what has happened over time. +- Use Timeline when user interaction is secondary, and progress does not depend on user actions since the process continues even without direct user input. + ### Accessibility - Give each step a concise label describing what the goal of that step is. @@ -237,19 +242,6 @@ Each step within the Progress Steps component has a label which can be set to ad {i18nExample} - -### Timeline vs. Progress Steps - -Use Progress Steps: - -- To guide users through a sequence of steps necessary to complete a task. -- When user interaction is required at certain points in a process and actions are necessary to complete a goal. - -Use Timeline: - -- To display the history or sequence of events, focusing on what has happened over time. -- When user interaction is secondary, and progress does not depend on user actions, ensuring the process continues even without direct user input. - ## Composition Notes - Each step must have a label. Keep the label concise with fewer than 5 words per label. From 84c6dc25d575915b0f556d37d08b9326c680bade Mon Sep 17 00:00:00 2001 From: Sarah Date: Thu, 10 Oct 2024 13:38:13 -0700 Subject: [PATCH 3/6] chore: reorder heading to match content order --- .../paste-website/src/pages/components/progress-steps/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/paste-website/src/pages/components/progress-steps/index.mdx b/packages/paste-website/src/pages/components/progress-steps/index.mdx index b95b944694..5067bc68e3 100644 --- a/packages/paste-website/src/pages/components/progress-steps/index.mdx +++ b/packages/paste-website/src/pages/components/progress-steps/index.mdx @@ -93,7 +93,7 @@ Each step can communicate one of these statuses: - **Error**: The user has interacted with this step but more action is required that will prevent completing the full task. - **Incomplete + Disabled**: This step is not yet reached by a user. -### Ordered Display List vs Progress Steps vs Timeline +### Progress Steps vs Ordered Display List vs Timeline **Progress Steps** From 8d1b4f86cfae7a0c945b16e4560e892659015473 Mon Sep 17 00:00:00 2001 From: Sarah Date: Thu, 10 Oct 2024 13:38:59 -0700 Subject: [PATCH 4/6] chore: add timeline anchor --- .../paste-website/src/pages/components/progress-steps/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/paste-website/src/pages/components/progress-steps/index.mdx b/packages/paste-website/src/pages/components/progress-steps/index.mdx index 5067bc68e3..4e77dac4d2 100644 --- a/packages/paste-website/src/pages/components/progress-steps/index.mdx +++ b/packages/paste-website/src/pages/components/progress-steps/index.mdx @@ -106,7 +106,7 @@ Each step can communicate one of these statuses: **Timeline** -- Timeline displays the history or sequence of events, focusing on what has happened over time. +- [Timeline](/components/timeline) displays the history or sequence of events, focusing on what has happened over time. - Use Timeline when user interaction is secondary, and progress does not depend on user actions since the process continues even without direct user input. ### Accessibility From d2023db2c9d5ec1672ed03faea9ba0f1d9aeb8fa Mon Sep 17 00:00:00 2001 From: Sarah Date: Fri, 11 Oct 2024 09:00:44 -0700 Subject: [PATCH 5/6] chore: update Timeline docs with same content --- .../src/pages/components/timeline/index.mdx | 28 ++++++++----------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/packages/paste-website/src/pages/components/timeline/index.mdx b/packages/paste-website/src/pages/components/timeline/index.mdx index f7100077ee..7f67f39df0 100644 --- a/packages/paste-website/src/pages/components/timeline/index.mdx +++ b/packages/paste-website/src/pages/components/timeline/index.mdx @@ -107,26 +107,22 @@ Timelines can be used in different use cases, such as tracking milestones, monit -### Timeline vs. Progress Steps +### Progress Steps vs Ordered Display List vs Timeline -Use Timeline: +**Progress Steps** - - To display the history or sequence of events, focusing on what has happened over time. - - When user interaction is secondary, and progress does not depend on user actions, ensuring the process continues - even without direct user input. - - +- [Progress Steps](/components/progress-steps) show users an outline of a complex multi-step task across multiple pages or apps. +- Progress Steps convey progression and have interactive status states. -Use Progress Steps: +**Ordered Display List** + +[Ordered Display Lists](/components/list#ordered-display-list) structure tasks but don’t show progression or status through a multi-step task. + +**Timeline** + +- Timeline displays the history or sequence of events, focusing on what has happened over time. +- Use Timeline when user interaction is secondary, and progress does not depend on user actions since the process continues even without direct user input. - - To guide users through a sequence of steps necessary to complete a task. - - When user interaction is required at certain points in a process and actions are necessary to complete a goal. - - ## Examples From 12fa4df112d144f42088cff9864e5671f83d82b5 Mon Sep 17 00:00:00 2001 From: Sarah Date: Fri, 11 Oct 2024 09:01:41 -0700 Subject: [PATCH 6/6] chore: update List docs with same content --- packages/paste-website/src/pages/components/list/index.mdx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/paste-website/src/pages/components/list/index.mdx b/packages/paste-website/src/pages/components/list/index.mdx index d8372b6951..c8d0aecb6a 100644 --- a/packages/paste-website/src/pages/components/list/index.mdx +++ b/packages/paste-website/src/pages/components/list/index.mdx @@ -86,7 +86,7 @@ Lists are a number of connected list items that are printed consecutively, typic - Lists should align with the font-size, font-weight, and line-height of paragraphs, but are styled with bullets or numbers. - Lists can have similar children elements as paragraphs to provide emphasis on a certain word or phrase. -### Ordered Display List vs Progress Steps +### Progress Steps vs Ordered Display List vs Timeline **Progress Steps** @@ -97,6 +97,10 @@ Lists are a number of connected list items that are printed consecutively, typic Ordered Display Lists structure tasks but don’t show progression or status through a multi-step task. +**Timeline** + +- [Timeline](/components/timeline) displays the history or sequence of events, focusing on what has happened over time. +- Use Timeline when user interaction is secondary, and progress does not depend on user actions since the process continues even without direct user input. ### Accessibility - `ListItem`s should always have an `OrderedList` or `UnorderedList` parent component.