Merge pull request #208 from axonivy/text-change

use proper tooltips instead of title property
axonivy · Jan 29, 2025 · 2822e4f · 2822e4f
2 parents 0d856ce + 0de8627
commit 2822e4f
Show file tree

Hide file tree

Showing 7 changed files with 142 additions and 117 deletions.
diff --git a/packages/dataclass-editor/src/DataClassEditor.tsx b/packages/dataclass-editor/src/DataClassEditor.tsx
@@ -12,6 +12,7 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
   Spinner,
+  TooltipProvider,
   useHistoryData,
   useHotkeys
 } from '@axonivy/ui-components';
@@ -152,22 +153,24 @@ function DataClassEditor(props: EditorProps) {
         history
       }}
     >
-      <ResizablePanelGroup direction='horizontal' style={{ height: `100vh` }}>
-        <ResizablePanel defaultSize={75} minSize={50} className='master-panel'>
-          <Flex className='panel-content-container master-container' direction='column'>
-            <DataClassMasterToolbar title={masterTitle} />
-            <DataClassMasterContent />
-          </Flex>
-        </ResizablePanel>
-        {detail && (
-          <>
-            <ResizableHandle />
-            <ResizablePanel defaultSize={25} minSize={10} className='detail-panel'>
-              <Detail title={detailTitle} helpUrl={data.helpUrl} />
-            </ResizablePanel>
-          </>
-        )}
-      </ResizablePanelGroup>
+      <TooltipProvider>
+        <ResizablePanelGroup direction='horizontal' style={{ height: `100vh` }}>
+          <ResizablePanel defaultSize={75} minSize={50} className='master-panel'>
+            <Flex className='panel-content-container master-container' direction='column'>
+              <DataClassMasterToolbar title={masterTitle} />
+              <DataClassMasterContent />
+            </Flex>
+          </ResizablePanel>
+          {detail && (
+            <>
+              <ResizableHandle />
+              <ResizablePanel defaultSize={25} minSize={10} className='detail-panel'>
+                <Detail title={detailTitle} helpUrl={data.helpUrl} />
+              </ResizablePanel>
+            </>
+          )}
+        </ResizablePanelGroup>
+      </TooltipProvider>
     </AppProvider>
   );
 }

diff --git a/packages/dataclass-editor/src/detail/Detail.tsx b/packages/dataclass-editor/src/detail/Detail.tsx
@@ -1,5 +1,5 @@
 import type { Field } from '@axonivy/dataclass-editor-protocol';
-import { Button, Flex, SidebarHeader } from '@axonivy/ui-components';
+import { Button, Flex, SidebarHeader, Tooltip, TooltipContent, TooltipTrigger } from '@axonivy/ui-components';
 import { IvyIcons } from '@axonivy/ui-icons';
 import { useAppContext } from '../context/AppContext';
 import { FieldProvider } from '../context/FieldContext';
