Buttons: Improves vertical alignment in buttons (#23030)

* Buttons: Improves vertical alignment in buttons

* Updated snapshot

* Fixed strict null errors

packages/grafana-data/src/types/datasource.ts

@@ -184,6 +184,7 @@ export abstract class DataSourceApi<
   constructor(instanceSettings: DataSourceInstanceSettings<TOptions>) {
     this.name = instanceSettings.name;
     this.id = instanceSettings.id;
+    this.meta = {} as DataSourcePluginMeta;
   }
 
   /**
@@ -248,7 +249,7 @@ export abstract class DataSourceApi<
   /**
    * static information about the datasource
    */
-  meta?: DataSourcePluginMeta;
+  meta: DataSourcePluginMeta;
 
   /**
    * Used by alerting to check if query contains template variables

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

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Button renders correct html 1`] = `"<button class=\\"css-1kiu3dy-button\\" type=\\"button\\"><span class=\\"css-1beih13\\"><span class=\\"css-1rgbe4\\"><i class=\\"fa fa-plus\\"></i></span><span>Click me</span></span></button>"`;
+exports[`Button renders correct html 1`] = `"<button class=\\"css-12s5hlm-button\\" type=\\"button\\"><span class=\\"css-1beih13\\"><span class=\\"css-1rgbe4\\"><i class=\\"fa fa-plus\\"></i></span><span>Click me</span></span></button>"`;
 
-exports[`LinkButton renders correct html 1`] = `"<a class=\\"css-1kiu3dy-button\\"><span class=\\"css-1beih13\\"><span class=\\"css-1rgbe4\\"><i class=\\"fa fa-plus\\"></i></span><span>Click me</span></span></a>"`;
+exports[`LinkButton renders correct html 1`] = `"<a class=\\"css-12s5hlm-button\\"><span class=\\"css-1beih13\\"><span class=\\"css-1rgbe4\\"><i class=\\"fa fa-plus\\"></i></span><span>Click me</span></span></a>"`;

packages/grafana-ui/src/components/Button/styles.ts

@@ -84,7 +84,7 @@ export const getButtonStyles = stylesFactory(({ theme, size, variant, textAndIco
       font-weight: ${fontWeight};
       font-size: ${fontSize};
       font-family: ${theme.typography.fontFamily.sansSerif};
-      line-height: ${theme.typography.lineHeight.xs};
+      line-height: ${theme.typography.lineHeight.md};
       padding: ${padding};
       vertical-align: middle;
       cursor: pointer;
@@ -120,7 +120,7 @@ const calculateMeasures = (theme: GrafanaTheme, size: ButtonSize, textAndIcon: b
   switch (size) {
     case 'sm': {
       return {
-        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
+        padding: `0 ${theme.spacing.sm}`,
         fontSize: theme.typography.size.sm,
         height: theme.height.sm,
         fontWeight: theme.typography.weight.semibold,
@@ -131,7 +131,7 @@ const calculateMeasures = (theme: GrafanaTheme, size: ButtonSize, textAndIcon: b
       const leftPadding = textAndIcon ? theme.spacing.sm : theme.spacing.md;
 
       return {
-        padding: `${theme.spacing.sm} ${theme.spacing.md} ${theme.spacing.sm} ${leftPadding}`,
+        padding: `0 ${theme.spacing.md} 0 ${leftPadding}`,
         fontSize: theme.typography.size.md,
         height: theme.height.md,
         fontWeight: theme.typography.weight.semibold,
@@ -142,7 +142,7 @@ const calculateMeasures = (theme: GrafanaTheme, size: ButtonSize, textAndIcon: b
       const leftPadding = textAndIcon ? theme.spacing.md : theme.spacing.lg;
 
       return {
-        padding: `${theme.spacing.md} ${theme.spacing.lg} ${theme.spacing.md} ${leftPadding}`,
+        padding: `0 ${theme.spacing.lg} 0 ${leftPadding}`,
         fontSize: theme.typography.size.lg,
         height: theme.height.lg,
         fontWeight: theme.typography.weight.regular,
@@ -153,7 +153,7 @@ const calculateMeasures = (theme: GrafanaTheme, size: ButtonSize, textAndIcon: b
       const leftPadding = textAndIcon ? theme.spacing.sm : theme.spacing.md;
 
       return {
-        padding: `${theme.spacing.sm} ${theme.spacing.md} ${theme.spacing.sm} ${leftPadding}`,
+        padding: `0 ${theme.spacing.md} 0 ${leftPadding}`,
         fontSize: theme.typography.size.base,
         height: theme.height.md,
         fontWeight: theme.typography.weight.regular,

packages/grafana-ui/src/components/Forms/Button.tsx

@@ -87,7 +87,7 @@ export const getButtonStyles = stylesFactory(({ theme, size, variant }: StylePro
         align-items: center;
         font-weight: ${theme.typography.weight.semibold};
         font-family: ${theme.typography.fontFamily.sansSerif};
-        line-height: ${theme.typography.lineHeight.sm};
+        line-height: ${theme.typography.lineHeight.md};
         font-size: ${fontSize};
         padding: ${padding};
         height: ${height};

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

@@ -175,8 +175,8 @@ $zindex-typeahead: ${theme.zIndex.typeahead};
 //
 
 $btn-padding-x: 14px !default;
-$btn-padding-y: 8px !default;
-$btn-line-height: 1 !default;
+$btn-padding-y: 0 !default;
+$btn-line-height: $line-height-base;
 $btn-font-weight: ${theme.typography.weight.semibold} !default;
 
 $btn-padding-x-sm: 7px !default;

public/app/features/dashboard/components/DashExportModal/DashboardExporter.ts

@@ -81,9 +81,9 @@ export class DashboardExporter {
             // add data source type to require list
             requires['datasource' + ds.meta?.id] = {
               type: 'datasource',
-              id: ds.meta?.id,
-              name: ds.meta?.name,
-              version: ds.meta?.info.version || '1.0.0',
+              id: ds.meta.id,
+              name: ds.meta.name,
+              version: ds.meta.info.version || '1.0.0',
             };
 
             // if used via variable we can skip templatizing usage

public/sass/_variables.generated.scss

@@ -178,8 +178,8 @@ $zindex-typeahead: 1060;
 //
 
 $btn-padding-x: 14px !default;
-$btn-padding-y: 8px !default;
-$btn-line-height: 1 !default;
+$btn-padding-y: 0 !default;
+$btn-line-height: $line-height-base;
 $btn-font-weight: 500 !default;
 
 $btn-padding-x-sm: 7px !default;

public/sass/components/_navbar.scss

@@ -117,8 +117,9 @@ i.navbar-page-btn__search {
   display: flex;
   align-items: center;
   font-weight: $btn-font-weight;
-  padding: 6px $space-sm;
-  line-height: 18px;
+  padding: 0 $space-sm;
+  line-height: 32px;
+  height: 32px;
   color: $text-muted;
   border: 1px solid $navbar-button-border;
   margin-left: $space-xs;
@@ -162,12 +163,10 @@ i.navbar-page-btn__search {
   }
 
   &--tight {
-    padding: 7px 4px;
+    padding: 0px 4px;
 
     .fa {
       font-size: 14px;
-      position: relative;
-      top: 1px;
     }
   }
 

scripts/ci-frontend-metrics.sh

@@ -3,7 +3,8 @@
 echo -e "Collecting code stats (typescript errors & more)"
 
 
-ERROR_COUNT_LIMIT=812
+
+ERROR_COUNT_LIMIT=798
 DIRECTIVES_LIMIT=172
 CONTROLLERS_LIMIT=139