Components: IconButton (#23510)

* IconButton: New component to share pointer, size & hover style for icon buttons

* Progress

* IconButton: new component

* Think I am done

* Updated snapshots

* Do not like the black button reverting that, and not the plus-circle changed to plus

* fixed test

* fixed e2e test

* Fixed ts issue

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

@@ -214,6 +214,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     // TODO: move to background section
     bodyBg: string;
     pageBg: string;
+    pageHeaderBg: string;
     headingColor: string;
 
     pageHeaderBorder: string;

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

@@ -1,7 +1,7 @@
 import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, useContext } from 'react';
 import { css, cx } from 'emotion';
 import tinycolor from 'tinycolor2';
-import { selectThemeVariant, stylesFactory, ThemeContext } from '../../themes';
+import { stylesFactory, ThemeContext } from '../../themes';
 import { IconName } from '../../types/icon';
 import { getFocusStyle, getPropertiesForButtonSize } from '../Forms/commonStyles';
 import { GrafanaTheme } from '@grafana/data';
@@ -25,24 +25,17 @@ const buttonVariantStyles = (from: string, to: string, textColor: string) => css
 const getPropertiesForVariant = (theme: GrafanaTheme, variant: ButtonVariant) => {
   switch (variant) {
     case 'secondary':
-      const from = selectThemeVariant({ light: theme.colors.gray7, dark: theme.colors.gray10 }, theme.type) as string;
+      const from = theme.isLight ? theme.colors.gray7 : theme.colors.gray15;
-      const to = selectThemeVariant(
+      const to = theme.isLight
-        {
+        ? tinycolor(from)
-          light: tinycolor(from)
             .darken(5)
-            .toString(),
+            .toString()
-          dark: theme.colors.gray05,
+        : tinycolor(from)
-        },
+            .lighten(4)
-        theme.type
+            .toString();
-      ) as string;
-
       return {
-        borderColor: selectThemeVariant({ light: theme.colors.gray85, dark: theme.colors.gray25 }, theme.type),
+        borderColor: theme.isLight ? theme.colors.gray85 : theme.colors.gray25,
-        background: buttonVariantStyles(
+        background: buttonVariantStyles(from, to, theme.isLight ? theme.colors.gray25 : theme.colors.gray4),
-          from,
-          to,
-          selectThemeVariant({ light: theme.colors.gray25, dark: theme.colors.gray4 }, theme.type) as string
-        ),
       };
 
     case 'destructive':
@@ -74,12 +67,13 @@ const getPropertiesForVariant = (theme: GrafanaTheme, variant: ButtonVariant) =>
 export interface StyleProps {
   theme: GrafanaTheme;
   size: ComponentSize;
+  icon?: IconName;
   variant: ButtonVariant;
   textAndIcon?: boolean;
 }
 
-export const getButtonStyles = stylesFactory(({ theme, size, variant }: StyleProps) => {
+export const getButtonStyles = stylesFactory(({ theme, size, variant, icon }: StyleProps) => {
-  const { padding, fontSize, height } = getPropertiesForButtonSize(theme, size);
+  const { padding, fontSize, height } = getPropertiesForButtonSize(theme, size, icon);
   const { background, borderColor, variantStyles } = getPropertiesForVariant(theme, variant);
 
   return {
@@ -146,6 +140,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       theme,
       size: otherProps.size || 'md',
       variant: variant || 'primary',
+      icon,
     });
 
     return (
@@ -168,6 +163,7 @@ export const LinkButton = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
       theme,
       size: otherProps.size || 'md',
       variant: variant || 'primary',
+      icon,
     });
 
     return (

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

@@ -12,7 +12,7 @@ CallToActionCardStories.add('default', () => {
   const ctaElements: { [key: string]: JSX.Element } = {
     custom: <h1>This is just H1 tag, you can any component as CTA element</h1>,
     button: (
-      <Button size="lg" icon="plus-circle" onClick={action('cta button clicked')}>
+      <Button size="lg" icon="plus" onClick={action('cta button clicked')}>
         Add datasource
       </Button>
     ),

packages/grafana-ui/src/components/DataLinks/DataLinksEditor.tsx

@@ -73,7 +73,7 @@ export const DataLinksEditor: FC<DataLinksEditorProps> = React.memo(
         )}
 
         {(!value || (value && value.length < (maxLinks || Infinity))) && (
-          <Button variant="secondary" icon="plus-circle" onClick={() => onAdd()}>
+          <Button variant="secondary" icon="plus" onClick={() => onAdd()}>
             Add link
           </Button>
         )}

packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.test.tsx

@@ -57,7 +57,7 @@ describe('Render', () => {
         },
       },
     });
-    const removeButton = wrapper.find('Button').find({ variant: 'destructive' });
+    const removeButton = wrapper.find('Button').at(1);
     removeButton.simulate('click', { preventDefault: () => {} });
     expect(wrapper.find('FormField').exists()).toBeFalsy();
     expect(wrapper.find('SecretFormField').exists()).toBeFalsy();

packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx

@@ -76,7 +76,7 @@ const CustomHeaderRow: React.FC<CustomHeaderRowProps> = ({ header, onBlur, onCha
         onChange={e => onChange({ ...header, value: e.target.value })}
         onBlur={onBlur}
       />
-      <Button variant="destructive" size="xs" onClick={_e => onRemove(header.id)}>
+      <Button variant="secondary" size="xs" onClick={_e => onRemove(header.id)}>
         <i className="fa fa-trash" />
       </Button>
     </div>
@@ -203,12 +203,12 @@ export class CustomHeadersSettings extends PureComponent<Props, State> {
         <div className="gf-form">
           <Button
             variant="secondary"
-            size="xs"
+            icon="plus"
             onClick={e => {
               this.onHeaderAdd();
             }}
           >
-            Add Header
+            Add header
           </Button>
         </div>
       </div>

packages/grafana-ui/src/components/Forms/commonStyles.ts

@@ -1,6 +1,7 @@
 import { css } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
 import { ComponentSize } from '../../types/size';
+import { IconName } from '../../types';
 
 export const getFocusCss = (theme: GrafanaTheme) => `
   outline: 2px dotted transparent;
@@ -90,34 +91,29 @@ export const inputSizesPixels = (size: string) => {
   }
 };
 
-export const getPropertiesForButtonSize = (theme: GrafanaTheme, size: ComponentSize) => {
+export const getPropertiesForButtonSize = (theme: GrafanaTheme, size: ComponentSize, icon?: IconName) => {
+  const { spacing, typography, height } = theme;
+
   switch (size) {
     case 'sm':
       return {
-        padding: `0 ${theme.spacing.sm}`,
+        padding: `0 ${spacing.sm}`,
-        fontSize: theme.typography.size.sm,
+        fontSize: typography.size.sm,
-        height: theme.height.sm,
+        height: height.sm,
-      };
-
-    case 'md':
-      return {
-        padding: `0 ${theme.spacing.md}`,
-        fontSize: theme.typography.size.md,
-        height: `${theme.spacing.formButtonHeight}px`,
       };
 
     case 'lg':
       return {
-        padding: `0 ${theme.spacing.lg}`,
+        padding: `0 ${spacing.lg} 0 ${icon ? spacing.md : spacing.lg}`,
-        fontSize: theme.typography.size.lg,
+        fontSize: typography.size.lg,
-        height: theme.height.lg,
+        height: height.lg,
       };
-
+    case 'md':
     default:
       return {
-        padding: `0 ${theme.spacing.md}`,
+        padding: `0 ${spacing.md} 0 ${icon ? spacing.sm : spacing.md}`,
-        fontSize: theme.typography.size.base,
+        fontSize: typography.size.md,
-        height: theme.height.md,
+        height: height.md,
       };
   }
 };

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

@@ -4,7 +4,6 @@ import { GrafanaTheme, toPascalCase } from '@grafana/data';
 import { stylesFactory } from '../../themes/stylesFactory';
 import { useTheme } from '../../themes/ThemeContext';
 import { IconName, IconType, IconSize } from '../../types/icon';
-import { ComponentSize } from '../../types/size';
 //@ts-ignore
 import * as DefaultIcon from '@iconscout/react-unicons';
 import * as MonoIcon from './assets';
@@ -36,7 +35,7 @@ export const Icon = React.forwardRef<HTMLDivElement, IconProps>(
   ({ size = 'md', type = 'default', name, className, style, ...divElementProps }, ref) => {
     const theme = useTheme();
     const styles = getIconStyles(theme);
-    const svgSize = getSvgSize(size, theme);
+    const svgSize = getSvgSize(size);
 
     /* Temporary solution to display also font awesome icons */
     const isFontAwesome = name?.includes('fa-');
@@ -72,14 +71,21 @@ export const Icon = React.forwardRef<HTMLDivElement, IconProps>(
 Icon.displayName = 'Icon';
 
 /* Transform string with px to number and add 2 pxs as path in svg is 2px smaller */
-const getSvgSize = (size: ComponentSize | 'xl' | 'xxl', theme: GrafanaTheme) => {
+export const getSvgSize = (size: IconSize) => {
-  let svgSize;
+  switch (size) {
-  if (size === 'xl') {
+    case 'xs':
-    svgSize = Number(theme.typography.heading.h1.slice(0, -2));
+      return 12;
-  } else if (size === 'xxl') {
+    case 'sm':
-    svgSize = Number(theme.height.lg.slice(0, -2));
+      return 14;
-  } else {
+    case 'md':
-    svgSize = Number(theme.typography.size[size].slice(0, -2)) + 2;
+      return 16;
+    case 'lg':
+      return 18;
+    case 'xl':
+      return 28;
+    case 'xxl':
+      return 36;
+    case 'xxxl':
+      return 48;
   }
-  return svgSize;
 };

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { css } from 'emotion';
+import { IconButton } from './IconButton';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { useTheme } from '../../themes/ThemeContext';
+import { GrafanaTheme } from '@grafana/data';
+import { IconSize, IconName } from '../../types';
+
+export default {
+  title: 'General/IconButton',
+  component: IconButton,
+  decorators: [withCenteredStory],
+  parameters: {
+    docs: {},
+  },
+};
+
+export const simple = () => {
+  const theme = useTheme();
+
+  return (
+    <div>
+      {renderScenario('body', theme, ['sm', 'md', 'lg', 'xl', 'xxl'], ['search', 'trash-alt', 'arrow-left', 'times'])}
+      {renderScenario('panel', theme, ['sm', 'md', 'lg', 'xl', 'xxl'], ['search', 'trash-alt', 'arrow-left', 'times'])}
+      {renderScenario('header', theme, ['sm', 'md', 'lg', 'xl', 'xxl'], ['search', 'trash-alt', 'arrow-left', 'times'])}
+    </div>
+  );
+};
+
+function renderScenario(surface: string, theme: GrafanaTheme, sizes: IconSize[], icons: IconName[]) {
+  let bg: string = 'red';
+
+  switch (surface) {
+    case 'body':
+      bg = theme.colors.bodyBg;
+      break;
+    case 'panel':
+      bg = theme.colors.pageBg;
+      break;
+    case 'header': {
+      bg = theme.colors.pageHeaderBg;
+    }
+  }
+
+  return (
+    <div
+      className={css`
+        padding: 30px;
+        background: ${bg};
+        button {
+          margin-right: 8px;
+          margin-left: 8px;
+          margin-bottom: 8px;
+        }
+      `}
+    >
+      {icons.map(icon => {
+        return sizes.map(size => (
+          <span key={icon + size}>
+            <IconButton name={icon} size={size} surface={surface as any} />
+          </span>
+        ));
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,121 @@
+import React from 'react';
+import { Icon, getSvgSize } from '../Icon/Icon';
+import { IconName, IconSize, IconType } from '../../types/icon';
+import { stylesFactory } from '../../themes/stylesFactory';
+import { css, cx } from 'emotion';
+import { useTheme } from '../../themes/ThemeContext';
+import { GrafanaTheme } from '@grafana/data';
+import { Tooltip } from '../Tooltip/Tooltip';
+import { TooltipPlacement } from '../Tooltip/PopoverController';
+
+export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  name: IconName;
+  size?: IconSize;
+  /** Need this to change hover effect based on what surface it is on */
+  surface?: SurfaceType;
+  iconType?: IconType;
+  tooltip?: string;
+  tooltipPlacement?: TooltipPlacement;
+}
+
+type SurfaceType = 'body' | 'panel' | 'header';
+
+export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
+  ({ name, size = 'md', surface = 'panel', iconType, tooltip, tooltipPlacement, className, ...restProps }, ref) => {
+    const theme = useTheme();
+    const styles = getStyles(theme, surface, size);
+
+    const button = (
+      <button ref={ref} {...restProps} className={cx(styles.button, className)}>
+        <Icon name={name} size={size} className={styles.icon} type={iconType} />
+      </button>
+    );
+
+    if (tooltip) {
+      return (
+        <Tooltip content={tooltip} placement={tooltipPlacement}>
+          {button}
+        </Tooltip>
+      );
+    }
+
+    return button;
+  }
+);
+
+function getHoverColor(theme: GrafanaTheme, surface: SurfaceType): string {
+  switch (surface) {
+    case 'body':
+      return theme.isLight ? theme.colors.gray95 : theme.colors.gray15;
+    case 'panel':
+      return theme.isLight ? theme.colors.gray6 : theme.colors.gray25;
+    case 'header':
+      return theme.isLight ? theme.colors.gray85 : theme.colors.gray25;
+  }
+}
+
+const getStyles = stylesFactory((theme: GrafanaTheme, surface: SurfaceType, size: IconSize) => {
+  const hoverColor = getHoverColor(theme, surface);
+  const pixelSize = getSvgSize(size);
+
+  return {
+    button: css`
+      width: ${pixelSize}px;
+      height: ${pixelSize}px;
+      background: transparent;
+      border: none;
+      padding: 0;
+      margin: 0;
+      outline: none;
+      box-shadow: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      z-index: 0;
+      margin-right: ${theme.spacing.xs};
+
+      &[disabled],
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.65;
+        box-shadow: none;
+      }
+
+      &:before {
+        content: '';
+        display: block;
+        opacity: 1;
+        position: absolute;
+        transition-duration: 0.2s;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        z-index: -1;
+        bottom: -8px;
+        left: -8px;
+        right: -8px;
+        top: -8px;
+        background: none;
+        border-radius: 50%;
+        box-sizing: border-box;
+        transform: scale(0);
+        transition-property: transform, opacity;
+      }
+
+      &:hover {
+        color: ${theme.colors.linkHover};
+
+        &:before {
+          background-color: ${hoverColor};
+          border: none;
+          box-shadow: none;
+          opacity: 1;
+          transform: scale(0.8);
+        }
+      }
+    `,
+    icon: css`
+      margin-bottom: 0;
+      display: flex;
+    `,
+  };
+});

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

@@ -6,7 +6,7 @@ import { IconName } from '../../types';
 import { Themeable } from '../../types';
 import { getModalStyles } from './getModalStyles';
 import { ModalHeader } from './ModalHeader';
-import { Icon } from '../Icon/Icon';
+import { IconButton } from '../IconButton/IconButton';
 
 interface Props extends Themeable {
   icon?: IconName;
@@ -50,9 +50,9 @@ export class UnthemedModal extends React.PureComponent<Props> {
         <div className={cx(styles.modal, className)}>
           <div className={styles.modalHeader}>
             {typeof title === 'string' ? this.renderDefaultHeader(title) : title}
-            <a className={styles.modalHeaderClose} onClick={this.onDismiss}>
+            <div className={styles.modalHeaderClose}>
-              <Icon name="times" />
+              <IconButton surface="header" name="times" size="lg" onClick={this.onDismiss} />
-            </a>
+            </div>
           </div>
           <div className={styles.modalContent}>{this.props.children}</div>
         </div>

packages/grafana-ui/src/components/Modal/getModalStyles.ts

@@ -37,10 +37,11 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
       opacity: 0.7;
     `,
     modalHeader: css`
-      background: ${theme.background.pageHeader};
+      background: ${theme.colors.pageHeaderBg};
       box-shadow: ${theme.shadow.pageHeader};
       border-bottom: 1px solid ${theme.colors.pageHeaderBorder};
       display: flex;
+      height: 42px;
     `,
     modalHeaderTitle: css`
       font-size: ${theme.typography.heading.h3};
@@ -55,8 +56,12 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
       }
     `,
     modalHeaderClose: css`
-      margin-left: auto;
+      height: 100%;
-      padding: 9px ${theme.spacing.d};
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
+      justify-content: flex-end;
+      padding-right: ${theme.spacing.sm};
     `,
     modalContent: css`
       padding: calc(${theme.spacing.d} * 2);

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

@@ -157,6 +157,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
                   "orange": "#eb7b18",
                   "orangeDark": "#ff780a",
                   "pageBg": "#141619",
+                  "pageHeaderBg": "#202226",
                   "pageHeaderBorder": "#202226",
                   "panelBg": "#141619",
                   "panelBorder": "#202226",
@@ -472,6 +473,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                   "orange": "#eb7b18",
                   "orangeDark": "#ff780a",
                   "pageBg": "#141619",
+                  "pageHeaderBg": "#202226",
                   "pageHeaderBorder": "#202226",
                   "panelBg": "#141619",
                   "panelBorder": "#202226",

packages/grafana-ui/src/components/Tooltip/PopoverController.tsx

@@ -7,11 +7,28 @@ import { PopoverContent } from './Tooltip';
 
 export interface UsingPopperProps {
   show?: boolean;
-  placement?: PopperJS.Placement;
+  placement?: TooltipPlacement;
   content: PopoverContent;
   children: JSX.Element;
 }
 
+export type TooltipPlacement =
+  | 'auto-start'
+  | 'auto'
+  | 'auto-end'
+  | 'top-start'
+  | 'top'
+  | 'top-end'
+  | 'right-start'
+  | 'right'
+  | 'right-end'
+  | 'bottom-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'left-end'
+  | 'left'
+  | 'left-start';
+
 type PopperControllerRenderProp = (
   showPopper: () => void,
   hidePopper: () => void,

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

@@ -31,7 +31,7 @@ export function ValuePicker<T>({
   const [isPicking, setIsPicking] = useState(false);
 
   const buttonEl = (
-    <Button size={size || 'sm'} icon={icon || 'plus-circle'} onClick={() => setIsPicking(true)} variant={variant}>
+    <Button size={size || 'sm'} icon={icon || 'plus'} onClick={() => setIsPicking(true)} variant={variant}>
       {label}
     </Button>
   );

packages/grafana-ui/src/components/index.ts

@@ -1,4 +1,5 @@
 export { Icon } from './Icon/Icon';
+export { IconButton } from './IconButton/IconButton';
 export { ConfirmButton } from './ConfirmButton/ConfirmButton';
 export { DeleteButton } from './ConfirmButton/DeleteButton';
 export { Tooltip, PopoverContent } from './Tooltip/Tooltip';

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

@@ -126,9 +126,9 @@ $panel-header-hover-bg: ${theme.colors.gray15};
 $panel-corner: $panel-bg;
 
 // page header
-$page-header-bg: ${theme.colors.gray15};
+$page-header-bg: ${theme.colors.pageHeaderBg};
 $page-header-shadow: inset 0px -4px 14px $dark-3;
-$page-header-border-color: $dark-9;
+$page-header-border-color: ${theme.colors.pageHeaderBorder};
 
 $divider-border-color: $gray-1;
 

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

@@ -118,9 +118,9 @@ $panel-header-hover-bg: $gray-6;
 $panel-corner: $gray-4;
 
 // Page header
-$page-header-bg: linear-gradient(90deg, $white, ${theme.colors.gray95});
+$page-header-bg: ${theme.colors.pageHeaderBg};
 $page-header-shadow: inset 0px -3px 10px $gray-6;
-$page-header-border-color: $gray-4;
+$page-header-border-color: ${theme.colors.pageHeaderBorder};
 
 $divider-border-color: $gray-2;
 

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

@@ -61,8 +61,7 @@ const darkTheme: GrafanaTheme = {
     online: basicColors.greenBase,
     warn: '#f79520',
     critical: basicColors.redBase,
-    bodyBg: basicColors.gray05,
+
-    pageBg: basicColors.gray10,
     body: basicColors.gray4,
     text: basicColors.gray85,
     textStrong: basicColors.white,
@@ -74,8 +73,15 @@ const darkTheme: GrafanaTheme = {
     linkHover: basicColors.white,
     linkExternal: basicColors.blue,
     headingColor: basicColors.gray4,
-    pageHeaderBorder: basicColors.gray15,
+
+    // Backgrounds
+    bodyBg: basicColors.gray05,
+    pageBg: basicColors.gray10,
+    pageHeaderBg: basicColors.gray15,
     panelBg: basicColors.gray10,
+
+    // Borders
+    pageHeaderBorder: basicColors.gray15,
     panelBorder: basicColors.gray15,
 
     // Next-gen forms functional colors

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

@@ -62,8 +62,12 @@ const lightTheme: GrafanaTheme = {
     online: basicColors.greenShade,
     warn: '#f79520',
     critical: basicColors.redShade,
+
+    // Backgrounds
     bodyBg: basicColors.gray7,
     pageBg: basicColors.white,
+    pageHeaderBg: basicColors.gray95,
+    panelBg: basicColors.white,
 
     // Text colors
     body: basicColors.gray1,
@@ -79,11 +83,10 @@ const lightTheme: GrafanaTheme = {
     linkHover: basicColors.dark1,
     linkExternal: basicColors.blueLight,
     headingColor: basicColors.gray1,
-    pageHeaderBorder: basicColors.gray4,
 
-    // panel
+    // Borders
-    panelBg: basicColors.white,
     panelBorder: basicColors.gray95,
+    pageHeaderBorder: basicColors.gray4,
 
     // Next-gen forms functional colors
     formLabel: basicColors.gray33,

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

@@ -1,6 +1,6 @@
 import { ComponentSize } from './size';
 export type IconType = 'mono' | 'default';
-export type IconSize = ComponentSize | 'xl' | 'xxl';
+export type IconSize = ComponentSize | 'xl' | 'xxl' | 'xxxl';
 
 export type IconName =
   | 'fa fa-fw fa-unlock'

public/app/core/components/BackButton/BackButton.tsx

@@ -1,74 +1,23 @@
 import React, { ButtonHTMLAttributes } from 'react';
-import { css } from 'emotion';
+import { IconButton } from '@grafana/ui';
-import { GrafanaTheme } from '@grafana/data';
-import { selectThemeVariant, stylesFactory, Tooltip, useTheme } from '@grafana/ui';
 import { e2e } from '@grafana/e2e';
 
-export type Props = ButtonHTMLAttributes<HTMLButtonElement>;
+export interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
-
+  surface: 'body' | 'panel';
-export const BackButton: React.FC<Props> = props => {
+}
-  const theme = useTheme();
-  const styles = getStyles(theme);
 
+export const BackButton: React.FC<Props> = ({ surface, onClick }) => {
   return (
-    <Tooltip content="Go back (Esc)" placement="bottom">
+    <IconButton
-      <button className={styles.wrapper} {...props} aria-label={e2e.pages.Components.BackButton.selectors.backArrow}>
+      name="arrow-left"
-        <i className="gicon gicon-arrow-left" />
+      tooltip="Go back (Esc)"
-      </button>
+      tooltipPlacement="bottom"
-    </Tooltip>
+      size="xxl"
+      surface={surface}
+      aria-label={e2e.pages.Components.BackButton.selectors.backArrow}
+      onClick={onClick}
+    />
   );
 };
 
 BackButton.displayName = 'BackButton';
-
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  const hoverColor = selectThemeVariant({ dark: theme.colors.gray15, light: theme.colors.gray85 }, theme.type);
-
-  return {
-    wrapper: css`
-      background: transparent;
-      border: none;
-      padding: 0;
-      margin: 0;
-      outline: none;
-      box-shadow: none;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-
-      &:before {
-        content: '';
-        display: block;
-        opacity: 1;
-        position: absolute;
-        transition-duration: 0.2s;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        z-index: -1;
-        bottom: -10px;
-        left: -10px;
-        right: -10px;
-        top: -10px;
-        background: none;
-        border-radius: 50%;
-        box-sizing: border-box;
-        transform: scale(0);
-        transition-property: transform, opacity;
-      }
-
-      .gicon {
-        font-size: 26px;
-      }
-
-      &:hover {
-        &:before {
-          background-color: ${hoverColor};
-          border: none;
-          box-shadow: none;
-          opacity: 1;
-          transform: scale(0.8);
-        }
-      }
-    `,
-  };
-});

public/app/core/components/PageHeader/PageHeader.tsx

@@ -126,7 +126,7 @@ export default class PageHeader extends React.Component<Props, any> {
     return (
       <div className="page-header__inner">
         <span className="page-header__logo">
-          {main.icon && <Icon name={main.icon as IconName} size="xxl" className={iconClassName} />}
+          {main.icon && <Icon name={main.icon as IconName} size="xxxl" className={iconClassName} />}
           {main.img && <img className="page-header__img" src={main.img} />}
         </span>
 

public/app/core/components/QueryOperationRow/QueryOperationAction.tsx

@@ -1,6 +1,6 @@
-import { Icon, IconName, stylesFactory, useTheme } from '@grafana/ui';
+import { IconName, IconButton, stylesFactory, useTheme } from '@grafana/ui';
 import React from 'react';
-import { css, cx } from 'emotion';
+import { css } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
 
 interface QueryOperationActionProps {
@@ -12,7 +12,8 @@ interface QueryOperationActionProps {
 
 export const QueryOperationAction: React.FC<QueryOperationActionProps> = ({ icon, disabled, title, ...otherProps }) => {
   const theme = useTheme();
-  const styles = getQueryOperationActionStyles(theme, !!disabled);
+  const styles = getStyles(theme);
+
   const onClick = (e: React.MouseEvent) => {
     if (!disabled) {
       otherProps.onClick(e);
@@ -20,26 +21,23 @@ export const QueryOperationAction: React.FC<QueryOperationActionProps> = ({ icon
   };
   return (
     <div title={title}>
-      <Icon name={icon} className={styles.icon} onClick={onClick} aria-label={`${title} query operation action`} />
+      <IconButton
+        name={icon}
+        className={styles.icon}
+        disabled={!!disabled}
+        onClick={onClick}
+        aria-label={`${title} query operation action`}
+      />
     </div>
   );
 };
 
-const getQueryOperationActionStyles = stylesFactory((theme: GrafanaTheme, disabled: boolean) => {
+QueryOperationAction.displayName = 'QueryOperationAction';
+
+const getStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
-    icon: cx(
+    icon: css`
-      !disabled &&
+      color: ${theme.colors.textWeak};
-        css`
+    `,
-          cursor: pointer;
-          color: ${theme.colors.textWeak};
-        `,
-      disabled &&
-        css`
-          color: ${theme.colors.gray25};
-          cursor: disabled;
-        `
-    ),
   };
 });
-
-QueryOperationAction.displayName = 'QueryOperationAction';

public/app/core/components/manage_dashboards/manage_dashboards.html

@@ -107,7 +107,7 @@
 <div ng-if="ctrl.canSave && ctrl.folderId && !ctrl.hasFilters && ctrl.sections.length === 0">
   <empty-list-cta
     title="'This folder doesn\'t have any dashboards yet'"
-    buttonIcon="'plus-circle'"
+    buttonIcon="'plus'"
     buttonLink="'dashboard/new?folderId={{ctrl.folderId}}'"
     buttonTitle="'Create Dashboard'"
     proTip="'Add/move dashboards to your folder at ->'"

public/app/features/dashboard/components/DashNav/DashNav.tsx

@@ -138,7 +138,7 @@ class DashNav extends PureComponent<Props> {
   renderBackButton() {
     return (
       <div className="navbar-edit">
-        <BackButton onClick={this.onClose} />
+        <BackButton surface="body" onClick={this.onClose} />
       </div>
     );
   }

public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx

@@ -50,7 +50,7 @@ export class DashboardSettings extends PureComponent<Props> {
       <div className="dashboard-settings">
         <div className="navbar navbar--shadow">
           <div className="navbar-edit">
-            <BackButton onClick={this.onClose} />
+            <BackButton surface="body" onClick={this.onClose} />
           </div>
           <div className="navbar-page-btn">
             {haveFolder && <div className="navbar-page-btn__folder">{folderTitle} / </div>}

public/app/features/dashboard/components/Inspector/InspectHeader.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { css } from 'emotion';
-import { Icon, stylesFactory, Tab, TabsBar, useTheme } from '@grafana/ui';
+import { stylesFactory, Tab, TabsBar, useTheme, IconButton } from '@grafana/ui';
 import { GrafanaTheme, SelectableValue, PanelData, getValueFormat, formattedValueToString } from '@grafana/data';
 import { InspectTab } from './PanelInspector';
 import { PanelModel } from '../../state';
@@ -32,12 +32,8 @@ export const InspectHeader: FC<Props> = ({
   return (
     <div className={styles.header}>
       <div className={styles.actions}>
-        <div className={styles.iconWrapper} onClick={onToggleExpand}>
+        <IconButton name="angle-left" size="xl" onClick={onToggleExpand} surface="header" />
-          <Icon name={isExpanded ? 'angle-right' : 'angle-left'} className={styles.icon} />
+        <IconButton name="times" size="xl" onClick={onClose} surface="header" />
-        </div>
-        <div className={styles.iconWrapper} onClick={onClose}>
-          <Icon name="times" className={styles.icon} />
-        </div>
       </div>
       <div className={styles.titleWrapper}>
         <h3>{panel.title}</h3>
@@ -66,27 +62,18 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       background-color: ${headerBackground};
       z-index: 1;
       flex-grow: 0;
+      padding-top: ${theme.spacing.sm};
     `,
     actions: css`
+      position: absolute;
       display: flex;
       align-items: baseline;
       justify-content: space-between;
-      margin: ${theme.spacing.md};
+      right: ${theme.spacing.sm};
     `,
     tabsBar: css`
       padding-left: ${theme.spacing.md};
     `,
-    iconWrapper: css`
-      cursor: pointer;
-      width: 25px;
-      height: 100%;
-      display: flex;
-      flex-shrink: 0;
-      justify-content: center;
-    `,
-    icon: css`
-      font-size: ${theme.typography.size.lg};
-    `,
     titleWrapper: css`
       margin-bottom: ${theme.spacing.lg};
       padding: ${theme.spacing.sm} ${theme.spacing.sm} 0 ${theme.spacing.lg};

public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx

@@ -17,7 +17,6 @@ import { Unsubscribable } from 'rxjs';
 import { DisplayMode, displayModes, PanelEditorTab } from './types';
 import { PanelEditorTabs } from './PanelEditorTabs';
 import { DashNavTimeControls } from '../DashNav/DashNavTimeControls';
-import { BackButton } from 'app/core/components/BackButton/BackButton';
 import { LocationState } from 'app/types';
 import { calculatePanelSize } from './utils';
 import { initPanelEditor, panelEditorCleanUp, updatePanelEditorUIState } from './state/actions';
@@ -29,6 +28,7 @@ import { DashNavButton } from 'app/features/dashboard/components/DashNav/DashNav
 import { VariableModel } from 'app/features/templating/types';
 import { getVariables } from 'app/features/variables/state/selectors';
 import { SubMenuItems } from 'app/features/dashboard/components/SubMenu/SubMenuItems';
+import { BackButton } from 'app/core/components/BackButton/BackButton';
 
 interface OwnProps {
   dashboard: DashboardModel;
@@ -231,7 +231,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
     return (
       <div className={styles.editorToolbar}>
         <div className={styles.toolbarLeft}>
-          <BackButton onClick={this.onPanelExit} />
+          <BackButton onClick={this.onPanelExit} surface="panel" />
           <span className={styles.editorTitle}>{dashboard.title} / Edit Panel</span>
         </div>
         <div className={styles.toolbarLeft}>

public/app/features/explore/RichHistory/RichHistoryCard.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
 import { css, cx } from 'emotion';
-import { stylesFactory, useTheme, TextArea, Button, Icon } from '@grafana/ui';
+import { stylesFactory, useTheme, TextArea, Button, IconButton } from '@grafana/ui';
 
 import { GrafanaTheme, AppEvents, DataSourceApi } from '@grafana/data';
 import { RichHistoryQuery, ExploreId } from 'app/types/explore';
@@ -77,7 +77,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
       display: flex;
       justify-content: flex-end;
       font-size: ${theme.typography.size.base};
-      svg {
+      button {
         margin-left: ${theme.spacing.sm};
       }
     `,
@@ -212,17 +212,17 @@ export function RichHistoryCard(props: Props) {
 
   const queryActionButtons = (
     <div className={styles.queryActionButtons}>
-      <Icon
+      <IconButton
         name="comment-alt"
         onClick={toggleActiveUpdateComment}
         title={query.comment?.length > 0 ? 'Edit comment' : 'Add comment'}
       />
-      <Icon name="copy" onClick={onCopyQuery} title="Copy query to clipboard" />
+      <IconButton name="copy" onClick={onCopyQuery} title="Copy query to clipboard" />
-      {!isRemoved && <Icon name="link" onClick={onCreateLink} title="Copy link to clipboard" />}
+      {!isRemoved && <IconButton name="link" onClick={onCreateLink} title="Copy link to clipboard" />}
-      <Icon name="trash-alt" title={'Delete query'} onClick={onDeleteQuery} />
+      <IconButton name="trash-alt" title={'Delete query'} onClick={onDeleteQuery} />
-      <Icon
+      <IconButton
         name={query.starred ? 'favorite' : 'star'}
-        type={query.starred ? 'mono' : 'default'}
+        iconType={query.starred ? 'mono' : 'default'}
         onClick={onStarrQuery}
         title={query.starred ? 'Unstar query' : 'Star query'}
       />

public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx

@@ -67,7 +67,7 @@ export const DataLinks = (props: Props) => {
             className={css`
               margin-right: 10px;
             `}
-            icon="plus-circle"
+            icon="plus"
             onClick={event => {
               event.preventDefault();
               const newDataLinks = [...(value || []), { field: '', url: '' }];

public/app/plugins/panel/table/column_options.html

@@ -182,7 +182,7 @@
           </div>
           <div class="gf-form">
             <label class="gf-form-label">
-              <a class="pointer" ng-click="editor.addRangeMap(style)"><icon name="'plus-circle'"></icon></a>
+              <a class="pointer" ng-click="editor.addRangeMap(style)"><icon name="'plus'"></icon></a>
             </label>
           </div>
         </div>

public/sass/_variables.dark.generated.scss

@@ -131,7 +131,7 @@ $panel-corner: $panel-bg;
 // page header
 $page-header-bg: #202226;
 $page-header-shadow: inset 0px -4px 14px $dark-3;
-$page-header-border-color: $dark-9;
+$page-header-border-color: #202226;
 
 $divider-border-color: $gray-1;
 

public/sass/_variables.light.generated.scss

@@ -121,9 +121,9 @@ $panel-header-hover-bg: $gray-6;
 $panel-corner: $gray-4;
 
 // Page header
-$page-header-bg: linear-gradient(90deg, $white, #e9edf2);
+$page-header-bg: #e9edf2;
 $page-header-shadow: inset 0px -3px 10px $gray-6;
-$page-header-border-color: $gray-4;
+$page-header-border-color: #c7d0d9;
 
 $divider-border-color: $gray-2;
 

public/sass/components/_navbar.scss

@@ -184,7 +184,7 @@ i.navbar-page-btn__search {
   }
 
   &:hover {
-    .fa {
+    svg {
       color: $text-color;
     }
   }