Merge pull request #15940 from grafana/8px-system-margins3

Removed headings-margin-bottom and gf-form-margin

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

 .form-field {
-  margin-bottom: $gf-form-margin;
+  margin-bottom: $space-xxs;
   display: flex;
   flex-direction: row;
   align-items: center;

packages/grafana-ui/src/components/Select/_Select.scss

@@ -3,7 +3,7 @@ $select-input-bg-disabled: $input-bg-disabled;
 
 @mixin select-control() {
   width: 100%;
-  margin-right: $gf-form-margin;
+  margin-right: $space-xs;
   @include border-radius($input-border-radius-sm);
   background-color: $input-bg;
 }

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

@@ -17,6 +17,7 @@ $enable-hover-media-query: false !default;
 // Control the default styling of most Bootstrap elements by modifying these
 // variables. Mostly focused on spacing.
 
+$space-xxs: ${theme.spacing.xxs} !default;
 $space-xs: ${theme.spacing.xs} !default;
 $space-sm: ${theme.spacing.s} !default;
 $space-md: ${theme.spacing.m} !default;
@@ -111,7 +112,6 @@ $font-size-h4: ${theme.typography.heading.h4} !default;
 $font-size-h5: ${theme.typography.heading.h5} !default;
 $font-size-h6: ${theme.typography.heading.h6} !default;
 
-$headings-margin-bottom: ($spacer / 2) !default;
 $headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $headings-font-weight: ${theme.typography.weight.normal} !default;
 $headings-line-height: ${theme.typography.lineHeight.s} !default;
@@ -165,7 +165,6 @@ $input-padding-y-lg: 10px !default;
 
 $input-height: 35px !default;
 
-$gf-form-margin: 3px;
 $gf-form-input-height: 35px;
 
 $cursor-disabled: not-allowed !default;

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

@@ -44,6 +44,7 @@ const theme: GrafanaThemeCommons = {
   },
   spacing: {
     d: '14px',
+    xxs: '2px',
     xs: '4px',
     s: '8px',
     m: '16px',

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

@@ -49,6 +49,7 @@ export interface GrafanaThemeCommons {
   };
   spacing: {
     d: string;
+    xxs: string;
     xs: string;
     s: string;
     m: string;

public/sass/_variables.generated.scss

@@ -20,6 +20,7 @@ $enable-hover-media-query: false !default;
 // Control the default styling of most Bootstrap elements by modifying these
 // variables. Mostly focused on spacing.
 
+$space-xxs: 2px !default;
 $space-xs: 4px !default;
 $space-sm: 8px !default;
 $space-md: 16px !default;
@@ -114,7 +115,6 @@ $font-size-h4: 18px !default;
 $font-size-h5: 16px !default;
 $font-size-h6: 14px !default;
 
-$headings-margin-bottom: ($spacer / 2) !default;
 $headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $headings-font-weight: 400 !default;
 $headings-line-height: 1.1 !default;
@@ -168,7 +168,6 @@ $input-padding-y-lg: 10px !default;
 
 $input-height: 35px !default;
 
-$gf-form-margin: 3px;
 $gf-form-input-height: 35px;
 
 $cursor-disabled: not-allowed !default;

public/sass/base/_type.scss

@@ -109,7 +109,7 @@ h6,
 .h4,
 .h5,
 .h6 {
-  margin-bottom: $headings-margin-bottom;
+  margin-bottom: $space-sm;
   font-family: $headings-font-family;
   font-weight: $headings-font-weight;
   line-height: $headings-line-height;

public/sass/components/_gf-form.scss

-$gf-form-margin: 3px;
 $input-border: 1px solid $input-border-color;
 
 .gf-form {
-  margin-bottom: $gf-form-margin;
+  margin-bottom: $space-xxs;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
@@ -33,7 +32,7 @@ $input-border: 1px solid $input-border-color;
 
 .gf-form--has-input-icon {
   position: relative;
-  margin-right: $gf-form-margin;
+  margin-right: $space-xs;
 
   .gf-form-input-icon {
     position: absolute;
@@ -82,7 +81,7 @@ $input-border: 1px solid $input-border-color;
   align-content: flex-start;
 
   .gf-form + .gf-form {
-    margin-left: $gf-form-margin;
+    margin-left: $space-xs;
   }
 
   &--nowrap {
@@ -147,14 +146,14 @@ $input-border: 1px solid $input-border-color;
 }
 
 .gf-form-label + .gf-form-label {
-  margin-right: $gf-form-margin;
+  margin-right: $space-xs;
 }
 
 .gf-form-pre {
   display: block;
   flex-grow: 1;
   margin: 0;
-  margin-right: $gf-form-margin;
+  margin-right: $space-xs;
   border: $input-btn-border-width solid transparent;
   border-left: none;
   @include border-radius($label-border-radius-sm);
@@ -336,7 +335,7 @@ $input-border: 1px solid $input-border-color;
 
 .gf-form-btn {
   padding: $input-padding-y $input-padding-x;
-  margin-right: $gf-form-margin;
+  margin-right: $space-xs;
   line-height: $input-line-height;
   font-size: $font-size-sm;
 
@@ -354,7 +353,7 @@ $input-border: 1px solid $input-border-color;
 }
 
 .gf-form-dropdown-typeahead {
-  margin-right: $gf-form-margin;
+  //margin-right: $space-xs; ?
   position: relative;
 
   &::after {
@@ -391,7 +390,7 @@ $input-border: 1px solid $input-border-color;
   }
 
   &--header {
-    margin-bottom: $gf-form-margin;
+    margin-bottom: $space-xxs;
   }
 
   &--no-padding {

public/sass/components/_infobox.scss

@@ -5,7 +5,7 @@
   margin-bottom: 2rem;
   border-top: 3px solid $info-box-border-color;
   margin-bottom: $spacer;
-  margin-right: $gf-form-margin;
+  margin-right: $space-xs;
   box-shadow: $card-shadow;
   flex-grow: 1;
 

public/sass/utils/_widths.scss

@@ -8,20 +8,20 @@
 // widths
 @for $i from 1 through 30 {
   .width-#{$i} {
-    width: ($spacer * $i) - $gf-form-margin !important;
+    width: ($spacer * $i) - $space-xs !important;
   }
 }
 
 @for $i from 1 through 30 {
   .max-width-#{$i} {
-    max-width: ($spacer * $i) - $gf-form-margin !important;
+    max-width: ($spacer * $i) - $space-xs !important;
     flex-grow: 1;
   }
 }
 
 @for $i from 1 through 30 {
   .min-width-#{$i} {
-    min-width: ($spacer * $i) - $gf-form-margin !important;
+    min-width: ($spacer * $i) - $space-xs !important;
   }
 }