IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

InfoTooltip: refactor component to be accessible (#43613)

Browse Source 
* 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
This commit is contained in:
Uchechukwu Obasi 2022-01-05 13:36:13 +01:00 committed by GitHub
parent 8dc4c23a89
commit 62d44fcffc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/grafana-ui/src/components/IconButton/IconButton.tsx
View File

@ -5,7 +5,7 @@ import { stylesFactory } from '../../themes/stylesFactory';
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import { useTheme2 } from '../../themes/ThemeContext'; import { useTheme2 } from '../../themes/ThemeContext';
import { GrafanaTheme2, colorManipulator } from '@grafana/data'; import { GrafanaTheme2, colorManipulator } from '@grafana/data';
import { Tooltip } from '../Tooltip/Tooltip'; import { PopoverContent, Tooltip } from '../Tooltip/Tooltip';
import { TooltipPlacement } from '../Tooltip/PopoverController'; import { TooltipPlacement } from '../Tooltip/PopoverController';
import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins'; import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';
@ -21,7 +21,7 @@ export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
/** Type od the icon - mono or default */ /** Type od the icon - mono or default */
iconType?: IconType; iconType?: IconType;
/** Tooltip content to display on hover */ /** Tooltip content to display on hover */
tooltip?: string; tooltip?: PopoverContent;
/** Position of the tooltip */ /** Position of the tooltip */
tooltipPlacement?: TooltipPlacement; tooltipPlacement?: TooltipPlacement;
/** Variant to change the color of the Icon */ /** Variant to change the color of the Icon */
@ -49,9 +49,10 @@ export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
) => { ) => {
const theme = useTheme2(); const theme = useTheme2();
const styles = getStyles(theme, size, variant); const styles = getStyles(theme, size, variant);
const tooltipString = typeof tooltip === 'string' ? tooltip : '';
const button = ( 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} /> <Icon name={name} size={size} className={styles.icon} type={iconType} />
</button> </button>
); );

10
packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx
View File

@ -1,15 +1,11 @@
import React from 'react'; import React from 'react';
import { Tooltip, TooltipProps, PopoverContent } from '../Tooltip/Tooltip'; import { PopoverContent, TooltipProps } from '../Tooltip/Tooltip';
import { Icon } from '../Icon/Icon'; import { IconButton } from '../IconButton/IconButton';
interface InfoTooltipProps extends Omit<TooltipProps, 'children' | 'content'> { interface InfoTooltipProps extends Omit<TooltipProps, 'children' | 'content'> {
children: PopoverContent; children: PopoverContent;
} }
export const InfoTooltip = ({ children, ...restProps }: InfoTooltipProps) => { export const InfoTooltip = ({ children, ...restProps }: InfoTooltipProps) => {
return ( return <IconButton name="info-circle" tooltip={children} {...restProps} />;
<Tooltip content={children} {...restProps}>
<Icon name="info-circle" />
</Tooltip>
);
}; };