Merge pull request #1010 from prymitive/label-border

feat(ui): add a border around bright labels

ui/src/Components/Labels/BaseLabel/index.js

@@ -60,6 +60,10 @@ class BaseLabel extends Component {
             ? "components-label-dark"
             : "components-label-bright"
         );
+
+        data.colorClassNames.push(
+          `components-label-brightness-${Math.round(c.brightness / 25)}`
+        );
       } else {
         // if not fall back to class
         data.colorClassNames.push(DefaultLabelClassMap[elementType]);

ui/src/Components/Labels/BaseLabel/index.scss

@@ -7,6 +7,8 @@
 }
 
 .components-label {
+  border: 1px solid transparent;
+
   margin-right: 0.25rem;
 
   overflow: hidden;
@@ -20,6 +22,37 @@
   margin-bottom: 2px;
 }
 
+.components-label:not(.badge-pill) {
+  &.badge-primary,
+  &.btn-primary {
+    border: 1px solid lighten($primary, 2%);
+  }
+  &.badge-secondary,
+  &.btn-secondary {
+    border: 1px solid darken($secondary, 2%);
+  }
+  &.badge-success,
+  &.btn-success {
+    border: 1px solid darken($success, 2%);
+  }
+  &.badge-danger,
+  &.btn-danger {
+    border: 1px solid lighten($danger, 2%);
+  }
+  &.badge-warning,
+  &.btn-warning {
+    border: 1px solid lighten($warning, 3%);
+  }
+  &.badge-info,
+  &.btn-info {
+    border: 1px solid darken($info, 2%);
+  }
+  &.badge-dark,
+  &.btn-dark {
+    border: 1px solid lighten($dark, 2%);
+  }
+}
+
 /* badge class uses em and we modify font sizes a bit, so switch to rem */
 span.badge.components-label:not(.badge-pill) {
   padding-left: 0.4rem;
@@ -55,6 +88,12 @@ button.components-label-bright,
       color: $black;
     }
   }
+
+  @for $i from 10 through 11 {
+    &.components-label-brightness-#{$i} {
+      border: 1px solid darken(#fff, $i * 1.1%);
+    }
+  }
 }
 
 button.components-label-dark,

ui/src/Components/Labels/FilterInputLabel/index.js

@@ -50,7 +50,7 @@ const FilterInputLabel = observer(
       let cs = this.getClassAndStyle(
         filter.matcher === QueryOperators.Equal ? filter.name : "",
         filter.matcher === QueryOperators.Equal ? filter.value : "",
-        "components-filteredinputlabel btn-sm border-0",
+        "components-filteredinputlabel btn-sm",
         "btn"
       );
 
@@ -62,7 +62,7 @@ const FilterInputLabel = observer(
       const rootClasses = filter.applied
         ? cs.className
         : [
-            "btn-secondary btn-sm border-0 components-filteredinputlabel",
+            "btn-secondary btn-sm components-filteredinputlabel",
             ...cs.baseClassNames
           ].join(" ");