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