Rename .label class to .tag

diff --git a/docs/components/label.md b/docs/components/label.md
deleted file mode 100644 (file)
index e149520..0000000
--- a/docs/components/label.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-layout: docs
-title: Labels
-group: components
----
-
-Small and adaptive tag for adding context to just about any content.
-
-## Example
-
-Labels 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="label label-default">New</span></h1>
-<h2>Example heading <span class="label label-default">New</span></h2>
-<h3>Example heading <span class="label label-default">New</span></h3>
-<h4>Example heading <span class="label label-default">New</span></h4>
-<h5>Example heading <span class="label label-default">New</span></h5>
-<h6>Example heading <span class="label label-default">New</span></h6>
-{% endexample %}
-
-## Contextual variations
-
-Add any of the below mentioned modifier classes to change the appearance of a label.
-
-{% example html %}
-<span class="label label-default">Default</span>
-<span class="label label-primary">Primary</span>
-<span class="label label-success">Success</span>
-<span class="label label-info">Info</span>
-<span class="label label-warning">Warning</span>
-<span class="label label-danger">Danger</span>
-{% endexample %}
-
-## Pill labels
-
-Use the `.label-pill` modifier class to make labels more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
-
-{% example html %}
-<span class="label label-pill label-default">Default</span>
-<span class="label label-pill label-primary">Primary</span>
-<span class="label label-pill label-success">Success</span>
-<span class="label label-pill label-info">Info</span>
-<span class="label label-pill label-warning">Warning</span>
-<span class="label label-pill label-danger">Danger</span>
-{% endexample %}

diff --git a/docs/components/tag.md b/docs/components/tag.md
new file mode 100644 (file)
index 0000000..185ea37
--- /dev/null
+++ b/docs/components/tag.md
@@ -0,0 +1,46 @@
+---
+layout: docs
+title: Tags
+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 %}
+
+## 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 %}

diff --git a/docs/migration.md b/docs/migration.md
index 814e1d9be04334e1aea780779d2a9424220d750a..c11a871dfbfbc16eaa6c04e2dfcaf89d6fe7fee3 100644 (file)
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -128,7 +128,7 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
 
 ### Badges
 
-- Dropped the badge component. Use the `.label-pill` modifier together with the label component instead.
+- Dropped the badge component. Use the `.tag-pill` modifier together with the tag component instead.
 
 ### Panels, thumbnails, and wells
 

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 5c86512070b691f7cc590114e3c4cda79b6c3273..1b5bf0fae6252eca3f4fafad15c89fbc0b6db5bc 100644 (file)
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -18,7 +18,7 @@
 @import "mixins/breakpoints";
 @import "mixins/hover";
 @import "mixins/image";
-@import "mixins/label";
+@import "mixins/tag";
 @import "mixins/reset-filter";
 @import "mixins/resize";
 @import "mixins/screen-reader";

diff --git a/scss/_print.scss b/scss/_print.scss
index d569cce4d67ca65c6450eb856f7eb107e3ed3029..b2c93735c71c375b6a858c0455417a8f9bb56c62 100644 (file)
--- a/scss/_print.scss
+++ b/scss/_print.scss
@@ -92,7 +92,7 @@
         border-top-color: #000 !important;
       }
     }
