Extend errorMessage and successMessage types in number input, text ar…

…ea, and text input (#2347)
mongodb · May 22, 2024 · 3b86b3b · 3b86b3b
1 parent 3a793b4
commit 3b86b3b
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 6 deletions.
diff --git a/.changeset/sharp-chicken-change.md b/.changeset/sharp-chicken-change.md
@@ -0,0 +1,7 @@
+---
+'@leafygreen-ui/number-input': minor
+'@leafygreen-ui/text-input': minor
+'@leafygreen-ui/text-area': minor
+---
+
+Allow type of `ReactNode` for `errorMessage` and `successMessage` props in `NumberInput`, `TextArea`, and `TextInput`
diff --git a/packages/number-input/src/NumberInput/NumberInput.types.ts b/packages/number-input/src/NumberInput/NumberInput.types.ts
@@ -136,12 +136,12 @@ export interface BaseNumberInputProps
   /**
    * The message shown below the input element if the value is invalid.
    */
-  errorMessage?: string;
+  errorMessage?: React.ReactNode;
 
   /**
    * The message shown below the input element if the value is valid.
    */
-  successMessage?: string;
+  successMessage?: React.ReactNode;
 
   /**
    * Determines the font size and padding.

diff --git a/packages/text-area/src/TextArea/TextArea.types.ts b/packages/text-area/src/TextArea/TextArea.types.ts
@@ -58,12 +58,12 @@ export interface BaseTextAreaProps
   /**
    * The message shown below the input element if the value is invalid.
    */
-  errorMessage?: string;
+  errorMessage?: React.ReactNode;
 
   /**
    * The message shown below the input element if the value is valid.
    */
-  successMessage?: string;
+  successMessage?: React.ReactNode;
 
   /**
    * Callback called whenever validation should be run.

diff --git a/packages/text-input/src/TextInput/TextInput.types.ts b/packages/text-input/src/TextInput/TextInput.types.ts
@@ -116,12 +116,12 @@ export interface BaseTextInputProps
   /**
    * The message shown below the input field if the value is invalid.
    */
-  errorMessage?: string;
+  errorMessage?: React.ReactNode;
 
   /**
    * The message shown below the input field if the value is valid.
    */
-  successMessage?: string;
+  successMessage?: React.ReactNode;
 
   /**
    * The current state of the TextInput. This can be none, valid, or error.