Merge pull request Ferlab-Ste-Justine#395 from Ferlab-Ste-Justine/fix…

…/SJIP-715/resizable-grid-layout fix(grid): SJIP-715 fix text on card header, fix color
lflangis · Feb 23, 2024 · e02d299 · e02d299
2 parents 5d73e4d + cfce6f7
commit e02d299
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 31 deletions.
diff --git a/packages/ui/Release.md b/packages/ui/Release.md
@@ -1,3 +1,6 @@
+### 9.5.1 2024-02-22
+- fix: SJIP-715 fix card header truncable text on resize. Fix color issue on modal
+
 ### 9.5.0 2024-02-22
 - feat: SKFP-900 add variant summary
 

diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ferlab/ui",
-    "version": "9.5.0",
+    "version": "9.5.1",
     "description": "Core components for scientific research data portals",
     "publishConfig": {
         "access": "public"

diff --git a/packages/ui/src/view/v2/GridCard/GridCardHeader/index.tsx b/packages/ui/src/view/v2/GridCard/GridCardHeader/index.tsx
@@ -1,9 +1,10 @@
-import { MutableRefObject, ReactNode, useLayoutEffect, useRef, useState } from 'react';
+import { MutableRefObject, ReactNode, useEffect, useRef, useState } from 'react';
 import React from 'react';
 import { HolderOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import { Popover, PopoverProps, Space, Tooltip, Typography } from 'antd';
 import classnames from 'classnames';
 import cx from 'classnames';
+import { throttle } from 'lodash';
 
 import DragHandle from '../../../../layout/SortableGrid/DragHandle';
 
@@ -41,21 +42,22 @@ const GridCardHeader = ({
     const [truncated, setTruncated] = useState(false);
     const [titleWidth, setTitleWidth] = useState('100%');
     const headerContainerRef = useRef() as MutableRefObject<HTMLSpanElement>;
+    const onCardResize = throttle(() => {
+        if (!titleTruncateThresholdWidth) {
+            return;
+        }
+        const headerWidth = headerContainerRef.current.clientWidth;
+        setTitleWidth(`${headerWidth - titleTruncateThresholdWidth}px`);
+    }, 10);
+    const resizeObserver = new ResizeObserver(onCardResize);
 
-    // titleTruncateThresholdWidth allow text to be truncate. antd absolutly needs a
-    // a width to be able to works. Only active it when needed since useLayoutEffect
-    // can be a performance pitfall. A value needs to be passed since our div can
-    // be bigger than our header width.
-    if (titleTruncateThresholdWidth) {
-        useLayoutEffect(() => {
-            if (!headerContainerRef?.current) {
-                return;
-            }
+    useEffect(() => {
+        if (!headerContainerRef.current || !titleTruncateThresholdWidth) {
+            return;
+        }
 
-            const headerWidth = headerContainerRef.current.clientWidth;
-            setTitleWidth(`${headerWidth - titleTruncateThresholdWidth}px`);
-        });
-    }
+        resizeObserver.observe(headerContainerRef.current);
+    }, [headerContainerRef, headerContainerRef.current]);
 
     return (
         <Title className={classnames(styles.cardHeader, className)} level={4} ref={headerContainerRef}>

diff --git a/packages/ui/themes/default/_antd.scss b/packages/ui/themes/default/_antd.scss
@@ -6,16 +6,3 @@
   max-width: 100%
 }
 
-.ant-modal-confirm {
-    .ant-modal-confirm-body > .anticon {
-        color: $orange-7;
-    }
-
-    &.ant-modal-confirm-warning .ant-modal-confirm-body > .anticon {
-        color: $orange-7;
-    }
-
-    &.ant-modal-confirm-error .ant-modal-confirm-body > .anticon {
-        color: $red-7;
-    }
-}
diff --git a/packages/ui/themes/override/main.scss b/packages/ui/themes/override/main.scss
@@ -23,4 +23,18 @@ a.link {
         color: $blue-8;
         text-decoration: none;
     }
-}
+}
+
+.ant-modal-confirm {
+    .ant-modal-confirm-body > .anticon {
+        color: $orange-7;
+    }
+
+    &.ant-modal-confirm-warning .ant-modal-confirm-body > .anticon {
+        color: $orange-7;
+    }
+
+    &.ant-modal-confirm-error .ant-modal-confirm-body > .anticon {
+        color: $red-7;
+    }
+}