*feat multiline text truncation (#563)

*fix overlay title truncation

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

packages/ui/__tests__/Overlay.test.tsx

@@ -4,13 +4,13 @@ import ReactModal, { Props as ReactModalProps } from 'react-modal'
 import { Settings, X } from 'react-feather'
 import { act } from 'react-dom/test-utils'
 import cn from 'classnames'
+import { DataTestProp } from '@hazelcast/helpers'
 
+import { IconProps } from '../src/Icon'
+import { LinkProps } from '../src/Link'
 import { Icon, Link, Overlay } from '../src'
 
 import styles from './Overlay.module.scss'
-import { DataTestProp } from '@hazelcast/helpers'
-import { IconProps } from '../src/Icon'
-import { LinkProps } from '../src/Link'
 
 const title = 'Modal Title'
 const icon = Settings
@@ -59,7 +59,6 @@ describe('Overlay', () => {
     expect(header.props()).toEqual({
       'data-test': 'overlay-header',
       className: styles.header,
-
       children: expect.anything(),
     })
     expect(headerIcon.type()).toEqual(Icon)
@@ -74,7 +73,7 @@ describe('Overlay', () => {
     expect(headerTitle.props()).toEqual({
       'data-test': 'overlay-header-title',
       className: styles.title,
-      children: title,
+      children: expect.anything(),
     })
     expect(headerCancelButton.type()).toEqual(Link)
     expect(headerCancelButton.props()).toEqual<LinkProps & DataTestProp>({

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;
       }
     }

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}

packages/ui/src/TruncatedText.module.scss

@@ -3,3 +3,7 @@
 .truncatedText {
   @include h.overflowEllipsis;
 }
+
+.multiline {
+  @include h.multilineOverflowEllipsis;
+}

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>
       )}

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;
+  }
+}