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. 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..4e77dac4d2 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 +### Progress Steps vs Ordered Display List 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](/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 - Give each step a concise label describing what the goal of that step is. @@ -237,28 +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. 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