Add title truncation to work title (#1983)

* add title truncation to work title * add tool tip to et heading * add enable ellipsis
bcgov · Mar 12, 2024 · fa47222 · fa47222
1 parent c8ec11d
commit fa47222
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 19 deletions.
diff --git a/epictrack-web/src/components/myWorkplans/Card/CardBody.tsx b/epictrack-web/src/components/myWorkplans/Card/CardBody.tsx
@@ -47,15 +47,14 @@ const CardBody = ({ workplan }: CardProps) => {
             bold
             color={Palette.neutral.dark}
             xs
+            enableTooltip
+            enableEllipsis
+            tooltip={workTitle}
             sx={{
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
+              maxWidth: "70%",
             }}
           >
-            <Tooltip title={workTitle} placement="top-start">
-              <span>{workTitle}</span>
-            </Tooltip>
+            {workTitle}
           </ETHeading4>
         </Grid>
         <Grid item xs={3} container justifyContent={"flex-end"}>

diff --git a/epictrack-web/src/components/shared/index.tsx b/epictrack-web/src/components/shared/index.tsx
@@ -130,20 +130,26 @@ export const ETHeading4 = ({
   ...rest
 }: HeaderProps) => {
   return (
-    <Typography
-      color={color}
-      sx={{
-        ...sx,
-        fontWeight: bold
-          ? MET_Header_Font_Weight_Bold
-          : MET_Header_Font_Weight_Regular,
-        fontFamily: MET_Header_Font_Family,
-      }}
-      variant="h4"
-      {...rest}
+    <Tooltip
+      title={rest.tooltip as string}
+      disableHoverListener={!rest.enableTooltip}
     >
-      {children}
-    </Typography>
+      <Typography
+        color={color}
+        sx={{
+          ...sx,
+          fontWeight: bold
+            ? MET_Header_Font_Weight_Bold
+            : MET_Header_Font_Weight_Regular,
+          fontFamily: MET_Header_Font_Family,
+          ...(rest.enableEllipsis && useStyle.textEllipsis),
+        }}
+        variant="h4"
+        {...rest}
+      >
+        {children}
+      </Typography>
+    </Tooltip>
   );
 };