DEV: replaces subtitle by description (#28881)

Description should be above the field and that makes subtitle useless.

Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>

app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/contact-information.gjs

@@ -82,7 +82,7 @@ export default class AdminConfigAreasAboutContactInformation extends Component {
       <form.Field
         @name="communityOwner"
         @title={{i18n "admin.config_areas.about.community_owner"}}
-        @subtitle={{i18n "admin.config_areas.about.community_owner_help"}}
+        @description={{i18n "admin.config_areas.about.community_owner_help"}}
         @format="large"
         as |field|
       >
@@ -96,7 +96,7 @@ export default class AdminConfigAreasAboutContactInformation extends Component {
       <form.Field
         @name="contactEmail"
         @title={{i18n "admin.config_areas.about.contact_email"}}
-        @subtitle={{i18n "admin.config_areas.about.contact_email_help"}}
+        @description={{i18n "admin.config_areas.about.contact_email_help"}}
         @type="email"
         @format="large"
         as |field|
@@ -111,7 +111,7 @@ export default class AdminConfigAreasAboutContactInformation extends Component {
       <form.Field
         @name="contactURL"
         @title={{i18n "admin.config_areas.about.contact_url"}}
-        @subtitle={{i18n "admin.config_areas.about.contact_url_help"}}
+        @description={{i18n "admin.config_areas.about.contact_url_help"}}
         @type="url"
         @format="large"
         as |field|
@@ -126,7 +126,7 @@ export default class AdminConfigAreasAboutContactInformation extends Component {
       <form.Field
         @name="contactUsername"
         @title={{i18n "admin.config_areas.about.site_contact_name"}}
-        @subtitle={{i18n "admin.config_areas.about.site_contact_name_help"}}
+        @description={{i18n "admin.config_areas.about.site_contact_name_help"}}
         @onSet={{this.setContactUsername}}
         @format="large"
         as |field|
@@ -143,7 +143,7 @@ export default class AdminConfigAreasAboutContactInformation extends Component {
       <form.Field
         @name="contactGroupName"
         @title={{i18n "admin.config_areas.about.site_contact_group"}}
-        @subtitle={{i18n "admin.config_areas.about.site_contact_group_help"}}
+        @description={{i18n "admin.config_areas.about.site_contact_group_help"}}
         @onSet={{this.setContactGroup}}
         @format="large"
         as |field|

app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/general-settings.gjs

@@ -98,7 +98,7 @@ export default class AdminConfigAreasAboutGeneralSettings extends Component {
       <form.Field
         @name="aboutBannerImage"
         @title={{i18n "admin.config_areas.about.banner_image"}}
-        @subtitle={{i18n "admin.config_areas.about.banner_image_help"}}
+        @description={{i18n "admin.config_areas.about.banner_image_help"}}
         @onSet={{this.setImage}}
         as |field|
       >

app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/your-organization.gjs

@@ -58,7 +58,7 @@ export default class AdminConfigAreasAboutYourOrganization extends Component {
       <form.Field
         @name="companyName"
         @title={{i18n "admin.config_areas.about.company_name"}}
-        @subtitle={{i18n "admin.config_areas.about.company_name_help"}}
+        @description={{i18n "admin.config_areas.about.company_name_help"}}
         @format="large"
         as |field|
       >
@@ -75,7 +75,7 @@ export default class AdminConfigAreasAboutYourOrganization extends Component {
       <form.Field
         @name="governingLaw"
         @title={{i18n "admin.config_areas.about.governing_law"}}
-        @subtitle={{i18n "admin.config_areas.about.governing_law_help"}}
+        @description={{i18n "admin.config_areas.about.governing_law_help"}}
         @format="large"
         as |field|
       >
@@ -89,7 +89,7 @@ export default class AdminConfigAreasAboutYourOrganization extends Component {
       <form.Field
         @name="cityForDisputes"
         @title={{i18n "admin.config_areas.about.city_for_disputes"}}
-        @subtitle={{i18n "admin.config_areas.about.city_for_disputes_help"}}
+        @description={{i18n "admin.config_areas.about.city_for_disputes_help"}}
         @format="large"
         as |field|
       >

app/assets/javascripts/discourse/app/form-kit/components/fk/control-wrapper.gjs

@@ -3,7 +3,7 @@ import { concat } from "@ember/helper";
 import { action } from "@ember/object";
 import FKLabel from "discourse/form-kit/components/fk/label";
 import FKMeta from "discourse/form-kit/components/fk/meta";
-import FormText from "discourse/form-kit/components/fk/text";
+import FKText from "discourse/form-kit/components/fk/text";
 import concatClass from "discourse/helpers/concat-class";
 import i18n from "discourse-common/helpers/i18n";
 
@@ -60,10 +60,10 @@ export default class FKControlWrapper extends Component {
         </FKLabel>
       {{/if}}
 
-      {{#if @field.subtitle}}
+      {{#if @field.description}}
-        <FormText
+        <FKText
-          class="form-kit__container-subtitle"
+          class="form-kit__container-description"
-        >{{@field.subtitle}}</FormText>
+        >{{@field.description}}</FKText>
       {{/if}}
 
       <div
@@ -93,12 +93,7 @@ export default class FKControlWrapper extends Component {
           {{yield components}}
         </@component>
 
-        <FKMeta
+        <FKMeta @value={{@value}} @field={{@field}} @error={{this.error}} />
-          @description={{@field.description}}
-          @value={{@value}}
-          @field={{@field}}
-          @error={{this.error}}
-        />
       </div>
     </div>
   </template>

app/assets/javascripts/discourse/app/form-kit/components/fk/control/radio-group.gjs

@@ -3,7 +3,6 @@ import { hash } from "@ember/helper";
 import FKFieldset from "discourse/form-kit/components/fk/fieldset";
 import FKControlRadioGroupRadio from "./radio-group/radio";
 
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
 export default class FKControlRadioGroup extends Component {
   static controlType = "radio-group";
 

app/assets/javascripts/discourse/app/form-kit/components/fk/field.gjs

@@ -49,7 +49,6 @@ export default class FKField extends Component {
     this.field = this.args.registerField(this.name, {
       triggerRevalidationFor: this.args.triggerRevalidationFor,
       title: this.args.title,
-      subtitle: this.args.subtitle,
       description: this.args.description,
       showTitle: this.args.showTitle,
       collectionIndex: this.args.collectionIndex,

app/assets/javascripts/discourse/app/form-kit/components/fk/meta.gjs

@@ -1,7 +1,6 @@
 import Component from "@glimmer/component";
 import FKCharCounter from "discourse/form-kit/components/fk/char-counter";
 import FKErrors from "discourse/form-kit/components/fk/errors";
-import FKText from "discourse/form-kit/components/fk/text";
 
 export default class FKMeta extends Component {
   get shouldRenderCharCounter() {
@@ -9,12 +8,7 @@ export default class FKMeta extends Component {
   }
 
   get shouldRenderMeta() {
-    return (
+    return this.showMeta && (this.shouldRenderCharCounter || this.args.error);
-      this.showMeta &&
-      (this.shouldRenderCharCounter ||
-        this.args.error ||
-        this.args.description?.length)
-    );
   }
 
   get showMeta() {
@@ -26,8 +20,6 @@ export default class FKMeta extends Component {
       <div class="form-kit__meta">
         {{#if @error}}
           <FKErrors @id={{@field.errorId}} @error={{@error}} />
-        {{else if @description}}
-          <FKText class="form-kit__meta-description">{{@description}}</FKText>
         {{/if}}
 
         {{#if this.shouldRenderCharCounter}}

app/assets/javascripts/discourse/tests/helpers/form-kit-assertions.js

@@ -142,12 +142,6 @@ class FieldHelper {
     }
   }
 
-  hasSubtitle(subtitle, message) {
-    this.context
-      .dom(this.element.querySelector(".form-kit__container-subtitle"))
-      .hasText(subtitle, message);
-  }
-
   hasDescription(description, message) {
     switch (this.element.dataset.controlType) {
       case "checkbox": {
@@ -162,7 +156,7 @@ class FieldHelper {
       }
       default: {
         this.context
-          .dom(this.element.querySelector(".form-kit__meta-description"))
+          .dom(this.element.querySelector(".form-kit__container-description"))
           .hasText(description, message);
       }
     }

app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/custom-test.gjs

@@ -11,7 +11,7 @@ module(
     test("default", async function (assert) {
       await render(<template>
         <Form as |form|>
-          <form.Field @name="foo" @title="Foo" @subtitle="Bar" as |field|>
+          <form.Field @name="foo" @title="Foo" @description="Bar" as |field|>
             <field.Custom>
               <input class="custom-test" />
             </field.Custom>
@@ -20,7 +20,7 @@ module(
       </template>);
 
       assert.dom(".form-kit__container-title").hasText("Foo (optional)");
-      assert.dom(".form-kit__container-subtitle").hasText("Bar");
+      assert.dom(".form-kit__container-description").hasText("Bar");
     });
   }
 );

app/assets/javascripts/discourse/tests/integration/components/form-kit/field-test.gjs

@@ -35,18 +35,6 @@ module("Integration | Component | FormKit | Field", function (hooks) {
     assert.dom(".form-kit__row .form-kit__col.--col-8").hasText("Test");
   });
 
-  test("@subtitle", async function (assert) {
-    await render(<template>
-      <Form as |form|>
-        <form.Field @name="foo" @title="Foo" @subtitle="foo foo" as |field|>
-          <field.Input />
-        </form.Field>
-      </Form>
-    </template>);
-
-    assert.form().field("foo").hasSubtitle("foo foo");
-  });
-
   test("@description", async function (assert) {
     await render(<template>
       <Form as |form|>

app/assets/stylesheets/common/form-kit/_field.scss

@@ -35,6 +35,11 @@
     }
   }
 
+  .form-kit__container-description {
+    margin: 0;
+    font-size: var(--font-down-1-rem);
+  }
+
   .form-kit__container-content {
     &.--small {
       width: var(--form-kit-small-input) !important;

plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/05-forms.hbs

@@ -18,7 +18,6 @@
     </form.Field>
     <form.Field
       @title="Secret"
-      @subtitle="Another secret"
       @name="secret"
       @description="An important password"
       as |field|