the one that updates to badges to make them consistent with buttons

components/vf-badge/CHANGELOG.md

@@ -1,3 +1,16 @@
+### 2.0.0
+
+* makes the badges match the naming convention of the `vf-button`.
+* makes the badges match the styling of the `vf-button`.
+* removes any old deprecated variants and tidies up the code.
+
+#### Mirgation Instructions
+
+* If you were using the "Outline Primary" variant you should use the "Secondary" variant now.
+  * This replaces the classes of `vf-badge--primary` and `vf-badge--outline` with `vf-badge--secondary`.
+* IF you were using the "Default" variant you should use the "Tertiary" variant now.
+  * This adds the class `vf-badge--tertiary`.
+
 ### 1.3.0
 
 * deprecates secondary and tertiary variants

components/vf-badge/vf-badge.config.yml

@@ -5,105 +5,27 @@ context:
   component-type: element
 variants:
   - name: default
-    # hidden: true
+    hidden: true
     context:
       text: alpha
+
   - name: primary
     context:
       text: alpha
       theme: primary
-  - name: outline
-    # hidden: true
-    context:
-      text: alpha
-      style: ["outline"]
-  - name: outline - primary
-    context:
-      text: alpha
-      theme: primary
-      style: ["outline"]
-  - name: link - primary
-    context:
-      badge_href: "JavaScript:Void(0);"
-      theme: primary
-      text: beta
 
-
-  - name: secondary
-    hidden: true
-    context:
-      text: beta
-      theme: secondary
-  - name: tertiary
-    hidden: true
+  - name: secondry
     context:
       text: alpha
-      theme: tertiary
-  - name: outline - secondary
-    hidden: true
-    context:
-      text: beta
-      style: ["outline"]
       theme: secondary
-  - name: outline - tertiary
-    hidden: true
-    context:
-      text: alpha
-      theme: tertiary
-      style: ["outline"]
-  - name: pill
-    hidden: true
-    context:
-      text: alpha
-      style: ["rounded"]
-  - name: rounded - primary
-    hidden: true
-    context:
-      text: alpha
-      theme: primary
-      style: ["rounded"]
-  - name: rounded - secondary
-    hidden: true
-    context:
-      text: beta
-      style: ["rounded"]
-      theme: secondary
-  - name: rounded - tertiary
-    hidden: true
+
+  - name: tertiary
     context:
       text: alpha
       theme: tertiary
-      style: ["rounded"]
-  - name: pill
-    hidden: true
-    context:
-      text: alpha
-      style: ["pill"]
-  - name: pill - primary
-    hidden: true
+
+  - name: link - primary
     context:
-      text: alpha
+      badge_href: "JavaScript:Void(0);"
       theme: primary
-      style: ["pill"]
-  - name: pill - secondary
-    hidden: true
-    context:
       text: beta
-      style: ["pill"]
-      theme: secondary
-  - name: pill - tertiary
-    hidden: true
-    context:
-      text: alpha
-      theme: tertiary
-      style: ["pill"]
-  - name: square
-    hidden: true
-    context:
-      style: ["square"]
-      theme: primary
-  - name: phases
-    hidden: true
-    context:
-      text: alpha
-      theme: tertiary

components/vf-badge/vf-badge.scss

@@ -15,16 +15,9 @@ $vf-badge--primary-color--text: ui-color(white) !default;
 $vf-badge--primary--hover-color--background: color(blue--dark) !default;
 $vf-badge--primary--hover-color--border: color(blue--dark) !default;
 
-$vf-badge-rounded-border--radius: $vf-radius--xs !default;
-$vf-badge-pill-border--radius: vf-radius--pill !default;
-
 $vf-badge--outline-color--background: transparent !default;
 $vf-badge--outline-color--text: color(blue) !default;
 
-$vf-badge--secondary-color--background: color(green) !default;
-$vf-badge--secondary-color--border: color(green) !default;
-$vf-badge--secondary-color--text: ui-color(black) !default;
-
 $vf-badge--tertiary-color--background: color(grey--dark) !default;
 $vf-badge--tertiary-color--border: color(grey--dark) !default;
 $vf-badge--tertiary-color--text: ui-color(white) !default;
