Skip to content

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

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

Merged
merged 7 commits into from
Oct 11, 2024
Merged

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

Changes from 4 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
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
Loading