v5: Update badges (#28458)

- Drop hover and focus states
- Drop .badge-* variants and associated mixin for .bg-* utilities
- Drop .badge-pill for .rounded-pill utliity and adjust horizontal padding to find middle ground of .badge and old .badge-pill
- Remove unused variables
- Add default color value to .badge base class
- Update docs to reflect changes

diff --git a/scss/_badge.scss b/scss/_badge.scss
index 2082f058ecebf3dc74b6e95780de71122c6428c5..baa80a75f32ec6e47b0ceeb16a1309e33cc871df 100644 (file)
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -9,17 +9,11 @@
   @include font-size($badge-font-size);
   font-weight: $badge-font-weight;
   line-height: 1;
+  color: $badge-color;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
   @include border-radius($badge-border-radius);
-  @include transition($badge-transition);
-
-  @at-root a#{&} {
-    @include hover-focus {
-      text-decoration: none;
-    }
-  }
 
   // Empty badges collapse automatically
   &:empty {
@@ -32,23 +26,3 @@
   position: relative;
   top: -1px;
 }
-
-// Pill badges
-//
-// Make them extra rounded with a modifier to replace v3's badges.
-
-.badge-pill {
-  padding-right: $badge-pill-padding-x;
-  padding-left: $badge-pill-padding-x;
-  @include border-radius($badge-pill-border-radius);
-}
-
-// Colors
-//
-// Contextual variations (linked badges get darker on :hover).
-
-@each $color, $value in $theme-colors {
-  .badge-#{$color} {
-    @include badge-variant($value);
-  }
-}

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 843303d4536819a0668ce4da892cf1f7d488f3cd..9b2c1a13b3e21ef0f838b47d58eea574c3ebd70b 100644 (file)
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -12,7 +12,6 @@
 @import "mixins/breakpoints";
 @import "mixins/hover";
 @import "mixins/image";
-@import "mixins/badge";
 @import "mixins/resize";
 @import "mixins/screen-reader";
 @import "mixins/reset-text";

diff --git a/scss/_variables.scss b/scss/_variables.scss
index d238a8508f2725f28a28bf6e44e355940365fdad..dd141e84a3d977383211d77e9d97b7bf7e1739eb 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -911,18 +911,11 @@ $toast-header-border-color:         rgba(0, 0, 0, .05) !default;
 
 $badge-font-size:                   75% !default;
 $badge-font-weight:                 $font-weight-bold !default;
+$badge-color:                       $white !default;
 $badge-padding-y:                   .25em !default;
-$badge-padding-x:                   .4em !default;
+$badge-padding-x:                   .5em !default;
 $badge-border-radius:               $border-radius !default;
 
-$badge-transition:                  $btn-transition !default;
-$badge-focus-width:                 $input-btn-focus-width !default;
-
-$badge-pill-padding-x:              .6em !default;
-// Use a higher than normal value to ensure completely rounded edges when
-// customizing padding or font-size on labels.
-$badge-pill-border-radius:          10rem !default;
-
 
 // Modals
 

diff --git a/scss/mixins/_badge.scss b/scss/mixins/_badge.scss
deleted file mode 100644 (file)
index 64b29cb..0000000
--- a/scss/mixins/_badge.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@mixin badge-variant($bg) {
-  color: color-yiq($bg);
-  background-color: $bg;
-
-  @at-root a#{&} {
-    @include hover-focus {
-      color: color-yiq($bg);
-      background-color: darken($bg, 10%);
-    }
-
-    &:focus,
-    &.focus {
-      outline: 0;
-      box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
-    }
-  }
-}

diff --git a/site/content/docs/4.3/components/badge.md b/site/content/docs/4.3/components/badge.md
index 0f2ec97acd729dc6a987cf90ab29b7c0a5962001..2d3bc69e8e93eb33375ac1d809b43a125b0caf07 100644 (file)
--- a/site/content/docs/4.3/components/badge.md
+++ b/site/content/docs/4.3/components/badge.md
@@ -8,22 +8,22 @@ toc: true
 
 ## Example
 
-Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.
+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 badge-secondary">New</span></h1>
-<h2>Example heading <span class="badge badge-secondary">New</span></h2>
-<h3>Example heading <span class="badge badge-secondary">New</span></h3>
-<h4>Example heading <span class="badge badge-secondary">New</span></h4>
-<h5>Example heading <span class="badge badge-secondary">New</span></h5>
-<h6>Example heading <span class="badge badge-secondary">New</span></h6>
+<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>
+<h4>Example heading <span class="badge bg-secondary">New</span></h4>
+<h5>Example heading <span class="badge bg-secondary">New</span></h5>
+<h6>Example heading <span class="badge bg-secondary">New</span></h6>
 {{< /example >}}
 
 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 badge-light">4</span>
+  Notifications <span class="badge bg-secondary">4</span>
 </button>
 {{< /example >}}
 
@@ -33,19 +33,19 @@ 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 badge-light">9</span>
+  Profile <span class="badge bg-secondary">9</span>
   <span class="sr-only">unread messages</span>
 </button>
 {{< /example >}}
 
-## Contextual variations
+## Background colors
 
-Add any of the below mentioned modifier classes to change the appearance of a badge.
+Use our background utility classes to quickly change the appearance of a badge. Please note that when using Bootstrap's default `.bg-light`, you'll likely need a text color utility like `.text-dark` for proper styling. This is because background utilities do not set anything but `background-color`.
 
 {{< example >}}
 {{< badge.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
-<span class="badge badge-{{ .name }}">{{ .name | title }}</span>{{- end -}}
+<span class="badge bg-{{ .name }}{{ if eq .name "light" }} text-dark{{ end }}">{{ .name | title }}</span>{{- end -}}
 {{< /badge.inline >}}
 {{< /example >}}
 
@@ -55,22 +55,11 @@ Add any of the below mentioned modifier classes to change the appearance of a ba
 
 ## Pill badges
 
-Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
+Use the `.rounded-pill` utility class to make badges more rounded with a larger `border-radius`.
 
 {{< example >}}
 {{< badge.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
-<span class="badge badge-pill badge-{{ .name }}">{{ .name | title }}</span>{{- end -}}
-{{< /badge.inline >}}
-{{< /example >}}
-
-## Links
-
-Using the contextual `.badge-*` classes on an `<a>` element quickly provide _actionable_ badges with hover and focus states.
-
-{{< example >}}
-{{< badge.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-<a href="#" class="badge badge-{{ .name }}">{{ .name | title }}</a>{{- end -}}
+<span class="badge rounded-pill bg-{{ .name }}{{ if eq .name "light" }} text-dark{{ end }}">{{ .name | title }}</span>{{- end -}}
 {{< /badge.inline >}}
 {{< /example >}}