From bfb3949a6fed8c7c166e7d7be76ea44d06eb3849 Mon Sep 17 00:00:00 2001
From: Peter Makowski <peter@makowski.uk>
Date: Thu, 14 Apr 2022 11:45:34 +0200
Subject: [PATCH] feat: allow custom help text class

---
 src/components/Field/Field.tsx         | 13 +++++++++++--
 src/components/Input/Input.stories.mdx |  6 ++++++
 src/components/Input/Input.test.tsx    | 26 +++++++++++++++++++-------
 src/components/Input/Input.tsx         |  6 ++++++
 4 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/src/components/Field/Field.tsx b/src/components/Field/Field.tsx
index e6c734001..f69fbf366 100644
--- a/src/components/Field/Field.tsx
+++ b/src/components/Field/Field.tsx
@@ -35,6 +35,10 @@ export type Props = {
    * Help text to show below the field.
    */
   help?: ReactNode;
+  /**
+   * Optional class(es) to pass to the help text element.
+   */
+  helpClassName?: ReactNode;
   /**
    * An id to give to the help element.
    */
@@ -80,11 +84,12 @@ export type Props = {
 const generateHelpText = ({
   help,
   helpId,
+  helpClassName,
   isTickElement,
-}: Pick<Props, "help" | "helpId" | "isTickElement">) =>
+}: Pick<Props, "help" | "helpId" | "helpClassName" | "isTickElement">) =>
   help ? (
     <p
-      className={classNames("p-form-help-text", {
+      className={classNames("p-form-help-text", helpClassName, {
         "is-tick-element": isTickElement,
       })}
       id={helpId}
@@ -138,6 +143,7 @@ const generateContent = ({
   labelFirst,
   labelNode,
   help,
+  helpClassName,
   error,
   caution,
   success,
@@ -159,6 +165,7 @@ const generateContent = ({
     {generateHelpText({
       helpId,
       help,
+      helpClassName,
       isTickElement,
     })}
     {generateError(error, caution, success, validationId)}
@@ -172,6 +179,7 @@ const Field = ({
   error,
   forId,
   help,
+  helpClassName,
   helpId,
   isSelect,
   isTickElement,
@@ -198,6 +206,7 @@ const Field = ({
     labelFirst,
     labelNode,
     help,
+    helpClassName,
     error,
     caution,
     success,
diff --git a/src/components/Input/Input.stories.mdx b/src/components/Input/Input.stories.mdx
index c1460b115..f0905f9f6 100644
--- a/src/components/Input/Input.stories.mdx
+++ b/src/components/Input/Input.stories.mdx
@@ -21,6 +21,11 @@ import Input from "./Input";
         type: "text",
       },
     },
+    helpClassName: {
+      control: {
+        type: "text",
+      },
+    },
     label: {
       control: {
         type: "text",
@@ -67,6 +72,7 @@ An input field where the user can enter data, which can vary in many ways, depen
       placeholder: "example@canonical.com",
       label: "Email address",
       help: "Additional description for the field",
+      helpClassName: "u-no-margin--bottom",
     }}
   >
     {Template.bind({})}
diff --git a/src/components/Input/Input.test.tsx b/src/components/Input/Input.test.tsx
index 7e6554b39..ce26742e0 100644
--- a/src/components/Input/Input.test.tsx
+++ b/src/components/Input/Input.test.tsx
@@ -5,13 +5,6 @@ import React from "react";
 import Input from "./Input";
 
 describe("Input", () => {
-  it("can add additional classes", () => {
-    const wrapper = shallow(<Input type="text" className="extra-class" />);
-    const className = wrapper.find("input").prop("className");
-    expect(className.includes("p-form-validation__input")).toBe(true);
-    expect(className.includes("extra-class")).toBe(true);
-  });
-
   it("moves the label for radio buttons", () => {
     const wrapper = shallow(<Input type="radio" />);
     expect(wrapper.prop("label")).toBe("");
@@ -112,4 +105,23 @@ describe("Input RTL", () => {
     render(<Input help={help} type="checkbox" />);
     expect(screen.getByRole("checkbox")).toHaveAccessibleDescription(help);
   });
+
+  it("can add additional classes", () => {
+    const { container } = render(
+      <Input
+        type="text"
+        className="extra-class"
+        help="additional description"
+        helpClassName="additional-help-text-class"
+      />
+    );
+    expect(screen.getByRole("textbox")).toHaveClass(
+      "p-form-validation__input",
+      "extra-class"
+    );
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    expect(container.querySelector(".p-form-help-text")).toHaveClass(
+      "additional-help-text-class"
+    );
+  });
 });
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 2ef7edbb0..f69d6de8e 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -30,6 +30,10 @@ export type Props = PropsWithSpread<
      * Help text to show below the field.
      */
     help?: ReactNode;
+    /**
+     * Optional class(es) to pass to the help text element.
+     */
+    helpClassName?: ReactNode;
     /**
      * The id of the input.
      */
@@ -71,6 +75,7 @@ const Input = ({
   className,
   error,
   help,
+  helpClassName,
   id,
   label,
   labelClassName,
@@ -138,6 +143,7 @@ const Input = ({
       error={error}
       forId={id}
       help={help}
+      helpClassName={helpClassName}
       helpId={helpId}
       isTickElement={type === "checkbox" || type === "radio"}
       label={fieldLabel}