-    .label {
+    .tag {
       border: $border-width solid #000;
     }
 

diff --git a/scss/_labels.scss b/scss/_tags.scss
similarity index 67%
rename from scss/_labels.scss
rename to scss/_tags.scss
index 6dec5160854e3f58d1ba3ec0244798a420fc4fdf..fde812905a2796741828506e6d759e8f1b055ffa 100644 (file)
--- a/scss/_labels.scss
+++ b/scss/_tags.scss
@@ -3,13 +3,13 @@
 // Requires one of the contextual, color modifier classes for `color` and
 // `background-color`.
 
-.label {
+.tag {
   display: inline-block;
   padding: .25em .4em;
   font-size: 75%;
-  font-weight: $label-font-weight;
+  font-weight: $tag-font-weight;
   line-height: 1;
-  color: $label-color;
+  color: $tag-color;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
@@ -22,16 +22,16 @@
 }
 
 // Quick fix for labels in buttons
-.btn .label {
+.btn .tag {
   position: relative;
   top: -1px;
 }
 
 // scss-lint:disable QualifyingElement
 // Add hover effects, but only for links
-a.label {
+a.tag {
   @include hover-focus {
-    color: $label-link-hover-color;
+    color: $tag-link-hover-color;
     text-decoration: none;
     cursor: pointer;
   }
@@ -42,7 +42,7 @@ a.label {
 //
 // Make them extra rounded with a modifier to replace v3's badges.
 
-.label-pill {
+.tag-pill {
   padding-right: .6em;
   padding-left: .6em;
   // Use a higher than normal value to ensure completely rounded edges when
@@ -54,26 +54,26 @@ a.label {
 //
 // Contextual variations (linked labels get darker on :hover).
 
-.label-default {
-  @include label-variant($label-default-bg);
+.tag-default {
+  @include tag-variant($tag-default-bg);
 }
 
-.label-primary {
-  @include label-variant($label-primary-bg);
+.tag-primary {
+  @include tag-variant($tag-primary-bg);
 }
 
-.label-success {
-  @include label-variant($label-success-bg);
+.tag-success {
+  @include tag-variant($tag-success-bg);
 }
 
-.label-info {
-  @include label-variant($label-info-bg);
+.tag-info {
+  @include tag-variant($tag-info-bg);
 }
 
-.label-warning {
-  @include label-variant($label-warning-bg);
+.tag-warning {
+  @include tag-variant($tag-warning-bg);
 }
 
-.label-danger {
-  @include label-variant($label-danger-bg);
+.tag-danger {
+  @include tag-variant($tag-danger-bg);
 }

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 1d7c67004b283a8a9a1c803261c85e6c9264844b..d60330a861c0eab8f271e27d9ed48a862f4328de 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -607,18 +607,18 @@ $popover-arrow-outer-width:           ($popover-arrow-width + 1px) !default;
 $popover-arrow-outer-color:           fade-in($popover-border-color, .05) !default;
 
 
-// Labels
-
-$label-default-bg:            $gray-light !default;
-$label-primary-bg:            $brand-primary !default;
-$label-success-bg:            $brand-success !default;
-$label-info-bg:               $brand-info !default;
-$label-warning-bg:            $brand-warning !default;
-$label-danger-bg:             $brand-danger !default;
-
-$label-color:                 #fff !default;
-$label-link-hover-color:      #fff !default;
-$label-font-weight:           bold !default;
+// Tags
+
+$tag-default-bg:              $gray-light !default;
+$tag-primary-bg:              $brand-primary !default;
+$tag-success-bg:              $brand-success !default;
+$tag-info-bg:                 $brand-info !default;
+$tag-warning-bg:              $brand-warning !default;
+$tag-danger-bg:               $brand-danger !default;
+
+$tag-color:                   #fff !default;
+$tag-link-hover-color:        #fff !default;
+$tag-font-weight:             bold !default;
 
 
 // Modals

diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index ef30c6b639437eb5b66be46ec9dbfbb90dd6568f..f99a722cad46506c898fa8c0ec82df592925e12b 100644 (file)
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -34,7 +34,7 @@
 @import "card";
 @import "breadcrumb";
 @import "pagination";
-@import "labels";
+@import "tags";
 @import "jumbotron";
 @import "alert";
 @import "progress";

diff --git a/scss/mixins/_label.scss b/scss/mixins/_tag.scss
similarity index 75%
rename from scss/mixins/_label.scss
rename to scss/mixins/_tag.scss
index 4bc48c60dd5a51fdad2365a1b1c2548ef30a1f8e..900c54e3668620152dcb5db2aa1a3fc8d5cd026d 100644 (file)
--- a/scss/mixins/_label.scss
+++ b/scss/mixins/_tag.scss
@@ -1,6 +1,6 @@
-// Labels
+// Tags
 
-@mixin label-variant($color) {
+@mixin tag-variant($color) {
   background-color: $color;
 
   &[href] {