@@ -39,7 +39,12 @@ export const Detail = ({ title, helpUrl }: DetailProps) => {
   return (
     <Flex direction='column' className='panel-content-container detail-container'>
       <SidebarHeader icon={IvyIcons.PenEdit} title={title} className='detail-header'>
-        <Button icon={IvyIcons.Help} onClick={() => openUrl(helpUrl)} title={helpText.label} aria-label={helpText.label} />
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button icon={IvyIcons.Help} onClick={() => openUrl(helpUrl)} aria-label={helpText.label} />
+          </TooltipTrigger>
+          <TooltipContent>{helpText.label}</TooltipContent>
+        </Tooltip>
       </SidebarHeader>
       <Flex direction='column' className='detail-content'>
         {!field ? (

diff --git a/packages/dataclass-editor/src/detail/field/InputFieldWithTypeBrowser.tsx b/packages/dataclass-editor/src/detail/field/InputFieldWithTypeBrowser.tsx
@@ -1,4 +1,16 @@
-import { BasicField, BasicInput, Button, Dialog, DialogContent, DialogTrigger, InputGroup, type MessageData } from '@axonivy/ui-components';
+import {
+  BasicField,
+  BasicInput,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTrigger,
+  InputGroup,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  type MessageData
+} from '@axonivy/ui-components';
 import { IvyIcons } from '@axonivy/ui-icons';
 import { useState } from 'react';
 import { Browser } from './browser/Browser';
@@ -18,9 +30,14 @@ export const InputFieldWithTypeBrowser = ({ value, onChange, message }: InputFie
       <BasicField label='Type' style={{ flex: '1' }} message={message} aria-label='Type'>
         <InputGroup>
           <BasicInput value={value} onChange={event => onChange(event.target.value)} />
-          <DialogTrigger asChild>
-            <Button icon={IvyIcons.ListSearch} aria-label={BROWSER_LABEL} title={BROWSER_LABEL} />
-          </DialogTrigger>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <DialogTrigger asChild>
+                <Button icon={IvyIcons.ListSearch} aria-label={BROWSER_LABEL} />
+              </DialogTrigger>
+            </TooltipTrigger>
+            <TooltipContent>{BROWSER_LABEL}</TooltipContent>
+          </Tooltip>
         </InputGroup>
       </BasicField>
       <DialogContent style={{ height: '80vh' }}>

diff --git a/packages/dataclass-editor/src/master/AddFieldDialog.tsx b/packages/dataclass-editor/src/master/AddFieldDialog.tsx
@@ -1,3 +1,4 @@
+import type { DataClass, Field } from '@axonivy/dataclass-editor-protocol';
 import {
   addRow,
   BasicField,
@@ -14,7 +15,6 @@ import {
   Input,
   Tooltip,
   TooltipContent,
-  TooltipProvider,
   TooltipTrigger,
   useHotkeys,
   type MessageData
@@ -23,7 +23,6 @@ import { IvyIcons } from '@axonivy/ui-icons';
 import { type Table } from '@tanstack/react-table';
 import { useMemo, useState } from 'react';
 import { useAppContext } from '../context/AppContext';
-import type { DataClass, Field } from '@axonivy/dataclass-editor-protocol';
 import { isEntity } from '../data/dataclass-utils';
 import { BROWSER_LABEL, InputFieldWithTypeBrowser } from '../detail/field/InputFieldWithTypeBrowser';
 import { useKnownHotkeys } from '../utils/hotkeys';
@@ -124,23 +123,19 @@ export const AddFieldDialog = ({ table }: AddFieldDialogProps) => {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <DialogTrigger asChild>
-              <Button className='add-field-dialog-trigger-button' icon={IvyIcons.Plus} aria-label={shortcut.label} />
-            </DialogTrigger>
-          </TooltipTrigger>
-          <TooltipContent>
-            <span>{shortcut.label}</span>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <DialogTrigger asChild>
+            <Button className='add-field-dialog-trigger-button' icon={IvyIcons.Plus} aria-label={shortcut.label} />
+          </DialogTrigger>
+        </TooltipTrigger>
+        <TooltipContent>{shortcut.label}</TooltipContent>
+      </Tooltip>
       <DialogContent onCloseAutoFocus={e => e.preventDefault()}>
         <DialogHeader>
-          <DialogTitle>New Attribute</DialogTitle>
+          <DialogTitle>Add Attribute</DialogTitle>
         </DialogHeader>
-        <DialogDescription>Choose the name and type of the attribute you want to add.</DialogDescription>
+        <DialogDescription>Choose the name and type of the Attribute you want to add.</DialogDescription>
         <Flex ref={enter} tabIndex={-1} direction='column' gap={2}>
           <Flex direction='column' gap={2}>
             <BasicField label='Name' message={nameValidationMessage} aria-label='Name'>
@@ -149,18 +144,14 @@ export const AddFieldDialog = ({ table }: AddFieldDialogProps) => {
             <InputFieldWithTypeBrowser value={type} message={typeValidationMessage} onChange={setType} />
           </Flex>
           <DialogFooter>
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button variant='primary' size='large' aria-label='Create Attribute' disabled={!allInputsValid()} onClick={addField}>
-                    Create Attribute
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <span>Hold {hotkeyText('mod')} to add an additional attribute</span>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant='primary' size='large' aria-label='Create Attribute' disabled={!allInputsValid()} onClick={addField}>
+                  Create Attribute
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Hold {hotkeyText('mod')} to add an additional Attribute</TooltipContent>
+            </Tooltip>
           </DialogFooter>
         </Flex>
       </DialogContent>

diff --git a/packages/dataclass-editor/src/master/DataClassMasterContent.tsx b/packages/dataclass-editor/src/master/DataClassMasterContent.tsx
@@ -18,7 +18,6 @@ import {
   toast,
   Tooltip,
   TooltipContent,
-  TooltipProvider,
   TooltipTrigger,
   useHotkeys,
   useMultiSelectRow,
@@ -73,16 +72,12 @@ export const DataClassMasterContent = () => {
       accessorKey: 'type',
       header: ({ column }) => <SortableHeader column={column} name='Type' />,
       cell: cell => (
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className='cell-with-tooltip'>{simpleTypeName(cell.getValue())}</span>
-            </TooltipTrigger>
-            <TooltipContent>
-              <span>{cell.getValue()}</span>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className='cell-with-tooltip'>{simpleTypeName(cell.getValue())}</span>
+          </TooltipTrigger>
+          <TooltipContent>{cell.getValue()}</TooltipContent>
+        </Tooltip>
       )
     },
     {
@@ -182,24 +177,32 @@ export const DataClassMasterContent = () => {
     <Flex gap={2}>
       <AddFieldDialog table={table} />
       <Separator decorative orientation='vertical' style={{ height: '20px', margin: 0 }} />
-      <Button
-        icon={IvyIcons.Trash}
-        onClick={deleteField}
-        disabled={table.getSelectedRowModel().rows.length === 0}
-        aria-label={hotkeys.deleteAttr.label}
-        title={hotkeys.deleteAttr.label}
-      />
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            icon={IvyIcons.Trash}
+            onClick={deleteField}
+            disabled={table.getSelectedRowModel().rows.length === 0}
+            aria-label={hotkeys.deleteAttr.label}
+          />
+        </TooltipTrigger>
+        <TooltipContent>{hotkeys.deleteAttr.label}</TooltipContent>
+      </Tooltip>
 
       {isCombineSupported && (
         <>
           <Separator decorative orientation='vertical' style={{ height: '20px', margin: 0 }} />
-          <Button
-            icon={IvyIcons.WrapToSubprocess}
-            onClick={() => combineFields.mutate()}
-            aria-label={hotkeys.combineAttr.label}
-            title={hotkeys.combineAttr.label}
-            disabled={table.getSelectedRowModel().rows.length === 0}
-          />
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                icon={IvyIcons.WrapToSubprocess}
+                onClick={() => combineFields.mutate()}
+                aria-label={hotkeys.combineAttr.label}
+                disabled={table.getSelectedRowModel().rows.length === 0}
+              />
+            </TooltipTrigger>
+            <TooltipContent>{hotkeys.combineAttr.label}</TooltipContent>
+          </Tooltip>
         </>
       )}
     </Flex>

diff --git a/packages/dataclass-editor/src/master/DataClassMasterToolbar.tsx b/packages/dataclass-editor/src/master/DataClassMasterToolbar.tsx
@@ -16,14 +16,17 @@ import {
   Toolbar,
   ToolbarContainer,
   ToolbarTitle,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
   useHotkeys,
   useTheme
 } from '@axonivy/ui-components';
 import { IvyIcons } from '@axonivy/ui-icons';
+import { useRef } from 'react';
 import { useAppContext } from '../context/AppContext';
 import { useAction } from '../context/useAction';
 import { useKnownHotkeys } from '../utils/hotkeys';
-import { useRef } from 'react';
 
 type DataClassMasterToolbarProps = {
   title: string;
@@ -63,49 +66,48 @@ export const DataClassMasterToolbar = ({ title }: DataClassMasterToolbarProps) =
         <ToolbarContainer maxWidth={450}>
           <Flex>
             <Flex gap={1}>
-              <Button
-                title={hotkeys.undo.label}
-                aria-label={hotkeys.undo.label}
-                icon={IvyIcons.Undo}
-                size='large'
-                onClick={undo}
-                disabled={!history.canUndo}
-              />
-              <Button
-                title={hotkeys.redo.label}
-                aria-label={hotkeys.redo.label}
-                icon={IvyIcons.Redo}
-                size='large'
-                onClick={redo}
-                disabled={!history.canRedo}
-              />
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button aria-label={hotkeys.undo.label} icon={IvyIcons.Undo} size='large' onClick={undo} disabled={!history.canUndo} />
+                </TooltipTrigger>
+                <TooltipContent>{hotkeys.undo.label}</TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button aria-label={hotkeys.redo.label} icon={IvyIcons.Redo} size='large' onClick={redo} disabled={!history.canRedo} />
+                </TooltipTrigger>
+                <TooltipContent>{hotkeys.redo.label}</TooltipContent>
+              </Tooltip>
             </Flex>
             <Separator orientation='vertical' style={{ height: '26px', marginInline: 'var(--size-2)' }} />
           </Flex>
         </ToolbarContainer>
         {isHdData && (
           <>
-            <Button
-              icon={IvyIcons.File}
-              size='large'
-              title={hotkeys.openForm.label}
-              aria-label={hotkeys.openForm.label}
-              onClick={() => openForm()}
-            />
-            <Button
-              icon={IvyIcons.Process}
-              size='large'
-              title={hotkeys.openProcess.label}
-              aria-label={hotkeys.openProcess.label}
-              onClick={() => openProcess()}
-            />
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button icon={IvyIcons.File} size='large' aria-label={hotkeys.openForm.label} onClick={() => openForm()} />
+              </TooltipTrigger>
+              <TooltipContent>{hotkeys.openForm.label}</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button icon={IvyIcons.Process} size='large' aria-label={hotkeys.openProcess.label} onClick={() => openProcess()} />
+              </TooltipTrigger>
+              <TooltipContent>{hotkeys.openProcess.label}</TooltipContent>
+            </Tooltip>
           </>
         )}
         {!disabled && (
           <Popover>
-            <PopoverTrigger asChild>
-              <Button icon={IvyIcons.Settings} size='large' title='Settings' aria-label='Settings' />
-            </PopoverTrigger>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <PopoverTrigger asChild>
+                  <Button icon={IvyIcons.Settings} size='large' aria-label='Settings' />
+                </PopoverTrigger>
+              </TooltipTrigger>
+              <TooltipContent>Settings</TooltipContent>
+            </Tooltip>
             <PopoverContent sideOffset={12}>
               <ReadonlyProvider readonly={false}>
                 <Flex direction='column' gap={2}>
@@ -129,13 +131,17 @@ export const DataClassMasterToolbar = ({ title }: DataClassMasterToolbarProps) =
             </PopoverContent>
           </Popover>
         )}
-        <Button
-          icon={IvyIcons.LayoutSidebarRightCollapse}
-          size='large'
-          onClick={() => setDetail(!detail)}
-          title='Details toggle'
-          aria-label='Details toggle'
-        />
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              icon={IvyIcons.LayoutSidebarRightCollapse}
+              size='large'
+              onClick={() => setDetail(!detail)}
+              aria-label='Details toggle'
+            />
+          </TooltipTrigger>
+          <TooltipContent>Details toggle</TooltipContent>
+        </Tooltip>
       </Flex>
     </Toolbar>
   );