UX: set badge color for new category preview (#24473)

app/assets/javascripts/discourse/app/components/edit-category-general.js

@@ -91,7 +91,7 @@ export default buildCategoryPanel("general", {
       parent_category_id: parseInt(parentCategoryId, 10),
       read_restricted: category.get("read_restricted"),
     });
-    return categoryBadgeHTML(c, { link: false });
+    return categoryBadgeHTML(c, { link: false, previewColor: true });
   },
 
   // We can change the parent if there are no children

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

@@ -31,6 +31,7 @@ export function addExtraIconRenderer(renderer) {
     @param {Boolean} [opts.hideParent] If true, parent category will be hidden in the badge.
     @param {Boolean} [opts.recursive] If true, the function will be called recursively for all parent categories
     @param {Number}  [opts.depth] Current category depth, used for limiting recursive calls
+    @param {Boolean} [opts.previewColor] If true, category color will be set as an inline style.
 **/
 export function categoryBadgeHTML(category, opts) {
   const { site, siteSettings } = helperContext();
@@ -74,6 +75,9 @@ export function categoryLinkHTML(category, options) {
     if (options.link !== undefined) {
       categoryOptions.link = options.link;
     }
+    if (options.previewColor) {
+      categoryOptions.previewColor = true;
+    }
     if (options.extraClasses) {
       categoryOptions.extraClasses = options.extraClasses;
     }
@@ -133,6 +137,11 @@ export function defaultCategoryLinkRenderer(category, opts) {
     ${dataAttributes} 
     data-drop-close="true" 
     class="${classNames}" 
+    ${
+      opts.previewColor
+        ? `style="--category-badge-color: #${category.color}"`
+        : ""
+    }
     ${descriptionText ? 'title="' + descriptionText + '" ' : ""}
   >`;
 

app/assets/javascripts/discourse/tests/acceptance/category-new-test.js

@@ -108,3 +108,27 @@ acceptance("Category New", function (needs) {
     );
   });
 });
+
+acceptance("New category preview", function (needs) {
+  needs.user({ admin: true });
+
+  test("Category badge color appears and updates", async function (assert) {
+    await visit("/new-category");
+
+    let previewBadgeColor = document
+      .querySelector(".category-color-editor .badge-category")
+      .style.getPropertyValue("--category-badge-color")
+      .trim();
+
+    assert.equal(previewBadgeColor, "#0088CC");
+
+    await fillIn(".hex-input", "FF00FF");
+
+    previewBadgeColor = document
+      .querySelector(".category-color-editor .badge-category")
+      .style.getPropertyValue("--category-badge-color")
+      .trim();
+
+    assert.equal(previewBadgeColor, "#FF00FF");
+  });
+});