From 60728e069ae2fc599587f1397b703a18d577bb97 Mon Sep 17 00:00:00 2001
From: Jang Min <jangmin.dev@gmail.com>
Date: Sun, 15 Jan 2023 20:15:32 +0900
Subject: [PATCH] fix(tooltip): add tooltips for undo/redo buttons (#1095)

* fix(tooltip): add lack tooltips for undo/redo buttons

* fix: change id of undo/redo buttons
---
 .../src/components/TopPanel/TopPanel.tsx      | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/tldraw/src/components/TopPanel/TopPanel.tsx b/packages/tldraw/src/components/TopPanel/TopPanel.tsx
index a0b383fd7..c0f416086 100644
--- a/packages/tldraw/src/components/TopPanel/TopPanel.tsx
+++ b/packages/tldraw/src/components/TopPanel/TopPanel.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
+import { useIntl } from 'react-intl'
 import { Panel } from '~components/Primitives/Panel'
-import { ToolButton } from '~components/Primitives/ToolButton'
+import { ToolButton, ToolButtonWithTooltip } from '~components/Primitives/ToolButton'
 import { UndoIcon } from '~components/Primitives/icons'
 import { useTldrawApp } from '~hooks'
 import { styled } from '~styles'
@@ -28,6 +29,7 @@ export function _TopPanel({
   showMultiplayerMenu,
 }: TopPanelProps) {
   const app = useTldrawApp()
+  const intl = useIntl()
 
   return (
     <StyledTopPanel>
@@ -45,12 +47,22 @@ export function _TopPanel({
             <ReadOnlyLabel>Read Only</ReadOnlyLabel>
           ) : (
             <>
-              <ToolButton>
-                <UndoIcon onClick={app.undo} />
-              </ToolButton>
-              <ToolButton>
-                <UndoIcon onClick={app.redo} flipHorizontal />
-              </ToolButton>
+              <ToolButtonWithTooltip
+                kbd={'#Z'}
+                label={intl.formatMessage({ id: 'undo' })}
+                onClick={app.undo}
+                id="TD-TopPanel-Undo"
+              >
+                <UndoIcon />
+              </ToolButtonWithTooltip>
+              <ToolButtonWithTooltip
+                kbd={'#⇧Z'}
+                label={intl.formatMessage({ id: 'redo' })}
+                onClick={app.redo}
+                id="TD-TopPanel-Redo"
+              >
+                <UndoIcon flipHorizontal />
+              </ToolButtonWithTooltip>
             </>
           )}
           {showZoom && <ZoomMenu />}