Theme: Reworking button styling (#16362)

* added new variables for height in theme, added height to gui button large, replaced add gicon with regular gicon, replaced + with gicon, changed button display to flex

* set fixed height to large button, removed xlarge button and replaced with large button

* removed button-mini and replaced with button-small, set fixed height to default button and button-small

* fixed padding for default and large button, fixed height for navbar button, fixed snapshots

* fixed padding and margin on navbar buttons

* gave special height to login btn-primary

* readded btn-mini class with same styling as btn-small and a deprecated notice

* fixed add panel widget buttons

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

@@ -65,35 +65,28 @@ const getButtonStyles = (theme: GrafanaTheme, size: ButtonSize, variant: ButtonV
     background,
     fontSize,
     iconDistance,
+    height,
     fontWeight = theme.typography.weight.semibold;
 
   switch (size) {
-    case ButtonSize.ExtraSmall:
-      padding = `${theme.spacing.xs} ${theme.spacing.sm}`;
-      fontSize = theme.typography.size.xs;
-      iconDistance = theme.spacing.xs;
-      break;
     case ButtonSize.Small:
       padding = `${theme.spacing.xs} ${theme.spacing.sm}`;
       fontSize = theme.typography.size.sm;
       iconDistance = theme.spacing.xs;
+      height = theme.height.sm;
       break;
     case ButtonSize.Large:
       padding = `${theme.spacing.md} ${theme.spacing.lg}`;
       fontSize = theme.typography.size.lg;
       fontWeight = theme.typography.weight.regular;
       iconDistance = theme.spacing.sm;
-      break;
-    case ButtonSize.ExtraLarge:
-      padding = `${theme.spacing.md} ${theme.spacing.lg}`;
-      fontSize = theme.typography.size.lg;
-      fontWeight = theme.typography.weight.regular;
-      iconDistance = theme.spacing.sm;
+      height = theme.height.lg;
       break;
     default:
       padding = `${theme.spacing.sm} ${theme.spacing.md}`;
       iconDistance = theme.spacing.sm;
       fontSize = theme.typography.size.base;
+      height = theme.height.md;
   }
 
   switch (variant) {
@@ -133,7 +126,8 @@ const getButtonStyles = (theme: GrafanaTheme, size: ButtonSize, variant: ButtonV
   return {
     button: css`
       label: button;
-      display: inline-block;
+      display: flex;
+      align-items: center;
       font-weight: ${fontWeight};
       font-size: ${fontSize};
       font-family: ${theme.typography.fontFamily.sansSerif};
@@ -143,6 +137,7 @@ const getButtonStyles = (theme: GrafanaTheme, size: ButtonSize, variant: ButtonV
       vertical-align: middle;
       cursor: pointer;
       border: none;
+      height: ${height};
       border-radius: ${borderRadius};
       ${background};
 
@@ -161,6 +156,7 @@ const getButtonStyles = (theme: GrafanaTheme, size: ButtonSize, variant: ButtonV
     icon: css`
       label: button-icon;
       margin-right: ${iconDistance};
+      filter: brightness(100);
     `,
   };
 };

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

@@ -48,7 +48,7 @@ ButtonStories.add('with icon', () => {
       Plus: 'fa fa-plus',
       User: 'fa fa-user',
       Gear: 'fa fa-gear',
-      Annotation: 'gicon gicon-add-annotation',
+      Annotation: 'gicon gicon-annotation',
     },
     'fa fa-plus'
   );

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

@@ -176,6 +176,11 @@ exports[`Render should render with base threshold 1`] = `
                               "white": "#ffffff",
                               "yellow": "#ecbb13",
                             },
+                            "height": Object {
+                              "lg": "48px",
+                              "md": "32px",
+                              "sm": "24px",
+                            },
                             "name": "Grafana Dark",
                             "panelPadding": Object {
                               "horizontal": 16,
@@ -334,6 +339,11 @@ exports[`Render should render with base threshold 1`] = `
                                     "white": "#ffffff",
                                     "yellow": "#ecbb13",
                                   },
+                                  "height": Object {
+                                    "lg": "48px",
+                                    "md": "32px",
+                                    "sm": "24px",
+                                  },
                                   "name": "Grafana Dark",
                                   "panelPadding": Object {
                                     "horizontal": 16,

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

@@ -87,6 +87,12 @@ $container-max-widths: (
 $grid-columns: 12 !default;
 $grid-gutter-width: ${theme.spacing.gutter} !default;
 
+// Component heights
+// -------------------------
+$height-sm: ${theme.height.sm};
+$height-md: ${theme.height.md};
+$height-lg: ${theme.height.lg};
+
 // Typography
 // -------------------------
 

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

@@ -67,6 +67,11 @@ const theme: GrafanaThemeCommons = {
       sm: '1px',
     },
   },
+  height: {
+    sm: '24px',
+    md: '32px',
+    lg: '48px',
+  },
   panelPadding: {
     horizontal: 16,
     vertical: 8,

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

@@ -72,6 +72,11 @@ export interface GrafanaThemeCommons {
       sm: string;
     };
   };
+  height: {
+    sm: string;
+    md: string;
+    lg: string;
+  };
   panelPadding: {
     horizontal: number;
     vertical: number;