From 36a8ded2bc5df544c0ffa84d3f53560c86556e2d Mon Sep 17 00:00:00 2001
From: Brooke Scarlett Yalof <brooke.yalof@mongodb.com>
Date: Wed, 14 Feb 2024 13:57:24 -0500
Subject: [PATCH] LG-2342: Description props accept `React.ReactNode` instead
 of strings (#2219)

* description prop upgrade

* updates readmes
---
 .changeset/tricky-cars-cheat.md                   | 7 +++++++
 packages/combobox/README.md                       | 2 +-
 packages/combobox/src/Combobox/Combobox.types.ts  | 4 ++--
 packages/select/README.md                         | 2 +-
 packages/select/src/Select/Select.types.ts        | 9 ++++++++-
 packages/text-area/README.md                      | 2 +-
 packages/text-area/src/TextArea/TextArea.types.ts | 4 +++-
 7 files changed, 23 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/tricky-cars-cheat.md

diff --git a/.changeset/tricky-cars-cheat.md b/.changeset/tricky-cars-cheat.md
new file mode 100644
index 0000000000..a2d77bb085
--- /dev/null
+++ b/.changeset/tricky-cars-cheat.md
@@ -0,0 +1,7 @@
+---
+'@leafygreen-ui/text-area': minor
+'@leafygreen-ui/combobox': minor
+'@leafygreen-ui/select': minor
+---
+
+`description` prop can now be a `React.ReactNode` rather than a `string`
diff --git a/packages/combobox/README.md b/packages/combobox/README.md
index 6a42663363..b92cd4e159 100644
--- a/packages/combobox/README.md
+++ b/packages/combobox/README.md
@@ -87,7 +87,7 @@ import { Combobox, ComboboxOption } from '@leafygreen-ui/combobox';
 | `overflow`               | `'expand-y'`, `'expand-x'`, `'scroll-x'`      | Defines the overflow behavior of a multiselect combobox. **expand-y**: Combobox has fixed width, and additional selections will cause the element to grow in the block direction. **expand-x**: Combobox has fixed height, and additional selections will cause the elemenet to grow in the inline direction. **scroll-x**: Combobox has fixed height and width, and additional selections will cause the element to be scrollable in the x (horizontal) direction. | `'expand-y'`             |
 | `label`                  | `string`                                      | An accessible label for the input, rendered in a `<label>` to the DOM                                                                                                                                                                                                                                                                                                                                                                                               |                          |
 | `aria-label`             | `string`                                      | An accessible label for the input, used only for screen-readers                                                                                                                                                                                                                                                                                                                                                                                                     |                          |
-| `description`            | `string`                                      | A description for the input                                                                                                                                                                                                                                                                                                                                                                                                                                         |                          |
+| `description`            | `React.ReactNode`                             | A description for the input                                                                                                                                                                                                                                                                                                                                                                                                                                         |                          |
 | `placeholder`            | `string`                                      | A placeholder for the input element. Uses the native `placeholder` attribute.                                                                                                                                                                                                                                                                                                                                                                                       | 'Select'                 |
 | `disabled`               | `boolean`                                     | Disables all interaction with the component                                                                                                                                                                                                                                                                                                                                                                                                                         | false                    |
 | `size`                   | `'default'`                                   | Defines the visual size of the component                                                                                                                                                                                                                                                                                                                                                                                                                            | 'default'                |
diff --git a/packages/combobox/src/Combobox/Combobox.types.ts b/packages/combobox/src/Combobox/Combobox.types.ts
index 55af45e175..5ca897988a 100644
--- a/packages/combobox/src/Combobox/Combobox.types.ts
+++ b/packages/combobox/src/Combobox/Combobox.types.ts
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import { type ChipProps } from '@leafygreen-ui/chip';
 import { Either, HTMLElementProps } from '@leafygreen-ui/lib';
@@ -80,7 +80,7 @@ export type BaseComboboxProps = Omit<HTMLElementProps<'div'>, 'onChange'> &
     /**
      * A description for the input
      */
-    description?: string;
+    description?: ReactNode;
 
     /**
      * A placeholder for the input element. Uses the native `placeholder` attribute.
diff --git a/packages/select/README.md b/packages/select/README.md
index 46cf59d9fc..f217a69129 100644
--- a/packages/select/README.md
+++ b/packages/select/README.md
@@ -105,7 +105,7 @@ import { Option, OptionGroup, Select, Size } from '@leafygreen-ui/select';
 | `label`              | `string`                                      | Text shown in bold above the input element.                                                                                                                                                                                                     |             |
 | `aria-labelledby`    | `string`                                      | Must be provided if and only if neither `label` nor `aria-label` is not provided.                                                                                                                                                               |
 | `aria-label`         | `string`                                      | Must be provided if and only if neither `label` nor `aria-labelledby` is not provided.                                                                                                                                                          |             |
-| `description`        | `string`                                      | Text that gives more detail about the requirements for the input.                                                                                                                                                                               |             |
+| `description`        | `React.ReactNode`                             | Text that gives more detail about the requirements for the input.                                                                                                                                                                               |             |
 | `placeholder`        | `string`                                      | The placeholder text shown in the input element when an option is not selected.                                                                                                                                                                 | `'Select'`  |
 | `disabled`           | `boolean`                                     | Disables the component from being edited.                                                                                                                                                                                                       | `false`     |
 | `value`              | `string`                                      | Sets the `<Option />` that will appear selected and makes the component a controlled component.                                                                                                                                                 | `''`        |
diff --git a/packages/select/src/Select/Select.types.ts b/packages/select/src/Select/Select.types.ts
index 324fdfaa31..c84a50e830 100644
--- a/packages/select/src/Select/Select.types.ts
+++ b/packages/select/src/Select/Select.types.ts
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ButtonProps } from '@leafygreen-ui/button';
 import { Either, HTMLElementProps } from '@leafygreen-ui/lib';
 import { PopoverProps } from '@leafygreen-ui/popover';
@@ -41,6 +43,11 @@ export interface BaseSelectProps
    * HTML `id` property used to allow Javascript, form, or label to reference the input.
    */
   id?: string;
+
+  /**
+   * Determines whether or not the component appears in dark theme.
+   * @default false
+   */
   darkMode?: boolean;
   /**
    * Determines the size in which the component will be rendered.
@@ -55,7 +62,7 @@ export interface BaseSelectProps
   /**
    * Secondary text rendered under the label to provide additional details about the select and its options.
    */
-  description?: string;
+  description?: React.ReactNode;
   /**
    * Text rendered in the Select component before a value is set.
    */
diff --git a/packages/text-area/README.md b/packages/text-area/README.md
index 59868704ba..10e7adcfc9 100644
--- a/packages/text-area/README.md
+++ b/packages/text-area/README.md
@@ -62,7 +62,7 @@ return (
 | `id`          | `string`                       | id to describe the `<textarea>` element                                                                                   |          |
 | `darkMode`    | `boolean`                      | Determines whether or not the component will appear in dark mode.                                                         | `false`  |
 | `label`       | `string`                       | Label for `<textarea>`                                                                                                    |          |
-| `description` | `string`                       | Description below label                                                                                                   |          |
+| `description` | `React.ReactNode`              | Description below label                                                                                                   |          |
 | `state`       | `'none'`, `'valid'`, `'error'` | Determines the state of the `<textarea>`                                                                                  | `'none'` |
 | `className`   | `string`                       | className applied to the container element                                                                                |          |
 | `disabled`    | `boolean`                      | Determines if the component is disabled                                                                                   | `false`  |
diff --git a/packages/text-area/src/TextArea/TextArea.types.ts b/packages/text-area/src/TextArea/TextArea.types.ts
index 08c78f7f60..94c2e36eda 100644
--- a/packages/text-area/src/TextArea/TextArea.types.ts
+++ b/packages/text-area/src/TextArea/TextArea.types.ts
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Either, HTMLElementProps } from '@leafygreen-ui/lib';
 import { BaseFontSize } from '@leafygreen-ui/tokens';
 
@@ -31,7 +33,7 @@ export interface BaseTextAreaProps
   /**
    * Text that gives more detail about the requirements for the input.
    */
-  description?: string;
+  description?: React.ReactNode;
 
   /**
    * Whether or not the field is currently disabled.