Merge pull request #21020 from twbs/rename-tag-to-badge

Rename .tag to .badge to avoid conflicting with WordPress

docs/_data/nav.yml

@@ -31,6 +31,7 @@
 - title: Components
   pages:
     - title: Alerts
+    - title: Badge
     - title: Breadcrumb
     - title: Buttons
     - title: Button group
@@ -49,7 +50,6 @@
     - title: Popovers
     - title: Progress
     - title: Scrollspy
-    - title: Tag
     - title: Tooltips
 
 - title: Utilities

docs/components/badge.md

@@ -0,0 +1,50 @@
+---
+layout: docs
+title: Badges
+description: Documentation and examples for badges, our small count and labelling component.
+group: components
+---
+
+Small and adaptive tag for adding context to just about any content.
+
+## Example
+
+Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.
+
+{% example html %}
+<h1>Example heading <span class="badge badge-default">New</span></h1>
+<h2>Example heading <span class="badge badge-default">New</span></h2>
+<h3>Example heading <span class="badge badge-default">New</span></h3>
+<h4>Example heading <span class="badge badge-default">New</span></h4>
+<h5>Example heading <span class="badge badge-default">New</span></h5>
+<h6>Example heading <span class="badge badge-default">New</span></h6>
+{% endexample %}
+
+## Contextual variations
+
+Add any of the below mentioned modifier classes to change the appearance of a badge.
+
+{% example html %}
+<span class="badge badge-default">Default</span>
+<span class="badge badge-primary">Primary</span>
+<span class="badge badge-success">Success</span>
+<span class="badge badge-info">Info</span>
+<span class="badge badge-warning">Warning</span>
+<span class="badge badge-danger">Danger</span>
+{% endexample %}
+
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
+
+## 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.
+
+{% example html %}
+<span class="badge badge-pill tag-default">Default</span>
+<span class="badge badge-pill tag-primary">Primary</span>
+<span class="badge badge-pill tag-success">Success</span>
+<span class="badge badge-pill tag-info">Info</span>
+<span class="badge badge-pill tag-warning">Warning</span>
+<span class="badge badge-pill tag-danger">Danger</span>
+{% endexample %}

docs/components/list-group.md

@@ -32,15 +32,15 @@ Add tags to any list group item to show unread counts, activity, etc.
 {% example html %}
 <ul class="list-group">
   <li class="list-group-item">
-    <span class="tag tag-default tag-pill float-xs-right">14</span>
+    <span class="badge badge-default tag-pill float-xs-right">14</span>
     Cras justo odio
   </li>
   <li class="list-group-item">
-    <span class="tag tag-default tag-pill float-xs-right">2</span>
+    <span class="badge badge-default tag-pill float-xs-right">2</span>
     Dapibus ac facilisis in
   </li>
   <li class="list-group-item">
-    <span class="tag tag-default tag-pill float-xs-right">1</span>
+    <span class="badge badge-default tag-pill float-xs-right">1</span>
     Morbi leo risus
   </li>
 </ul>

docs/components/tag.md

