From 62d44fcffc6e2db6fc1237e8a1cd94d093cbdf8e Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Wed, 5 Jan 2022 13:36:13 +0100
Subject: [PATCH] InfoTooltip: refactor component to be accessible (#43613)

* InfoTooltip: refactor component to be accessible

* new: create ghostMode prop to allow turning on/off button styles

* update infoToolTip component to use ghostMode prop

* update story to show ghostMode state

* fix condition to work properly

* nit fix

* revert changes to former infoTooltip state

* InfoTooltip: use iconButton instead to achieve keyboard a11y

* fix minor type nit
---
 .../src/components/IconButton/IconButton.tsx           |  7 ++++---
 .../src/components/InfoTooltip/InfoTooltip.tsx         | 10 +++-------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.tsx b/packages/grafana-ui/src/components/IconButton/IconButton.tsx
index 43c000d9d94..c52de18b45b 100644
--- a/packages/grafana-ui/src/components/IconButton/IconButton.tsx
+++ b/packages/grafana-ui/src/components/IconButton/IconButton.tsx
@@ -5,7 +5,7 @@ import { stylesFactory } from '../../themes/stylesFactory';
 import { css, cx } from '@emotion/css';
 import { useTheme2 } from '../../themes/ThemeContext';
 import { GrafanaTheme2, colorManipulator } from '@grafana/data';
-import { Tooltip } from '../Tooltip/Tooltip';
+import { PopoverContent, Tooltip } from '../Tooltip/Tooltip';
 import { TooltipPlacement } from '../Tooltip/PopoverController';
 import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';
 
@@ -21,7 +21,7 @@ export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** Type od the icon - mono or default */
   iconType?: IconType;
   /** Tooltip content to display on hover */
-  tooltip?: string;
+  tooltip?: PopoverContent;
   /** Position of the tooltip */
   tooltipPlacement?: TooltipPlacement;
   /** Variant to change the color of the Icon */
@@ -49,9 +49,10 @@ export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
   ) => {
     const theme = useTheme2();
     const styles = getStyles(theme, size, variant);
+    const tooltipString = typeof tooltip === 'string' ? tooltip : '';
 
     const button = (
-      <button ref={ref} aria-label={ariaLabel || tooltip || ''} {...restProps} className={cx(styles.button, className)}>
+      <button ref={ref} aria-label={ariaLabel || tooltipString} {...restProps} className={cx(styles.button, className)}>
         <Icon name={name} size={size} className={styles.icon} type={iconType} />
       </button>
     );
diff --git a/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx b/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx
index a9cb129e9fc..75536701d35 100644
--- a/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx
+++ b/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx
@@ -1,15 +1,11 @@
 import React from 'react';
-import { Tooltip, TooltipProps, PopoverContent } from '../Tooltip/Tooltip';
-import { Icon } from '../Icon/Icon';
+import { PopoverContent, TooltipProps } from '../Tooltip/Tooltip';
+import { IconButton } from '../IconButton/IconButton';
 
 interface InfoTooltipProps extends Omit<TooltipProps, 'children' | 'content'> {
   children: PopoverContent;
 }
 
 export const InfoTooltip = ({ children, ...restProps }: InfoTooltipProps) => {
-  return (
-    <Tooltip content={children} {...restProps}>
-      <Icon name="info-circle" />
-    </Tooltip>
-  );
+  return <IconButton name="info-circle" tooltip={children} {...restProps} />;
 };