fix(code-snippet): scrollbar not clickable on muliline (#12605)

* fix(code-snippet): scrollbar not clickable on muliline closes #9946 * fix(code-snippet): scrollbar not clickable on muliline closes #9946
carbon-design-system · Nov 28, 2022 · 3c02fe2 · 3c02fe2
1 parent db556b3
commit 3c02fe2
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.js b/packages/react/src/components/CodeSnippet/CodeSnippet.js
@@ -164,6 +164,8 @@ function CodeSnippet({
     [`${prefix}--snippet--light`]: light,
     [`${prefix}--snippet--no-copy`]: hideCopyButton,
     [`${prefix}--snippet--wraptext`]: wrapText,
+    [`${prefix}--snippet--has-right-overflow`]:
+      type == 'multi' && hasRightOverflow,
   });
 
   const expandCodeBtnText = expandedCode ? showLessText : showMoreText;
@@ -243,7 +245,7 @@ function CodeSnippet({
       {hasLeftOverflow && (
         <div className={`${prefix}--snippet__overflow-indicator--left`} />
       )}
-      {hasRightOverflow && (
+      {hasRightOverflow && type !== 'multi' && (
         <div className={`${prefix}--snippet__overflow-indicator--right`} />
       )}
       {!hideCopyButton && (

diff --git a/packages/styles/scss/components/code-snippet/_code-snippet.scss b/packages/styles/scss/components/code-snippet/_code-snippet.scss
@@ -234,14 +234,15 @@ $copy-btn-feedback: $background-inverse !default;
     overflow-x: auto;
   }
 
-  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre::after {
+  .#{$prefix}--snippet--multi.#{$prefix}--snippet--has-right-overflow
+    .#{$prefix}--snippet-container
+    pre::after {
     position: absolute;
     top: 0;
     right: 0;
     width: rem(16px);
     height: 100%;
-    // Safari interprets `transparent` differently, so make color token value transparent instead:
-    background-image: linear-gradient(to right, rgba($layer, 0), $layer);
+    background-image: linear-gradient(to right, transparent, $layer);
     content: '';
   }