fix(OverflowTooltip): paragraph overflow (#3820)

* fix(OverflowTooltip): paragraph overflow * docs(Snackbar): paragraph overflow variant * fix(AppSwitcher): leverage overflow tooltip and fix tooltip not showing
lumada-design · Nov 17, 2023 · a2e2e9b · a2e2e9b
1 parent bf8e9a5
commit a2e2e9b
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 61 deletions.
diff --git a/packages/core/src/components/AppSwitcher/Action/Action.styles.tsx b/packages/core/src/components/AppSwitcher/Action/Action.styles.tsx
@@ -41,19 +41,14 @@ export const { staticClasses, useClasses } = createClasses(
     },
     title: {
       flexGrow: 1,
-      margin: `0 ${theme.space.xs}`,
-
-      textAlign: "left",
-
-      overflow: "hidden",
       whiteSpace: "normal",
-      textOverflow: "ellipsis",
-      display: "-webkit-box",
-      "-webkit-line-clamp": "2",
-      "-webkit-box-orient": "vertical",
+      textAlign: "left",
+      margin: `0 ${theme.space.xs}`,
       textWrap: "balance",
-
-      color: "inherit",
+      ...theme.typography.label,
+    },
+    titleAnchor: {
+      WebkitLineClamp: 2,
     },
   }
 );
diff --git a/packages/core/src/components/AppSwitcher/Action/Action.tsx b/packages/core/src/components/AppSwitcher/Action/Action.tsx
@@ -7,11 +7,11 @@ import { HvAvatar } from "@core/components/Avatar";
 import { HvListItem } from "@core/components/ListContainer";
 import { HvTypography } from "@core/components/Typography";
 import { HvTooltip } from "@core/components/Tooltip";
+import { HvOverflowTooltip } from "@core/components/OverflowTooltip";
 import { HvBaseProps } from "@core/types/generic";
 import { useUniqueId } from "@core/hooks/useUniqueId";
 import { ExtractNames } from "@core/utils/classes";
 
-import TitleWithTooltip from "../TitleWithTooltip";
 import { useClasses, staticClasses } from "./Action.styles";
 
 export { staticClasses as appSwitcherActionClasses };
