From ffc6eda351b588eb96309cf29e5f160eb2ecd5f8 Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Tue, 2 Feb 2021 09:58:50 +0100
Subject: [PATCH] FormField: migrated sass styling to emotion (#30392)

* merged conflicts

* added and utilised useStyle hooks

* Fixes snapshot test

* FormField: added grow property to component

* added a carriage return to index.scss

* properly sort props so the required props are at the top

* removed the grow props since it's not used

* fixes frontend test- I hope
---
 .../src/components/FormField/FormField.tsx    | 19 +++++++++++++++++--
 .../src/components/FormField/_FormField.scss  | 11 -----------
 .../__snapshots__/FormField.test.tsx.snap     |  4 ++--
 packages/grafana-ui/src/components/index.scss |  1 -
 4 files changed, 19 insertions(+), 16 deletions(-)
 delete mode 100644 packages/grafana-ui/src/components/FormField/_FormField.scss

diff --git a/packages/grafana-ui/src/components/FormField/FormField.tsx b/packages/grafana-ui/src/components/FormField/FormField.tsx
index 24430a99980..41d33dd6ea8 100644
--- a/packages/grafana-ui/src/components/FormField/FormField.tsx
+++ b/packages/grafana-ui/src/components/FormField/FormField.tsx
@@ -1,7 +1,9 @@
 import React, { InputHTMLAttributes, FunctionComponent } from 'react';
-import { cx } from 'emotion';
+import { css, cx } from 'emotion';
+import { GrafanaTheme } from '@grafana/data';
 import { InlineFormLabel } from '../FormLabel/FormLabel';
 import { PopoverContent } from '../Tooltip/Tooltip';
+import { useStyles } from '../../themes';
 
 export interface Props extends InputHTMLAttributes<HTMLInputElement> {
   label: string;
@@ -30,8 +32,9 @@ export const FormField: FunctionComponent<Props> = ({
   className,
   ...inputProps
 }) => {
+  const styles = useStyles(getStyles);
   return (
-    <div className={cx('form-field', className)}>
+    <div className={cx(styles.formField, className)}>
       <InlineFormLabel width={labelWidth} tooltip={tooltip}>
         {label}
       </InlineFormLabel>
@@ -44,3 +47,15 @@ export const FormField: FunctionComponent<Props> = ({
 
 FormField.displayName = 'FormField';
 FormField.defaultProps = defaultProps;
+
+const getStyles = (theme: GrafanaTheme) => {
+  return {
+    formField: css`
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      text-align: left;
+      position: relative;
+    `,
+  };
+};
diff --git a/packages/grafana-ui/src/components/FormField/_FormField.scss b/packages/grafana-ui/src/components/FormField/_FormField.scss
deleted file mode 100644
index 9c9b3deef9c..00000000000
--- a/packages/grafana-ui/src/components/FormField/_FormField.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.form-field {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  text-align: left;
-  position: relative;
-
-  &--grow {
-    flex-grow: 1;
-  }
-}
diff --git a/packages/grafana-ui/src/components/FormField/__snapshots__/FormField.test.tsx.snap b/packages/grafana-ui/src/components/FormField/__snapshots__/FormField.test.tsx.snap
index 0d5632f1989..b4d131f05d4 100644
--- a/packages/grafana-ui/src/components/FormField/__snapshots__/FormField.test.tsx.snap
+++ b/packages/grafana-ui/src/components/FormField/__snapshots__/FormField.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`FormField should render component with custom inputEl 1`] = `
 <div
-  className="form-field"
+  className="css-aq4c43"
 >
   <FormLabel
     width={11}
@@ -20,7 +20,7 @@ exports[`FormField should render component with custom inputEl 1`] = `
 
 exports[`FormField should render component with default inputEl 1`] = `
 <div
-  className="form-field"
+  className="css-aq4c43"
 >
   <FormLabel
     width={11}
diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss
index aaa35251d51..fb0306ce69b 100644
--- a/packages/grafana-ui/src/components/index.scss
+++ b/packages/grafana-ui/src/components/index.scss
@@ -1,7 +1,6 @@
 @import 'ButtonCascader/ButtonCascader';
 @import 'ColorPicker/ColorPicker';
 @import 'Drawer/Drawer';
-@import 'FormField/FormField';
 @import 'RefreshPicker/RefreshPicker';
 @import 'Forms/Legacy/Select/Select';
 @import 'TimePicker/TimeOfDayPicker';