feat(radio-button): add helperText prop

Author: metonym

src/RadioButtonGroup/RadioButtonGroup.svelte

@@ -30,6 +30,9 @@
   /** Set to `true` to visually hide the legend */
   export let hideLegend = false;
 
+  /** Specify the helper text */
+  export let helperText = "";
+
   /**
    * Specify the label position
    * @type {"right" | "left"}
@@ -117,4 +120,12 @@
     {/if}
     <slot />
   </fieldset>
+  {#if helperText}
+    <div
+      class:bx--form__helper-text={true}
+      class:bx--form__helper-text--disabled={disabled}
+    >
+      {helperText}
+    </div>
+  {/if}
 </div>

tests/RadioButtonGroup/RadioButtonGroup.test.svelte

@@ -15,6 +15,7 @@
   export let orientation: ComponentProps<RadioButtonGroup>["orientation"] =
     "horizontal";
   export let id: ComponentProps<RadioButtonGroup>["id"] = undefined;
+  export let helperText: ComponentProps<RadioButtonGroup>["helperText"] = "";
   export let customClass = "";
   export let useSlot = false;
 </script>
@@ -29,6 +30,7 @@
     {labelPosition}
     {orientation}
     {id}
+    {helperText}
     class={customClass}
     on:change={(e) => {
       console.log("change", e.detail);
@@ -50,6 +52,7 @@
     {labelPosition}
     {orientation}
     {id}
+    {helperText}
     class={customClass}
     on:change={(e) => {
       console.log("change", e.detail);

tests/RadioButtonGroup/RadioButtonGroup.test.ts

@@ -134,4 +134,23 @@ describe("RadioButtonGroup", () => {
 
     expect(component.selected).toBe("3");
   });
+
+  it("should render helper text when provided", () => {
+    render(RadioButtonGroup, { props: { helperText: "Helper text message" } });
+    const helperElement = screen
+      .getByRole("group")
+      .closest(".bx--form-item")
+      ?.querySelector(".bx--form__helper-text");
+    assert(helperElement);
+    expect(helperElement).toHaveTextContent("Helper text message");
+  });
+
+  it("should not render helper text by default", () => {
+    render(RadioButtonGroup);
+    const helperElement = screen
+      .getByRole("group")
+      .closest(".bx--form-item")
+      ?.querySelector(".bx--form__helper-text");
+    expect(helperElement).not.toBeInTheDocument();
+  });
 });

types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts

@@ -40,6 +40,12 @@ type $Props = {
    */
   hideLegend?: boolean;
 
+  /**
+   * Specify the helper text
+   * @default ""
+   */
+  helperText?: string;
+
   /**
    * Specify the label position
    * @default "right"