From deac912513f044a560120e3f7e6fdd4315974c85 Mon Sep 17 00:00:00 2001
From: Bill Guigue <Bill.Guigue@ca.ibm.com>
Date: Sat, 13 Mar 2021 17:43:41 -0500
Subject: [PATCH 1/8] 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
---
 .../code-snippet/_code-snippet.scss           |  3 +-
 .../__snapshots__/PublicAPI-test.js.snap      |  6 ++
 .../CodeSnippet/CodeSnippet-story.js          | 16 +++-
 .../src/components/CodeSnippet/CodeSnippet.js | 81 ++++++++++++++-----
 4 files changed, 84 insertions(+), 22 deletions(-)

diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss
index 6a3c87adee73..759c8b47aab5 100644
--- a/packages/components/src/components/code-snippet/_code-snippet.scss
+++ b/packages/components/src/components/code-snippet/_code-snippet.scss
@@ -202,7 +202,7 @@
     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);
   }
@@ -210,7 +210,6 @@
   // 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);
   }
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index d934ef6d5b31..133af876faa5 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/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",
       },
diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js
index bb2bf1df6442..daea841da2bf 100644
--- a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js
+++ b/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 = () => (
diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.js b/packages/react/src/components/CodeSnippet/CodeSnippet.js
index b9c7124f1996..957d5370cd29 100644
--- a/packages/react/src/components/CodeSnippet/CodeSnippet.js
+++ b/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

From 2b59d74957d8cfe11892cb115d99e26ca63c3a67 Mon Sep 17 00:00:00 2001
From: Bill Guigue <Bill.Guigue@ca.ibm.com>
Date: Mon, 22 Mar 2021 09:24:37 -0400
Subject: [PATCH 2/8] 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
---
 .../src/components/code-snippet/_code-snippet.scss | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss
index 759c8b47aab5..f6cab84df0af 100644
--- a/packages/components/src/components/code-snippet/_code-snippet.scss
+++ b/packages/components/src/components/code-snippet/_code-snippet.scss
@@ -203,7 +203,7 @@
     order: 1;
     min-height: rem(56px);
     max-height: 100%;
-    overflow: hidden;
+    overflow: auto;
     transition: max-height $duration--moderate-01 motion(standard, productive);
   }
 
@@ -223,7 +223,6 @@
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre {
     padding-right: $carbon--spacing-08;
     padding-bottom: rem(24px);
-    overflow-x: auto;
   }
 
   .#{$prefix}--snippet--multi.#{$prefix}--snippet--no-copy
@@ -232,13 +231,6 @@
     padding-right: 0;
   }
 
-  // expanded pre
-  .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand
-    .#{$prefix}--snippet-container
-    pre {
-    overflow-x: auto;
-  }
-
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre::after {
     position: absolute;
     top: 0;
@@ -250,10 +242,6 @@
     content: '';
   }
 
-  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre code {
-    overflow: hidden;
-  }
-
   //Copy Button
   .#{$prefix}--snippet__icon {
     width: rem(16px);

From 3ca5dbe27cdffced7f6ff51c2274a93620640cbe Mon Sep 17 00:00:00 2001
From: Bill Guigue <Bill.Guigue@ca.ibm.com>
Date: Mon, 22 Mar 2021 12:28:18 -0400
Subject: [PATCH 3/8] feat(CodeSnippet): add background to snippet buttons

add background to buttons to stop scrollbars from stomping on them
---
 .../src/components/code-snippet/_code-snippet.scss          | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss
index f6cab84df0af..d945745cd188 100644
--- a/packages/components/src/components/code-snippet/_code-snippet.scss
+++ b/packages/components/src/components/code-snippet/_code-snippet.scss
@@ -23,6 +23,10 @@
     @include reset;
   }
 
+  .#{$prefix}--snippet .#{$prefix}--btn {
+    background-color: $field-01;
+  }
+
   .#{$prefix}--snippet--disabled,
   .#{$prefix}--snippet--disabled
     .#{$prefix}--btn.#{$prefix}--snippet-btn--expand {
@@ -323,6 +327,7 @@
     position: absolute;
     top: 0;
     right: 0;
+    background-color: $field-01;
 
     // Override inherited rule in code snippet
     @include carbon--font-family('sans');
@@ -341,7 +346,6 @@
     align-items: center;
     padding: $spacing-03 $spacing-05;
     color: $text-01;
-    background-color: $field-01;
     border: 0;
   }
 

