diff --git a/elements/rh-tabs/docs/20-guidelines.md b/elements/rh-tabs/docs/20-guidelines.md index 574caf27d1..3384a3d69d 100644 --- a/elements/rh-tabs/docs/20-guidelines.md +++ b/elements/rh-tabs/docs/20-guidelines.md @@ -280,49 +280,98 @@ Vertical tabs switch to horizontal tabs with overflow buttons on small breakpoin ## Best practices -### Not enough tabs - -There should be at least two tabs minimum. - - - Image of horizontal open and box tabs with one tab each which is incorrect usage - - - -### Too many tabs - -Be careful about displaying too many tabs, some of them will become hidden even at large breakpoints. - - - Image of horizontal tabs with five tabs and overflow buttons which is incorrect usage - - - -### Extra spacing - -Do not add extra spacing or stretch the width of tabs. - - - Image of horizontal tabs with three tabs that are stretched which is incorrect usage - - +### Minimum number of tabs + +
+ + + Groups of two tabs shown in the open and box variants + +

There should always be at least two tabs.

+
+ + + + One tab shown in the open and box variants + +

Do not use only one tab.

+
+
+ +### Using many tabs + + + + Group of five box tabs at a large breakpoint + + +

Use a reasonable number of tabs.

+
+ + + + Group of six box tabs that overflow at a large breakpoint + + +

Do not use too many tabs. In the horizontal orientation, be aware that including a lot of tabs may mean that the overflow layout will be triggered.

+
+ +### Spacing and width + + + + Group of three tabs using the open variant's default styles + + +

Retain the default spacing for tabs.

+
+ + + + Group of three open variant tabs using very large padding + + +

Do not add extra spacing or stretch the width of tabs.

+
### Overflow buttons -Overflow buttons should not be visible if all tabs are visible. - - - Image of horizontal tabs with three visible tabs and overflow buttons which is incorrect usage - + + + Group of three open variant tabs flanked by overflow buttons + + +

Use overflow buttons if not all of the tabs can fit.

+
+ + + + Group of two open variant tabs flanked by overflow buttons + + +

Do not make overflow buttons visible if all tabs can comfortably fit.

+
\ No newline at end of file diff --git a/elements/rh-tabs/docs/tabs-best-practice-1.png b/elements/rh-tabs/docs/tabs-best-practice-1.png deleted file mode 100755 index 7ca2f5d636..0000000000 Binary files a/elements/rh-tabs/docs/tabs-best-practice-1.png and /dev/null differ diff --git a/elements/rh-tabs/docs/tabs-best-practice-2.png b/elements/rh-tabs/docs/tabs-best-practice-2.png deleted file mode 100755 index c3a5301cff..0000000000 Binary files a/elements/rh-tabs/docs/tabs-best-practice-2.png and /dev/null differ diff --git a/elements/rh-tabs/docs/tabs-best-practice-3.png b/elements/rh-tabs/docs/tabs-best-practice-3.png deleted file mode 100755 index a37433097f..0000000000 Binary files a/elements/rh-tabs/docs/tabs-best-practice-3.png and /dev/null differ diff --git a/elements/rh-tabs/docs/tabs-best-practice-4.png b/elements/rh-tabs/docs/tabs-best-practice-4.png deleted file mode 100755 index 0494a007f2..0000000000 Binary files a/elements/rh-tabs/docs/tabs-best-practice-4.png and /dev/null differ diff --git a/elements/rh-tabs/docs/tabs-best-practices-many-tabs-do.svg b/elements/rh-tabs/docs/tabs-best-practices-many-tabs-do.svg new file mode 100644 index 0000000000..3de6f4ca0b --- /dev/null +++ b/elements/rh-tabs/docs/tabs-best-practices-many-tabs-do.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-tabs/docs/tabs-best-practices-many-tabs-dont.svg b/elements/rh-tabs/docs/tabs-best-practices-many-tabs-dont.svg new file mode 100644 index 0000000000..83035acc39 --- /dev/null +++ b/elements/rh-tabs/docs/tabs-best-practices-many-tabs-dont.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-tabs/docs/tabs-best-practices-not-enough-tabs-do.svg b/elements/rh-tabs/docs/tabs-best-practices-not-enough-tabs-do.svg new file mode 100644 index 0000000000..8af85f9e30 --- /dev/null +++ b/elements/rh-tabs/docs/tabs-best-practices-not-enough-tabs-do.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-tabs/docs/tabs-best-practices-not-enough-tabs-dont.svg b/elements/rh-tabs/docs/tabs-best-practices-not-enough-tabs-dont.svg new file mode 100644 index 0000000000..30a09a712a --- /dev/null +++ b/elements/rh-tabs/docs/tabs-best-practices-not-enough-tabs-dont.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-tabs/docs/tabs-best-practices-overflow-buttons-do.svg b/elements/rh-tabs/docs/tabs-best-practices-overflow-buttons-do.svg new file mode 100644 index 0000000000..1e25726217 --- /dev/null +++ b/elements/rh-tabs/docs/tabs-best-practices-overflow-buttons-do.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-tabs/docs/tabs-best-practices-overflow-buttons-dont.svg b/elements/rh-tabs/docs/tabs-best-practices-overflow-buttons-dont.svg new file mode 100644 index 0000000000..cce086398d --- /dev/null +++ b/elements/rh-tabs/docs/tabs-best-practices-overflow-buttons-dont.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-tabs/docs/tabs-best-practices-spacing-do.svg b/elements/rh-tabs/docs/tabs-best-practices-spacing-do.svg new file mode 100644 index 0000000000..2bb4aafc77 --- /dev/null +++ b/elements/rh-tabs/docs/tabs-best-practices-spacing-do.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-tabs/docs/tabs-best-practices-spacing-dont.svg b/elements/rh-tabs/docs/tabs-best-practices-spacing-dont.svg new file mode 100644 index 0000000000..609029e28e --- /dev/null +++ b/elements/rh-tabs/docs/tabs-best-practices-spacing-dont.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + +