fix: Props should allow ReactNode in certain cases

In order to better provide translatable labels.

In other cases, string | ReactNode was simplified to ReactNode because that type already includes string.

Author: brandonc

packages/modal/components/DialogModal.tsx

@@ -18,7 +18,7 @@ export interface DialogModalProps extends ModalBaseProps {
   /** Whether we automatically add padding to the body of the modal. */
   isContentFlush?: boolean;
   /** The text displayed in the header of the modal. */
-  title: string;
+  title: React.ReactNode;
 }
 
 class DialogModal extends React.PureComponent<DialogModalProps, {}> {

packages/modal/components/DialogModalWithFooter.tsx

@@ -8,7 +8,7 @@ export interface DialogModalWithFooterProps extends DialogModalProps {
   /** The primary button */
   ctaButton: React.ReactElement<ButtonProps>;
   /** The text for the button that secondary button, which closes the modal */
-  closeText: string;
+  closeText: React.ReactNode;
 }
 
 class DialogModalWithFooter extends React.PureComponent<

packages/modal/components/FullscreenModal.tsx

@@ -12,11 +12,11 @@ interface FullscreenModalProps extends ModalBaseProps {
   /** The primary button */
   ctaButton?: React.ReactElement<ButtonProps>;
   /** The text for the button that secondary button, which closes the modal */
-  closeText: string;
+  closeText: React.ReactNode;
   /** The title that appears in the header */
-  title: string;
+  title: React.ReactNode;
   /** The subtitle that appears in the header */
-  subtitle?: string;
+  subtitle?: React.ReactNode;
   /** Whether we automatically add padding to the body of the modal. */
   isContentFlush?: boolean;
   /** Custom header content component. ⚠️Use rarely and with caution⚠️ */

packages/modal/components/ModalBase.tsx

@@ -24,7 +24,7 @@ export enum ModalSizes {
 }
 
 export interface ModalBaseProps {
-  children?: React.ReactNode | string;
+  children?: React.ReactNode;
   /** Controls whether the modal animates in and out. ⚠️Do not use this directly⚠️ */
   isAnimated?: boolean;
   /** Whether the modal is open */

packages/table/components/Column.tsx

@@ -10,7 +10,7 @@ export interface ColumnProps {
   /**
    * header is providing the contents for the header cell for the column.
    */
-  header: string | React.ReactNode;
+  header: React.ReactNode;
   /**
    * cellRenderer is the function which is creating the cell contents for this column.
    */

packages/table/components/SortableHeaderCell.tsx

@@ -9,7 +9,7 @@ type SortDirection = "ASC" | "DESC" | null;
 interface Props {
   sortHandler: () => void;
   sortDirection: SortDirection;
-  columnContent: string | React.ReactNode;
+  columnContent: React.ReactNode;
   textAlign?: TextAlign;
 }
 interface State {

packages/textInput/components/TextInput.tsx

@@ -45,19 +45,19 @@ export interface TextInputProps extends React.HTMLProps<HTMLInputElement> {
   /**
    * Sets the contents of the input label. This can be a `string` or any `ReactNode`.
    */
-  inputLabel: string | React.ReactNode;
+  inputLabel: React.ReactNode;
   /**
    * Defaults to `true`, but can be set to `false` to visibly hide the `TextInput`'s label. The `inputLabel` should still be set even when hidden for accessibility support.
    */
   showInputLabel: boolean;
   /**
    * hintContent is text or a ReactNode that is displayed directly under the input with additional information about the expected input.
    */
-  hintContent?: string | React.ReactNode;
+  hintContent?: React.ReactNode;
   /**
    * Sets the contents for validation errors. This will be displayed below the input element. Errors are only visible when the `TextInput` appearance is also set to `TextInputAppearance.Error`.
    */
-  errors?: string[];
+  errors?: React.ReactNode[];
 }
 
 export class TextInput<