UX: Use FontSelector for displaying font-related settings. (#30636)

3135f472e2 added a nifty new FontSelector component, which creates a dropdown where each item is styled in the font that it corresponds to.

This change uses the new component to style the base_font and heading_font site setting selectors, too.

app/assets/javascripts/admin/addon/components/site-settings/font-list.gjs

@@ -0,0 +1,27 @@
+import Component from "@glimmer/component";
+import FontSelector from "select-kit/components/font-selector";
+
+export default class FontList extends Component {
+  get choices() {
+    const classPrefix =
+      this.args.setting.setting === "heading_font"
+        ? "heading-font-"
+        : "body-font-";
+
+    return this.args.setting.choices.map((choice) => {
+      return {
+        classNames: classPrefix + choice.value.replace(/_/g, "-"),
+        id: choice.value,
+        name: choice.name,
+      };
+    });
+  }
+
+  <template>
+    <FontSelector
+      @value={{@value}}
+      @content={{this.choices}}
+      @onChange={{@changeValueCallback}}
+    />
+  </template>
+}

app/assets/javascripts/admin/addon/mixins/setting-component.js

@@ -38,6 +38,7 @@ const CUSTOM_TYPES = [
   "named_list",
   "file_size_restriction",
   "file_types_list",
+  "font_list",
 ];
 
 const AUTO_REFRESH_ON_SAVE = ["logo", "logo_small", "large_icon"];

app/assets/javascripts/discourse/tests/integration/components/site-setting-test.js

@@ -1,9 +1,11 @@
+import EmberObject from "@ember/object";
 import { click, fillIn, render, typeIn } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { module, skip, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import pretender, { response } from "discourse/tests/helpers/create-pretender";
 import { query } from "discourse/tests/helpers/qunit-helpers";
+import selectKit from "discourse/tests/helpers/select-kit-helper";
 import { i18n } from "discourse-i18n";
 
 module("Integration | Component | site-setting", function (hooks) {
@@ -285,3 +287,81 @@ module(
     });
   }
 );
+
+module(
+  "Integration | Component | site-setting | font-list type",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    const fonts = [
+      { value: "arial", name: "Arial" },
+      { value: "times_new_roman", name: "Times New Roman" },
+    ];
+
+    test("base_font sets body-font-X classNames on each field choice", async function (assert) {
+      this.set(
+        "setting",
+        EmberObject.create({
+          allowsNone: undefined,
+          category: "",
+          choices: fonts,
+          default: "",
+          description: "Base font",
+          overridden: false,
+          placeholder: null,
+          preview: null,
+          secret: false,
+          setting: "base_font",
+          type: "font_list",
+          validValues: undefined,
+          value: "arial",
+        })
+      );
+
+      await render(hbs`<SiteSetting @setting={{this.setting}} />`);
+      const fontSelector = selectKit(".font-selector");
+      await fontSelector.expand();
+
+      fonts.forEach((choice) => {
+        const fontClass = `body-font-${choice.value.replace(/_/g, "-")}`;
+        assert.true(
+          fontSelector.rowByValue(choice.value).hasClass(fontClass),
+          `has ${fontClass} CSS class`
+        );
+      });
+    });
+
+    test("heading_font sets heading-font-X classNames on each field choice", async function (assert) {
+      this.set(
+        "setting",
+        EmberObject.create({
+          allowsNone: undefined,
+          category: "",
+          choices: fonts,
+          default: "",
+          description: "Heading font",
+          overridden: false,
+          placeholder: null,
+          preview: null,
+          secret: false,
+          setting: "heading_font",
+          type: "font_list",
+          validValues: undefined,
+          value: "arial",
+        })
+      );
+
+      await render(hbs`<SiteSetting @setting={{this.setting}} />`);
+      const fontSelector = selectKit(".font-selector");
+      await fontSelector.expand();
+
+      fonts.forEach((choice) => {
+        const fontClass = `heading-font-${choice.value.replace(/_/g, "-")}`;
+        assert.true(
+          fontSelector.rowByValue(choice.value).hasClass(fontClass),
+          `has ${fontClass} CSS class`
+        );
+      });
+    });
+  }
+);

config/site_settings.yml

@@ -409,13 +409,17 @@ basic:
     hidden: true
   base_font:
     default: "arial"
-    enum: "BaseFontSetting"
+    choices: "BaseFontSetting.values"
     refresh: true
+    type: list
+    list_type: font
     area: "fonts"
   heading_font:
     default: "arial"
-    enum: "BaseFontSetting"
+    choices: "BaseFontSetting.values"
     refresh: true
+    type: list
+    list_type: font
     area: "fonts"
   enable_sitemap:
     default: true