*feat multiline text truncation

*fix overlay title truncation
hazelcast · Jul 30, 2024 · 18d353f · 18d353f
1 parent 60cfe73
commit 18d353f
Show file tree

Hide file tree

Showing 20 changed files with 23 additions and 5 deletions.
diff --git a/...loki/reference/chrome_minimal_Components_CheckableSelectField_Custom_Search.png b/...loki/reference/chrome_minimal_Components_CheckableSelectField_Custom_Search.png
diff --git a/...chrome_minimal_Components_CheckableSelectField_With_Search_Input_Adornments.png b/...chrome_minimal_Components_CheckableSelectField_With_Search_Input_Adornments.png
diff --git a/...ki/reference/chrome_minimal_Components_CheckableSelectField_Without_Options.png b/...ki/reference/chrome_minimal_Components_CheckableSelectField_Without_Options.png
diff --git a/.../reference/chrome_minimal_Components_MultiSelectField_Open_With_Input_Value.png b/.../reference/chrome_minimal_Components_MultiSelectField_Open_With_Input_Value.png
diff --git a/...me_minimal_Components_MultiSelectField_Open_With_Input_Value_And_No_Results.png b/...me_minimal_Components_MultiSelectField_Open_With_Input_Value_And_No_Results.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Default.png b/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Default.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Fullscreen.png b/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Fullscreen.png
diff --git a/...rence/chrome_minimal_Components_Overlay_Fullscreen_With_Full_Height_Content.png b/...rence/chrome_minimal_Components_Overlay_Fullscreen_With_Full_Height_Content.png
diff --git a/...ki/reference/chrome_minimal_Components_Overlay_Fullscreen_With_Long_Content.png b/...ki/reference/chrome_minimal_Components_Overlay_Fullscreen_With_Long_Content.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Not_Closable.png b/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Not_Closable.png
diff --git a/...ges/ui/.loki/reference/chrome_minimal_Components_Overlay_Without_Close_Text.png b/...ges/ui/.loki/reference/chrome_minimal_Components_Overlay_Without_Close_Text.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Without_Title.png b/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Without_Title.png
diff --git a/....loki/reference/chrome_minimal_Components_SelectField_Open_With_Input_Value.png b/....loki/reference/chrome_minimal_Components_SelectField_Open_With_Input_Value.png
diff --git a/.../chrome_minimal_Components_SelectField_Open_With_Input_Value_And_No_Results.png b/.../chrome_minimal_Components_SelectField_Open_With_Input_Value_And_No_Results.png
diff --git a/packages/ui/.postcss-lint/postcss.config.js b/packages/ui/.postcss-lint/postcss.config.js
@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 const doiuse = require('doiuse')
 
-const browsers = ['last 2 Chrome version', 'last 2 Firefox version', 'last 1 Safari version', 'last 1 Edge version', 'ie 11']
+const browsers = ['last 2 Chrome version', 'last 2 Firefox version', 'last 1 Safari version', 'last 1 Edge version']
 
 /*
  * EXPERIMENTAL: This postcss config is and should be only used

diff --git a/packages/ui/src/Overlay.module.scss b/packages/ui/src/Overlay.module.scss
@@ -62,7 +62,8 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      min-height: c.$grid * 10;
+      overflow: hidden;
+      min-height: c.$grid * 16;
       margin-bottom: c.$grid * 9;
       padding: 0 c.$grid * 21; // close button width
 
@@ -93,6 +94,7 @@
 
       .title {
         margin: 0;
+        overflow: hidden;
         word-break: break-word;
       }
     }

diff --git a/packages/ui/src/Overlay.tsx b/packages/ui/src/Overlay.tsx
@@ -8,6 +8,7 @@ import { DataTestProp } from '@hazelcast/helpers'
 import { ButtonProps, ButtonTypeButtonProps } from './Button'
 import { Icon, IconProps } from './Icon'
 import { Link } from './Link'
+import { TruncatedText } from './TruncatedText'
 
 import styles from './Overlay.module.scss'
 
@@ -92,7 +93,7 @@ export const Overlay: FC<OverlayProps> = ({
           {icon && <Icon data-test="overlay-header-icon" className={styles.icon} size="medium" icon={icon} ariaHidden />}
           {title && (
             <h1 data-test="overlay-header-title" className={styles.title}>
-              {title}
+              <TruncatedText multiline text={title} />
             </h1>
           )}
           {headingContent}

diff --git a/packages/ui/src/TruncatedText.module.scss b/packages/ui/src/TruncatedText.module.scss
@@ -3,3 +3,7 @@
 .truncatedText {
   @include h.overflowEllipsis;
 }
+
+.multiline {
+  @include h.multilineOverflowEllipsis;
+}
diff --git a/packages/ui/src/TruncatedText.tsx b/packages/ui/src/TruncatedText.tsx
@@ -13,6 +13,7 @@ interface TruncatedTextProps {
   // Pass a new value to trigger a force re-render
   forceUpdateToken?: ReactText | boolean
   className?: string
+  multiline?: boolean
   tooltipVisible?: boolean
   hoverAbleTooltip?: boolean
   tooltipPlacement?: TooltipProps['placement']
@@ -25,6 +26,7 @@ export const TruncatedText: FC<TruncatedTextProps> = ({
   tooltipVisible,
   tooltipPlacement = 'top',
   hoverAbleTooltip,
+  multiline,
 }) => {
   const textRef = useRef<HTMLDivElement>(null)
   const [tooltip, setTooltip] = useState<ReactChild | undefined>()
@@ -38,7 +40,7 @@ export const TruncatedText: FC<TruncatedTextProps> = ({
     }
 
     // https://codepen.io/triple-j/pen/wadKQB
-    setTooltip(span.offsetWidth < span.scrollWidth ? text : undefined)
+    setTooltip(span.offsetWidth < span.scrollWidth || span.offsetHeight < span.scrollHeight ? text : undefined)
   }, [text, forceUpdateToken])
 
   return (
@@ -51,7 +53,7 @@ export const TruncatedText: FC<TruncatedTextProps> = ({
       hoverAbleTooltip={hoverAbleTooltip}
     >
       {(ref) => (
-        <div ref={mergeRefs([textRef, ref])} className={cn(styles.truncatedText, className)}>
+        <div ref={mergeRefs([textRef, ref])} className={cn(styles.truncatedText, { [styles.multiline]: multiline }, className)}>
           <span aria-labelledby={tooltip ? idTooltip : undefined}>{text}</span>
         </div>
       )}

diff --git a/packages/ui/styles/helpers/_text.scss b/packages/ui/styles/helpers/_text.scss
@@ -3,3 +3,12 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+@mixin multilineOverflowEllipsis {
+  @supports (-webkit-line-clamp: 2) {
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}