From c674fa1d794c2b3ef7b9ba51b977c581237f3cc6 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Thu, 17 Oct 2019 16:13:55 +0200
Subject: [PATCH] Forms: Introduce new spacing variables to GrafanaTheme
 (#19875)

* Introduce next-gen form spacing variables
* Update snapshots
---
 .../ThresholdsEditor.test.tsx.snap             | 18 ++++++++++++++++++
 packages/grafana-ui/src/themes/default.ts      | 18 ++++++++++++++++++
 packages/grafana-ui/src/types/theme.ts         | 14 ++++++++++++++
 3 files changed, 50 insertions(+)

diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
index f04434b0175..cf2726ebd46 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
@@ -202,6 +202,15 @@ exports[`Render should render with base threshold 1`] = `
                             },
                             "spacing": Object {
                               "d": "14px",
+                              "formFieldsetMargin": "16px",
+                              "formInputAffixPaddingHorizontal": "4px",
+                              "formInputHeight": "32px",
+                              "formInputMargin": "16px",
+                              "formInputPaddingHorizontal": "8px",
+                              "formLabelMargin": "0 0 4px 0",
+                              "formLabelPadding": "0 0 0 2px",
+                              "formLegendMargin": "16px",
+                              "formMargin": "32px",
                               "gutter": "30px",
                               "insetSquishMd": "4px 8px",
                               "lg": "24px",
@@ -399,6 +408,15 @@ exports[`Render should render with base threshold 1`] = `
                                   },
                                   "spacing": Object {
                                     "d": "14px",
+                                    "formFieldsetMargin": "16px",
+                                    "formInputAffixPaddingHorizontal": "4px",
+                                    "formInputHeight": "32px",
+                                    "formInputMargin": "16px",
+                                    "formInputPaddingHorizontal": "8px",
+                                    "formLabelMargin": "0 0 4px 0",
+                                    "formLabelPadding": "0 0 0 2px",
+                                    "formLegendMargin": "16px",
+                                    "formMargin": "32px",
                                     "gutter": "30px",
                                     "insetSquishMd": "4px 8px",
                                     "lg": "24px",
diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts
index 6888a479782..a2ef04da58f 100644
--- a/packages/grafana-ui/src/themes/default.ts
+++ b/packages/grafana-ui/src/themes/default.ts
@@ -21,6 +21,8 @@ export const commonColorsPalette = {
   red88: '#e02f44',
 };
 
+const SPACING_BASE = 8;
+
 const theme: GrafanaThemeCommons = {
   name: 'Grafana Default',
   typography: {
@@ -77,6 +79,22 @@ const theme: GrafanaThemeCommons = {
     lg: '24px',
     xl: '32px',
     gutter: '30px',
+
+    // Next-gen forms spacing variables
+    // TODO: Move variables definition to respective components when implementing
+    formMargin: `${SPACING_BASE * 4}px`,
+    formFieldsetMargin: `${SPACING_BASE * 2}px`,
+    formLegendMargin: `${SPACING_BASE * 2}px`,
+    formInputHeight: `${SPACING_BASE * 4}px`,
+    formInputPaddingHorizontal: `${SPACING_BASE}px`,
+
+    // Used for icons do define spacing between icon and input field
+    // Applied on the right(prefix) or left(suffix)
+    formInputAffixPaddingHorizontal: `${SPACING_BASE / 2}px`,
+
+    formInputMargin: `${SPACING_BASE * 2}px`,
+    formLabelPadding: '0 0 0 2px',
+    formLabelMargin: '0 0 4px 0',
   },
   border: {
     radius: {
diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts
index 74edde3d3c1..d7bd051987d 100644
--- a/packages/grafana-ui/src/types/theme.ts
+++ b/packages/grafana-ui/src/types/theme.ts
@@ -61,6 +61,20 @@ export interface GrafanaThemeCommons {
     lg: string;
     xl: string;
     gutter: string;
+
+    // Next-gen forms spacing variables
+    // TODO: Move variables definition to respective components when implementing
+    formMargin: string;
+    formFieldsetMargin: string;
+    formLegendMargin: string;
+    formInputHeight: string;
+    formInputPaddingHorizontal: string;
+    // Used for icons do define spacing between icon and input field
+    // Applied on the right(prefix) or left(suffix)
+    formInputAffixPaddingHorizontal: string;
+    formInputMargin: string;
+    formLabelPadding: string;
+    formLabelMargin: string;
   };
   border: {
     radius: {