Fix: Remove footer styles affecting line highlighting

Author: dchyun

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

@@ -201,14 +201,9 @@ export default class HdsCodeBlock extends Component<HdsCodeBlockSignature> {
       classes.push('line-numbers');
     }
 
-    // Add a class if the overlay footer is shown
-    if (this.showFooter) {
-      classes.push('hds-code-block--has-overlay-footer');
-    }
-
-    // Add a class if if the overlay footer is shown but the height is not expanded
-    if (this.showFooter && !this._isExpanded) {
-      classes.push('hds-code-block--has-overflow');
+    // 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');
     }
 
     return classes.join(' ');

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

@@ -15,7 +15,7 @@
 // DIMENSIONS
 $hds-code-block-line-numbers-width: 49px; // 3em ≈ 49px
 $hds-code-block-code-padding: 16px;
-$hds-code-block-code-bottom-gradient-height: 48px;
+$hds-code-block-code-footer-height: 48px;
 
 // CODE-BLOCK PARENT/WRAPPER
 
@@ -41,11 +41,6 @@ $hds-code-block-code-bottom-gradient-height: 48px;
       text-shadow: none;
     }
   }
-
-  code {
-    display: block;
-    padding: $hds-code-block-code-padding;
-  }
 }
 
 // VARIANTS
@@ -139,7 +134,8 @@ $hds-code-block-code-bottom-gradient-height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 $hds-code-block-code-padding 10px $hds-code-block-code-padding;
+  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)
@@ -148,36 +144,14 @@ $hds-code-block-code-bottom-gradient-height: 48px;
   }
 }
 
-.hds-code-block--has-overlay-footer {
+.hds-code-block--has-overlay-footer-expanded {
   .hds-code-block__code {
-    // gradient element
-    &::after {
-      position: sticky; // prevent gradient from scrolling together with content
-      bottom: 0;
-      display: block;
-      height: $hds-code-block-code-bottom-gradient-height;
-      content: "";
-      pointer-events: none;
-    }
+    // account for the footer at the bottom of the code block
+    padding-bottom: $hds-code-block-code-footer-height;
   }
 
-  // reduce the amount of space at the bottom of the code block
-  code {
-    padding-bottom: 0;
-  }
-}
-
-.hds-code-block--has-overflow {
-  .hds-code-block__code {
-    // gradient to add contrast for button & indicate overflow
-    &::after {
-      background: linear-gradient(360deg, #0d0e12 37.07%, rgba(13, 14, 18, 25%) 100%);
-    }
-  }
-
-  // make border extend to bottom of the code block
-  &.hds-code-block.line-numbers .line-numbers-rows {
-    padding-bottom: $hds-code-block-code-bottom-gradient-height;
+  .hds-code-block__overlay-footer {
+    background: none;
   }
 }
 
@@ -186,6 +160,7 @@ $hds-code-block-code-bottom-gradient-height: 48px;
   @include hds-focus-ring-basic();
   display: block;
   margin: 0;
+  padding: $hds-code-block-code-padding;
   overflow: auto;
   scrollbar-width: thin;
   scrollbar-color: var(--token-color-palette-neutral-400) var(--token-color-palette-neutral-500);
@@ -265,12 +240,12 @@ $hds-code-block-code-bottom-gradient-height: 48px;
     .hds-code-block__code {
       position: relative;
       // reserve space for line numbers
-      padding-left: $hds-code-block-line-numbers-width;
+      padding-left: calc(#{$hds-code-block-line-numbers-width} + #{$hds-code-block-code-padding});
     }
 
     .hds-code-block__overlay-footer {
       // match horizontal padding of the code block
-      padding-left: calc(#{$hds-code-block-line-numbers-width} + #{$hds-code-block-code-padding});
+      margin-left: $hds-code-block-line-numbers-width;
     }
 
     .line-numbers-rows {

showcase/app/templates/components/code-block.hbs

@@ -293,6 +293,35 @@ function assertObjectsEqual (actual, expected, testName) {
       {{! template-lint-enable no-whitespace-for-layout }}
     </SG.Item>
 
+    <SG.Item @label="maxHeight='130px, hasLineNumbers=false" @forceMinWidth={{true}}>
+      {{! template-lint-disable no-whitespace-for-layout }}
+      <Hds::CodeBlock
+        @language="javascript"
+        @maxHeight="130px"
+        @hasLineNumbers={{false}}
+        @value="function convertObjectToArray (obj) {
+  let arr = Object
+    .keys(obj) // return object's keys as an array
+    .map(key => {return [key, obj[key] ]}) // map a function on each array item
+    .flat()
+    .sort()
+  ;
+  return arr;
+}
+function assertObjectsEqual (actual, expected, testName) {
+  let actualStr = JSON.stringify( convertObjectToArray(actual) );
+  let expectedStr = JSON.stringify( convertObjectToArray(expected) );
+  console.log(`ACTUAL: ${actualStr}  EXPECTED: ${expectedStr}`);
+  if (actualStr === expectedStr) {
+    console.log('passed');
+  } else {
+    console.log(`FAILED [${testName}] Expected ${JSON.stringify(expected)}, but got ${JSON.stringify(actual)}`);
+  }
+}"
+      />
+      {{! template-lint-enable no-whitespace-for-layout }}
+    </SG.Item>
+
     <SG.Item @label="maxHeight='130px' with short content that does not overflow" @forceMinWidth={{true}}>
       <Hds::CodeBlock @language="javascript" @maxHeight="130px" @value="convertObjectToArray(obj);" />
     </SG.Item>

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

@@ -259,6 +259,9 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
 
     await click('.hds-code-block__height-toggle-button');
 
+    assert
+      .dom('.hds-code-block')
+      .hasClass('hds-code-block--has-overlay-footer-expanded');
     assert
       .dom('.hds-code-block__code')
       .hasAttribute('style', 'max-height: none;');