From 80b123f68cec5642b7399439755bd6348e64a0c7 Mon Sep 17 00:00:00 2001
From: Bill Guigue <Bill.Guigue@ca.ibm.com>
Date: Mon, 22 Mar 2021 13:32:37 -0400
Subject: [PATCH 4/8] 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
---
 .../code-snippet/_code-snippet.scss           | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss
index d945745cd188..c810e1f9e4c9 100644
--- a/packages/components/src/components/code-snippet/_code-snippet.scss
+++ b/packages/components/src/components/code-snippet/_code-snippet.scss
@@ -23,10 +23,6 @@
     @include reset;
   }
 
-  .#{$prefix}--snippet .#{$prefix}--btn {
-    background-color: $field-01;
-  }
-
   .#{$prefix}--snippet--disabled,
   .#{$prefix}--snippet--disabled
     .#{$prefix}--btn.#{$prefix}--snippet-btn--expand {
@@ -207,7 +203,7 @@
     order: 1;
     min-height: rem(56px);
     max-height: 100%;
-    overflow: auto;
+    overflow: hidden;
     transition: max-height $duration--moderate-01 motion(standard, productive);
   }
 
@@ -215,6 +211,7 @@
   .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand
     .#{$prefix}--snippet-container {
     padding-bottom: $spacing-05;
+    overflow-y: auto;
     transition: max-height $duration--moderate-01 motion(standard, productive);
   }
 
@@ -227,6 +224,7 @@
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre {
     padding-right: $carbon--spacing-08;
     padding-bottom: rem(24px);
+    overflow-x: auto;
   }
 
   .#{$prefix}--snippet--multi.#{$prefix}--snippet--no-copy
@@ -235,6 +233,13 @@
     padding-right: 0;
   }
 
+  // expanded pre
+  .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand
+    .#{$prefix}--snippet-container
+    pre {
+    overflow-x: auto;
+  }
+
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre::after {
     position: absolute;
     top: 0;
@@ -246,6 +251,10 @@
     content: '';
   }
 
+  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre code {
+    overflow: hidden;
+  }
+
   //Copy Button
   .#{$prefix}--snippet__icon {
     width: rem(16px);
@@ -327,7 +336,6 @@
     position: absolute;
     top: 0;
     right: 0;
-    background-color: $field-01;
 
     // Override inherited rule in code snippet
     @include carbon--font-family('sans');
@@ -346,6 +354,7 @@
     align-items: center;
     padding: $spacing-03 $spacing-05;
     color: $text-01;
+    background-color: $field-01;
     border: 0;
   }
 

From 3cbc2f03e2d2dbf07995db605bed546e06082a8d Mon Sep 17 00:00:00 2001
From: Bill Guigue <Bill.Guigue@ca.ibm.com>
Date: Mon, 22 Mar 2021 15:36:29 -0400
Subject: [PATCH 5/8] feat(CodeSnippet): move overflow-y placement

apply it for both closed and expanded modes
---
 .../components/src/components/code-snippet/_code-snippet.scss  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss
index c810e1f9e4c9..ea2ee6d350ec 100644
--- a/packages/components/src/components/code-snippet/_code-snippet.scss
+++ b/packages/components/src/components/code-snippet/_code-snippet.scss
@@ -203,7 +203,7 @@
     order: 1;
     min-height: rem(56px);
     max-height: 100%;
-    overflow: hidden;
+    overflow-y: auto;
     transition: max-height $duration--moderate-01 motion(standard, productive);
   }
 
@@ -211,7 +211,6 @@
   .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand
     .#{$prefix}--snippet-container {
     padding-bottom: $spacing-05;
-    overflow-y: auto;
     transition: max-height $duration--moderate-01 motion(standard, productive);
   }
 

From aa804ff4da7f5949c5736ded2709458cdae3e11c Mon Sep 17 00:00:00 2001
From: Bill Guigue <Bill.Guigue@ca.ibm.com>
Date: Tue, 23 Mar 2021 11:09:09 -0400
Subject: [PATCH 6/8] feat(CodeSnippet): changed closed to collapsed

changed closed to collapsed
---
 .../code-snippet/_code-snippet.scss           |  4 ++--
 .../src/components/CodeSnippet/CodeSnippet.js | 20 +++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss
index ea2ee6d350ec..4b749e0dacdd 100644
--- a/packages/components/src/components/code-snippet/_code-snippet.scss
+++ b/packages/components/src/components/code-snippet/_code-snippet.scss
@@ -197,7 +197,7 @@
     }
   }
 
