DEV: adds a way to set a title/description to a radio (#28049)

Usage:

```
<Form as |form|>
  <form.Field @name="foo" @title="Foo" as |field|>
    <field.RadioGroup as |RadioGroup|>
      <RadioGroup.Radio @value="one" as |radio|>
        <radio.Title>One title</radio.Title>
        <radio.Description>One description</radio.Description>
      </RadioGroup.Radio>
    </field.RadioGroup>
  </form.Field>
</Form>
```

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

@@ -1,9 +1,18 @@
+import { hash } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { eq } from "truth-helpers";
 import FKLabel from "discourse/form-kit/components/fk/label";
 import uniqueId from "discourse/helpers/unique-id";
 import withEventValue from "discourse/helpers/with-event-value";
 
+const radioTitle = <template>
+  <span class="form-kit__control-radio-title">{{yield}}</span>
+</template>;
+
+const radioDescription = <template>
+  <span class="form-kit__control-radio-description">{{yield}}</span>
+</template>;
+
 const FKControlRadioGroupRadio = <template>
   {{#let (uniqueId) as |uuid|}}
     <div class="form-kit__field form-kit__field-radio">
@@ -19,7 +28,9 @@ const FKControlRadioGroupRadio = <template>
           ...attributes
           {{on "change" (withEventValue @field.set)}}
         />
-        <span>{{yield}}</span>
+        <span class="form-kit__control-radio-content">
+          {{yield (hash Title=radioTitle Description=radioDescription)}}
+        </span>
       </FKLabel>
     </div>
   {{/let}}

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

@@ -0,0 +1,45 @@
+import { render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import Form from "discourse/components/form";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+
+module(
+  "Integration | Component | FormKit | Controls | Radio",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test("default", async function (assert) {
+      await render(<template>
+        <Form as |form|>
+          <form.Field @name="foo" @title="Foo" as |field|>
+            <field.RadioGroup as |RadioGroup|>
+              <RadioGroup.Radio @value="one">One</RadioGroup.Radio>
+            </field.RadioGroup>
+          </form.Field>
+        </Form>
+      </template>);
+
+      assert.dom(".form-kit__control-radio-content").hasText("One");
+    });
+
+    test("title/description", async function (assert) {
+      await render(<template>
+        <Form as |form|>
+          <form.Field @name="foo" @title="Foo" as |field|>
+            <field.RadioGroup as |RadioGroup|>
+              <RadioGroup.Radio @value="one" as |radio|>
+                <radio.Title>One title</radio.Title>
+                <radio.Description>One description</radio.Description>
+              </RadioGroup.Radio>
+            </field.RadioGroup>
+          </form.Field>
+        </Form>
+      </template>);
+
+      assert.dom(".form-kit__control-radio-title").hasText("One title");
+      assert
+        .dom(".form-kit__control-radio-description")
+        .hasText("One description");
+    });
+  }
+);

app/assets/stylesheets/common/form-kit/_control-radio.scss

@@ -1,18 +1,26 @@
-.form-kit__control-radio {
+.form-kit__control-radio-label {
-  &-label {
+  display: flex;
-    display: flex;
+  gap: 0.5em;
-    gap: 0.5em;
+  font-weight: normal !important;
-    font-weight: normal !important;
+  margin: 0;
-    margin: 0;
+  color: var(--primary);
-    color: var(--primary);
 
-    .form-kit__field[data-disabled] & {
+  .form-kit__field[data-disabled] & {
-      cursor: not-allowed;
+    cursor: not-allowed;
-    }
-    input[type="radio"] {
-      margin-right: 0; //old input overrule
-    }
   }
+  input[type="radio"] {
+    margin-right: 0; //old input overrule
+  }
+}
+
+.form-kit__control-radio-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.form-kit__control-radio-description {
+  color: var(--primary-medium);
 }
 
 .form-kit__inline-radio {

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

@@ -117,10 +117,15 @@
 
 <StyleguideExample @title="RadioGroup">
   <Form as |form|>
-    <form.Field @title="Enabled" @name="enabled" as |field|>
+    <form.Field @title="Enabled" @name="enabled" @format="full" as |field|>
       <field.RadioGroup as |radioGroup|>
         <radioGroup.Radio @value="true">Yes</radioGroup.Radio>
-        <radioGroup.Radio @value="false">No</radioGroup.Radio>
+        <radioGroup.Radio @value="false" as |radio|>
+          <radio.Title>No</radio.Title>
+          <radio.Description>
+            Choosing no, will make you inelligible for the contest.
+          </radio.Description>
+        </radioGroup.Radio>
       </field.RadioGroup>
     </form.Field>
   </Form>