Improve usability of icon buttons in header with tooltip

DaneEveritt · DaneEveritt · commit f860fd2cfebd · 2022-06-12T09:35:02.000-04:00
diff --git a/resources/scripts/components/NavigationBar.tsx b/resources/scripts/components/NavigationBar.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useState } from 'react';
 import { Link, NavLink } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCogs, faLayerGroup, faSignOutAlt, faUserCircle } from '@fortawesome/free-solid-svg-icons';
@@ -9,36 +10,18 @@ import tw, { theme } from 'twin.macro';
 import styled from 'styled-components/macro';
 import http from '@/api/http';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import { useState } from 'react';
-
-const Navigation = styled.div`
-    ${tw`w-full bg-neutral-900 shadow-md overflow-x-auto`};
-    
-    & > div {
-        ${tw`mx-auto w-full flex items-center`};
-    }
-    
-    & #logo {
-        ${tw`flex-1`};
-        
-        & > a {
-            ${tw`text-2xl font-header px-4 no-underline text-neutral-200 hover:text-neutral-100 transition-colors duration-150`};
-        }
-    }
-`;
+import Tooltip from '@/components/elements/tooltip/Tooltip';
 
 const RightNavigation = styled.div`
-    ${tw`flex h-full items-center justify-center`};
-    
     & > a, & > button, & > .navigation-link {
         ${tw`flex items-center h-full no-underline text-neutral-300 px-6 cursor-pointer transition-all duration-150`};
-        
+
         &:active, &:hover {
             ${tw`text-neutral-100 bg-black`};
         }
-        
+
         &:active, &:hover, &.active {
-            box-shadow: inset 0 -2px ${theme`colors.cyan.700`.toString()};
+            box-shadow: inset 0 -2px ${theme`colors.cyan.600`.toString()};
         }
     }
 `;
@@ -57,32 +40,43 @@ export default () => {
     };
 
     return (
-        <Navigation>
-            <SpinnerOverlay visible={isLoggingOut} />
-            <div css={tw`mx-auto w-full flex items-center`} style={{ maxWidth: '1200px', height: '3.5rem' }}>
-                <div id={'logo'}>
-                    <Link to={'/'}>
+        <div className={'w-full bg-neutral-900 shadow-md overflow-x-auto'}>
+            <SpinnerOverlay visible={isLoggingOut}/>
+            <div className={'mx-auto w-full flex items-center h-[3.5rem] max-w-[1200px]'}>
+                <div id={'logo'} className={'flex-1'}>
+                    <Link
+                        to={'/'}
+                        className={'text-2xl font-header px-4 no-underline text-neutral-200 hover:text-neutral-100 transition-colors duration-150'}
+                    >
                         {name}
                     </Link>
                 </div>
-                <RightNavigation>
+                <RightNavigation className={'flex h-full items-center justify-center'}>
                     <SearchContainer/>
-                    <NavLink to={'/'} exact>
-                        <FontAwesomeIcon icon={faLayerGroup}/>
-                    </NavLink>
-                    <NavLink to={'/account'}>
-                        <FontAwesomeIcon icon={faUserCircle}/>
-                    </NavLink>
+                    <Tooltip placement={'bottom'} content={'Dashboard'}>
+                        <NavLink to={'/'} exact>
+                            <FontAwesomeIcon icon={faLayerGroup}/>
+                        </NavLink>
+                    </Tooltip>
+                    <Tooltip placement={'bottom'} content={'Account Settings'}>
+                        <NavLink to={'/account'}>
+                            <FontAwesomeIcon icon={faUserCircle}/>
+                        </NavLink>
+                    </Tooltip>
                     {rootAdmin &&
-                    <a href={'/admin'} rel={'noreferrer'}>
-                        <FontAwesomeIcon icon={faCogs}/>
-                    </a>
+                        <Tooltip placement={'bottom'} content={'Admin'}>
+                            <a href={'/admin'} rel={'noreferrer'}>
+                                <FontAwesomeIcon icon={faCogs}/>
+                            </a>
+                        </Tooltip>
                     }
-                    <button onClick={onTriggerLogout}>
-                        <FontAwesomeIcon icon={faSignOutAlt}/>
-                    </button>
+                    <Tooltip placement={'bottom'} content={'Sign Out'}>
+                        <button onClick={onTriggerLogout}>
+                            <FontAwesomeIcon icon={faSignOutAlt}/>
+                        </button>
+                    </Tooltip>
                 </RightNavigation>
             </div>
-        </Navigation>
+        </div>
     );
 };
diff --git a/resources/scripts/components/dashboard/search/SearchContainer.tsx b/resources/scripts/components/dashboard/search/SearchContainer.tsx
@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import useEventListener from '@/plugins/useEventListener';
 import SearchModal from '@/components/dashboard/search/SearchModal';
