fix(CodeSnippet): adjust calculation when show more button is clicked (…

…#15839) * fix(CodeSnippet): adjust calculation when show more button is clicked * fix(CodeSnippet): adjust showmore button logic, padding
carbon-design-system · Mar 7, 2024 · cd5ac20 · cd5ac20
1 parent f84d546
commit cd5ac20
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.js b/packages/react/src/components/CodeSnippet/CodeSnippet.js
@@ -22,7 +22,7 @@ const rowHeightInPixels = 16;
 const defaultMaxCollapsedNumberOfRows = 15;
 const defaultMaxExpandedNumberOfRows = 0;
 const defaultMinCollapsedNumberOfRows = 3;
-const defaultMinExpandedNumberOfRows = 16;
+const defaultMinExpandedNumberOfRows = 0;
 
 function CodeSnippet({
   align = 'bottom',
@@ -108,8 +108,7 @@ function CodeSnippet({
       ref: getCodeRef(),
       onResize: () => {
         if (codeContentRef?.current && type === 'multi') {
-          const { height } = codeContentRef.current.getBoundingClientRect();
-
+          const { height } = innerCodeRef.current.getBoundingClientRect();
           if (
             maxCollapsedNumberOfRows > 0 &&
             (maxExpandedNumberOfRows <= 0 ||

diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js b/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js
@@ -69,6 +69,25 @@ export const Multiline = () => (
   </CodeSnippet>
 );
 
+export const Test = () => (
+  <CodeSnippet type="multi" feedback="Copied to clipboard">
+    {`  "scripts": {
+    "build": "lerna run build --stream --prefix --npm-client yarn",
+    "ci-check": "carbon-cli ci-check",
+    "clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
+    "doctoc": "doctoc --title '## Table of Contents'",
+    "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
+    "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
+    "lint": "eslint actions config codemods packages",
+    "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
+    "sync": "carbon-cli sync",
+    "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e",
+    "sync": "carbon-cli sync",
+  },
+  `}
+  </CodeSnippet>
+);
+
 export const Singleline = () => (
   <CodeSnippet type="single" feedback="Copied to clipboard">
     yarn add carbon-components@latest carbon-components-react@latest

diff --git a/packages/styles/scss/components/code-snippet/_code-snippet.scss b/packages/styles/scss/components/code-snippet/_code-snippet.scss
@@ -225,7 +225,6 @@ $copy-btn-feedback: $background-inverse !default;
 
   // collapsed pre
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre {
-    padding-block-end: convert.to-rem(24px);
     padding-inline-end: $spacing-08;
   }