@@ -185,7 +185,15 @@ export const HvAppSwitcherAction = ({
         <>
           <div className={classes.icon}>{renderApplicationIcon()}</div>
 
-          <TitleWithTooltip title={name} className={classes.title} />
+          <HvOverflowTooltip
+            paragraphOverflow
+            className={classes.title}
+            placement="top-start"
+            data={name}
+            classes={{
+              tooltipAnchorParagraph: classes.titleAnchor,
+            }}
+          />
 
           {description && (
             <HvTooltip

diff --git a/packages/core/src/components/AppSwitcher/AppSwitcher.styles.tsx b/packages/core/src/components/AppSwitcher/AppSwitcher.styles.tsx
@@ -56,10 +56,10 @@ export const { staticClasses, useClasses } = createClasses("HvAppSwitcher", {
     // we need to play with the 4px because of the focus ring
     // padding: `4px ${theme.hv.spacing.sm}px ${theme.hv.spacing.sm - 4}px 4px`,
     padding: `4px ${theme.space.sm} ${theme.space.sm} 4px`,
-
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
+    ...theme.typography.label,
+  },
+  titleAnchor: {
+    WebkitLineClamp: 2,
   },
   single: { width: 320 },
   dual: { width: 640 },

diff --git a/packages/core/src/components/AppSwitcher/AppSwitcher.tsx b/packages/core/src/components/AppSwitcher/AppSwitcher.tsx
@@ -5,10 +5,10 @@ import { ExtractNames } from "@core/utils/classes";
 import { useDefaultProps } from "@core/hooks/useDefaultProps";
 import { HvListContainer } from "@core/components/ListContainer";
 import { HvTypography } from "@core/components/Typography";
+import { HvOverflowTooltip } from "@core/components/OverflowTooltip";
 
 import { HvAppSwitcherAction, HvAppSwitcherActionApplication } from "./Action";
 import { useClasses, staticClasses } from "./AppSwitcher.styles";
-import TitleWithTooltip from "./TitleWithTooltip";
 
 export { staticClasses as appSwitcherClasses };
 
@@ -104,7 +104,16 @@ export const HvAppSwitcher = (props: HvAppSwitcherProps) => {
           {header}
         </HvTypography>
       )) ||
-        (title && <TitleWithTooltip className={classes.title} title={title} />)}
+        (title && (
+          <HvOverflowTooltip
+            className={classes.title}
+            data={title}
+            placement="top-start"
+            classes={{
+              tooltipAnchorParagraph: classes.titleAnchor,
+            }}
+          />
+        ))}
       <HvListContainer disableGutters className={classes.actionsContainer}>
         {panelActions}
       </HvListContainer>

diff --git a/packages/core/src/components/AppSwitcher/TitleWithTooltip.tsx b/packages/core/src/components/AppSwitcher/TitleWithTooltip.tsx
diff --git a/packages/core/src/components/OverflowTooltip/OverflowTooltip.styles.tsx b/packages/core/src/components/OverflowTooltip/OverflowTooltip.styles.tsx
@@ -12,8 +12,8 @@ export const { staticClasses, useClasses } = createClasses(
     tooltipAnchorParagraph: {
       overflow: "hidden",
       display: "-webkit-box",
-      "-webkit-line-clamp": 2,
-      "-webkit-box-orient": "vertical",
+      WebkitLineClamp: 3,
+      WebkitBoxOrient: "vertical",
     },
   }
 );
diff --git a/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx b/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx
@@ -17,7 +17,7 @@ export interface HvOverflowTooltipProps extends HvBaseProps {
   data: React.ReactNode;
   /** If true, the tooltip is shown. */
   open?: boolean;
-  /** If `true` the overflow tooltip will always use the paragraph overflow style. */
+  /** If `true`, the overflow tooltip will always use the paragraph overflow style. */
   paragraphOverflow?: boolean;
   /** Tooltip placement. */
   placement?:
@@ -55,24 +55,39 @@ export const HvOverflowTooltip = (props: HvOverflowTooltipProps) => {
     placement = "top-start",
     tooltipsProps,
   } = useDefaultProps("HvOverflowTooltip", props);
+
   const { classes, cx } = useClasses(classesProp);
 
-  const { width = 0, ref } = useResizeDetector({
+  const {
+    height = 0,
+    width = 0,
+    ref,
+  } = useResizeDetector({
     refreshMode: "debounce",
     refreshOptions: {
       trailing: true,
     },
     handleHeight: false,
   });
-  const scrollWidth = ref.current?.scrollWidth || 0;
-  // The difference should be higher than a pixel to be considered as overflowing
-  const isOverflowing = scrollWidth - width >= 1;
 
   const isParag = useMemo(
     () => paragraphOverflow && isParagraph(data?.toString()),
     [data, paragraphOverflow]
   );
 
+  // The difference should be higher than a pixel to be considered as overflowing
+  const isOverflowing = useMemo(() => {
+    if (isParag) {
+      const scrollHeight = ref.current?.scrollHeight || 0;
+
+      return scrollHeight - height >= 1;
+    }
+
+    const scrollWidth = ref.current?.scrollWidth || 0;
+
+    return scrollWidth - width >= 1;
+  }, [height, isParag, ref, width]);
+
   const content = useMemo(
     () => (
       <div

diff --git a/packages/core/src/components/Snackbar/Snackbar.stories.tsx b/packages/core/src/components/Snackbar/Snackbar.stories.tsx
@@ -109,7 +109,16 @@ export const Variants: StoryObj<HvSnackbarProps> = {
         <HvSnackbar
           {...props}
           label={
-            <HvOverflowTooltip data="This message uses HvOverflowTooltip to display ellipsis + tooltip." />
+            <HvOverflowTooltip data="This message uses HvOverflowTooltip to display ellipsis and a tooltip." />
+          }
+        />
+        <HvSnackbar
+          {...props}
+          label={
+            <HvOverflowTooltip
+              paragraphOverflow
+              data="This message uses HvOverflowTooltip with paragraphOverflow to display ellipsis and a tooltip because it has a very very very very very very very very very very long text that takes more than 3 lines."
+            />
           }
         />
       </>