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

FieldValidationMessage: updates component with the new theme model (#33647)

Browse Source 
* FieldValidationMessage: updates component with the new theme model

* used correct theme value
This commit is contained in:
Uchechukwu Obasi 2021-05-04 16:43:47 +01:00 committed by GitHub
parent 7cfd979cc1
commit 9315152d4f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-data/src/themes/index.ts
View File

@ -8,6 +8,7 @@ export { ThemeTypography, ThemeTypographyVariant } from './createTypography';
export { ThemeTransitions } from './createTransitions';
export { ThemeSpacing } from './createSpacing';
export { ThemeZIndices } from './zIndex';
export { palette } from './palette';
/** Exporting the module like this to be able to generate docs properly. */
import * as colorManipulator from './colorManipulator';

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

@ -1,8 +1,8 @@
import React from 'react';
import { css, cx } from '@emotion/css';
import { GrafanaTheme } from '@grafana/data';
import { GrafanaTheme2 } from '@grafana/data';
import { Icon } from '../Icon/Icon';
import { useTheme, stylesFactory } from '../../themes';
import { stylesFactory, useTheme2 } from '../../themes';
export interface FieldValidationMessageProps {
children: string;
@ -11,14 +11,14 @@ export interface FieldValidationMessageProps {
horizontal?: boolean;
}
export const getFieldValidationMessageStyles = stylesFactory((theme: GrafanaTheme) => {
export const getFieldValidationMessageStyles = stylesFactory((theme: GrafanaTheme2) => {
const baseStyle = `
font-size: ${theme.typography.size.sm};
font-weight: ${theme.typography.weight.semibold};
padding: ${theme.spacing.formValidationMessagePadding};
color: ${theme.colors.formValidationMessageText};
background: ${theme.colors.formValidationMessageBg};
border-radius: ${theme.border.radius.sm};
font-weight: ${theme.typography.fontWeightMedium};
padding: ${theme.spacing(0.5, 1)};
color: ${theme.colors.error.text};
background: ${theme.colors.error.main};
border-radius: ${theme.shape.borderRadius()};
position: relative;
display: inline-block;
`;
@ -26,7 +26,7 @@ export const getFieldValidationMessageStyles = stylesFactory((theme: GrafanaThem
return {
vertical: css`
${baseStyle}
margin: ${theme.spacing.formValidationMessageMargin};
margin: ${theme.spacing(0.5, 0, 0, 0)};
&:before {
content: '';
@ -36,7 +36,7 @@ export const getFieldValidationMessageStyles = stylesFactory((theme: GrafanaThem
width: 0;
height: 0;
border-width: 0 4px 5px 4px;
border-color: transparent transparent ${theme.colors.formValidationMessageBg} transparent;
border-color: transparent transparent ${theme.colors.error.main} transparent;
border-style: solid;
}
`,
@ -57,13 +57,13 @@ export const getFieldValidationMessageStyles = stylesFactory((theme: GrafanaThem
}
`,
fieldValidationMessageIcon: css`
margin-right: ${theme.spacing.formSpacingBase}px;
margin-right: ${theme.spacing()};
`,
};
});
export const FieldValidationMessage: React.FC<FieldValidationMessageProps> = ({ children, horizontal, className }) => {
const theme = useTheme();
const theme = useTheme2();
const styles = getFieldValidationMessageStyles(theme);
const cssName = cx(horizontal ? styles.horizontal : styles.vertical, className);

2
packages/grafana-ui/src/components/Forms/getFormStyles.ts
View File

@ -16,7 +16,7 @@ export const getFormStyles = stylesFactory(
return {
label: getLabelStyles(theme),
legend: getLegendStyles(theme.v1),
fieldValidationMessage: getFieldValidationMessageStyles(theme.v1),
fieldValidationMessage: getFieldValidationMessageStyles(theme),
button: getButtonStyles({
theme,
variant: options.variant,