fix: tooltip arrow regression after last scroll max size feat (#2935)

Fixes an issue where the `HtmlTooltip` arrow would no longer work after a regression included with #2891 Also adds the arrow prop to most usages of the tooltip to keep consistency.
Unleash · Jan 19, 2023 · 08c1123 · 08c1123
1 parent aa96d9b
commit 08c1123
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/frontend/src/component/common/HtmlTooltip/HtmlTooltip.tsx b/frontend/src/component/common/HtmlTooltip/HtmlTooltip.tsx
@@ -1,9 +1,18 @@
 import { styled, Tooltip, tooltipClasses, TooltipProps } from '@mui/material';
 import { SpacingArgument } from '@mui/system/createTheme/createSpacing';
 
+const StyledHtmlTooltipBody = styled('div')(({ theme }) => ({
+    overflow: 'auto',
+    padding: theme.spacing(1, 1.5),
+}));
+
 const StyledHtmlTooltip = styled(
     ({ className, maxWidth, maxHeight, ...props }: IHtmlTooltipProps) => (
-        <Tooltip {...props} classes={{ popper: className }} />
+        <Tooltip
+            {...props}
+            title={<StyledHtmlTooltipBody>{props.title}</StyledHtmlTooltipBody>}
+            classes={{ popper: className }}
+        />
     ),
     {
         shouldForwardProp: prop => prop !== 'maxWidth' && prop !== 'maxHeight',
@@ -15,15 +24,14 @@ const StyledHtmlTooltip = styled(
             display: 'flex',
             flexDirection: 'column',
             backgroundColor: theme.palette.background.paper,
-            padding: theme.spacing(1, 1.5),
+            padding: 0,
             borderRadius: theme.shape.borderRadiusMedium,
             boxShadow: theme.shadows[2],
             color: theme.palette.text.primary,
             fontWeight: theme.fontWeight.medium,
             maxWidth: 'inherit',
             border: `1px solid ${theme.palette.lightBorder}`,
             maxHeight: maxHeight || theme.spacing(37.5),
-            overflow: 'auto',
         },
         [`& .${tooltipClasses.arrow}`]: {
             '&:before': {

diff --git a/frontend/src/component/common/TooltipLink/TooltipLink.tsx b/frontend/src/component/common/TooltipLink/TooltipLink.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Link, LinkProps, styled, TooltipProps } from '@mui/material';
+import { Link, LinkProps, styled } from '@mui/material';
 import { HtmlTooltip, IHtmlTooltipProps } from '../HtmlTooltip/HtmlTooltip';
 
 const StyledLink = styled(Link, {
@@ -26,7 +26,7 @@ export const TooltipLink = ({
     children,
     ...props
 }: ITooltipLinkProps) => (
-    <HtmlTooltip title={tooltip} {...tooltipProps}>
+    <HtmlTooltip title={tooltip} {...tooltipProps} arrow>
         <StyledLink highlighted={highlighted} {...props}>
             {children}
         </StyledLink>

diff --git a/...d/src/component/environments/EnvironmentTable/EnvironmentNameCell/EnvironmentNameCell.tsx b/...d/src/component/environments/EnvironmentTable/EnvironmentNameCell/EnvironmentNameCell.tsx
@@ -46,7 +46,7 @@ export const EnvironmentNameCell = ({
                 condition={!environment.enabled}
                 show={
                     <HtmlTooltip
-                        sx={{ maxWidth: '270px' }}
+                        maxWidth="270px"
                         title={
                             <>
                                 <StyledTooltipTitle>
@@ -60,6 +60,7 @@ export const EnvironmentNameCell = ({
                             </>
                         }
                         describeChild
+                        arrow
                     >
                         <StyledBadge color="neutral">Deprecated</StyledBadge>
                     </HtmlTooltip>