REFACTOR: update for core badge style removal

common/common.scss

@@ -1,20 +1,25 @@
-span.category-badge-icon {
+.badge-category.--has-icon {
+  // hide default bullet when icon is set
+  &:before {
+    display: none;
+  }
+}
+
+.badge-category__icon {
   display: inline-flex;
   align-self: center;
+  color: var(--category-badge-color);
   .d-icon {
-    opacity: 1;
-    font-size: 1.3em;
+    color: inherit;
+    font-size: var(--font-up-2);
   }
 }
 
-.categories-list .category h3 .d-icon,
-.badge-wrapper .badge-category .d-icon,
-.select-kit .select-kit-header .selected-name .name .badge-wrapper .d-icon {
-  margin-right: 5px;
-  margin-left: 0px;
+.categories-list .category h3 .d-icon {
+  margin-right: 0.25em;
+  margin-left: 0;
 }
 
-.badge-wrapper.bullet span.category-badge-icon .d-icon,
 .categories-list .category .category-icon .d-icon {
   color: inherit;
 }

javascripts/discourse/initializers/category-icons.js

@@ -32,11 +32,6 @@ export default {
         lockIcon,
       });
 
-      function categoryStripe(color, classes) {
-        let style = color ? "style='background-color: #" + color + ";'" : "";
-        return "<span class='" + classes + "' " + style + "></span>";
-      }
-
       function getIconItem(categorySlug) {
         if (!categorySlug) {
           return;
@@ -68,7 +63,7 @@ export default {
 
       function categoryIconsRenderer(category, opts) {
         let siteSettings = helperContext().siteSettings;
-        let description = get(category, "description_text");
+        let descriptionText = get(category, "description_text");
         let restricted = get(category, "read_restricted");
         let url = opts.url
           ? opts.url
@@ -77,57 +72,41 @@ export default {
         let tagName =
           opts.link === false || opts.link === "false" ? "span" : "a";
         let extraClasses = opts.extraClasses ? " " + opts.extraClasses : "";
-        let color = get(category, "color");
         let html = "";
         let parentCat = null;
         let categoryDir = "";
+        let dataAttributes = category
+          ? `data-category-id="${get(category, "id")}"`
+          : "";
+
+        /// Add custom category icon from theme settings
+        let iconItem = getIconItem(category.slug);
 
         if (!opts.hideParent) {
           parentCat = Category.findById(get(category, "parent_category_id"));
         }
 
-        const categoryStyle = opts.categoryStyle || siteSettings.category_style;
-        if (categoryStyle !== "none") {
-          if (parentCat && parentCat !== category) {
-            html += categoryStripe(
-              get(parentCat, "color"),
-              "badge-category-parent-bg"
-            );
-          }
-          html += categoryStripe(color, "badge-category-bg");
-        }
-
-        let classNames = "badge-category clear-badge";
+        let classNames = `badge-category ${iconItem ? "--has-icon" : ""}`;
         if (restricted) {
           classNames += " restricted";
         }
 
-        let style = "";
-        if (categoryStyle === "box") {
-          style = `style="color: #${get(category, "text_color")};"`;
+        if (parentCat) {
+          classNames += ` --has-parent`;
+          dataAttributes += ` data-parent-category-id="${parentCat.id}"`;
         }
 
-        html +=
-          `<span ${style} ` +
-          'data-drop-close="true" class="' +
-          classNames +
-          '"' +
-          (description
-            ? 'title="' + escapeExpression(description) + '" '
-            : "") +
-          ">";
-
-        /// Add custom category icon from theme settings
-        let iconItem = getIconItem(category.slug);
+        html += `<span 
+          ${dataAttributes} 
+          data-drop-close="true" 
+          class="${classNames}" 
+          ${descriptionText ? 'title="' + descriptionText + '" ' : ""}
+        >`;
 
         if (iconItem) {
-          let itemColor = iconItem[2]
-            ? iconItem[2].match(/categoryColo(u*)r/)
-              ? `style="color: #${color}"`
-              : `style="color: ${iconItem[2]}"`
-            : "";
+          let itemColor = iconItem[2] ? `style="color: ${iconItem[2]}"` : "";
           let itemIcon = iconItem[1] !== "" ? iconHTML(iconItem[1]) : "";
-          html += `<span ${itemColor} class="category-badge-icon">${itemIcon}</span>`;
+          html += `<span ${itemColor} class="badge-category__icon">${itemIcon}</span>`;
         }
         /// End custom category icon
 
@@ -140,25 +119,27 @@ export default {
         if (restricted) {
           html += iconHTML(lockIcon);
         }
-        html += `<span class="category-name" ${categoryDir}>${categoryName}</span></span>`;
+        html += `<span class="badge-category__name" ${categoryDir}>${categoryName}</span>`;
+        html += "</span>";
 
-        if (opts.topicCount && categoryStyle !== "box") {
+        if (opts.topicCount) {
           html += buildTopicCount(opts.topicCount);
         }
 
         if (href) {
           href = ` href="${href}" `;
         }
 
-        extraClasses = categoryStyle
-          ? categoryStyle + extraClasses
-          : extraClasses;
-
         let afterBadgeWrapper = "";
-        if (opts.topicCount && categoryStyle === "box") {
-          afterBadgeWrapper += buildTopicCount(opts.topicCount);
+
+        if (opts.plusSubcategories && opts.lastSubcategory) {
+          afterBadgeWrapper += `<span class="plus-subcategories">
+            ${I18n.t("category_row.plus_subcategories", {
+              count: opts.plusSubcategories,
+            })}
+            </span>`;
         }
-        return `<${tagName} class="badge-wrapper ${extraClasses}" ${href}>${html}</${tagName}>${afterBadgeWrapper}`;
+        return `<${tagName} class="badge-category__wrapper ${extraClasses}" ${href}>${html}</${tagName}>${afterBadgeWrapper}`;
       }
 
       api.replaceCategoryLinkRenderer(categoryIconsRenderer);