Chore: Use ReactNode type for Field error prop (#43852)

* Chore: Use ReactNode type for Field error prop

* add LoadingPlaceholder

packages/grafana-ui/src/components/Forms/Field.tsx

@@ -22,7 +22,7 @@ export interface FieldProps extends HTMLAttributes<HTMLDivElement> {
   /** Indicates if field is required */
   required?: boolean;
   /** Error message to display */
-  error?: string | null;
+  error?: React.ReactNode;
   /** Indicates horizontal layout of the field */
   horizontal?: boolean;
   /** make validation message overflow horizontally. Prevents pushing out adjacent inline components */

packages/grafana-ui/src/components/Forms/FieldValidationMessage.story.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
-import { FieldValidationMessage, FieldValidationMessageProps } from './FieldValidationMessage';
+import { FieldValidationMessage } from './FieldValidationMessage';
 import mdx from './FieldValidationMessage.mdx';
 
-export default {
+const story = {
   title: 'Forms/FieldValidationMessage',
   component: FieldValidationMessage,
   parameters: {
@@ -21,8 +21,12 @@ export default {
   argTypes: {
     children: { name: 'message' },
   },
-} as Meta;
+};
+
+export default story as Meta;
+
+type Args = typeof story['args'];
 
-export const Basic: Story<FieldValidationMessageProps> = (args) => {
+export const Basic: Story<Args> = (args) => {
   return <FieldValidationMessage horizontal={args.horizontal}>{args.children}</FieldValidationMessage>;
 };

packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx

@@ -5,7 +5,6 @@ import { Icon } from '../Icon/Icon';
 import { stylesFactory, useTheme2 } from '../../themes';
 
 export interface FieldValidationMessageProps {
-  children: string;
   /** Override component style */
   className?: string;
   horizontal?: boolean;

packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx

@@ -8,7 +8,7 @@ import { useStyles } from '../../themes';
  * @public
  */
 export interface LoadingPlaceholderProps extends HTMLAttributes<HTMLDivElement> {
-  text: string;
+  text: React.ReactNode;
 }
 
 /**