From 1a8b5b9d42a53c74c4fc0be510dd44627111c6b6 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Tue, 4 Feb 2025 09:58:00 +0100
Subject: [PATCH] FIX: better standalone checkbox support (#31130)

Before this commit it was complicated to render a `Checkbox` outside of
a `CheckboxGroup` as you would get no title, no description, no optional
hint and not tooltip.

This commits makes all of this possible by adding a special case for
checkboxes, and sharing code for tooltips and optional hint.

This commit also uses this opportunity to refactor part of the code to
use curryComponent and reduce code duplication.
---
 .../admin-config-areas/api-keys-new.gjs       |  22 +--
 .../admin-config-areas/webhooks-form.gjs      |  12 +-
 .../components/fk/control-wrapper.gjs         |  69 ++++-----
 .../components/fk/control/checkbox.gjs        |   6 +-
 .../app/form-kit/components/fk/field-data.gjs |  15 +-
 .../app/form-kit/components/fk/field.gjs      | 139 ++++++------------
 .../app/form-kit/components/fk/optional.gjs   |  11 ++
 .../app/form-kit/components/fk/tooltip.gjs    |  22 +++
 .../form-kit/controls/checkbox-test.gjs       |  26 ++++
 .../components/form-kit/field-test.gjs        |   8 +-
 .../form-kit/layout/checkbox-group-test.gjs   |  36 ++++-
 .../stylesheets/common/admin/admin_base.scss  |   8 -
 app/assets/stylesheets/common/admin/api.scss  |  14 +-
 .../stylesheets/common/form-kit/_index.scss   |   1 +
 .../stylesheets/common/form-kit/_tooltip.scss |   3 +
 15 files changed, 197 insertions(+), 195 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/form-kit/components/fk/optional.gjs
 create mode 100644 app/assets/javascripts/discourse/app/form-kit/components/fk/tooltip.gjs
 create mode 100644 app/assets/stylesheets/common/form-kit/_tooltip.scss

diff --git a/app/assets/javascripts/admin/addon/components/admin-config-areas/api-keys-new.gjs b/app/assets/javascripts/admin/addon/components/admin-config-areas/api-keys-new.gjs
index c7f2b8efcbd..f4ec63694fa 100644
--- a/app/assets/javascripts/admin/addon/components/admin-config-areas/api-keys-new.gjs
+++ b/app/assets/javascripts/admin/addon/components/admin-config-areas/api-keys-new.gjs
@@ -13,7 +13,6 @@ import { popupAjaxError } from "discourse/lib/ajax-error";
 import { i18n } from "discourse-i18n";
 import ApiKeyUrlsModal from "admin/components/modal/api-key-urls";
 import EmailGroupUserChooser from "select-kit/components/email-group-user-chooser";
-import DTooltip from "float-kit/components/d-tooltip";
 
 export default class AdminConfigAreasApiKeysNew extends Component {
   @service router;
@@ -239,7 +238,6 @@ export default class AdminConfigAreasApiKeysNew extends Component {
                   <table class="scopes-table grid">
                     <thead>
                       <tr>
-                        <td></td>
                         <td></td>
                         <td>{{i18n "admin.api.scopes.allowed_urls"}}</td>
                         <td>{{i18n
@@ -265,28 +263,18 @@ export default class AdminConfigAreasApiKeysNew extends Component {
                             <topicsCollection.Field
                               @name="enabled"
                               @title={{collectionData.key}}
-                              @showTitle={{false}}
-                              as |field|
-                            >
-                              <field.Checkbox />
-                            </topicsCollection.Field>
-                          </td>
-                          <td>
-                            <div
-                              class="scope-name"
-                            >{{collectionData.name}}</div>
-                            <DTooltip
-                              @icon="circle-question"
-                              @content={{i18n
+                              @tooltip={{i18n
                                 (concat
                                   "admin.api.scopes.descriptions."
                                   scopeName
                                   "."
                                   collectionData.key
                                 )
-                                class="scope-tooltip"
                               }}
-                            />
+                              as |field|
+                            >
+                              <field.Checkbox />
+                            </topicsCollection.Field>
                           </td>
                           <td>
                             <DButton
diff --git a/app/assets/javascripts/admin/addon/components/admin-config-areas/webhooks-form.gjs b/app/assets/javascripts/admin/addon/components/admin-config-areas/webhooks-form.gjs
index 22996e8831b..7d19f2b8f85 100644
--- a/app/assets/javascripts/admin/addon/components/admin-config-areas/webhooks-form.gjs
+++ b/app/assets/javascripts/admin/addon/components/admin-config-areas/webhooks-form.gjs
@@ -257,13 +257,11 @@ export default class AdminConfigAreasWebhookForm extends Component {
                   </field.Custom>
                 </form.Field>
 
-                <span>
-                  <PluginOutlet
-                    @name="web-hook-fields"
-                    @connectorTagName="div"
-                    @outletArgs={{hash model=this.webhook}}
-                  />
-                </span>
+                <PluginOutlet
+                  @name="web-hook-fields"
+                  @connectorTagName="div"
+                  @outletArgs={{hash model=this.webhook}}
+                />
 
                 <form.Field
                   @name="verify_certificate"
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 e1dbdc02412..9d7f0ca5cd9 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
@@ -1,31 +1,28 @@
 import Component from "@glimmer/component";
 import { concat, fn } from "@ember/helper";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
 import { eq } from "truth-helpers";
 import FKLabel from "discourse/form-kit/components/fk/label";
 import FKMeta from "discourse/form-kit/components/fk/meta";
+import FKOptional from "discourse/form-kit/components/fk/optional";
 import FKText from "discourse/form-kit/components/fk/text";
+import FKTooltip from "discourse/form-kit/components/fk/tooltip";
 import concatClass from "discourse/helpers/concat-class";
-import { i18n } from "discourse-i18n";
-import DTooltip from "float-kit/components/d-tooltip";
 
 export default class FKControlWrapper extends Component {
   get controlType() {
     if (this.args.component.controlType === "input") {
-      return this.args.component.controlType + "-" + (this.args.type || "text");
+      return this.args.field.type + "-" + (this.args.type || "text");
     }
 
-    return this.args.component.controlType;
+    return this.args.field.type;
   }
 
   get error() {
     return (this.args.errors ?? {})[this.args.field.name];
   }
 
-  get isComponentTooltip() {
-    return typeof this.args.field.tooltip === "object";
-  }
-
   get titleFormat() {
     return this.args.field.titleFormat || this.args.field.format;
   }
@@ -52,42 +49,34 @@ export default class FKControlWrapper extends Component {
       data-disabled={{@field.disabled}}
       data-name={{@field.name}}
       data-control-type={{this.controlType}}
+      {{didInsert (fn @registerField @field.name @field)}}
       {{willDestroy (fn @unregisterField @field.name)}}
     >
-      {{#if @field.showTitle}}
-        <FKLabel
-          class={{concatClass
-            "form-kit__container-title"
-            (if this.titleFormat (concat "--" this.titleFormat))
-          }}
-          @fieldId={{@field.id}}
-        >
-          <span>{{@field.title}}</span>
+      {{#unless (eq @field.type "checkbox")}}
+        {{#if @field.showTitle}}
+          <FKLabel
+            class={{concatClass
+              "form-kit__container-title"
+              (if this.titleFormat (concat "--" this.titleFormat))
+            }}
+            @fieldId={{@field.id}}
+          >
+            <span>{{@field.title}}</span>
 
-          {{#unless @field.required}}
-            <span class="form-kit__container-optional">({{i18n
-                "form_kit.optional"
-              }})</span>
-          {{/unless}}
+            <FKOptional @field={{@field}} />
+            <FKTooltip @field={{@field}} />
+          </FKLabel>
+        {{/if}}
 
-          {{#if @field.tooltip}}
-            {{#if this.isComponentTooltip}}
-              <@field.tooltip />
-            {{else}}
-              <DTooltip @icon="circle-question" @content={{@field.tooltip}} />
-            {{/if}}
-          {{/if}}
-        </FKLabel>
-      {{/if}}
-
-      {{#if @field.description}}
-        <FKText
-          class={{concatClass
-            "form-kit__container-description"
-            (if this.descriptionFormat (concat "--" this.descriptionFormat))
-          }}
-        >{{@field.description}}</FKText>
-      {{/if}}
+        {{#if @field.description}}
+          <FKText
+            class={{concatClass
+              "form-kit__container-description"
+              (if this.descriptionFormat (concat "--" this.descriptionFormat))
+            }}
+          >{{@field.description}}</FKText>
+        {{/if}}
+      {{/unless}}
 
       <div
         class={{concatClass
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/checkbox.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/checkbox.gjs
index eecb2d11de2..ef5486ed34a 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/checkbox.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/checkbox.gjs
@@ -3,6 +3,8 @@ import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { eq } from "truth-helpers";
 import FKLabel from "discourse/form-kit/components/fk/label";
+import FKOptional from "discourse/form-kit/components/fk/optional";
+import FKTooltip from "discourse/form-kit/components/fk/tooltip";
 
 export default class FKControlCheckbox extends Component {
   static controlType = "checkbox";
@@ -24,7 +26,9 @@ export default class FKControlCheckbox extends Component {
       />
       <span class="form-kit__control-checkbox-content">
         <span class="form-kit__control-checkbox-title">
-          {{@field.title}}
+          <span>{{@field.title}}</span>
+          <FKOptional @field={{@field}} />
+          <FKTooltip @field={{@field}} />
         </span>
         {{#if (has-block)}}
           <span class="form-kit__control-checkbox-description">{{yield}}</span>
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 fcfac8293ed..10ff02c8743 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
@@ -1,4 +1,5 @@
 import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import ValidationParser from "discourse/form-kit/lib/validation-parser";
 import Validator from "discourse/form-kit/lib/validator";
@@ -8,6 +9,12 @@ import uniqueId from "discourse/helpers/unique-id";
  * Represents a field in a form with validation, registration, and field data management capabilities.
  */
 export default class FKFieldData extends Component {
+  /**
+   * Type of the field.
+   * @type {string}
+   */
+  @tracked type;
+
   /**
    * Unique identifier for the field.
    * @type {string}
@@ -20,12 +27,6 @@ export default class FKFieldData extends Component {
    */
   errorId = uniqueId();
 
-  /**
-   * Type of the field.
-   * @type {string}
-   */
-  type;
-
   /**
    * Initializes the FKFieldData component.
    * Validates the presence of required arguments and registers the field.
@@ -37,8 +38,6 @@ export default class FKFieldData extends Component {
     if (!this.args.title?.length) {
       throw new Error("@title is required on `<form.Field />`.");
     }
-
-    this.args.registerField(this.name, this);
   }
 
   /**
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 4c161dffa35..7f36dbcdb7a 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
@@ -1,5 +1,8 @@
 import Component from "@glimmer/component";
 import { hash } from "@ember/helper";
+import { action } from "@ember/object";
+import { getOwner } from "@ember/owner";
+import curryComponent from "ember-curry-component";
 import FKControlCheckbox from "discourse/form-kit/components/fk/control/checkbox";
 import FKControlCode from "discourse/form-kit/components/fk/control/code";
 import FKControlComposer from "discourse/form-kit/components/fk/control/composer";
@@ -40,6 +43,30 @@ export default class FKField extends Component {
     }
   }
 
+  @action
+  componentFor(component, field) {
+    const instance = this;
+    const baseArguments = {
+      get errors() {
+        return instance.args.errors;
+      },
+      unregisterField: instance.args.unregisterField,
+      registerField: instance.args.registerField,
+      component,
+      field,
+    };
+
+    if (!component.controlType) {
+      throw new Error(
+        `Static property \`controlType\` is required on component:\n\n ${component}`
+      );
+    }
+
+    field.type = component.controlType;
+
+    return curryComponent(FKControlWrapper, baseArguments, getOwner(this));
+  }
+
   <template>
     <FKFieldData
       @name={{@name}}
@@ -66,104 +93,20 @@ export default class FKField extends Component {
       <this.wrapper @size={{@size}}>
         {{yield
           (hash
-            Custom=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlCustom
-              field=field
-            )
-            Code=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlCode
-              field=field
-            )
-            Question=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlQuestion
-              field=field
-            )
-            Textarea=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlTextarea
-              field=field
-            )
-            Checkbox=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlCheckbox
-              field=field
-            )
-            Image=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlImage
-              field=field
-            )
-            Password=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlPassword
-              field=field
-            )
-            Composer=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlComposer
-              field=field
-            )
-            Icon=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlIcon
-              field=field
-            )
-            Toggle=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlToggle
-              field=field
-            )
-            Menu=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlMenu
-              field=field
-            )
-            Select=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlSelect
-              field=field
-            )
-            Input=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlInput
-              field=field
-            )
-            RadioGroup=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlRadioGroup
-              field=field
-            )
+            Custom=(this.componentFor FKControlCustom field)
+            Code=(this.componentFor FKControlCode field)
+            Question=(this.componentFor FKControlQuestion field)
+            Textarea=(this.componentFor FKControlTextarea field)
+            Checkbox=(this.componentFor FKControlCheckbox field)
+            Image=(this.componentFor FKControlImage field)
+            Password=(this.componentFor FKControlPassword field)
+            Composer=(this.componentFor FKControlComposer field)
+            Icon=(this.componentFor FKControlIcon field)
+            Toggle=(this.componentFor FKControlToggle field)
+            Menu=(this.componentFor FKControlMenu field)
+            Select=(this.componentFor FKControlSelect field)
+            Input=(this.componentFor FKControlInput field)
+            RadioGroup=(this.componentFor FKControlRadioGroup field)
             errorId=field.errorId
             id=field.id
             name=field.name
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/optional.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/optional.gjs
new file mode 100644
index 00000000000..ce3f88694c0
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/optional.gjs
@@ -0,0 +1,11 @@
+import { i18n } from "discourse-i18n";
+
+const FKOptional = <template>
+  {{#unless @field.required}}
+    <span class="form-kit__container-optional">({{i18n
+        "form_kit.optional"
+      }})</span>
+  {{/unless}}
+</template>;
+
+export default FKOptional;
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/tooltip.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/tooltip.gjs
new file mode 100644
index 00000000000..4dc4e279563
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/tooltip.gjs
@@ -0,0 +1,22 @@
+import Component from "@glimmer/component";
+import DTooltip from "float-kit/components/d-tooltip";
+
+export default class FKTooltip extends Component {
+  get isComponentTooltip() {
+    return typeof this.args.field.tooltip === "object";
+  }
+
+  <template>
+    {{#if @field.tooltip}}
+      {{#if this.isComponentTooltip}}
+        <@field.tooltip />
+      {{else}}
+        <DTooltip
+          class="form-kit__tooltip"
+          @icon="circle-question"
+          @content={{@field.tooltip}}
+        />
+      {{/if}}
+    {{/if}}
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/checkbox-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/checkbox-test.gjs
index b14132765ab..7d0700aadfa 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/checkbox-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/checkbox-test.gjs
@@ -44,5 +44,31 @@ module(
 
       assert.dom(".form-kit__control-checkbox").hasAttribute("disabled");
     });
+
+    test("@tooltip", async function (assert) {
+      await render(<template>
+        <Form as |form|>
+          <form.Field @tooltip="test" @name="foo" @title="Foo" as |field|>
+            <field.Checkbox />
+          </form.Field>
+        </Form>
+      </template>);
+
+      assert
+        .dom(".form-kit__control-checkbox-content .form-kit__tooltip")
+        .exists();
+    });
+
+    test("optional", async function (assert) {
+      await render(<template>
+        <Form as |form|>
+          <form.Field @name="foo" @title="Foo" as |field|>
+            <field.Checkbox />
+          </form.Field>
+        </Form>
+      </template>);
+
+      assert.form().field("foo").hasTitle("Foo (optional)");
+    });
   }
 );
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-kit/field-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/form-kit/field-test.gjs
index 33435eb23a4..02508d36e44 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/form-kit/field-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-kit/field-test.gjs
@@ -83,8 +83,8 @@ module("Integration | Component | FormKit | Field", function (hooks) {
 
     await render(<template>
       <Form as |form|>
-        <form.Field @name="foo.bar" @title="Foo" @size={{8}}>
-          Test
+        <form.Field @name="foo.bar" @title="Foo" @size={{8}} as |field|>
+          <field.Input />
         </form.Field>
       </Form>
     </template>);
@@ -102,8 +102,8 @@ module("Integration | Component | FormKit | Field", function (hooks) {
 
     await render(<template>
       <Form as |form|>
-        <form.Field @name="foo" @size={{8}}>
-          Test
+        <form.Field @name="foo" @size={{8}} as |field|>
+          <field.Input />
         </form.Field>
       </Form>
     </template>);
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-kit/layout/checkbox-group-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/form-kit/layout/checkbox-group-test.gjs
index bf0548cc530..c785a7ec655 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/form-kit/layout/checkbox-group-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-kit/layout/checkbox-group-test.gjs
@@ -22,9 +22,41 @@ module(
         </Form>
       </template>);
 
-      assert.form().field("foo").hasTitle("Foo");
-      assert.form().field("bar").hasTitle("Bar");
+      assert.form().field("foo").hasTitle("Foo (optional)");
+      assert.form().field("bar").hasTitle("Bar (optional)");
       assert.form().field("bar").hasDescription("A description");
     });
+
+    test("@title", async function (assert) {
+      await render(<template>
+        <Form as |form|>
+          <form.CheckboxGroup @title="bar" as |checkboxGroup|>
+            <checkboxGroup.Field @name="foo" @title="Foo" as |field|>
+              <field.Checkbox />
+            </checkboxGroup.Field>
+          </form.CheckboxGroup>
+        </Form>
+      </template>);
+
+      assert
+        .dom(".form-kit__checkbox-group .form-kit__fieldset-title")
+        .hasText("bar");
+    });
+
+    test("@description", async function (assert) {
+      await render(<template>
+        <Form as |form|>
+          <form.CheckboxGroup @description="bar" as |checkboxGroup|>
+            <checkboxGroup.Field @name="foo" @title="Foo" as |field|>
+              <field.Checkbox />
+            </checkboxGroup.Field>
+          </form.CheckboxGroup>
+        </Form>
+      </template>);
+
+      assert
+        .dom(".form-kit__checkbox-group .form-kit__fieldset-description")
+        .hasText("bar");
+    });
   }
 );
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 0695d6870ce..3ec363b9acb 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -811,14 +811,6 @@ $mobile-breakpoint: 700px;
   }
 }
 
-.badges,
-.web-hook-container {
-  input[type="text"],
-  textarea {
-    min-width: 350px;
-  }
-}
-
 .text-successful {
   color: var(--success);
 }
diff --git a/app/assets/stylesheets/common/admin/api.scss b/app/assets/stylesheets/common/admin/api.scss
index 0445f9ab3e0..1110353cfcc 100644
--- a/app/assets/stylesheets/common/admin/api.scss
+++ b/app/assets/stylesheets/common/admin/api.scss
@@ -24,6 +24,10 @@
 
 // Api keys
 .admin-api-keys {
+  .form-kit__container-optional {
+    display: none;
+  }
+
   .api-key-show {
     .form-element,
     .form-element-desc {
@@ -136,16 +140,6 @@
     display: none;
   }
 
-  input {
-    max-width: calc(100% - 10px);
-  }
-
-  .select-kit,
-  .select-kit.multi-select {
-    width: 100%;
-    max-width: 360px;
-  }
-
   .event-selector {
     display: grid;
     grid-template-columns: auto auto;
diff --git a/app/assets/stylesheets/common/form-kit/_index.scss b/app/assets/stylesheets/common/form-kit/_index.scss
index 76c6b570259..d807c0a1e74 100644
--- a/app/assets/stylesheets/common/form-kit/_index.scss
+++ b/app/assets/stylesheets/common/form-kit/_index.scss
@@ -30,3 +30,4 @@
 @import "_row";
 @import "_section";
 @import "_variables";
+@import "_tooltip";
diff --git a/app/assets/stylesheets/common/form-kit/_tooltip.scss b/app/assets/stylesheets/common/form-kit/_tooltip.scss
new file mode 100644
index 00000000000..3e3f21f7b70
--- /dev/null
+++ b/app/assets/stylesheets/common/form-kit/_tooltip.scss
@@ -0,0 +1,3 @@
+.form-kit__tooltip {
+  color: var(--primary-medium);
+}