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

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

defaulted the height to show everything (100%)
added two new props maxClosedNumberOfRows and maxExpandedNumberOfRows
added logic using the new props to determine when to show moreLessBtn
added maxHeight style based on new props

* feat(CodeSnippet): apply auto scroll to snippet-mult

allow snippet-mult + snippet-container to auto scroll, both x and y
remove scroll/overflow from nested snippet-expand, pre, and code conditions
this will show the horizontal scroll when the snippet is closed or expanded
it is a behavour change/bug fix, it will address 7574

* feat(CodeSnippet): add background to snippet buttons

add background to buttons to stop scrollbars from stomping on them

* feat(CodeSnippet): revert to only adding overflow-y

changing to overflow - from -x/-y - on the snippet-container
caused issues with scrollbars colliding with the buttons.
for now only add overflow-y and address overflow clean up and
scrollbars/button collisions in #7574

* feat(CodeSnippet): move overflow-y placement

apply it for both closed and expanded modes

* feat(CodeSnippet): changed closed to collapsed

changed closed to collapsed

* feat(CodeSnippet): update snapshot

update snapshot

* feat(CodeSnippet): rename closed to collapsed in the story

rename closed to collapsed in the story

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

Author: 4 people

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

@@ -197,20 +197,19 @@
     }
   }
 
-  //closed snippet container
+  //collapsed snippet container
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-container {
     position: relative;
     order: 1;
     min-height: rem(56px);
-    max-height: rem(238px);
-    overflow: hidden;
+    max-height: 100%;
+    overflow-y: auto;
     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;
     transition: max-height $duration--moderate-01 motion(standard, productive);
   }
@@ -220,7 +219,7 @@
     word-wrap: break-word;
   }
 
-  // closed pre
+  // collapsed pre
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre {
     padding-right: $carbon--spacing-08;
     padding-bottom: rem(24px);

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

@@ -383,6 +383,12 @@ Map {
       "light": Object {
         "type": "bool",
       },
+      "maxCollapsedNumberOfRows": 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),
+  maxCollapsedNumberOfRows: number(
+    'maxCollapsedNumberOfRows: Specify the maximum number of rows to be shown when in collapsed 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

@@ -20,8 +20,9 @@ import copy from 'copy-to-clipboard';
 
 const { prefix } = settings;
 
-const rowHeightInPixels = 18;
-const defaultCollapsedHeightInRows = 15;
+const rowHeightInPixels = 16;
+const defaultMaxCollapsedNumberOfRows = 15;
+const defaultMaxExpandedNumberOfRows = 0;
 
 function CodeSnippet({
   className,
@@ -38,6 +39,8 @@ function CodeSnippet({
   showLessText,
   hideCopyButton,
   wrapText,
+  maxCollapsedNumberOfRows = defaultMaxCollapsedNumberOfRows,
+  maxExpandedNumberOfRows = defaultMaxExpandedNumberOfRows,
   ...rest
 }) {
   const [expandedCode, setExpandedCode] = useState(false);
@@ -93,23 +96,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 (
+            maxCollapsedNumberOfRows > 0 &&
+            (maxExpandedNumberOfRows === 0 ||
+              maxExpandedNumberOfRows > maxCollapsedNumberOfRows) &&
+            height > maxCollapsedNumberOfRows * rowHeightInPixels
+          ) {
+            setShouldShowMoreLessBtn(true);
+          } else {
+            setShouldShowMoreLessBtn(false);
+            setExpandedCode(false);
+          }
+        }
+        if (
+          (codeContentRef?.current && type === 'multi') ||
+          (codeContainerRef?.current && type === 'single')
+        ) {
+          debounce(handleScroll, 200);
+        }
+      },
     },
-  });
+    [type, maxCollapsedNumberOfRows, maxExpandedNumberOfRows, rowHeightInPixels]
+  );
 
   useEffect(() => {
     handleScroll();
@@ -156,6 +171,23 @@ function CodeSnippet({
     );
   }
 
+  let containerStyle = {};
+  if (type === 'multi') {
+    if (expandedCode) {
+      if (maxExpandedNumberOfRows > 0) {
+        containerStyle.style = {
+          maxHeight: maxExpandedNumberOfRows * rowHeightInPixels,
+        };
+      }
+    } else {
+      if (maxCollapsedNumberOfRows > 0) {
+        containerStyle.style = {
+          maxHeight: maxCollapsedNumberOfRows * rowHeightInPixels,
+        };
+      }
+    }
+  }
+
   return (
     <div {...rest} className={codeSnippetClasses}>
       <div
@@ -164,7 +196,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}
@@ -262,6 +295,16 @@ CodeSnippet.propTypes = {
    */
   light: PropTypes.bool,
 
+  /**
+   * Specify the maximum number of rows to be shown when in collapsed view
+   */
+  maxCollapsedNumberOfRows: 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