+import Tooltip from '@/components/elements/tooltip/Tooltip';
 
 export default () => {
     const [ visible, setVisible ] = useState(false);
@@ -24,9 +25,11 @@ export default () => {
                 onDismissed={() => setVisible(false)}
             />
             }
-            <div className={'navigation-link'} onClick={() => setVisible(true)}>
-                <FontAwesomeIcon icon={faSearch}/>
-            </div>
+            <Tooltip placement={'bottom'} content={'Search'}>
+                <div className={'navigation-link'} onClick={() => setVisible(true)}>
+                    <FontAwesomeIcon icon={faSearch}/>
+                </div>
+            </Tooltip>
         </>
     );
 };
diff --git a/resources/scripts/components/elements/SubNavigation.tsx b/resources/scripts/components/elements/SubNavigation.tsx
@@ -21,7 +21,7 @@ const SubNavigation = styled.div`
 
             &:active, &.active {
                 ${tw`text-neutral-100`};
-                box-shadow: inset 0 -2px ${theme`colors.cyan.700`.toString()};
+                box-shadow: inset 0 -2px ${theme`colors.cyan.600`.toString()};
             }
         }
     }
diff --git a/resources/scripts/components/elements/tooltip/Tooltip.tsx b/resources/scripts/components/elements/tooltip/Tooltip.tsx
@@ -18,6 +18,9 @@ import {
 import { AnimatePresence, motion } from 'framer-motion';
 
 interface Props {
+    rest?: number;
+    delay?: number | Partial<{ open: number; close: number }>;
+    alwaysOpen?: boolean;
     content: string | React.ReactChild;
     disabled?: boolean;
     arrow?: boolean;
@@ -34,22 +37,35 @@ const arrowSides: Record<Side, Side> = {
     right: 'left',
 };
 
-export default ({ content, children, disabled = false, ...props }: Props) => {
+export default ({
+    content,
+    children,
+    disabled = false,
+    alwaysOpen = false,
+    delay = { open: 500 },
+    rest = 30,
+    ...props
+}: Props) => {
     const arrowEl = useRef<HTMLDivElement>(null);
-    const [ open, setOpen ] = useState(false);
+    const [ open, setOpen ] = useState(alwaysOpen || false);
 
     const { x, y, reference, floating, middlewareData, strategy, context } = useFloating({
         open,
         placement: props.placement || 'top',
         strategy: props.strategy || 'absolute',
-        middleware: [ offset(6), flip(), shift({ padding: 6 }), arrow({ element: arrowEl, padding: 6 }) ],
-        onOpenChange: setOpen,
+        middleware: [
+            offset(props.arrow ? 10 : 6),
+            flip(),
+            shift({ padding: 6 }),
+            arrow({ element: arrowEl, padding: 6 }),
+        ],
+        onOpenChange: (o) => setOpen(o || alwaysOpen || false),
         whileElementsMounted: autoUpdate,
     });
 
     const { getReferenceProps, getFloatingProps } = useInteractions([
         useFocus(context),
-        useHover(context, { restMs: 30 }),
+        useHover(context, { restMs: rest, delay }),
         useRole(context, { role: 'tooltip' }),
         useDismiss(context),
     ]);
@@ -70,7 +86,7 @@ export default ({ content, children, disabled = false, ...props }: Props) => {
                         initial={{ opacity: 0, scale: 0.85 }}
                         animate={{ opacity: 1, scale: 1 }}
                         exit={{ opacity: 0 }}
-                        transition={{ type: 'easeIn', damping: 20, stiffness: 300, duration: 0.1 }}
+                        transition={{ type: 'spring', damping: 20, stiffness: 300, duration: 0.075 }}
                         {...getFloatingProps({
                             ref: floating,
                             className: 'absolute top-0 left-0 bg-gray-900 text-sm text-gray-200 px-3 py-2 rounded pointer-events-none max-w-[90vw]',
@@ -86,10 +102,10 @@ export default ({ content, children, disabled = false, ...props }: Props) => {
                             <div
                                 ref={arrowEl}
                                 style={{
-                                    transform: `translate(${Math.round(ax || 0)}px, ${Math.round(ay || 0)}px)`,
+                                    transform: `translate(${Math.round(ax || 0)}px, ${Math.round(ay || 0)}px) rotate(45deg)`,
                                     [side]: '-6px',
                                 }}
-                                className={'absolute top-0 left-0 bg-gray-900 w-3 h-3 rotate-45'}
+                                className={'absolute top-0 left-0 bg-gray-900 w-3 h-3'}
                             />
                         }
                     </motion.div>

Original file line number	Diff line number	Diff line change
@@ -21,7 +21,7 @@ const SubNavigation = styled.div`
`21`	`21`
`22`	`22`	`&:active, &.active {`
`23`	`23`	${tw`text-neutral-100`};
`24`		- box-shadow: inset 0 -2px ${theme`colors.cyan.700`.toString()};
	`24`	+ box-shadow: inset 0 -2px ${theme`colors.cyan.600`.toString()};
`25`	`25`	`}`
`26`	`26`	`}`
`27`	`27`	`}`