From 6779033bcad9ae50bc1b69847f174567479a02bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 8 Apr 2020 10:14:03 +0200
Subject: [PATCH] Forms: Fixed form style issues due to recent style changes
 (#23421)

* Forms: Fixed form style issues due to recent style changes

* Removed unused import
---
 .../src/components/DataLinks/DataLinkInput.tsx       | 12 ++----------
 .../components/SecretFormField/SecretFormField.tsx   | 11 ++++-------
 .../src/components/TagsInput/TagsInput.tsx           |  3 +--
 3 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
index c2903e5b307..43dc565cd51 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
@@ -9,7 +9,7 @@ import { Editor } from '@grafana/slate-react';
 import { Value } from 'slate';
 import Plain from 'slate-plain-serializer';
 import { Popper as ReactPopper } from 'react-popper';
-import { css, cx } from 'emotion';
+import { css } from 'emotion';
 
 import { SlatePrism } from '../../slate-plugins';
 import { SCHEMA } from '../../utils/slate';
@@ -119,15 +119,7 @@ export const DataLinkInput: React.FC<DataLinkInputProps> = memo(
     };
 
     return (
-      <div
-        className={cx(
-          'gf-form-input',
-          css`
-            position: relative;
-            height: auto;
-          `
-        )}
-      >
+      <div className="slate-query-field__wrapper">
         <div className="slate-query-field">
           {showingSuggestions && (
             <Portal>
diff --git a/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx b/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx
index 88e71d61b19..f6cb3307eea 100644
--- a/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx
+++ b/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx
@@ -1,6 +1,7 @@
 import omit from 'lodash/omit';
 import React, { InputHTMLAttributes, FunctionComponent } from 'react';
 import { FormField } from '../FormField/FormField';
+import { Button } from '../Button/Button';
 import { css, cx } from 'emotion';
 
 interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onReset'> {
@@ -61,13 +62,9 @@ export const SecretFormField: FunctionComponent<Props> = ({
               value="configured"
               {...omit(inputProps, 'value')}
             />
-            <button
-              className={cx('btn btn-secondary gf-form-btn', styles.noRadiusButton)}
-              onClick={onReset}
-              style={{ height: '100%' }}
-            >
-              reset
-            </button>
+            <Button onClick={onReset} variant="secondary">
+              Reset
+            </Button>
           </>
         ) : (
           <input
diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
index 5681c3db5b0..a2d35587ae3 100644
--- a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
+++ b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
@@ -91,7 +91,6 @@ export class TagsInput extends PureComponent<Props, State> {
 
       addButtonStyle: css`
         margin-left: 8px;
-        margin-top: 2px;
       `,
     }));
 
@@ -106,7 +105,7 @@ export class TagsInput extends PureComponent<Props, State> {
           )}
         >
           <Input placeholder="Add Name" onChange={this.onNameChange} value={newTag} onKeyUp={this.onKeyboardAdd} />
-          <Button className={getStyles().addButtonStyle} onClick={this.onAdd} variant="primary" size="md">
+          <Button className={getStyles().addButtonStyle} onClick={this.onAdd} variant="secondary" size="md">
             Add
           </Button>
         </div>