FIX: category badges css refactoring/fixes

This commit fixes multiple css issues with category badges in select-kit and outside of select-kit. It also contains refactoring of components impacted by those changes.

app/assets/javascripts/discourse/helpers/category-link.js.es6

@@ -67,9 +67,9 @@ export function categoryBadgeHTML(category, opts) {
   let categoryName = escapeExpression(get(category, 'name'));
 
   if (restricted) {
-    html += iconHTML('lock') + " " + categoryName;
+    html += `${iconHTML('lock')}<span>${categoryName}</span>`;
   } else {
-    html += categoryName;
+    html += `<span>${categoryName}</span>`;
   }
   html += "</span>";
 

app/assets/javascripts/select-kit/components/multi-select/selected-color.js.es6

@@ -1,11 +1,11 @@
 import SelectedNameComponent from "select-kit/components/multi-select/selected-name";
+import computed from "ember-addons/ember-computed-decorators";
 
 export default SelectedNameComponent.extend({
   classNames: "selected-color",
-  layoutName: "select-kit/templates/components/multi-select/selected-color",
 
-  didRender() {
+  @computed("name")
-    const name = this.get("name");
+  footerContent(name) {
-    this.$(".color-preview").css("background", `#${name}`.htmlSafe());
+    return `<span class="color-preview" style="background:#${name}"></span>`.htmlSafe();
   }
 });

app/assets/javascripts/select-kit/templates/components/multi-select/selected-category.hbs

@@ -1,7 +1,7 @@
-<span class="name">
+<div class="body">
   <span class="delete-icon" {{action deselect computedContent bubbles=false}}>
     {{d-icon "times"}}
   </span>
 
   {{badge}}
-</span>
+</div>

app/assets/javascripts/select-kit/templates/components/multi-select/selected-color.hbs

@@ -1,13 +0,0 @@
-<div class="selected-color-wrapper">
-  <span class="name">
-    {{#unless isLocked}}
-      <span class="delete-icon" {{action deselect computedContent bubbles=false}}>
-        {{d-icon "times"}}
-      </span>
-    {{/unless}}
-
-    #{{{label}}}
-  </span>
-
-  <span class="color-preview"></span>
-</div>

app/assets/javascripts/select-kit/templates/components/multi-select/selected-name.hbs

@@ -1,13 +1,19 @@
-{{#if isLocked}}
+{{#if headerContent}}<div class="header">{{headerContent}}</div>{{/if}}
-  <span class="delete-icon">
-    {{d-icon "lock"}}
-  </span>
-{{else}}
-  <span class="locked-icon" {{action deselect computedContent bubbles=false}}>
-    {{d-icon "times"}}
-  </span>
-{{/if}}
 
-<span class="name">
+<div class="body">
-  {{{label}}}
+  {{#if isLocked}}
-</span>
+    <span class="delete-icon">
+      {{d-icon "lock"}}
+    </span>
+  {{else}}
+    <span class="locked-icon" {{action deselect computedContent bubbles=false}}>
+      {{d-icon "times"}}
+    </span>
+  {{/if}}
+
+  <span class="name">
+    {{{label}}}
+  </span>
+</div>
+
+{{#if footerContent}}<div class="footer">{{footerContent}}</div>{{/if}}

app/assets/stylesheets/common/components/badges.scss

@@ -19,22 +19,27 @@
   font-size: 0.857em;
   font-weight: bold;
   white-space: nowrap;
-  display: inline-block;
   position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  .badge-category {
+    .d-icon {
+      margin-right: 3px;
+    }
+  }
 
   &.bar { //bar category style
-    line-height: 1.25;
     margin-right: 5px;
-    display: inline-flex;
 
     span.badge-category {
       color: $primary;
       padding: 3px;
-      vertical-align: text-top;
-      margin-top: -2px; //vertical alignment fix
-      display: inline-block;
       overflow: hidden;
       text-overflow: ellipsis;
+      display: inline-flex;
+      align-items: center;
+      justify-content: space-between;
 
       .extra-info-wrapper & {
         color: $header-primary;
@@ -57,15 +62,11 @@
   }
 
   &.bullet { //bullet category style
-    display: inline-flex;
-    align-items: baseline;
     margin-right: 5px;
     font-size: .857em;
-    line-height: 15px;
 
     span.badge-category {
       color: $primary;
-      display: inline-block;
       overflow: hidden;
       text-overflow: ellipsis;
 
@@ -103,12 +104,10 @@
 
 
   &.box {  //box category style (apply custom widths to the wrapper, not the children)
-    line-height: 1.5;
-    margin-top: 5px;
     margin-right: 5px;
+    padding: 2px;
 
     span {
-      display: block;
       overflow: hidden;
       text-overflow: ellipsis;
 
@@ -132,7 +131,6 @@
       &.badge-category {
         position: relative;
         padding: 0 5px;
-        margin-top: 2px;
       }
     }
   }
@@ -228,6 +226,7 @@
         width: 100%;
         line-height: 1;
         vertical-align: text-top;
+        padding: 0;
         span.badge-category {
           max-width: 100px;
           padding: 5px;

app/assets/stylesheets/common/select-kit/category-chooser.scss

@@ -25,13 +25,6 @@
           color: $primary;
         }
 
-        .category-status {
-          color: $primary;
-          -webkit-box-flex: 0;
-              -ms-flex: 1 1 auto;
-                  flex: 1 1 auto;
-        }
-
         .category-desc {
           -webkit-box-flex: 0;
               -ms-flex: 1 1 auto;

app/assets/stylesheets/common/select-kit/category-row.scss

@@ -0,0 +1,10 @@
+.select-kit {
+  .category-row {
+    .category-status {
+      display: flex;
+      -webkit-box-flex: 0;
+          -ms-flex: 1 1 auto;
+              flex: 1 1 auto;
+    }
+  }
+}

app/assets/stylesheets/common/select-kit/category-selector.scss

@@ -1,9 +1,12 @@
 .select-kit, .select-kit-box {
-  .selected-name  {
+  &.category-selector {
-    .badge-wrapper {
+    .selected-name  {
-      display: inline-flex;
+      .badge-wrapper {
-      align-items: center;
+        &.box {
-      line-height: inherit;
+          margin: 2px;
+          padding: 0;
+        }
+      }
     }
   }
 }

app/assets/stylesheets/common/select-kit/multi-select.scss

@@ -119,12 +119,12 @@
           height: 5px;
           margin: 0 2px 2px 2px;
           border-radius: 5px;
+          display: flex;
+          width: 100%;
         }
       }
 
       .selected-name {
-        align-items: center;
-        justify-content: flex-start;
         color: $primary;
         cursor: default;
         border: 1px solid $primary-medium;
@@ -136,36 +136,50 @@
         background-color: $primary-low;
         cursor: pointer;
         outline: none;
-        line-height: normal;
         overflow: hidden;
         flex: 0 1 auto;
         flex-wrap: nowrap;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+
+        .footer {
+          display: flex;
+          width: 100%;
+        }
+
+        .body {
+          width: 100%;
+          display: inline-flex;
+          align-items: center;
+
+          .locked-icon, .delete-icon {
+            justify-content: center;
+            align-items: center;
+            display: inline-flex;
+            height: 21px;
+            width: 21px;
+
+            .d-icon {
+              color: $primary-medium;
+              cursor: pointer;
+              font-size: 1em;
+              margin: 0;
+
+              &:hover {
+                color: $primary;
+              }
+            }
+          }
+        }
 
         .name {
           padding: 0 5px;
-          line-height: 18px;
         }
 
         &.is-highlighted {
           box-shadow: 0 0 2px $danger, 0 1px 0 rgba(0,0,0,0.05);
         }
-
-        .locked-icon, .delete-icon {
-          justify-content: center;
-          align-items: center;
-          width: 21px;
-          height: 21px;
-          display: inline-flex;
-          .d-icon {
-            color: $primary-medium;
-            cursor: pointer;
-            font-size: 1em;
-
-            &:hover {
-              color: $primary;
-            }
-          }
-        }
       }
     }
   }