@@ -1,50 +0,0 @@
----
-layout: docs
-title: Tags
-description: Documentation and examples for tags, our small label-badge component.
-group: components
----
-
-Small and adaptive tag for adding context to just about any content.
-
-## Example
-
-Tags scale to match the size of the immediate parent element by using relative font sizing and `em` units.
-
-{% example html %}
-<h1>Example heading <span class="tag tag-default">New</span></h1>
-<h2>Example heading <span class="tag tag-default">New</span></h2>
-<h3>Example heading <span class="tag tag-default">New</span></h3>
-<h4>Example heading <span class="tag tag-default">New</span></h4>
-<h5>Example heading <span class="tag tag-default">New</span></h5>
-<h6>Example heading <span class="tag tag-default">New</span></h6>
-{% endexample %}
-
-## Contextual variations
-
-Add any of the below mentioned modifier classes to change the appearance of a tag.
-
-{% example html %}
-<span class="tag tag-default">Default</span>
-<span class="tag tag-primary">Primary</span>
-<span class="tag tag-success">Success</span>
-<span class="tag tag-info">Info</span>
-<span class="tag tag-warning">Warning</span>
-<span class="tag tag-danger">Danger</span>
-{% endexample %}
-
-{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
-{{ callout-include | markdownify }}
-
-## Pill tags
-
-Use the `.tag-pill` modifier class to make tags more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
-
-{% example html %}
-<span class="tag tag-pill tag-default">Default</span>
-<span class="tag tag-pill tag-primary">Primary</span>
-<span class="tag tag-pill tag-success">Success</span>
-<span class="tag tag-pill tag-info">Info</span>
-<span class="tag tag-pill tag-warning">Warning</span>
-<span class="tag tag-pill tag-danger">Danger</span>
-{% endexample %}

scss/_badge.scss

@@ -3,13 +3,13 @@
 // Requires one of the contextual, color modifier classes for `color` and
 // `background-color`.
 
-.tag {
+.badge {
   display: inline-block;
-  padding: $tag-padding-y $tag-padding-x;
+  padding: $badge-padding-y $badge-padding-x;
-  font-size: $tag-font-size;
+  font-size: $badge-font-size;
-  font-weight: $tag-font-weight;
+  font-weight: $badge-font-weight;
   line-height: 1;
-  color: $tag-color;
+  color: $badge-color;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
@@ -22,16 +22,16 @@
 }
 
 // Quick fix for tags in buttons
-.btn .tag {
+.btn .badge {
   position: relative;
   top: -1px;
 }
 
 // scss-lint:disable QualifyingElement
 // Add hover effects, but only for links
-a.tag {
+a.badge {
   @include hover-focus {
-    color: $tag-link-hover-color;
+    color: $badge-link-hover-color;
     text-decoration: none;
     cursor: pointer;
   }
@@ -42,36 +42,36 @@ a.tag {
 //
 // Make them extra rounded with a modifier to replace v3's badges.
 
-.tag-pill {
+.badge-pill {
-  padding-right: $tag-pill-padding-x;
+  padding-right: $badge-pill-padding-x;
-  padding-left: $tag-pill-padding-x;
+  padding-left: $badge-pill-padding-x;
-  @include border-radius($tag-pill-border-radius);
+  @include border-radius($badge-pill-border-radius);
 }
 
 // Colors
 //
 // Contextual variations (linked tags get darker on :hover).
 
-.tag-default {
+.badge-default {
-  @include tag-variant($tag-default-bg);
+  @include badge-variant($badge-default-bg);
 }
 
-.tag-primary {
+.badge-primary {
-  @include tag-variant($tag-primary-bg);
+  @include badge-variant($badge-primary-bg);
 }
 
-.tag-success {
+.badge-success {
-  @include tag-variant($tag-success-bg);
+  @include badge-variant($badge-success-bg);
 }
 
-.tag-info {
+.badge-info {
-  @include tag-variant($tag-info-bg);
+  @include badge-variant($badge-info-bg);
 }
 
-.tag-warning {
+.badge-warning {
-  @include tag-variant($tag-warning-bg);
+  @include badge-variant($badge-warning-bg);
 }
 
-.tag-danger {
+.badge-danger {
-  @include tag-variant($tag-danger-bg);
+  @include badge-variant($badge-danger-bg);
 }

scss/_mixins.scss

@@ -18,7 +18,7 @@
 @import "mixins/breakpoints";
 @import "mixins/hover";
 @import "mixins/image";
-@import "mixins/tag";
+@import "mixins/badge";
 @import "mixins/reset-filter";
 @import "mixins/resize";
 @import "mixins/screen-reader";

scss/_variables.scss

@@ -677,24 +677,24 @@ $popover-arrow-outer-color:           fade-in($popover-border-color, .05) !defau
 
 // Tags
 
-$tag-default-bg:            $gray-light !default;
+$badge-default-bg:            $gray-light !default;
-$tag-primary-bg:            $brand-primary !default;
+$badge-primary-bg:            $brand-primary !default;
-$tag-success-bg:            $brand-success !default;
+$badge-success-bg:            $brand-success !default;
-$tag-info-bg:               $brand-info !default;
+$badge-info-bg:               $brand-info !default;
-$tag-warning-bg:            $brand-warning !default;
+$badge-warning-bg:            $brand-warning !default;
-$tag-danger-bg:             $brand-danger !default;
+$badge-danger-bg:             $brand-danger !default;
 
-$tag-color:                 #fff !default;
+$badge-color:                 #fff !default;
-$tag-link-hover-color:      #fff !default;
+$badge-link-hover-color:      #fff !default;
-$tag-font-size:             75% !default;
+$badge-font-size:             75% !default;
-$tag-font-weight:           $font-weight-bold !default;
+$badge-font-weight:           $font-weight-bold !default;
-$tag-padding-x:             .4em !default;
+$badge-padding-x:             .4em !default;
-$tag-padding-y:             .25em !default;
+$badge-padding-y:             .25em !default;
 
-$tag-pill-padding-x:        .6em !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.
-$tag-pill-border-radius:    10rem !default;
+$badge-pill-border-radius:    10rem !default;
 
 // Modals
 

scss/bootstrap.scss

@@ -35,7 +35,7 @@
 @import "card";
 @import "breadcrumb";
 @import "pagination";
-@import "tags";
+@import "badge";
 @import "jumbotron";
 @import "alert";
 @import "progress";

scss/mixins/_badge.scss

@@ -1,6 +1,6 @@
 // Tags
 
-@mixin tag-variant($color) {
+@mixin badge-variant($color) {
   background-color: $color;
 
   &[href] {