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

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

@@ -1,74 +1,23 @@
 import React, { ButtonHTMLAttributes } from 'react';
-import { css } from 'emotion';
-import { GrafanaTheme } from '@grafana/data';
-import { selectThemeVariant, stylesFactory, Tooltip, useTheme } from '@grafana/ui';
+import { IconButton } from '@grafana/ui';
 import { e2e } from '@grafana/e2e';
 
-export type Props = ButtonHTMLAttributes<HTMLButtonElement>;
-
-export const BackButton: React.FC<Props> = props => {
-  const theme = useTheme();
-  const styles = getStyles(theme);
+export interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  surface: 'body' | 'panel';
+}
 
+export const BackButton: React.FC<Props> = ({ surface, onClick }) => {
   return (
-    <Tooltip content="Go back (Esc)" placement="bottom">
-      <button className={styles.wrapper} {...props} aria-label={e2e.pages.Components.BackButton.selectors.backArrow}>
-        <i className="gicon gicon-arrow-left" />
-      </button>
-    </Tooltip>
+    <IconButton
+      name="arrow-left"
+      tooltip="Go back (Esc)"
+      tooltipPlacement="bottom"
+      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);
-        }
-      }
-    `,
-  };
-});