diff --git a/elements/rh-spinner/docs/20-guidelines.md b/elements/rh-spinner/docs/20-guidelines.md index ca9665a26b..af19cda5ef 100644 --- a/elements/rh-spinner/docs/20-guidelines.md +++ b/elements/rh-spinner/docs/20-guidelines.md @@ -80,41 +80,74 @@ it loads. ## Best practices -### Bad placement - -Do not align a spinner away from the horizontal and vertical center. Keeping it -centered helps users understand that the whole area is loading instead of one -specific part. - - - A spinner not horizontally or vertically centered in a container which is incorrect usage - - - -### Cut off by browser window - -A tooltip should not be cut off by the browser window. Change the orientation if -it does. - - - A small spinner used in a large container which is incorrect usage - - - -### Wrong orientation - -Do not change the orientation, the spinner is always positioned on top of the -text label. - - - Two spinners with different orientations which is incorrect usage - +### Placement + +
+ + + spinner horizontally and vertically centered in a blank container + +

Keep the spinner centered to help users understand that the whole area is loading.

+ + + + + spinner in the top right quadrant of a blank container + +

Do not align a spinner away from the horizontal and vertical center.

+ +
+ +### Text orientation + +
+ + + Text label below the spinner + +

Keep the spinner always positioned above the text label.

+ + + + + Text label to the right of the spinner + +

Do not change the orientation of the text label relative to the spinner.

+ +
+ +### Spinner size + +
+ + + Large spinner in the center of a desktop-sized screen + +

Use a spinner size that’s proportional to the size of its container.

+ + + + + Small spinner in the center of a desktop-sized screen + +

Avoid using a small spinner for large containers or large spinners for small containers.

+ +
\ No newline at end of file diff --git a/elements/rh-spinner/docs/spinner-best-practice-1.png b/elements/rh-spinner/docs/spinner-best-practice-1.png deleted file mode 100755 index 5e02417772..0000000000 Binary files a/elements/rh-spinner/docs/spinner-best-practice-1.png and /dev/null differ diff --git a/elements/rh-spinner/docs/spinner-best-practice-2.png b/elements/rh-spinner/docs/spinner-best-practice-2.png deleted file mode 100755 index 968ae89f5d..0000000000 Binary files a/elements/rh-spinner/docs/spinner-best-practice-2.png and /dev/null differ diff --git a/elements/rh-spinner/docs/spinner-best-practice-3.png b/elements/rh-spinner/docs/spinner-best-practice-3.png deleted file mode 100755 index 0217853690..0000000000 Binary files a/elements/rh-spinner/docs/spinner-best-practice-3.png and /dev/null differ diff --git a/elements/rh-spinner/docs/spinner-best-practices-placement-do.svg b/elements/rh-spinner/docs/spinner-best-practices-placement-do.svg new file mode 100644 index 0000000000..6c4509613d --- /dev/null +++ b/elements/rh-spinner/docs/spinner-best-practices-placement-do.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/elements/rh-spinner/docs/spinner-best-practices-placement-dont.svg b/elements/rh-spinner/docs/spinner-best-practices-placement-dont.svg new file mode 100644 index 0000000000..3b159edd08 --- /dev/null +++ b/elements/rh-spinner/docs/spinner-best-practices-placement-dont.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/elements/rh-spinner/docs/spinner-best-practices-spinner-size-do.svg b/elements/rh-spinner/docs/spinner-best-practices-spinner-size-do.svg new file mode 100644 index 0000000000..66f1a06c3b --- /dev/null +++ b/elements/rh-spinner/docs/spinner-best-practices-spinner-size-do.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-spinner/docs/spinner-best-practices-spinner-size-dont.svg b/elements/rh-spinner/docs/spinner-best-practices-spinner-size-dont.svg new file mode 100644 index 0000000000..98826664fd --- /dev/null +++ b/elements/rh-spinner/docs/spinner-best-practices-spinner-size-dont.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-spinner/docs/spinner-best-practices-text-orientation-do.svg b/elements/rh-spinner/docs/spinner-best-practices-text-orientation-do.svg new file mode 100644 index 0000000000..2208c1fba6 --- /dev/null +++ b/elements/rh-spinner/docs/spinner-best-practices-text-orientation-do.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/elements/rh-spinner/docs/spinner-best-practices-text-orientation-dont.svg b/elements/rh-spinner/docs/spinner-best-practices-text-orientation-dont.svg new file mode 100644 index 0000000000..08a9397390 --- /dev/null +++ b/elements/rh-spinner/docs/spinner-best-practices-text-orientation-dont.svg @@ -0,0 +1,5 @@ + + + + +