IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* Chore: Use ReactNode type for Field error prop

* add LoadingPlaceholder
This commit is contained in:
Josh Hunt 2022-01-11 16:45:14 +00:00 committed by GitHub
parent 963ae4ef87
commit 7ea951b35d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/src/components/Forms/Field.tsx
View File

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

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

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

1
packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx
View File

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

2
packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
View File

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