Refactor: Theme input padding variables (#16048)

* removed input padding variables and replaced with new inset variables, also removed unused class in _gf-form

* removed last input padding variable

* removed table-cell-padding variable

* added input padding variable to template file

* fixed input-padding variable

* removed regualt inset variable(for now), added input-padding to a class

* removed empty line

packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss

@@ -69,7 +69,7 @@
 
 .thresholds-row-input-inner-value > input {
   height: $input-height;
-  padding: $input-padding-y $input-padding-x;
+  padding: $input-padding;
   width: 150px;
   border-top: 1px solid $input-label-border-color;
   border-bottom: 1px solid $input-label-border-color;
@@ -96,7 +96,7 @@
   align-items: center;
   justify-content: center;
   height: $input-height;
-  padding: $input-padding-y $input-padding-x;
+  padding: $input-padding;
   width: 42px;
   background-color: $input-label-bg;
   border: 1px solid $input-label-border-color;

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

@@ -17,12 +17,15 @@ $enable-hover-media-query: false !default;
 // Control the default styling of most Bootstrap elements by modifying these
 // variables. Mostly focused on spacing.
 
+$space-inset-squish-md: ${theme.spacing.insetSquishMd} !default;
+
 $space-xxs: ${theme.spacing.xxs} !default;
 $space-xs: ${theme.spacing.xs} !default;
 $space-sm: ${theme.spacing.sm} !default;
 $space-md: ${theme.spacing.md} !default;
 $space-lg: ${theme.spacing.lg} !default;
 $space-xl: ${theme.spacing.xl} !default;
+
 $spacer: ${theme.spacing.d} !default;
 $spacer-x: $spacer !default;
 $spacer-y: $spacer !default;
@@ -132,15 +135,7 @@ $page-sidebar-margin: 56px;
 $link-decoration: ${theme.typography.link.decoration} !default;
 $link-hover-decoration: ${theme.typography.link.hoverDecoration} !default;
 
-// Tables
-//
-// Customizes the \`.table\` component with basic values, each used across all table variations.
-
-$table-cell-padding: 4px 10px !default;
-
 // Forms
-$input-padding-x: 10px !default;
-$input-padding-y: 8px !default;
 $input-line-height: 18px !default;
 
 $input-border-radius: 0 $border-radius $border-radius 0 !default;
@@ -149,9 +144,7 @@ $input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default;
 $label-border-radius: $border-radius 0 0 $border-radius !default;
 $label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default;
 
-$input-padding-x-lg: 20px !default;
-$input-padding-y-lg: 10px !default;
-
+$input-padding: ${theme.spacing.sm};
 $input-height: 35px !default;
 
 $cursor-disabled: not-allowed !default;

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

@@ -47,6 +47,7 @@ const theme: GrafanaThemeCommons = {
     xl: '1200px',
   },
   spacing: {
+    insetSquishMd: '4px 8px',
     d: '14px',
     xxs: '2px',
     xs: '4px',

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

@@ -52,6 +52,7 @@ export interface GrafanaThemeCommons {
     };
   };
   spacing: {
+    insetSquishMd: string;
     d: string;
     xxs: string;
     xs: string;

public/sass/_variables.generated.scss

@@ -20,12 +20,15 @@ $enable-hover-media-query: false !default;
 // Control the default styling of most Bootstrap elements by modifying these
 // variables. Mostly focused on spacing.
 
+$space-inset-squish-md: 4px 8px !default;
+
 $space-xxs: 2px !default;
 $space-xs: 4px !default;
 $space-sm: 8px !default;
 $space-md: 16px !default;
 $space-lg: 24px !default;
 $space-xl: 32px !default;
+
 $spacer: 14px !default;
 $spacer-x: $spacer !default;
 $spacer-y: $spacer !default;
@@ -135,15 +138,7 @@ $page-sidebar-margin: 56px;
 $link-decoration: none !default;
 $link-hover-decoration: none !default;
 
-// Tables
-//
-// Customizes the `.table` component with basic values, each used across all table variations.
-
-$table-cell-padding: 4px 10px !default;
-
 // Forms
-$input-padding-x: 10px !default;
-$input-padding-y: 8px !default;
 $input-line-height: 18px !default;
 
 $input-border-radius: 0 $border-radius $border-radius 0 !default;
@@ -152,9 +147,7 @@ $input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default;
 $label-border-radius: $border-radius 0 0 $border-radius !default;
 $label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default;
 
-$input-padding-x-lg: 20px !default;
-$input-padding-y-lg: 10px !default;
-
+$input-padding: 8px;
 $input-height: 35px !default;
 
 $cursor-disabled: not-allowed !default;

public/sass/base/_forms.scss

@@ -224,7 +224,7 @@ input[type='checkbox'].cr1:checked + label {
 .form-control-success,
 .form-control-warning,
 .form-control-danger {
-  padding-right: ($input-padding-x * 3);
+  padding-right: $space-xl;
   background-repeat: no-repeat;
   background-position: center right ($input-height / 4);
   background-size: ($input-height / 2) ($input-height / 2);

public/sass/base/_reboot.scss

@@ -250,8 +250,8 @@ table {
 }
 
 caption {
-  padding-top: $table-cell-padding;
-  padding-bottom: $table-cell-padding;
+  padding-top: $space-inset-squish-md;
+  padding-bottom: $space-inset-squish-md;
   color: $text-muted;
   text-align: left;
   caption-side: bottom;

public/sass/components/_dropdown.scss

@@ -265,7 +265,7 @@
 .dropdown-submenu > a::after {
   position: absolute;
   top: 35%;
-  right: $input-padding-x;
+  right: $space-sm;
   background-color: transparent;
   color: $text-color-weak;
   font: normal normal normal $font-size-sm/1 FontAwesome;

public/sass/components/_filter-table.scss

@@ -21,7 +21,7 @@
 
   th {
     width: auto;
-    padding: $table-cell-padding;
+    padding: $space-inset-squish-md;
     text-align: left;
     line-height: 30px;
     height: 30px;
@@ -29,7 +29,7 @@
   }
 
   td {
-    padding: $table-cell-padding;
+    padding: $space-inset-squish-md;
     line-height: 30px;
     height: 30px;
     white-space: nowrap;
@@ -53,7 +53,7 @@
 
     a {
       display: block;
-      padding: $table-cell-padding;
+      padding: $space-inset-squish-md;
     }
   }
 

public/sass/components/_gf-form.scss

@@ -98,7 +98,7 @@ $input-border: 1px solid $input-border-color;
 }
 
 .gf-form-label {
-  padding: $input-padding-y $input-padding-x;
+  padding: $input-padding;
   flex-shrink: 0;
   font-weight: $font-weight-semi-bold;
   font-size: $font-size-sm;
@@ -167,7 +167,7 @@ $input-border: 1px solid $input-border-color;
   display: block;
   width: 100%;
   height: $input-height;
-  padding: $input-padding-y $input-padding-x;
+  padding: $input-padding;
   font-size: $font-size-md;
   line-height: $input-line-height;
   color: $input-color;
@@ -195,11 +195,6 @@ $input-border: 1px solid $input-border-color;
     display: none;
   }
 
-  &.gf-input-small {
-    padding: $input-padding-y/3 $input-padding-x/3;
-    font-size: $font-size-xs;
-  }
-
   // Customize the `:focus` state to imitate native WebKit styles.
   @include form-control-focus();
 
@@ -225,7 +220,7 @@ $input-border: 1px solid $input-border-color;
   }
 
   &--dropdown {
-    padding-right: $input-padding-x * 2;
+    padding-right: $space-lg;
 
     &::after {
       position: absolute;
@@ -251,7 +246,7 @@ $input-border: 1px solid $input-border-color;
   }
 
   &--has-help-icon {
-    padding-right: $input-padding-x * 3;
+    padding-right: $space-xl;
   }
 }
 
@@ -272,14 +267,14 @@ $input-border: 1px solid $input-border-color;
   .gf-form-select-icon {
     position: absolute;
     z-index: 1;
-    left: $input-padding-x;
+    left: $input-padding;
     top: 50%;
     margin-top: -7px;
 
     & + .gf-form-input {
       position: relative;
       z-index: 2;
-      padding-left: $input-padding-x * 3;
+      padding-left: $space-xl;
       background-color: transparent;
 
       option {
@@ -296,7 +291,7 @@ $input-border: 1px solid $input-border-color;
   select.gf-form-input {
     text-indent: 0.01px;
     text-overflow: '';
-    padding-right: $input-padding-x * 3;
+    padding-right: $space-xl;
     appearance: none;
 
     &:-moz-focusring {
@@ -324,7 +319,7 @@ $input-border: 1px solid $input-border-color;
 
   &--has-help-icon {
     &::after {
-      right: $input-padding-x * 3;
+      right: $space-xl;
     }
   }
 }
@@ -334,7 +329,7 @@ $input-border: 1px solid $input-border-color;
 }
 
 .gf-form-btn {
-  padding: $input-padding-y $input-padding-x;
+  padding: $input-padding;
   margin-right: $space-xs;
   line-height: $input-line-height;
   font-size: $font-size-sm;
@@ -348,7 +343,7 @@ $input-border: 1px solid $input-border-color;
     font-size: $font-size-base;
     line-height: $input-line-height;
     margin: -6px -5px 0 5px;
-    padding: $input-padding-y/2 $input-padding-x/2;
+    padding: $space-xs;
   }
 }
 
@@ -359,7 +354,7 @@ $input-border: 1px solid $input-border-color;
   &::after {
     position: absolute;
     top: 35%;
-    right: $input-padding-x;
+    right: $space-sm;
     background-color: transparent;
     color: $input-color;
     font: normal normal normal $font-size-sm/1 FontAwesome;

public/sass/components/_slate_editor.scss

@@ -8,7 +8,7 @@
 .slate-query-field__wrapper {
   position: relative;
   display: inline-block;
-  padding: $input-padding-y $input-padding-x;
+  padding: $input-padding;
   min-height: $input-height;
   width: 100%;
   cursor: text;
@@ -51,14 +51,13 @@
     color: $text-color-weak;
     font-size: $font-size-sm;
     line-height: $line-height-base;
-    padding: $input-padding-y $input-padding-x;
+    padding: $space-sm;
   }
 
   .typeahead-item {
     height: auto;
     font-family: $font-family-monospace;
-    padding: $input-padding-y $input-padding-x;
-    padding-left: $input-padding-x-lg;
+    padding: $space-sm $space-sm $space-sm $space-md;
     font-size: $font-size-sm;
     text-overflow: ellipsis;
     overflow: hidden;

public/sass/components/_submenu.scss

@@ -36,7 +36,7 @@
 
 .variable-value-link {
   padding-right: 10px;
-  padding: $input-padding-y $input-padding-x;
+  padding: $space-sm;
   background-color: $input-bg;
   border: 1px solid $input-border-color;
   border-radius: $input-border-radius;

public/sass/components/_tagsinput.scss

@@ -17,7 +17,7 @@
     box-sizing: border-box;
 
     &.gf-form-input--has-help-icon {
-      padding-right: $input-padding-x * 3;
+      padding-right: $space-xl;
     }
   }
 

public/sass/components/_toolbar.scss

@@ -22,7 +22,7 @@
 }
 
 .toolbar__main {
-  padding: 0 $input-padding-x;
+  padding: 0 $space-sm;
   font-size: $font-size-md;
   line-height: $input-line-height;
   color: $input-color;