GrafanaUI: Support Tooltip as Dropdown child (#68521)

Co-authored-by: eledobleefe <laura.fernandez@grafana.com>
Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
Co-authored-by: L-M-K-B <48948963+L-M-K-B@users.noreply.github.com
This commit is contained in:
Josh Hunt
2023-05-16 11:15:53 +01:00
committed by GitHub
parent 51c15f3a89
commit 7b3221d494
6 changed files with 143 additions and 62 deletions

View File

@ -61,8 +61,9 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
});
// In order to standardise Button please always consider using IconButton when you need a button with an icon only
// When using tooltip, ref is forwarded to Tooltip component instead for https://github.com/grafana/grafana/issues/65632
const button = (
<button className={cx(styles.button, className)} type={type} {...otherProps} ref={ref}>
<button className={cx(styles.button, className)} type={type} {...otherProps} ref={tooltip ? undefined : ref}>
{icon && <Icon name={icon} size={size} className={styles.icon} />}
{children && <span className={styles.content}>{children}</span>}
</button>
@ -70,7 +71,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
if (tooltip) {
return (
<Tooltip content={tooltip} placement={tooltipPlacement}>
<Tooltip ref={ref} content={tooltip} placement={tooltipPlacement}>
{button}
</Tooltip>
);
@ -123,8 +124,9 @@ export const LinkButton = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
className
);
// When using tooltip, ref is forwarded to Tooltip component instead for https://github.com/grafana/grafana/issues/65632
const button = (
<a className={linkButtonStyles} {...otherProps} tabIndex={disabled ? -1 : 0} ref={ref}>
<a className={linkButtonStyles} {...otherProps} tabIndex={disabled ? -1 : 0} ref={tooltip ? undefined : ref}>
{icon && <Icon name={icon} size={size} className={styles.icon} />}
{children && <span className={styles.content}>{children}</span>}
</a>
@ -132,7 +134,7 @@ export const LinkButton = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
if (tooltip) {
return (
<Tooltip content={tooltip} placement={tooltipPlacement}>
<Tooltip ref={ref} content={tooltip} placement={tooltipPlacement}>
{button}
</Tooltip>
);