From 44ffd77206e6fb8abcac9441cc42e671a7a8776e Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Mon, 3 May 2021 14:05:00 +0100
Subject: [PATCH] Forms/Field: updates component with the new theme model
 (#33634)

---
 packages/grafana-ui/src/components/Forms/Field.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/grafana-ui/src/components/Forms/Field.tsx b/packages/grafana-ui/src/components/Forms/Field.tsx
index 08031f40be6..92b983f19d0 100644
--- a/packages/grafana-ui/src/components/Forms/Field.tsx
+++ b/packages/grafana-ui/src/components/Forms/Field.tsx
@@ -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);