Fix: align panel padding between sass & js theme (#16404)

6 years ago · 35e68b868e
parent 6d3b6f3c2f
commit 35e68b868e
4 changed files with 10 additions and 8 deletions
--- a/packages/grafana-ui/src/components/ThresholdsEditor/snapshots/ThresholdsEditor.test.tsx.snap
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/snapshots/ThresholdsEditor.test.tsx.snap
@ -178,8 +178,8 @@ exports[`Render should render with base threshold 1`] = `
                            },
                            "name": "Grafana Dark",
                            "panelPadding": Object {
-                              "horizontal": 10,
-                              "vertical": 5,
+                              "horizontal": 16,
+                              "vertical": 8,
                            },
                            "spacing": Object {
                              "d": "14px",
@ -336,8 +336,8 @@ exports[`Render should render with base threshold 1`] = `
                                  },
                                  "name": "Grafana Dark",
                                  "panelPadding": Object {
-                                    "horizontal": 10,
-                                    "vertical": 5,
+                                    "horizontal": 16,
+                                    "vertical": 8,
                                  },
                                  "spacing": Object {
                                    "d": "14px",
--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
@ -190,7 +190,9 @@ $side-menu-width: 60px;

 // dashboard
 $dashboard-padding: $space-md;
-$panel-padding: 0 $space-md $space-sm $space-md;
+$panel-padding: 0 ${theme.panelPadding.horizontal}px ${theme.panelPadding.vertical}px ${
+    theme.panelPadding.horizontal
+  }px;

 // tabs
 $tabs-padding: 10px 15px 9px;
--- a/packages/grafana-ui/src/themes/default.ts
+++ b/packages/grafana-ui/src/themes/default.ts
@ -68,8 +68,8 @@ const theme: GrafanaThemeCommons = {
    },
  },
  panelPadding: {
-    horizontal: 10,
-    vertical: 5,
+    horizontal: 16,
+    vertical: 8,
  },
  zIndex: {
    dropdown: '1000',
--- a/public/sass/_variables.generated.scss
+++ b/public/sass/_variables.generated.scss
@ -193,7 +193,7 @@ $side-menu-width: 60px;

 // dashboard
 $dashboard-padding: $space-md;
-$panel-padding: 0 $space-md $space-sm $space-md;
+$panel-padding: 0 16px 8px 16px;

 // tabs
 $tabs-padding: 10px 15px 9px;