Fix: Footer gradient positioning

Author: dchyun

packages/components/src/components/hds/code-block/index.ts

@@ -201,6 +201,10 @@ export default class HdsCodeBlock extends Component<HdsCodeBlockSignature> {
       classes.push('line-numbers');
     }
 
+    if (this.showFooter) {
+      classes.push('hds-code-block--has-overlay-footer');
+    }
+
     // Add a class if if the overlay footer is shown and the height is expanded
     if (this.showFooter && this._isExpanded) {
       classes.push('hds-code-block--has-overlay-footer-expanded');

packages/components/src/styles/components/code-block/index.scss

@@ -135,7 +135,6 @@ $hds-code-block-code-footer-height: 48px;
   align-items: center;
   justify-content: center;
   padding: 10px $hds-code-block-code-padding 10px $hds-code-block-code-padding;
-  background: linear-gradient(360deg, #0d0e12 37.07%, rgba(13, 14, 18, 25%) 100%);
   pointer-events: none; // fix issue with scrolling when hovering over the footer
 
   // re-enable pointer events for the button (or any content inside the footer)
@@ -144,10 +143,29 @@ $hds-code-block-code-footer-height: 48px;
   }
 }
 
+.hds-code-block--has-overlay-footer {
+  .hds-code-block__code::after {
+    // gradient element
+    position: sticky; // prevent gradient from scrolling together with content
+    bottom: -$hds-code-block-code-padding;
+    display: block;
+    width: calc(100% + #{$hds-code-block-code-padding * 2});
+    height: $hds-code-block-code-footer-height;
+    background: linear-gradient(360deg, #0d0e12 37.07%, rgba(13, 14, 18, 25%) 100%);
+    transform: translateX(-$hds-code-block-code-padding);
+    content: "";
+    pointer-events: none;
+  }
+}
+
 .hds-code-block--has-overlay-footer-expanded {
   .hds-code-block__code {
     // account for the footer at the bottom of the code block
     padding-bottom: $hds-code-block-code-footer-height;
+
+    &::after {
+      content: none;
+    }
   }
 
   .hds-code-block__overlay-footer {
@@ -158,6 +176,7 @@ $hds-code-block-code-footer-height: 48px;
 // Code
 .hds-code-block__code {
   @include hds-focus-ring-basic();
+  position: relative;
   display: block;
   margin: 0;
   padding: $hds-code-block-code-padding;

showcase/tests/integration/components/hds/code-block/index-test.js

@@ -257,6 +257,10 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
       <Hds::CodeBlock @value="console.log('Hello world');" @maxHeight="1em" />
     `);
 
+    assert
+      .dom('.hds-code-block')
+      .hasClass('hds-code-block--has-overlay-footer');
+
     await click('.hds-code-block__height-toggle-button');
 
     assert