review changes round one

hubmapconsortium · Sep 24, 2024 · 37bdd87 · 37bdd87
1 parent e9b9cf7
commit 37bdd87
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 28 deletions.
diff --git a/...ents/detailPage/visualization/VisualizationDownloadButton/VisualizationDownloadButton.tsx b/...ents/detailPage/visualization/VisualizationDownloadButton/VisualizationDownloadButton.tsx
@@ -6,8 +6,7 @@ import SvgIcon from '@mui/material/SvgIcon';
 import { useTrackEntityPageEvent } from 'js/components/detailPage/useTrackEntityPageEvent';
 import { useSnackbarActions } from 'js/shared-styles/snackbars';
 import postAndDownloadFile from 'js/helpers/postAndDownloadFile';
-import { WhiteBackgroundIconButton } from 'js/shared-styles/buttons';
-import { SecondaryBackgroundTooltip } from 'js/shared-styles/tooltips';
+import { WhiteBackgroundIconTooltipButton } from 'js/shared-styles/buttons';
 
 const tooltip = 'Download Jupyter Notebook';
 
@@ -32,16 +31,14 @@ function VisualizationDownloadButton({ uuid, hasNotebook }: VisualizationDownloa
       });
   }, [uuid, toastError, trackEntityPageEvent]);
 
-  if (!uuid ?? !hasNotebook) {
+  if (!uuid || !hasNotebook) {
     return null;
   }
 
   return (
-    <SecondaryBackgroundTooltip title={tooltip}>
-      <WhiteBackgroundIconButton onClick={downloadNotebook}>
-        <SvgIcon color="primary" component={Download} />
-      </WhiteBackgroundIconButton>
-    </SecondaryBackgroundTooltip>
+    <WhiteBackgroundIconTooltipButton tooltip={tooltip} onClick={downloadNotebook}>
+      <SvgIcon color="primary" component={Download} />
+    </WhiteBackgroundIconTooltipButton>
   );
 }
 

diff --git a/...ts/detailPage/visualization/VisualizationWorkspaceButton/VisualizationWorkspaceButton.tsx b/...ts/detailPage/visualization/VisualizationWorkspaceButton/VisualizationWorkspaceButton.tsx
@@ -5,8 +5,7 @@ import SvgIcon from '@mui/icons-material/Download';
 import { WorkspacesIcon } from 'js/shared-styles/icons';
 import NewWorkspaceDialog from 'js/components/workspaces/NewWorkspaceDialog';
 import { useCreateWorkspaceForm } from 'js/components/workspaces/NewWorkspaceDialog/useCreateWorkspaceForm';
-import { SecondaryBackgroundTooltip } from 'js/shared-styles/tooltips';
-import { WhiteBackgroundIconButton } from 'js/shared-styles/buttons';
+import { WhiteBackgroundIconTooltipButton } from 'js/shared-styles/buttons';
 import { useAppContext } from 'js/components/Contexts';
 
 const tooltip = 'Launch New Workspace';
