Panels: No title will no longer make panel header take up space (#16884)

* Panels: Initial poc of no panel titles

* moving panel-container to DashboardPanel

* Starting to work

* Gauge fix

* Panels: tweaked panel padding and title z-index stuff

* Panels: changed panel padding a bit and simplified it by having same padding in vertical and horizontal

* Lots of tweaks to panel padding related stuff

* Updated snapshot

* Added test dashboard

* Final refactorings

* Trim title befgor applying panel-container--no-title class

* Remove unnecessary type annotation

* Panels: hasTitle no need to trim

* Gauge: fixed font family

packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap

@@ -182,10 +182,8 @@ exports[`Render should render with base threshold 1`] = `
                               "sm": "24px",
                             },
                             "name": "Grafana Dark",
-                            "panelPadding": Object {
-                              "horizontal": 16,
-                              "vertical": 8,
-                            },
+                            "panelHeaderHeight": 28,
+                            "panelPadding": 8,
                             "spacing": Object {
                               "d": "14px",
                               "gutter": "30px",
@@ -345,10 +343,8 @@ exports[`Render should render with base threshold 1`] = `
                                     "sm": "24px",
                                   },
                                   "name": "Grafana Dark",
-                                  "panelPadding": Object {
-                                    "horizontal": 16,
-                                    "vertical": 8,
-                                  },
+                                  "panelHeaderHeight": 28,
+                                  "panelPadding": 8,
                                   "spacing": Object {
                                     "d": "14px",
                                     "gutter": "30px",

packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx

@@ -74,12 +74,12 @@ export class VizRepeater<T> extends PureComponent<Props<T>, State<T>> {
 
     if (orientation === VizOrientation.Horizontal) {
       repeaterStyle.flexDirection = 'column';
-      itemStyles.margin = `${itemSpacing / 2}px 0`;
+      itemStyles.marginBottom = `${itemSpacing}px`;
       vizWidth = width;
       vizHeight = height / values.length - itemSpacing;
     } else {
       repeaterStyle.flexDirection = 'row';
-      itemStyles.margin = `0 ${itemSpacing / 2}px`;
+      itemStyles.marginRight = `${itemSpacing}px`;
       vizHeight = height;
       vizWidth = width / values.length - itemSpacing;
     }

packages/grafana-ui/src/themes/_variables.scss.tmpl.ts

@@ -197,9 +197,9 @@ $side-menu-width: 60px;
 
 // dashboard
 $dashboard-padding: $space-md;
-$panel-padding: 0 ${theme.panelPadding.horizontal}px ${theme.panelPadding.vertical}px ${
-    theme.panelPadding.horizontal
-  }px;
+$panel-padding: ${theme.panelPadding}px;
+$panel-header-height: ${theme.panelHeaderHeight}px;
+$panel-header-z-index: 10;
 
 // tabs
 $tabs-padding: 10px 15px 9px;

packages/grafana-ui/src/themes/default.ts

@@ -72,10 +72,8 @@ const theme: GrafanaThemeCommons = {
     md: '32px',
     lg: '48px',
   },
-  panelPadding: {
-    horizontal: 16,
-    vertical: 8,
-  },
+  panelPadding: 8,
+  panelHeaderHeight: 28,
   zIndex: {
     dropdown: '1000',
     navbarFixed: '1020',

packages/grafana-ui/src/types/theme.ts

@@ -77,10 +77,8 @@ export interface GrafanaThemeCommons {
     md: string;
     lg: string;
   };
-  panelPadding: {
-    horizontal: number;
-    vertical: number;
-  };
+  panelPadding: number;
+  panelHeaderHeight: number;
   zIndex: {
     dropdown: string;
     navbarFixed: string;