-  //closed snippet container
+  //collapsed snippet container
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-container {
     position: relative;
     order: 1;
@@ -219,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);
diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.js b/packages/react/src/components/CodeSnippet/CodeSnippet.js
index 957d5370cd29..041068035ffd 100644
--- a/packages/react/src/components/CodeSnippet/CodeSnippet.js
+++ b/packages/react/src/components/CodeSnippet/CodeSnippet.js
@@ -20,7 +20,7 @@ import getUniqueId from '../../tools/uniqueId';
 const { prefix } = settings;
 
 const rowHeightInPixels = 16;
-const defaultMaxClosedNumberOfRows = 15;
+const defaultMaxCollapsedNumberOfRows = 15;
 const defaultMaxExpandedNumberOfRows = 0;
 
 function CodeSnippet({
@@ -38,7 +38,7 @@ function CodeSnippet({
   showLessText,
   hideCopyButton,
   wrapText,
-  maxClosedNumberOfRows = defaultMaxClosedNumberOfRows,
+  maxCollapsedNumberOfRows = defaultMaxCollapsedNumberOfRows,
   maxExpandedNumberOfRows = defaultMaxExpandedNumberOfRows,
   ...rest
 }) {
@@ -103,10 +103,10 @@ function CodeSnippet({
           const { height } = codeContentRef.current.getBoundingClientRect();
 
           if (
-            maxClosedNumberOfRows > 0 &&
+            maxCollapsedNumberOfRows > 0 &&
             (maxExpandedNumberOfRows === 0 ||
-              maxExpandedNumberOfRows > maxClosedNumberOfRows) &&
-            height > maxClosedNumberOfRows * rowHeightInPixels
+              maxExpandedNumberOfRows > maxCollapsedNumberOfRows) &&
+            height > maxCollapsedNumberOfRows * rowHeightInPixels
           ) {
             setShouldShowMoreLessBtn(true);
           } else {
@@ -122,7 +122,7 @@ function CodeSnippet({
         }
       },
     },
-    [type, maxClosedNumberOfRows, maxExpandedNumberOfRows, rowHeightInPixels]
+    [type, maxCollapsedNumberOfRows, maxExpandedNumberOfRows, rowHeightInPixels]
   );
 
   useEffect(() => {
@@ -171,9 +171,9 @@ function CodeSnippet({
         };
       }
     } else {
-      if (maxClosedNumberOfRows > 0) {
+      if (maxCollapsedNumberOfRows > 0) {
         containerStyle.style = {
-          maxHeight: maxClosedNumberOfRows * rowHeightInPixels,
+          maxHeight: maxCollapsedNumberOfRows * rowHeightInPixels,
         };
       }
     }
@@ -287,9 +287,9 @@ CodeSnippet.propTypes = {
   light: PropTypes.bool,
 
   /**
-   * Specify the maximum number of rows to be shown when in closed view
+   * Specify the maximum number of rows to be shown when in collapsed view
    */
-  maxClosedNumberOfRows: PropTypes.number,
+  maxCollapsedNumberOfRows: PropTypes.number,
 
   /**
    * Specify the maximum number of rows to be shown when in expanded view

From 718adf8aa971592576a5e0f771c2e673b2681873 Mon Sep 17 00:00:00 2001
From: Bill Guigue <Bill.Guigue@ca.ibm.com>
Date: Tue, 23 Mar 2021 11:23:03 -0400
Subject: [PATCH 7/8] feat(CodeSnippet): update snapshot

update snapshot
---
 packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index c28ca62b5e00..f414b81fb440 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -371,7 +371,7 @@ Map {
       "light": Object {
         "type": "bool",
       },
-      "maxClosedNumberOfRows": Object {
+      "maxCollapsedNumberOfRows": Object {
         "type": "number",
       },
       "maxExpandedNumberOfRows": Object {

From 39b889c531e093ee13c03e531ced1413f990d205 Mon Sep 17 00:00:00 2001
From: Bill Guigue <Bill.Guigue@ca.ibm.com>
Date: Tue, 23 Mar 2021 14:58:33 -0400
Subject: [PATCH 8/8] feat(CodeSnippet): rename closed to collapsed in the
 story

rename closed to collapsed in the story
---
 .../react/src/components/CodeSnippet/CodeSnippet-story.js     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js
index daea841da2bf..3ed94de292d9 100644
--- a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js
+++ b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js
@@ -49,8 +49,8 @@ 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',
+  maxCollapsedNumberOfRows: number(
+    'maxCollapsedNumberOfRows: Specify the maximum number of rows to be shown when in collapsed view',
     15
   ),
   maxExpandedNumberOfRows: number(