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

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;
+    `,
+  };
+};

packages/grafana-ui/src/components/FormField/_FormField.scss

@@ -1,11 +0,0 @@
-.form-field {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  text-align: left;
-  position: relative;
-
-  &--grow {
-    flex-grow: 1;
-  }
-}

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}

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';