From 6e0f171adff0ec8001d36a610ea7b996bd8fa8eb Mon Sep 17 00:00:00 2001
From: Joel Johnson <jjoel1630@gmail.com>
Date: Sat, 29 May 2021 10:27:28 -0700
Subject: [PATCH 1/4] Update documentation for badges
---
site/content/docs/5.0/components/badge.md | 26 ++++++++++++++++++++---
1 file changed, 23 insertions(+), 3 deletions(-)
diff --git a/site/content/docs/5.0/components/badge.md b/site/content/docs/5.0/components/badge.md
index 50571d8856..f587f3f4e9 100644
--- a/site/content/docs/5.0/components/badge.md
+++ b/site/content/docs/5.0/components/badge.md
@@ -11,6 +11,7 @@ toc: true
Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. As of v5, badges no longer have focus or hover styles for links.
{{< example >}}
+
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
@@ -23,7 +24,7 @@ Badges can be used as part of links or buttons to provide a counter.
{{< example >}}
<button type="button" class="btn btn-primary">
- Notifications <span class="badge bg-secondary">4</span>
+Notifications <span class="badge bg-secondary">4</span>
</button>
{{< /example >}}
@@ -33,8 +34,27 @@ Unless the context is clear (as with the "Notifications" example, where it is un
{{< example >}}
<button type="button" class="btn btn-primary">
- Profile <span class="badge bg-secondary">9</span>
- <span class="visually-hidden">unread messages</span>
+Profile <span class="badge bg-secondary">9</span>
+<span class="visually-hidden">unread messages</span>
+</button>
+{{< /example >}}
+
+Additionally, we can style the badge to show a notification in a much nicer way. This method is traditionally seen in mobile apps.
+
+{{< example >}}
+<button type="button" class="btn btn-primary position-relative">
+Alerts
+<span class="position-absolute badge start-100 rounded-circle border border-light translate-middle top-0 bg-danger pb-2">
+<span style="font-size: 0.8em;">10</span>
+</span>
+</button>
+{{< /example >}}
+
+Here is another way to display notifications on an element using the `rounded-pill` class.
+
+{{< example >}}
+<button type="button" class="btn btn-primary position-relative">
+Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">+99 <span class="visually-hidden">unread messages</span></span>
</button>
{{< /example >}}
--
GitLab
From beeca08fdfbdb6ff5fa7d2687b1e2a185cfc191e Mon Sep 17 00:00:00 2001
From: Joel Johnson <jjoel1630@gmail.com>
Date: Tue, 1 Jun 2021 17:39:30 -0700
Subject: [PATCH 2/4] Removes useless changes, as well as fixes an example
---
site/content/docs/5.0/components/badge.md | 17 +++--------------
1 file changed, 3 insertions(+), 14 deletions(-)
diff --git a/site/content/docs/5.0/components/badge.md b/site/content/docs/5.0/components/badge.md
index f587f3f4e9..1adf63ba47 100644
--- a/site/content/docs/5.0/components/badge.md
+++ b/site/content/docs/5.0/components/badge.md
@@ -11,7 +11,6 @@ toc: true
Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. As of v5, badges no longer have focus or hover styles for links.
{{< example >}}
-
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
@@ -24,7 +23,7 @@ Badges can be used as part of links or buttons to provide a counter.
{{< example >}}
<button type="button" class="btn btn-primary">
-Notifications <span class="badge bg-secondary">4</span>
+ Notifications <span class="badge bg-secondary">4</span>
</button>
{{< /example >}}
@@ -32,21 +31,11 @@ Note that depending on how they are used, badges may be confusing for users of s
Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text.
-{{< example >}}
-<button type="button" class="btn btn-primary">
-Profile <span class="badge bg-secondary">9</span>
-<span class="visually-hidden">unread messages</span>
-</button>
-{{< /example >}}
-
Additionally, we can style the badge to show a notification in a much nicer way. This method is traditionally seen in mobile apps.
{{< example >}}
<button type="button" class="btn btn-primary position-relative">
-Alerts
-<span class="position-absolute badge start-100 rounded-circle border border-light translate-middle top-0 bg-danger pb-2">
-<span style="font-size: 0.8em;">10</span>
-</span>
+ Profile <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">new alerts</span></span>
</button>
{{< /example >}}
@@ -54,7 +43,7 @@ Here is another way to display notifications on an element using the `rounded-pi
{{< example >}}
<button type="button" class="btn btn-primary position-relative">
-Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">+99 <span class="visually-hidden">unread messages</span></span>
+ Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">+99 <span class="visually-hidden">unread messages</span></span>
</button>
{{< /example >}}
--
GitLab
From 6a76804d5b080ef15714f0d2905ce2fd17a7ca4f Mon Sep 17 00:00:00 2001
From: Joel Johnson <jjoel1630@gmail.com>
Date: Tue, 1 Jun 2021 17:43:15 -0700
Subject: [PATCH 3/4] Fixes some text with a badge example
---
site/content/docs/5.0/components/badge.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/site/content/docs/5.0/components/badge.md b/site/content/docs/5.0/components/badge.md
index 1adf63ba47..08aff7e809 100644
--- a/site/content/docs/5.0/components/badge.md
+++ b/site/content/docs/5.0/components/badge.md
@@ -31,7 +31,7 @@ Note that depending on how they are used, badges may be confusing for users of s
Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text.
-Additionally, we can style the badge to show a notification in a much nicer way. This method is traditionally seen in mobile apps.
+Additionally, we can style the badge to show a notification in a much nicer way. This method is tranditionally seen on websites with profiles. You will get a small dot on the profile, indicating an alert or notification.
{{< example >}}
<button type="button" class="btn btn-primary position-relative">
--
GitLab
From 5f073ca3b111b67480d44a660f01b5aa89124987 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Wed, 2 Jun 2021 22:38:46 -0700
Subject: [PATCH 4/4] Update badge.md
---
site/content/docs/5.0/components/badge.md | 25 +++++++++++++++++------
1 file changed, 19 insertions(+), 6 deletions(-)
diff --git a/site/content/docs/5.0/components/badge.md b/site/content/docs/5.0/components/badge.md
index 08aff7e809..de80d3b27a 100644
--- a/site/content/docs/5.0/components/badge.md
+++ b/site/content/docs/5.0/components/badge.md
@@ -6,10 +6,12 @@ group: components
toc: true
---
-## Example
+## Examples
Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. As of v5, badges no longer have focus or hover styles for links.
+### Headings
+
{{< example >}}
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
@@ -19,11 +21,13 @@ Badges scale to match the size of the immediate parent element by using relative
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
{{< /example >}}
+### Buttons
+
Badges can be used as part of links or buttons to provide a counter.
{{< example >}}
<button type="button" class="btn btn-primary">
- Notifications <span class="badge bg-secondary">4</span>
+ Notifications <span class="badge bg-secondary">4</span>
</button>
{{< /example >}}
@@ -31,19 +35,28 @@ Note that depending on how they are used, badges may be confusing for users of s
Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text.
-Additionally, we can style the badge to show a notification in a much nicer way. This method is tranditionally seen on websites with profiles. You will get a small dot on the profile, indicating an alert or notification.
+### Positioned
+
+Use utilities to modify a `.badge` and position it in the corner of a link or button.
{{< example >}}
<button type="button" class="btn btn-primary position-relative">
- Profile <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">new alerts</span></span>
+ Inbox
+ <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
+ 99+
+ <span class="visually-hidden">unread messages</span>
+ </span>
</button>
{{< /example >}}
-Here is another way to display notifications on an element using the `rounded-pill` class.
+You can also replace the `.badge` class with a few more utilities without a count for a more generic indicator.
{{< example >}}
<button type="button" class="btn btn-primary position-relative">
- Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">+99 <span class="visually-hidden">unread messages</span></span>
+ Profile
+ <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
+ <span class="visually-hidden">New alerts</span>
+ </span>
</button>
{{< /example >}}
--
GitLab