feat(CodeSnippet): set closed and expanded max number of rows

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

@@ -202,16 +202,16 @@
     position: relative;
     order: 1;
     min-height: rem(56px);
-    max-height: rem(238px);
+    max-height: 100%;
     overflow: hidden;
     transition: max-height $duration--moderate-01 motion(standard, productive);
   }
 
   // expanded snippet container
   .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand
     .#{$prefix}--snippet-container {
-    max-height: 100%;
     padding-bottom: $spacing-05;
+    overflow-y: auto;
     transition: max-height $duration--moderate-01 motion(standard, productive);
   }
 

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

@@ -371,6 +371,12 @@ Map {
       "light": Object {
         "type": "bool",
       },
+      "maxClosedNumberOfRows": Object {
+        "type": "number",
+      },
+      "maxExpandedNumberOfRows": Object {
+        "type": "number",
+      },
       "onClick": Object {
         "type": "func",
       },

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

@@ -7,7 +7,13 @@
 
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, boolean, text, select } from '@storybook/addon-knobs';
+import {
+  withKnobs,
+  boolean,
+  text,
+  select,
+  number,
+} from '@storybook/addon-knobs';
 import CodeSnippet from '../CodeSnippet';
 import CodeSnippetSkeleton from './CodeSnippet.Skeleton';
 import mdx from './CodeSnippet.mdx';
@@ -43,6 +49,14 @@ const props = () => ({
   copyButtonDescription: text('Copy button title', 'Copy code snippet'),
   ariaLabel: text('ARIA label', 'Container label'),
   wrapText: boolean('Wrap text (wrapText)', true),
+  maxClosedNumberOfRows: number(
+    'maxClosedNumberOfRows: Specify the maximum number of rows to be shown when in closed view',
+    15
+  ),
+  maxExpandedNumberOfRows: number(
+    'maxExpandedNumberOfRows: Specify the maximum number of rows to be shown when in expanded view',
+    0
+  ),
 });
 
 export const inline = () => (

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

@@ -19,8 +19,9 @@ import getUniqueId from '../../tools/uniqueId';
 
 const { prefix } = settings;
 
-const rowHeightInPixels = 18;
-const defaultCollapsedHeightInRows = 15;
+const rowHeightInPixels = 16;
+const defaultMaxClosedNumberOfRows = 15;
+const defaultMaxExpandedNumberOfRows = 0;
 
 function CodeSnippet({
   className,
@@ -37,6 +38,8 @@ function CodeSnippet({
   showLessText,
   hideCopyButton,
   wrapText,
+  maxClosedNumberOfRows = defaultMaxClosedNumberOfRows,
+  maxExpandedNumberOfRows = defaultMaxExpandedNumberOfRows,
   ...rest
 }) {
   const [expandedCode, setExpandedCode] = useState(false);
@@ -92,23 +95,35 @@ function CodeSnippet({
     );
   }, [type, getCodeRefDimensions]);
 
-  useResizeObserver({
-    ref: getCodeRef(),
-    onResize: () => {
-      if (codeContentRef?.current && type === 'multi') {
-        const { height } = codeContentRef.current.getBoundingClientRect();
-        setShouldShowMoreLessBtn(
-          height > defaultCollapsedHeightInRows * rowHeightInPixels
-        );
-      }
-      if (
-        (codeContentRef?.current && type === 'multi') ||
-        (codeContainerRef?.current && type === 'single')
-      ) {
-        debounce(handleScroll, 200);
-      }
+  useResizeObserver(
+    {
+      ref: getCodeRef(),
+      onResize: () => {
+        if (codeContentRef?.current && type === 'multi') {
+          const { height } = codeContentRef.current.getBoundingClientRect();
+
+          if (
+            maxClosedNumberOfRows > 0 &&
+            (maxExpandedNumberOfRows === 0 ||
+              maxExpandedNumberOfRows > maxClosedNumberOfRows) &&
+            height > maxClosedNumberOfRows * rowHeightInPixels
+          ) {
+            setShouldShowMoreLessBtn(true);
+          } else {
+            setShouldShowMoreLessBtn(false);
+            setExpandedCode(false);
+          }
+        }
+        if (
+          (codeContentRef?.current && type === 'multi') ||
+          (codeContainerRef?.current && type === 'single')
+        ) {
+          debounce(handleScroll, 200);
+        }
+      },
     },
-  });
+    [type, maxClosedNumberOfRows, maxExpandedNumberOfRows, rowHeightInPixels]
+  );
 
   useEffect(() => {
     handleScroll();
@@ -147,6 +162,23 @@ function CodeSnippet({
     );
   }
 
+  let containerStyle = {};
+  if (type === 'multi') {
+    if (expandedCode) {
+      if (maxExpandedNumberOfRows > 0) {
+        containerStyle.style = {
+          maxHeight: maxExpandedNumberOfRows * rowHeightInPixels,
+        };
+      }
+    } else {
+      if (maxClosedNumberOfRows > 0) {
+        containerStyle.style = {
+          maxHeight: maxClosedNumberOfRows * rowHeightInPixels,
+        };
+      }
+    }
+  }
+
   return (
     <div {...rest} className={codeSnippetClasses}>
       <div
@@ -155,7 +187,8 @@ function CodeSnippet({
         tabIndex={type === 'single' && !disabled ? 0 : null}
         className={`${prefix}--snippet-container`}
         aria-label={ariaLabel || copyLabel || 'code-snippet'}
-        onScroll={(type === 'single' && handleScroll) || null}>
+        onScroll={(type === 'single' && handleScroll) || null}
+        {...containerStyle}>
         <code>
           <pre
             ref={codeContentRef}
@@ -253,6 +286,16 @@ CodeSnippet.propTypes = {
    */
   light: PropTypes.bool,
 
+  /**
+   * Specify the maximum number of rows to be shown when in closed view
+   */
+  maxClosedNumberOfRows: PropTypes.number,
+
+  /**
+   * Specify the maximum number of rows to be shown when in expanded view
+   */
+  maxExpandedNumberOfRows: PropTypes.number,
+
   /**
    * An optional handler to listen to the `onClick` even fired by the Copy
    * Button