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

Forms/Field: updates component with the new theme model (#33634)

Browse Source
This commit is contained in:
Uchechukwu Obasi
2021-05-03 14:05:00 +01:00
committed by GitHub
parent ac77d864fb
commit 44ffd77206
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,8 @@
import React, { HTMLAttributes } from 'react';
import { Label } from './Label';
import { stylesFactory, useTheme } from '../../themes';
import { stylesFactory, useTheme2 } from '../../themes';
import { css, cx } from '@emotion/css';
import { GrafanaTheme } from '@grafana/data';
import { GrafanaTheme2 } from '@grafana/data';
import { FieldValidationMessage } from './FieldValidationMessage';
import { getChildId } from '../../utils/children';
@@ -28,12 +28,12 @@ export interface FieldProps extends HTMLAttributes<HTMLDivElement> {
className?: string;
}
export const getFieldStyles = stylesFactory((theme: GrafanaTheme) => {
export const getFieldStyles = stylesFactory((theme: GrafanaTheme2) => {
return {
field: css`
display: flex;
flex-direction: column;
margin-bottom: ${theme.spacing.formInputMargin};
margin-bottom: ${theme.spacing(2)};
`,
fieldHorizontal: css`
flex-direction: row;
@@ -41,7 +41,7 @@ export const getFieldStyles = stylesFactory((theme: GrafanaTheme) => {
flex-wrap: wrap;
`,
fieldValidationWrapper: css`
margin-top: ${theme.spacing.formSpacingBase / 2}px;
margin-top: ${theme.spacing(0.5)};
`,
fieldValidationWrapperHorizontal: css`
flex: 1 1 100%;
@@ -62,7 +62,7 @@ export const Field: React.FC<FieldProps> = ({
className,
...otherProps
}) => {
const theme = useTheme();
const theme = useTheme2();
const styles = getFieldStyles(theme);
const inputId = getChildId(children);