feat(textbox): change labelHelp type to ReactNode

close FE-3387

fix #3434

src/__experimental__/components/label/label.component.js

@@ -177,7 +177,7 @@ Label.propTypes = {
   /** Status of info */
   info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   /** A message that the Help component will display */
-  help: PropTypes.string,
+  help: PropTypes.node,
   /** Icon type */
   helpIcon: PropTypes.string,
   /** Overrides the default 'as' attribute of the Help component */

src/__experimental__/components/label/label.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
+import * as React from "react";
 
 export interface LabelPropTypes {
   children?: React.ReactNode;
   labelId?: string;
-  help?: string;
+  help?: React.ReactNode;
   helpIcon?: string;
   helpId?: string;
   helpTag?: string;
@@ -20,7 +20,7 @@ export interface LabelPropTypes {
   /** When true label is inline */
   inline?: boolean;
   /** Text alignment of label */
-  align?: 'left' | 'right';
+  align?: "left" | "right";
   styleOverride?: () => object | object;
 }
 

src/__experimental__/components/numeral-date/numeral-date.component.js

@@ -281,7 +281,7 @@ NumeralDate.propTypes = {
   /** Label */
   label: PropTypes.string,
   /** Text applied to label help tooltip */
-  labelHelp: PropTypes.string,
+  labelHelp: PropTypes.node,
   /** When true, label is placed in line with an input */
   labelInline: PropTypes.bool,
   /** Label alignment. Works only when labelInline is true */

src/__experimental__/components/numeral-date/numeral-date.d.ts

@@ -69,7 +69,7 @@ export interface NumeralDateProps {
   /** Label */
   label?: string;
   /** Text applied to label help tooltip */
-  labelHelp?: string;
+  labelHelp?: React.ReactNode;
   /** When true, label is placed in line with an input */
   labelInline?: boolean;
   /** Label alignment. Works only when labelInline is true */

src/__experimental__/components/switch/switch.component.js

@@ -100,7 +100,7 @@ Switch.propTypes = {
   /** Sets label alignment - accepted values: 'left' (default), 'right' */
   labelAlign: PropTypes.string,
   /** Help text */
-  labelHelp: PropTypes.string,
+  labelHelp: PropTypes.node,
   /** Displays label inline with the Switch */
   labelInline: PropTypes.bool,
   /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */

src/__experimental__/components/switch/switch.d.ts

@@ -9,7 +9,7 @@ export interface SwitchProps {
   id?: string;
   inputWidth?: number | string;
   label?: string;
-  labelHelp?: string;
+  labelHelp?: React.ReactNode;
   labelAlign?: string;
   labelInline?: boolean;
   labelSpacing?: 1 | 2;

src/__experimental__/components/textarea/textarea.component.js

@@ -206,6 +206,8 @@ Textarea.propTypes = {
   expandable: PropTypes.bool,
   /** The content of the label for the input */
   label: PropTypes.string,
+  /** Text applied to label help tooltip */
+  labelHelp: PropTypes.node,
   /** When true, label is placed in line with an input */
   labelInline: PropTypes.bool,
   /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */

src/__experimental__/components/textarea/textarea.d.ts

@@ -17,6 +17,8 @@ export interface TextareaProps {
   expandable?: boolean;
   /** Label */
   label?: string;
+  /** Text applied to label help tooltip */
+  labelHelp?: React.ReactNode;
   /** When true, label is placed in line an input */
   labelInline?: boolean;
   /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */

src/__experimental__/components/textbox/textbox.component.js

@@ -128,7 +128,7 @@ Textbox.propTypes = {
   /** Label */
   label: PropTypes.string,
   /** Text applied to label help tooltip */
-  labelHelp: PropTypes.string,
+  labelHelp: PropTypes.node,
   /** When true, label is placed in line an input */
   labelInline: PropTypes.bool,
   /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */

src/__experimental__/components/textbox/textbox.d.ts

@@ -26,7 +26,7 @@ export interface TextboxProps extends SpacingProps {
   /** Label */
   label?: string;
   /** Text applied to label help tooltip */
-  labelHelp?: string;
+  labelHelp?: React.ReactNode;
   /** When true, label is placed in line an input */
   labelInline?: boolean;
   /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */

src/components/button-toggle-group/button-toggle-group.component.js

@@ -78,7 +78,7 @@ BaseButtonToggleGroup.propTypes = {
   /** Text for the label. */
   label: PropTypes.string,
   /** Text for the labels help tooltip. */
-  labelHelp: PropTypes.string,
+  labelHelp: PropTypes.node,
   /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
   labelSpacing: PropTypes.oneOf([1, 2]),
   /** The percentage width of the ButtonToggleGroup. */

src/components/input-definition.d.ts

@@ -1,46 +1,46 @@
-import { ChangeEvent } from 'react';
-import { AlignBinaryType } from '../utils/helpers/options-helper/options-helper';
-import { Validator } from '../utils/validations/validation-interface';
+import * as React from "react";
+import { AlignBinaryType } from "../utils/helpers/options-helper/options-helper";
+import { Validator } from "../utils/validations/validation-interface";
 
 export interface InputProps {
-    value?: any;
+  value?: any;
 
-    /** Timeout length before onChangeDeferred is triggered. */
-    deferTimeout?: number;
+  /** Timeout length before onChangeDeferred is triggered. */
+  deferTimeout?: number;
 
-    /** Displays additional information below the input to provide help to the user. */
-    fieldHelp?: string;
+  /** Displays additional information below the input to provide help to the user. */
+  fieldHelp?: string;
 
-    /** Displays fieldHelp inline with the checkbox/radio button. */
-    fieldHelpInline?: boolean;
+  /** Displays fieldHelp inline with the checkbox/radio button. */
+  fieldHelpInline?: boolean;
 
-    /** An array of info messages to apply to the input. */
-    info?: Validator[];
+  /** An array of info messages to apply to the input. */
+  info?: Validator[];
 
-    /** A number representing the percentage/ratio of width with the label. Works best with inline labels. */
-    inputWidth?: number;
+  /** A number representing the percentage/ratio of width with the label. Works best with inline labels. */
+  inputWidth?: number;
 
-    /** Outputs a label for the input. */
-    label?: string;
+  /** Outputs a label for the input. */
+  label?: string;
 
-    /** Align the label either 'left' or 'right'. Only works with inline labels. */
-    labelAlign?: AlignBinaryType;
+  /** Align the label either 'left' or 'right'. Only works with inline labels. */
+  labelAlign?: AlignBinaryType;
 
-    /** Output an info icon next to the label to display additional help to the user. */
-    labelHelp?: string;
+  /** Output an info icon next to the label to display additional help to the user. */
+  labelHelp?: React.ReactNode;
 
-    /** Displays the label inline with the input. */
-    labelInline?: boolean;
+  /** Displays the label inline with the input. */
+  labelInline?: boolean;
 
-    /** A number representing the percentage/ratio of width with the input. Works best with inline labels. */
-    labelWidth?: number;
+  /** A number representing the percentage/ratio of width with the input. Works best with inline labels. */
+  labelWidth?: number;
 
-    /** A callback which will trigger after the user has stopped typing for the duration of deferTimeout. */
-    onChangeDeferred?: (ev: ChangeEvent<HTMLElement>) => void;
+  /** A callback which will trigger after the user has stopped typing for the duration of deferTimeout. */
+  onChangeDeferred?: (ev: React.ChangeEvent<HTMLElement>) => void;
 
-    /** An array of validations to apply to the input. */
-    validations?: Validator[];
+  /** An array of validations to apply to the input. */
+  validations?: Validator[];
 
-    /** An array of warnings to apply to the input. */
-    warnings?: Validator[];
+  /** An array of warnings to apply to the input. */
+  warnings?: Validator[];
 }

src/components/select/filterable-select/index.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import Button from '../../button';
-import { OptionProps } from '../option';
-import { OptionRowProps } from '../option-row';
+import * as React from "react";
+import Button from "../../button";
+import { OptionProps } from "../option";
+import { OptionRowProps } from "../option-row";
 
 export interface FilterableSelectProps {
   /** Boolean to toggle where SelectList is rendered in relation to the Select Input */
@@ -19,23 +19,25 @@ export interface FilterableSelectProps {
   /** Label */
   label?: string;
   /** Text applied to label help tooltip */
-  labelHelp?: string;
+  labelHelp?: React.ReactNode;
   /** When true, label is placed in line with an input */
   labelInline?: boolean;
   /** Width of a label in percentage. Works only when labelInline is true */
   labelWidth?: number;
   /** Width of an input in percentage. Works only when labelInline is true */
   inputWidth?: number;
   /** Size of an input */
-  size?: 'small' | 'medium' | 'large';
+  size?: "small" | "medium" | "large";
   /** Placeholder string to be displayed in input */
   placeholder?: string;
   /** The selected value(s), when the component is operating in controlled mode */
   value?: string | object;
   /** The default selected value(s), when the component is operating in uncontrolled mode */
   defaultValue?: string | object;
   /** Child components (such as Option or OptionRow) for the SelectList */
-  children: Array<React.ReactElement<OptionProps | OptionRowProps>> | React.ReactElement<OptionProps | OptionRowProps>;
+  children:
+    | Array<React.ReactElement<OptionProps | OptionRowProps>>
+    | React.ReactElement<OptionProps | OptionRowProps>;
   /** If true the Component opens on focus */
   openOnFocus?: boolean;
   /** SelectList table header, should consist of multiple th elements.

src/components/select/multi-select/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { OptionProps } from "../option";
-import { OptionRowProps } from '../option-row';
+import { OptionRowProps } from "../option-row";
 
 export interface MultiSelectProps {
   /** Boolean to toggle where SelectList is rendered in relation to the Select Input */
@@ -18,7 +18,7 @@ export interface MultiSelectProps {
   /** Label */
   label?: string;
   /** Text applied to label help tooltip */
-  labelHelp?: string;
+  labelHelp?: React.ReactNode;
   /** When true, label is placed in line with an input */
   labelInline?: boolean;
   /** Width of a label in percentage. Works only when labelInline is true */
@@ -34,7 +34,9 @@ export interface MultiSelectProps {
   /** The default selected value(s), when the component is operating in uncontrolled mode */
   defaultValue?: string[] | object[];
   /** Child components (such as Option or OptionRow) for the SelectList */
-  children: Array<React.ReactElement<OptionProps | OptionRowProps>> | React.ReactElement<OptionProps | OptionRowProps>;
+  children:
+    | Array<React.ReactElement<OptionProps | OptionRowProps>>
+    | React.ReactElement<OptionProps | OptionRowProps>;
   /** If true the Component opens on focus */
   openOnFocus?: boolean;
   /** SelectList table header, should consist of multiple th elements.

src/components/select/select-textbox/select-textbox.component.js

@@ -84,7 +84,7 @@ const formInputPropTypes = {
   /** Label */
   label: PropTypes.string,
   /** Text applied to label help tooltip */
-  labelHelp: PropTypes.string,
+  labelHelp: PropTypes.node,
   /** When true, label is placed in line with an input */
   labelInline: PropTypes.bool,
   /** Width of a label in percentage. Works only when labelInline is true */

src/components/select/simple-select/index.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { OptionProps } from '../option';
-import { OptionRowProps } from '../option-row';
-import { SpacingProps } from '../../../utils/helpers/options-helper';
+import * as React from "react";
+import { OptionProps } from "../option";
+import { OptionRowProps } from "../option-row";
+import { SpacingProps } from "../../../utils/helpers/options-helper";
 
 export interface SimpleSelectProps extends SpacingProps {
   /** Boolean to toggle where SelectList is rendered in relation to the Select Input */
@@ -19,23 +19,25 @@ export interface SimpleSelectProps extends SpacingProps {
   /** Label */
   label?: string;
   /** Text applied to label help tooltip */
-  labelHelp?: string;
+  labelHelp?: React.ReactNode;
   /** When true, label is placed in line with an input */
   labelInline?: boolean;
   /** Width of a label in percentage. Works only when labelInline is true */
   labelWidth?: number;
   /** Width of an input in percentage. Works only when labelInline is true */
   inputWidth?: number;
   /** Size of an input */
-  size?: 'small' | 'medium' | 'large';
+  size?: "small" | "medium" | "large";
   /** Placeholder string to be displayed in input */
   placeholder?: string;
   /** The selected value(s), when the component is operating in controlled mode */
   value?: string | object;
   /** The default selected value(s), when the component is operating in uncontrolled mode */
   defaultValue?: string | object;
   /** Child components (such as Option or OptionRow) for the SelectList */
-  children: Array<React.ReactElement<OptionProps | OptionRowProps>> | React.ReactElement<OptionProps | OptionRowProps>;
+  children:
+    | Array<React.ReactElement<OptionProps | OptionRowProps>>
+    | React.ReactElement<OptionProps | OptionRowProps>;
   /** If true the Component opens on focus */
   openOnFocus?: boolean;
   /** SelectList table header, should consist of multiple th elements.