From 1269d806ba3c2ab3da29cb5ddba0089acdd26807 Mon Sep 17 00:00:00 2001
From: eirikhaugstulen <eirik.haugstulen@gmail.com>
Date: Fri, 1 Dec 2023 15:07:35 +0100
Subject: [PATCH] feat: add tooltip on focus

---
 .../TemplateSelectorChip.component.js         | 68 +++++++++++++++----
 1 file changed, 54 insertions(+), 14 deletions(-)

diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js
index c1fb7db8e0..2c099652a7 100644
--- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js
+++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js
@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
 import { Chip, Tooltip } from '@dhis2/ui';
+import { withStyles } from '@material-ui/core/';
 import { TemplateSelectorChipContent } from './TemplateSelectorChipContent.component';
 import type { WorkingListTemplate } from './workingListsBase.types';
 
@@ -13,10 +14,35 @@ type Props = {
     template: WorkingListTemplate,
     currentTemplateId: string,
     onSelectTemplate: Function,
+    ...CssClasses,
 };
 
-export const TemplateSelectorChip = (props: Props) => {
-    const { template, currentTemplateId, onSelectTemplate, ...passOnProps } = props;
+const styles = {
+    // button style reset
+    button: {
+        border: 'none',
+        backgroundColor: 'transparent',
+        borderRadius: '16px',
+        padding: 0,
+        margin: 0,
+        minWidth: 0,
+        minHeight: 0,
+        '&:hover': {
+            backgroundColor: 'transparent',
+        },
+    },
+    // Override default chip margin
+    chip: {
+        marginTop: '0 !important',
+        marginBottom: '0 !important',
+        marginRight: '0 !important',
+        marginLeft: '0 !important',
+        backgroundColor: 'red',
+    },
+};
+
+export const TemplateSelectorChipPlain = (props: Props) => {
+    const { template, currentTemplateId, onSelectTemplate, classes, ...passOnProps } = props;
     const { name, id } = template;
 
     const selectTemplateHandler = React.useCallback(() => {
@@ -32,18 +58,32 @@ export const TemplateSelectorChip = (props: Props) => {
             placement={'top'}
             openDelay={800}
         >
-            <Chip
-                dataTest="workinglist-template-selector-chip"
-                tabIndex="0"
-                selected={id === currentTemplateId}
-                onClick={selectTemplateHandler}
-            >
-                <TemplateSelectorChipContent
-                    {...passOnProps}
-                    text={name}
-                    isSelectedTemplate={id === currentTemplateId}
-                />
-            </Chip>
+            {({ ref, onMouseOver, onMouseOut }) => (
+                <button
+                    ref={ref}
+                    onClick={selectTemplateHandler}
+                    className={classes.button}
+                    onMouseOver={onMouseOver}
+                    onMouseOut={onMouseOut}
+                    onFocus={onMouseOver}
+                    onBlur={onMouseOut}
+                >
+                    <Chip
+                        dataTest="workinglist-template-selector-chip"
+                        tabIndex="0"
+                        className={classes.chip}
+                        selected={id === currentTemplateId}
+                    >
+                        <TemplateSelectorChipContent
+                            {...passOnProps}
+                            text={name}
+                            isSelectedTemplate={id === currentTemplateId}
+                        />
+                    </Chip>
+                </button>
+            )}
         </Tooltip>
     );
 };
+
+export const TemplateSelectorChip = withStyles(styles)(TemplateSelectorChipPlain);