@@ -38,11 +37,9 @@ function VisualizationWorkspaceButton({
   return (
     <>
       <NewWorkspaceDialog {...rest} />
-      <SecondaryBackgroundTooltip title={tooltip}>
-        <WhiteBackgroundIconButton onClick={() => setDialogIsOpen(true)}>
-          <SvgIcon color="primary" component={WorkspacesIcon} />
-        </WhiteBackgroundIconButton>
-      </SecondaryBackgroundTooltip>
+      <WhiteBackgroundIconTooltipButton tooltip={tooltip} onClick={() => setDialogIsOpen(true)}>
+        <SvgIcon color="primary" component={WorkspacesIcon} />
+      </WhiteBackgroundIconTooltipButton>
     </>
   );
 }

diff --git a/context/app/static/js/shared-styles/buttons/index.tsx b/context/app/static/js/shared-styles/buttons/index.tsx
@@ -3,6 +3,7 @@ import { Theme, styled } from '@mui/material/styles';
 import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 import ToggleButton from '@mui/material/ToggleButton';
 import Button from '@mui/material/Button';
+import { TooltipIconButton } from 'js/shared-styles/buttons/TooltipButton';
 import { SecondaryBackgroundTooltip } from '../tooltips';
 import IconDropdownMenuButton from '../dropdowns/IconDropdownMenuButton';
 
@@ -36,6 +37,12 @@ const WhiteBackgroundIconDropdownMenuButton = styled(IconDropdownMenuButton)(({
   '& svg': svgStyles,
 }));
 
+const WhiteBackgroundIconTooltipButton = styled(TooltipIconButton)(({ theme }) => ({
+  ...whiteBackgroundCSS,
+  ...border(theme),
+  '& svg': svgStyles,
+}));
+
 const WhiteBackgroundToggleButton = styled(ToggleButton)({
   ...whiteBackgroundCSS,
   border: 0,
@@ -75,6 +82,7 @@ export default TooltipToggleButton;
 export {
   WhiteBackgroundIconButton,
   WhiteBackgroundIconDropdownMenuButton,
+  WhiteBackgroundIconTooltipButton,
   TooltipToggleButton,
   iconButtonHeight,
   WhiteTextButton,

diff --git a/context/app/static/js/shared-styles/dropdowns/IconDropdownMenu/IconDropdownMenu.tsx b/context/app/static/js/shared-styles/dropdowns/IconDropdownMenu/IconDropdownMenu.tsx
@@ -9,7 +9,7 @@ import { WhiteBackgroundIconDropdownMenuButton } from 'js/shared-styles/buttons'
 import withDropdownMenuProvider from 'js/shared-styles/dropdowns/DropdownMenuProvider/withDropdownMenuProvider';
 import DropdownMenu from 'js/shared-styles/dropdowns/DropdownMenu';
 
-import { StyledSecondaryBackgroundTooltip, StyledSvgIcon, StyledTypography } from './style';
+import { StyledSvgIcon, StyledTypography } from './style';
 
 interface IconDropdownMenuItemProps {
   children: string;
@@ -37,14 +37,9 @@ interface IconDropdownMenuProps {
 function IconDropdownMenu({ tooltip, icon, children }: PropsWithChildren<IconDropdownMenuProps>) {
   return (
     <>
-      <StyledSecondaryBackgroundTooltip title={tooltip}>
-        {/* Span is needed here for tooltip to appear without clicking */}
-        <span>
-          <WhiteBackgroundIconDropdownMenuButton menuID={tooltip}>
-            <SvgIcon component={icon} />
-          </WhiteBackgroundIconDropdownMenuButton>
-        </span>
-      </StyledSecondaryBackgroundTooltip>
+      <WhiteBackgroundIconDropdownMenuButton menuID={tooltip} tooltip={tooltip}>
+        <SvgIcon component={icon} />
+      </WhiteBackgroundIconDropdownMenuButton>
       <DropdownMenu id={`${tooltip}-menu`}>
         <MenuList id="menu-options">{children}</MenuList>
       </DropdownMenu>

diff --git a/...t/app/static/js/shared-styles/dropdowns/IconDropdownMenuButton/IconDropdownMenuButton.tsx b/...t/app/static/js/shared-styles/dropdowns/IconDropdownMenuButton/IconDropdownMenuButton.tsx
@@ -1,18 +1,20 @@
 import React from 'react';
-import IconButton from '@mui/material/IconButton';
 
 import { useDropdownMenuStore } from 'js/shared-styles/dropdowns/DropdownMenuProvider';
+import { WhiteBackgroundIconTooltipButton } from 'js/shared-styles/buttons';
 
 interface IconDropdownMenuButtonProps {
   children: React.ReactNode;
   menuID: string;
+  tooltip: string;
 }
 
-function IconDropdownMenuButton({ children, menuID, ...rest }: IconDropdownMenuButtonProps) {
+function IconDropdownMenuButton({ children, menuID, tooltip, ...rest }: IconDropdownMenuButtonProps) {
   const { menuRef, menuIsOpen, openMenu } = useDropdownMenuStore();
 
   return (
-    <IconButton
+    <WhiteBackgroundIconTooltipButton
+      tooltip={tooltip}
       onClick={openMenu}
       color="primary"
       aria-controls={menuIsOpen ? menuID : undefined}
@@ -21,7 +23,7 @@ function IconDropdownMenuButton({ children, menuID, ...rest }: IconDropdownMenuB
       {...rest}
     >
       {children}
-    </IconButton>
+    </WhiteBackgroundIconTooltipButton>
   );
 }