@@ -33,19 +26,13 @@ $vf-badge--tertiary-color--text: ui-color(white) !default;
 .vf-badge {
   @include set-type(text-button--2, $custom-margin-bottom: disable);
 
-  border: 1px solid;
-  // color: inherit;
+  border: 2px solid;
+  color: inherit;
   display: inline-flex;
   letter-spacing: .05em;
   padding: 4px 8px;
   text-decoration: none;
   text-transform: uppercase;
-
-  color: $vf-badge--tertiary-color--text;
-
-  @include inline-link($vf-badge--tertiary-color--text,$vf-badge--tertiary-color--text,$vf-badge--tertiary-color--text, $vf-include-normalisations: false);
-
-  @include theme(tertiary, border);
 }
 
 .vf-badge--primary {
@@ -54,7 +41,7 @@ $vf-badge--tertiary-color--text: ui-color(white) !default;
   color: $vf-badge--primary-color--text;
 
   a.vf-badge & {
-    @include inline-link($vf-badge--secondary-color--text,$vf-badge--secondary-color--text,$vf-badge--secondary-color--text, $vf-include-normalisations: false);
+    @include inline-link($vf-badge--primary-color--text,$vf-badge--primary-color--text,$vf-badge--primary-color--text, $vf-include-normalisations: false);
   }
 }
 
@@ -63,91 +50,19 @@ a.vf-badge--primary:hover {
 }
 
 
+.vf-badge--secondary {
 
-.vf-badge--outline {
-
-  @include theme-outline(tertiary);
+  @include theme-outline(primary);
 
   @at-root a#{&} {
     &:hover {
-      @include theme-outline(tertiary--dark);
+      @include theme-outline(primary--dark);
     }
   }
 
-  &[class*='primary'] {
-    @include theme-outline(primary);
-
-    @at-root a#{&} {
-      &:hover {
-        @include theme-outline(primary--dark);
-      }
-    }
-  }
 }
 
-html:not(.vf-disable-deprecated) {
-
-  .vf-badge--pill {
-    border-radius: $vf-radius--pill;
-  }
-
-  .vf-badge--rounded {
-    border-radius: $vf-radius--xs;
-  }
-
-  .vf-badge--square {
-    border: 0;
-    height: 12px;
-    margin: 0;
-    padding: 0;
-    position: relative;
-    width: 12px;
-  }
-
-  .vf-badge--phases {
-    align-items: center;
-    display: inline-flex;
-    justify-content: center;
-    margin: 0 12px 0 0;
-    min-width: 52px;
-  }
-
-  .vf-badge--secondary {
-    @include theme(secondary, border);
-
-    color: $vf-badge--secondary-color--text;
-
-    a.vf-badge & {
-      @include inline-link($vf-badge--secondary-color--text,$vf-badge--secondary-color--text,$vf-badge--secondary-color--text, $vf-include-normalisations: false);
-    }
-
-  }
-
-  .vf-badge--tertiary {
-    color: $vf-badge--tertiary-color--text;
-
-    @include inline-link($vf-badge--tertiary-color--text,$vf-badge--tertiary-color--text,$vf-badge--tertiary-color--text, $vf-include-normalisations: false);
-    @include theme(tertiary, border);
-  }
-
-  .vf-badge--outline {
-    &[class*='secondary'] {
-      @include theme-outline(secondary);
-
-      @at-root a#{&} {
-        &:hover {
-          @include theme-outline(secondary--dark);
-        }
-      }
-    }
-    &[class*='tertiary'] {
-      @include theme-outline(tertiary);
-
-      @at-root a#{&} {
-        &:hover {
-          @include theme-outline(tertiary--dark);
-        }
-      }
-    }
-  }
+.vf-badge--tertiary {
+  @include inline-link($vf-badge--tertiary-color--text,$vf-badge--tertiary-color--text,$vf-badge--tertiary-color--text, $vf-include-normalisations: false);
+  @include theme(tertiary, border);
 }