From 32704c42d002db532e58492ba6e65dcf50a6bf4d Mon Sep 17 00:00:00 2001
From: "Ella E." <ella@discourse.org>
Date: Mon, 10 Feb 2025 19:48:31 -0700
Subject: [PATCH] UX: Update banner image field to use help text (#30666)

### What's changed?
- Add support for`@helpText` in the FormKit component.
- Updated the about config page to replace `@description` with
`@helpText` for the banner image field

### Before
<img width="525" alt="image"
src="https://github.com/user-attachments/assets/e8cdcca7-1b46-406f-8b6b-815e65dd5d9c"
/>

### After
<img width="256" alt="image"
src="https://github.com/user-attachments/assets/8656b866-5654-4f67-8515-f58a7b2b14c0"
/>


Internal: /t/138358/2
---
 .../admin-config-area-cards/about/general-settings.gjs    | 2 +-
 .../app/form-kit/components/fk/control-wrapper.gjs        | 6 ++++++
 .../discourse/app/form-kit/components/fk/field-data.gjs   | 8 ++++++++
 .../discourse/app/form-kit/components/fk/field.gjs        | 1 +
 app/assets/stylesheets/common/form-kit/_field.scss        | 6 ++++++
 config/locales/client.en.yml                              | 2 +-
 6 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/general-settings.gjs b/app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/general-settings.gjs
index 3fdf8d1a90a..43aaa6a0648 100644
--- a/app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/general-settings.gjs
+++ b/app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/general-settings.gjs
@@ -109,7 +109,7 @@ export default class AdminConfigAreasAboutGeneralSettings extends Component {
       <form.Field
         @name="aboutBannerImage"
         @title={{i18n "admin.config_areas.about.banner_image"}}
-        @description={{i18n "admin.config_areas.about.banner_image_help"}}
+        @helpText={{i18n "admin.config_areas.about.banner_image_help"}}
         @onSet={{this.setImage}}
         as |field|
       >
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/control-wrapper.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/control-wrapper.gjs
index c3c2e2a0e2a..a5f3d4934cd 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/control-wrapper.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/control-wrapper.gjs
@@ -107,6 +107,12 @@ export default class FKControlWrapper extends Component {
           {{yield components}}
         </@component>
 
+        {{#if @field.helpText}}
+          <FKText
+            class="form-kit__container-help-text"
+          >{{@field.helpText}}</FKText>
+        {{/if}}
+
         <FKMeta @field={{@field}} @error={{this.error}} />
       </div>
     </div>
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/field-data.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/field-data.gjs
index 10ff02c8743..91b1a454208 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/field-data.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/field-data.gjs
@@ -136,6 +136,14 @@ export default class FKFieldData extends Component {
     return this.args.description;
   }
 
+  /**
+   * Help text of the field.
+   * @type {string}
+   */
+  get helpText() {
+    return this.args.helpText;
+  }
+
   /**
    * Indicates whether to show the field's title.
    * Defaults to `true`.
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/field.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/field.gjs
index 7f36dbcdb7a..5f8b9306947 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/field.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/field.gjs
@@ -75,6 +75,7 @@ export default class FKField extends Component {
       @title={{@title}}
       @tooltip={{@tooltip}}
       @description={{@description}}
+      @helpText={{@helpText}}
       @showTitle={{@showTitle}}
       @collectionIndex={{@collectionIndex}}
       @set={{@set}}
diff --git a/app/assets/stylesheets/common/form-kit/_field.scss b/app/assets/stylesheets/common/form-kit/_field.scss
index 68a7a734381..839121a42cf 100644
--- a/app/assets/stylesheets/common/form-kit/_field.scss
+++ b/app/assets/stylesheets/common/form-kit/_field.scss
@@ -38,6 +38,12 @@
     font-size: var(--font-down-1-rem);
   }
 
+  .form-kit__container-help-text {
+    margin: 0;
+    font-size: var(--font-down-1-rem);
+    color: var(--primary-medium);
+  }
+
   .form-kit__container-title,
   .form-kit__container-description,
   .form-kit__container-content {
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index bdead0ea318..97a4eaf8d79 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -5781,7 +5781,7 @@ en:
           community_title_help: "Short description, shown in the browser tab, for key pages such as categories and topic lists."
           banner_image: "Banner image"
           banner_image_help: |
-            This will be used on your About page. Recommended size: 1100x300px. Accepted types: JPG, PNG, and SVG up to 10MB.
+            Recommended: 1100x300px. Formats: JPG, PNG, SVG (max 10MB).
           contact_information: "Contact information"
           community_owner: "Community owner"
           community_owner_placeholder: "Johnny Smith"