IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-12 08:35:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

Explore: A tooltip for reorder icon in query operation (#75978)

Browse Source 
* tooltip in draggabledots icon

* making it a IconButton
This commit is contained in:
Krishna Dhakal 2023-10-05 20:16:16 +05:45 committed by GitHub
parent 81b366e2c8
commit 76e102d1a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
View File

@ -4,7 +4,7 @@ import { DraggableProvided } from 'react-beautiful-dnd';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { Stack } from '@grafana/experimental'; import { Stack } from '@grafana/experimental';
import { Icon, IconButton, useStyles2 } from '@grafana/ui'; import { IconButton, useStyles2 } from '@grafana/ui';
export interface QueryOperationRowHeaderProps { export interface QueryOperationRowHeaderProps {
actionsElement?: React.ReactNode; actionsElement?: React.ReactNode;
@ -15,7 +15,7 @@ export interface QueryOperationRowHeaderProps {
headerElement?: React.ReactNode; headerElement?: React.ReactNode;
isContentVisible: boolean; isContentVisible: boolean;
onRowToggle: () => void; onRowToggle: () => void;
reportDragMousePosition: MouseEventHandler<HTMLDivElement>; reportDragMousePosition: MouseEventHandler<HTMLButtonElement>;
title?: string; title?: string;
id: string; id: string;
} }
@ -62,9 +62,11 @@ export const QueryOperationRowHeader = ({
<Stack gap={1} alignItems="center" wrap={false}> <Stack gap={1} alignItems="center" wrap={false}>
{actionsElement} {actionsElement}
{draggable && ( {draggable && (
<Icon <IconButton
title="Drag and drop to reorder" title="Drag and drop to reorder"
name="draggabledots" name="draggabledots"
tooltip="Drag and drop to reorder"
tooltipPlacement="bottom"
size="lg" size="lg"
className={styles.dragIcon} className={styles.dragIcon}
onMouseMove={reportDragMousePosition} onMouseMove={reportDragMousePosition}