PanelHeaderCorner: Remove font-awesome icons (#87303)

* PanelHeaderCorner: Remove font-awesome

* Fix mode styles

* Remove unused styles

* Cleanup

* Simplify styles

* Fixes

* Remove unused variable

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

@@ -96,6 +96,7 @@ export const availableIconsIndex = {
   'exchange-alt': true,
   'exclamation-triangle': true,
   'exclamation-circle': true,
+  exclamation: true,
   'external-link-alt': true,
   eye: true,
   'eye-slash': true,

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

@@ -1,9 +1,12 @@
+import { css, cx } from '@emotion/css';
 import React, { Component } from 'react';
 
-import { renderMarkdown, LinkModelSupplier, ScopedVars } from '@grafana/data';
+import { renderMarkdown, LinkModelSupplier, ScopedVars, IconName } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data/';
 import { selectors } from '@grafana/e2e-selectors';
 import { locationService, getTemplateSrv } from '@grafana/runtime';
-import { Tooltip, PopoverContent } from '@grafana/ui';
+import { Tooltip, PopoverContent, Icon } from '@grafana/ui';
+import { useStyles2 } from '@grafana/ui/';
 import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
 import { InspectTab } from 'app/features/inspector/types';
@@ -79,21 +82,6 @@ export class PanelHeaderCorner extends Component<Props> {
     });
   };
 
-  renderCornerType(infoMode: InfoMode, content: PopoverContent, onClick?: () => void) {
-    const theme = infoMode === InfoMode.Error ? 'error' : 'info';
-    const className = `panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`;
-    const ariaLabel = selectors.components.Panels.Panel.headerCornerInfo(infoMode.toLowerCase());
-
-    return (
-      <Tooltip content={content} placement="top-start" theme={theme} interactive>
-        <button type="button" className={className} onClick={onClick} aria-label={ariaLabel}>
-          <i aria-hidden className="fa" />
-          <span className="panel-info-corner-inner" />
-        </button>
-      </Tooltip>
-    );
-  }
-
   render() {
     const { error } = this.props;
     const infoMode: InfoMode | undefined = this.getInfoMode();
@@ -103,11 +91,11 @@ export class PanelHeaderCorner extends Component<Props> {
     }
 
     if (infoMode === InfoMode.Error && error) {
-      return this.renderCornerType(infoMode, error, this.onClickError);
+      return <PanelInfoCorner infoMode={infoMode} content={error} onClick={this.onClickError} />;
     }
 
     if (infoMode === InfoMode.Info || infoMode === InfoMode.Links) {
-      return this.renderCornerType(infoMode, this.getInfoContent);
+      return <PanelInfoCorner infoMode={infoMode} content={this.getInfoContent} />;
     }
 
     return null;
@@ -115,3 +103,74 @@ export class PanelHeaderCorner extends Component<Props> {
 }
 
 export default PanelHeaderCorner;
+
+interface PanelInfoCornerProps {
+  infoMode: InfoMode;
+  content: PopoverContent;
+  onClick?: () => void;
+}
+
+function PanelInfoCorner({ infoMode, content, onClick }: PanelInfoCornerProps) {
+  const theme = infoMode === InfoMode.Error ? 'error' : 'info';
+  const ariaLabel = selectors.components.Panels.Panel.headerCornerInfo(infoMode.toLowerCase());
+  const styles = useStyles2(getStyles);
+
+  return (
+    <Tooltip content={content} placement="top-start" theme={theme} interactive>
+      <button type="button" className={styles.infoCorner} onClick={onClick} aria-label={ariaLabel}>
+        <Icon
+          name={iconMap[infoMode]}
+          size={infoMode === InfoMode.Links ? 'sm' : 'lg'}
+          className={cx(styles.icon, { [styles.iconLinks]: infoMode === InfoMode.Links })}
+        />
+        <span className={cx(styles.inner, { [styles.error]: infoMode === InfoMode.Error })} />
+      </button>
+    </Tooltip>
+  );
+}
+
+const iconMap: Record<InfoMode, IconName> = {
+  [InfoMode.Error]: 'exclamation',
+  [InfoMode.Info]: 'info',
+  [InfoMode.Links]: 'external-link-alt',
+};
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    icon: css({
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      zIndex: 2,
+      fill: theme.colors.text.maxContrast,
+    }),
+    iconLinks: css({
+      left: theme.spacing(0.5),
+      top: theme.spacing(0.25),
+    }),
+    inner: css({
+      width: 0,
+      height: 0,
+      position: 'absolute',
+      left: 0,
+      bottom: 0,
+      borderBottom: `${theme.spacing(4)} solid transparent`,
+      borderLeft: `${theme.spacing(4)} solid ${theme.colors.background.secondary}`,
+    }),
+    error: css({
+      borderLeftColor: theme.colors.error.main,
+    }),
+    infoCorner: css({
+      background: 'none',
+      border: 'none',
+      color: theme.colors.text.secondary,
+      cursor: 'pointer',
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width: theme.spacing(4),
+      height: theme.spacing(4),
+      zIndex: 3,
+    }),
+  };
+};

public/sass/components/_panel_header.scss

@@ -1,5 +1,3 @@
-$panel-header-no-title-zindex: 1;
-
 .panel-header {
   &:hover {
     transition: background-color 0.1s ease-in-out;
@@ -95,73 +93,6 @@ $panel-header-no-title-zindex: 1;
   left: -100px;
 }
 
-.panel-info-corner-inner {
-  width: 0;
-  height: 0;
-  position: absolute;
-  left: 0;
-  bottom: 0;
-}
-
-@mixin panel-corner-color($corner-bg) {
-  .panel-info-corner-inner {
-    border-left: $panel-header-height solid $corner-bg;
-    border-right: none;
-    border-bottom: $panel-header-height solid transparent;
-  }
-}
-
-.panel-info-corner {
-  background: none;
-  border: none;
-  color: $text-muted;
-  cursor: pointer;
-  position: absolute;
-  display: none;
-  left: 0;
-  width: $panel-header-height;
-  height: $panel-header-height;
-  z-index: $panel-header-no-title-zindex + 1;
-  top: 0;
-
-  .fa {
-    position: absolute;
-    top: 6px;
-    left: 6px;
-    font-size: 75%;
-    z-index: $panel-header-no-title-zindex + 2;
-  }
-
-  &--info {
-    display: block;
-    @include panel-corner-color(lighten($panel-corner, 6%));
-
-    .fa:before {
-      content: '\f129';
-    }
-  }
-
-  &--links {
-    display: block;
-    @include panel-corner-color(lighten($panel-corner, 6%));
-    .fa {
-      left: 4px;
-    }
-    .fa:before {
-      content: '\f08e';
-    }
-  }
-
-  &--error {
-    display: block;
-    color: $white;
-    @include panel-corner-color($popover-error-bg);
-    .fa:before {
-      content: '\f12a';
-    }
-  }
-}
-
 .panel-info-content {
   overflow: auto;