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

Spinner Component: Added design documentation and image #16760

Merged
merged 3 commits into from
Aug 1, 2019
Merged

Spinner Component: Added design documentation and image #16760

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
96f8060
Spinner Component: Added design documentation and image
cburton4 Jul 25, 2019
a493895
Copy tweaks
cburton4 Jul 29, 2019
ad474c4
Removed guidelines
cburton4 Jul 31, 2019
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
11 changes: 11 additions & 0 deletions packages/components/src/spinner/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
# Spinner

Spinners notify users that their action is being processed.

![Spinner component](https://wordpress.org/gutenberg/files/2019/07/spinner.png)

## Best practices

The spinner component should:

- Signal to users that the processing of their request is underway and will soon complete.
- Not appear when pages or data are loading.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you clarify this Not appear when pages or data are loading.? Isn't this the whole purpose of the spinner component (data being loaded)?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep this is a good question. The thinking here is that future forward it's ideal to have different kinds of feedback or progress indicators, each with their own purpose. Since the spinner is the only progress indicator we have I jumped the gun with this guidance.

Future component descriptions might look something like this:

Spinner: An action is being processed with an unspecified amount of wait time. They should be used when progress isn’t detectable, or if it’s not necessary to indicate how long an activity will take.

Progress bar: Used to indicate to users that a page is loading or an upload is processing. It shows how much of the task has been completed and how much is left.

In the meantime I can remove Not appear when pages or data are loading until we hopefully add a Progress bar component.


## Usage

```jsx
Expand Down