Grafana UI: Fix tooltip prop of button component (#64765)

fix tooltip prop of Button component
This commit is contained in:
Süleyman Barış Eser 2023-03-30 12:53:11 +03:00 committed by GitHub
parent a6b2bc3997
commit 1c7921770c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 9 deletions

View File

@ -2,6 +2,7 @@ import { ComponentStory } from '@storybook/react';
import React from 'react';
import { ComponentSize } from '../../types/size';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { Card } from '../Card/Card';
import { HorizontalGroup, VerticalGroup } from '../Layout/Layout';
@ -14,6 +15,7 @@ const sizes: ComponentSize[] = ['lg', 'md', 'sm'];
export default {
title: 'Buttons/Button',
component: Button,
decorators: [withCenteredStory],
parameters: {
docs: {
page: mdx,
@ -24,14 +26,7 @@ export default {
options: sizes,
},
tooltip: {
table: {
disable: true,
},
},
tooltipPlacement: {
table: {
disable: true,
},
control: 'text',
},
className: {
table: {

View File

@ -44,6 +44,8 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
children,
className,
type = 'button',
tooltip,
tooltipPlacement,
...otherProps
},
ref
@ -58,12 +60,22 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
iconOnly: !children,
});
return (
const button = (
<button className={cx(styles.button, className)} type={type} {...otherProps} ref={ref}>
{icon && <Icon name={icon} size={size} className={styles.icon} />}
{children && <span className={styles.content}>{children}</span>}
</button>
);
if (tooltip) {
return (
<Tooltip content={tooltip} placement={tooltipPlacement}>
{button}
</Tooltip>
);
}
return button;
}
);