Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(docs): fix formatting on Progress Steps docs #4101

Merged
merged 7 commits into from
Oct 11, 2024
Merged

chore(docs): fix formatting on Progress Steps docs #4101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b260a0b
chore(docs): fix formatting on Progress Steps docs
serifluous Oct 10, 2024
fcd8780
chore: combine timeline comparison with ordered display list
serifluous Oct 10, 2024
84c6dc2
chore: reorder heading to match content order
serifluous Oct 10, 2024
8d1b4f8
chore: add timeline anchor
serifluous Oct 10, 2024
d2023db
chore: update Timeline docs with same content
serifluous Oct 11, 2024
12fa4df
chore: update List docs with same content
serifluous Oct 11, 2024
82a6d4d
Merge branch 'main' into chore-fix-formatting-progress-steps-docs
kodiakhq[bot] Oct 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion packages/paste-website/src/pages/components/list/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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**

Expand All @@ -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.
Expand Down
29 changes: 6 additions & 23 deletions packages/paste-website/src/pages/components/progress-steps/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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**

Expand All @@ -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.
Expand Down Expand Up @@ -237,28 +242,6 @@ Each step within the Progress Steps component has a label which can be set to ad
{i18nExample}
</LivePreview>


### Timeline vs. Progress Steps

Use Progress Steps:

<UnorderedList>
<ListItem>To guide users through a sequence of steps necessary to complete a task.</ListItem>
<ListItem>
When user interaction is required at certain points in a process and actions are necessary to complete a goal.
</ListItem>
</UnorderedList>

Use Timeline:

<UnorderedList>
<ListItem>To display the history or sequence of events, focusing on what has happened over time.</ListItem>
<ListItem>
When user interaction is secondary, and progress does not depend on user actions, ensuring the process continues
even without direct user input.
</ListItem>
</UnorderedList>

## Composition Notes

- Each step must have a label. Keep the label concise with fewer than 5 words per label.
Expand Down
28 changes: 12 additions & 16 deletions packages/paste-website/src/pages/components/timeline/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,26 +107,22 @@ Timelines can be used in different use cases, such as tracking milestones, monit
</ListItem>
</UnorderedList>

### Timeline vs. Progress Steps
### Progress Steps vs Ordered Display List vs Timeline

Use Timeline:
**Progress Steps**

<UnorderedList>
<ListItem>To display the history or sequence of events, focusing on what has happened over time.</ListItem>
<ListItem>
When user interaction is secondary, and progress does not depend on user actions, ensuring the process continues
even without direct user input.
</ListItem>
</UnorderedList>
- [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.

<UnorderedList>
<ListItem>To guide users through a sequence of steps necessary to complete a task.</ListItem>
<ListItem>
When user interaction is required at certain points in a process and actions are necessary to complete a goal.
</ListItem>
</UnorderedList>

## Examples

Expand Down
Loading