feat(CodeSnippet): set min number of rows (#8181)

* feat(CodeSnippet): set min number of rows

set default min to 100%
apply the approprate minHeight collapsed or expanded as needed
add props to component and story...
 - minCollapsedNumberOfRows and minExpandedNumberOfRows

* feat(CodeSnippet): set min number of rows

use minExpanded when clearing expandedCode
minExpanded could be < maxCollapsed

Co-authored-by: Bill Guigue <Bill.Guigue@ca.ibm.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: 3 people

packages/components/src/components/code-snippet/_code-snippet.scss

@@ -201,7 +201,7 @@
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-container {
     position: relative;
     order: 1;
-    min-height: rem(56px);
+    min-height: 100%;
     max-height: 100%;
     overflow-y: auto;
     transition: max-height $duration--moderate-01 motion(standard, productive);

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -396,6 +396,12 @@ Map {
       "maxExpandedNumberOfRows": Object {
         "type": "number",
       },
+      "minCollapsedNumberOfRows": Object {
+        "type": "number",
+      },
+      "minExpandedNumberOfRows": Object {
+        "type": "number",
+      },
       "onClick": Object {
         "type": "func",
       },

packages/react/src/components/CodeSnippet/CodeSnippet-story.js

@@ -58,6 +58,14 @@ const props = () => ({
     'maxExpandedNumberOfRows: Specify the maximum number of rows to be shown when in expanded view',
     0
   ),
+  minCollapsedNumberOfRows: number(
+    'minCollapsedNumberOfRows: Specify the minimum number of rows to be shown when in collapsed view',
+    3
+  ),
+  minExpandedNumberOfRows: number(
+    'minExpandedNumberOfRows: Specify the minimum number of rows to be shown when in expanded view',
+    16
+  ),
 });
 
 export const inline = () => (

packages/react/src/components/CodeSnippet/CodeSnippet.js

@@ -23,6 +23,8 @@ const { prefix } = settings;
 const rowHeightInPixels = 16;
 const defaultMaxCollapsedNumberOfRows = 15;
 const defaultMaxExpandedNumberOfRows = 0;
+const defaultMinCollapsedNumberOfRows = 3;
+const defaultMinExpandedNumberOfRows = 16;
 
 function CodeSnippet({
   className,
@@ -42,6 +44,8 @@ function CodeSnippet({
   wrapText,
   maxCollapsedNumberOfRows = defaultMaxCollapsedNumberOfRows,
   maxExpandedNumberOfRows = defaultMaxExpandedNumberOfRows,
+  minCollapsedNumberOfRows = defaultMinCollapsedNumberOfRows,
+  minExpandedNumberOfRows = defaultMinExpandedNumberOfRows,
   ...rest
 }) {
   const [expandedCode, setExpandedCode] = useState(false);
@@ -106,13 +110,19 @@ function CodeSnippet({
 
           if (
             maxCollapsedNumberOfRows > 0 &&
-            (maxExpandedNumberOfRows === 0 ||
+            (maxExpandedNumberOfRows <= 0 ||
               maxExpandedNumberOfRows > maxCollapsedNumberOfRows) &&
             height > maxCollapsedNumberOfRows * rowHeightInPixels
           ) {
             setShouldShowMoreLessBtn(true);
           } else {
             setShouldShowMoreLessBtn(false);
+          }
+          if (
+            expandedCode &&
+            minExpandedNumberOfRows > 0 &&
+            height <= minExpandedNumberOfRows * rowHeightInPixels
+          ) {
             setExpandedCode(false);
           }
         }
@@ -124,7 +134,13 @@ function CodeSnippet({
         }
       },
     },
-    [type, maxCollapsedNumberOfRows, maxExpandedNumberOfRows, rowHeightInPixels]
+    [
+      type,
+      maxCollapsedNumberOfRows,
+      maxExpandedNumberOfRows,
+      minExpandedNumberOfRows,
+      rowHeightInPixels,
+    ]
   );
 
   useEffect(() => {
@@ -175,19 +191,27 @@ function CodeSnippet({
 
   let containerStyle = {};
   if (type === 'multi') {
+    const styles = {};
+
     if (expandedCode) {
       if (maxExpandedNumberOfRows > 0) {
-        containerStyle.style = {
-          maxHeight: maxExpandedNumberOfRows * rowHeightInPixels,
-        };
+        styles.maxHeight = maxExpandedNumberOfRows * rowHeightInPixels;
+      }
+      if (minExpandedNumberOfRows > 0) {
+        styles.minHeight = minExpandedNumberOfRows * rowHeightInPixels;
       }
     } else {
       if (maxCollapsedNumberOfRows > 0) {
-        containerStyle.style = {
-          maxHeight: maxCollapsedNumberOfRows * rowHeightInPixels,
-        };
+        styles.maxHeight = maxCollapsedNumberOfRows * rowHeightInPixels;
+      }
+      if (minCollapsedNumberOfRows > 0) {
+        styles.minHeight = minCollapsedNumberOfRows * rowHeightInPixels;
       }
     }
+
+    if (Object.keys(styles).length) {
+      containerStyle.style = styles;
+    }
   }
 
   return (
@@ -313,6 +337,16 @@ CodeSnippet.propTypes = {
    */
   maxExpandedNumberOfRows: PropTypes.number,
 
+  /**
+   * Specify the minimum number of rows to be shown when in collapsed view
+   */
+  minCollapsedNumberOfRows: PropTypes.number,
+
+  /**
+   * Specify the minimum number of rows to be shown when in expanded view
+   */
+  minExpandedNumberOfRows: PropTypes.number,
+
   /**
    * An optional handler to listen to the `onClick` even fired by the Copy
    * Button