diff --git a/elements/rh-badge/docs/20-guidelines.md b/elements/rh-badge/docs/20-guidelines.md index 130ad45eb1..7b575595b7 100644 --- a/elements/rh-badge/docs/20-guidelines.md +++ b/elements/rh-badge/docs/20-guidelines.md @@ -94,25 +94,49 @@ that are made in a toolbar filter or select list. ### Large number -Do not allow a badge to display a count over 999. - - - A badge counting to 1,00,000 which is incorrect usage - +
+ + + 999+ in a gray badge + +

A value threshold for the number displayed in a badge should be established, and any number that’s larger should be shown as the threshold value with a plus sign.

+
+ + + + 1,000,000 in a gray badge + +

Do not allow a badge to display a value over 999.

+
+
### Two badges -Be careful using two badges. Using color only and the lack of other visual cues -might make it difficult to differentiate unread or actionable items associated -with the badges. - - - Two badges with different background colors and no other unique visual cues which is incorrect usage - +
+ + + Gray badge labeled as 'Unread' and yellow badge labeled as 'Flagged' + +

Use at least one visual cue other than color when using two badges side by side.

+
+ + + + Gray badge next to yellow badge + +

Do not use only color to associate two consecutive badges with two different meanings.

+
+
diff --git a/elements/rh-badge/docs/badge-best-practices-large-number-do.svg b/elements/rh-badge/docs/badge-best-practices-large-number-do.svg new file mode 100644 index 0000000000..a343aae28c --- /dev/null +++ b/elements/rh-badge/docs/badge-best-practices-large-number-do.svg @@ -0,0 +1,4 @@ + + + + diff --git a/elements/rh-badge/docs/badge-best-practice-large-number-dont.svg b/elements/rh-badge/docs/badge-best-practices-large-number-dont.svg similarity index 100% rename from elements/rh-badge/docs/badge-best-practice-large-number-dont.svg rename to elements/rh-badge/docs/badge-best-practices-large-number-dont.svg diff --git a/elements/rh-badge/docs/badge-best-practices-two-badges-do.svg b/elements/rh-badge/docs/badge-best-practices-two-badges-do.svg new file mode 100644 index 0000000000..50831d0f4f --- /dev/null +++ b/elements/rh-badge/docs/badge-best-practices-two-badges-do.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/elements/rh-badge/docs/badge-best-practice-two-badges-dont.svg b/elements/rh-badge/docs/badge-best-practices-two-badges-dont.svg similarity index 97% rename from elements/rh-badge/docs/badge-best-practice-two-badges-dont.svg rename to elements/rh-badge/docs/badge-best-practices-two-badges-dont.svg index cdea6501e1..84d076be4c 100644 --- a/elements/rh-badge/docs/badge-best-practice-two-badges-dont.svg +++ b/elements/rh-badge/docs/badge-best-practices-two-badges-dont.svg @@ -1,6 +1,6 @@ - - + +