UX: Prevent category-drop topic count from wrapping to new line (#8943)

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

@@ -151,6 +151,13 @@ function defaultCategoryLinkRenderer(category, opts) {
   }
   html += "</span>";
 
+  if (opts.topicCount) {
+    html += `<span class="topic-count" aria-label="${I18n.t(
+      "category_row.topic_count",
+      { count: opts.topicCount }
+    )}">&times; ${opts.topicCount}</span>`;
+  }
+
   if (href) {
     href = ` href="${href}" `;
   }

app/assets/javascripts/select-kit/components/category-row.js.es6

@@ -53,7 +53,8 @@ export default SelectKitRowComponent.extend({
       link: this.categoryLink,
       allowUncategorized:
         this.allowUncategorizedTopics || this.allowUncategorized,
-      hideParent: !!this.parentCategory
+      hideParent: !!this.parentCategory,
+      topicCount: this.topicCount
     }).htmlSafe();
   }),
 

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

@@ -6,9 +6,6 @@
       {{/unless}}
     {{/if}}
     {{badgeForCategory}}
-    <span class="topic-count" aria-label={{i18n "category_row.topic_count" count=topicCount}}>
-      &times; {{topicCount}}
-    </span>
   </div>
 
   {{#if shouldDisplayDescription}}

test/javascripts/lib/category-badge-test.js.es6

@@ -46,6 +46,21 @@ QUnit.test("undefined color", assert => {
   );
 });
 
+QUnit.test("topic count", assert => {
+  const store = createStore();
+  const category = store.createRecord("category", { name: "hello", id: 123 });
+
+  assert.equal(
+    categoryBadgeHTML(category).indexOf("topic-count"),
+    -1,
+    "it does not include topic count by default"
+  );
+  assert.ok(
+    categoryBadgeHTML(category, { topicCount: 20 }).indexOf("topic-count") > 20,
+    "is included when specified"
+  );
+});
+
 QUnit.test("allowUncategorized", assert => {
   const store = createStore();
   const uncategorized = store.createRecord("category", {