feat(ContentPeek): add new prop for specifying the minHeightThreshold…

… for showing Peek controls
PhillipsAuctionHouse · Nov 11, 2024 · 0cb1be6 · 0cb1be6
1 parent 7a0ff41
commit 0cb1be6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/components/ContentPeek/ContentPeek.stories.tsx b/src/components/ContentPeek/ContentPeek.stories.tsx
@@ -8,6 +8,7 @@ const meta = {
     contentExpandText: { control: 'text' },
     contentCollapseText: { control: 'text' },
     maxHeight: { control: 'number' },
+    minHeightThreshold: { control: 'number' },
   },
 } satisfies Meta<typeof ContentPeek>;
 

diff --git a/src/components/ContentPeek/ContentPeek.tsx b/src/components/ContentPeek/ContentPeek.tsx
@@ -28,6 +28,10 @@ export interface ContentPeekProps extends React.HTMLAttributes<HTMLDivElement> {
    * Maximum height of the content when collapsed
    */
   maxHeight?: number;
+  /**
+   * Used to set a minimum height for the content before enabling the Peek functionality. Defaults to the same value as maxHeight if not provided.
+   */
+  minHeightThreshold?: number;
 }
 
 /**
@@ -48,6 +52,7 @@ const ContentPeek = forwardRef<HTMLDivElement, ContentPeekProps>(
       contentExpandText = 'Read More',
       contentCollapseText = 'Read Less',
       maxHeight = 480,
+      minHeightThreshold,
       ...props
     },
     ref,
@@ -59,9 +64,10 @@ const ContentPeek = forwardRef<HTMLDivElement, ContentPeekProps>(
 
     useEffect(() => {
       if (contentRef.current) {
-        setHasOverflow(contentRef.current.scrollHeight > maxHeight);
+        const threshold = minHeightThreshold ?? maxHeight;
+        setHasOverflow(contentRef.current.scrollHeight > threshold);
       }
-    }, [children, maxHeight]);
+    }, [children, maxHeight, minHeightThreshold]);
 
     const toggleExpand = useCallback(() => {
       setIsExpanded((expanded) => !expanded);