From 5f5f71286e88e1a061886cffdf7060f384315c96 Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Tue, 15 Apr 2025 18:08:48 -0700 Subject: [PATCH 01/31] HDS-4745 Implement height toggle functionality, add basic styling, update Showcase examples --- .../src/components/hds/code-block/index.hbs | 15 +++- .../src/components/hds/code-block/index.ts | 72 ++++++++----------- .../styles/components/code-block/index.scss | 18 ++++- .../app/templates/components/code-block.hbs | 7 +- 4 files changed, 68 insertions(+), 44 deletions(-) diff --git a/packages/components/src/components/hds/code-block/index.hbs b/packages/components/src/components/hds/code-block/index.hbs index 8c907163b7c..85a8e84f766 100644 --- a/packages/components/src/components/hds/code-block/index.hbs +++ b/packages/components/src/components/hds/code-block/index.hbs @@ -12,7 +12,7 @@ {{! content within pre tag is whitespace-sensitive; do not add new lines! }}
     {{/if}}
   
+  {{#if this.showFooter}}
+    
+  {{/if}}
 
\ No newline at end of file
diff --git a/packages/components/src/components/hds/code-block/index.ts b/packages/components/src/components/hds/code-block/index.ts
index 4410c655b99..b039d2c99f2 100644
--- a/packages/components/src/components/hds/code-block/index.ts
+++ b/packages/components/src/components/hds/code-block/index.ts
@@ -69,19 +69,13 @@ export interface HdsCodeBlockSignature {
 
 export default class HdsCodeBlock extends Component {
   @tracked private _prismCode: SafeString = htmlSafe('');
+  @tracked private _isExpanded: boolean = false;
+  @tracked private _codeContentHeight: number = 0;
 
-  /**
-   * Generates a unique ID for the code content
-   *
-   * @param _preCodeId
-   */
+  // Generates a unique ID for the code content
   private _preCodeId = 'pre-code-' + guidFor(this);
 
-  /**
-   * @param code
-   * @type {string}
-   * @description code text content for the CodeBlock
-   */
+  // code text content for the CodeBlock
   get code(): string {
     const code = this.args.value;
 
@@ -98,42 +92,34 @@ export default class HdsCodeBlock extends Component {
     return code;
   }
 
-  /**
-   * @param language
-   * @type {string}
-   * @default undefined
-   * @description name of coding language used within CodeBlock for syntax highlighting
-   */
+  get maxHeight(): string | undefined {
+    return this._isExpanded ? 'none' : this.args.maxHeight;
+  }
+
+  // Shows footer if maxHeight is set and its value is less than the height of the pre tag content
+  get showFooter(): boolean {
+    if (this.args.maxHeight) {
+      return this._codeContentHeight > parseInt(this.args.maxHeight, 10);
+    }
+    return false;
+  }
+
+  // Name of coding language used within CodeBlock for syntax highlighting
   get language(): HdsCodeBlockLanguages | undefined {
     return this.args.language ?? undefined;
   }
 
-  /**
-   * @param hasLineNumbers
-   * @type {boolean}
-   * @default true
-   * @description Displays line numbers if true
-   */
+  // Displays line numbers if true
   get hasLineNumbers(): boolean {
     return this.args.hasLineNumbers ?? true;
   }
 
-  /**
-   * @param isStandalone
-   * @type {boolean}
-   * @default true
-   * @description Make CodeBlock container corners appear rounded
-   */
+  // Make CodeBlock container corners appear rounded (the standalone variation)
   get isStandalone(): boolean {
     return this.args.isStandalone ?? true;
   }
 
-  /**
-   * @param hasLineWrapping
-   * @type {boolean}
-   * @default false
-   * @description Make text content wrap on multiple lines
-   */
+  // Make text content wrap to multiple lines
   get hasLineWrapping(): boolean {
     return this.args.hasLineWrapping ?? false;
   }
@@ -150,7 +136,7 @@ export default class HdsCodeBlock extends Component {
 
     if (code) {
       // eslint-disable-next-line ember/no-runloop
-      next(() => {
+      next((): void => {
         if (language && grammar) {
           this._prismCode = htmlSafe(Prism.highlight(code, grammar, language));
         } else {
@@ -165,12 +151,16 @@ export default class HdsCodeBlock extends Component {
           element,
         });
 
+        // Get the height of the preCodeElement
+        const preCodeElement = document.getElementById(this._preCodeId);
+        this._codeContentHeight = preCodeElement?.scrollHeight ?? 0;
+
         // Force prism-line-highlight plugin initialization
         // Context: https://github.com/hashicorp/design-system/pull/1749#discussion_r1374288785
         if (this.args.highlightLines) {
           // we need to delay re-evaluating the context for prism-line-highlight for as much as possible, and `afterRender` is the 'latest' we can use in the component lifecycle
           // eslint-disable-next-line ember/no-runloop
-          schedule('afterRender', () => {
+          schedule('afterRender', (): void => {
             // we piggy-back on the plugin's `resize` event listener to trigger a new call of the `highlightLines` function: https://github.com/PrismJS/prism/blob/master/plugins/line-highlight/prism-line-highlight.js#L337
             if (window) window.dispatchEvent(new Event('resize'));
           });
@@ -179,11 +169,11 @@ export default class HdsCodeBlock extends Component {
     }
   }
 
-  /**
-   * Get the class names to apply to the component.
-   * @method classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
+  @action
+  toggleExpanded(): void {
+    this._isExpanded = !this._isExpanded;
+  }
+
   get classNames(): string {
     // Currently there is only one theme so the class name is hard-coded.
     // In the future, additional themes such as a "light" theme could be added.
diff --git a/packages/components/src/styles/components/code-block/index.scss b/packages/components/src/styles/components/code-block/index.scss
index ca7a907e647..b1a81084883 100644
--- a/packages/components/src/styles/components/code-block/index.scss
+++ b/packages/components/src/styles/components/code-block/index.scss
@@ -35,7 +35,6 @@ $hds-code-block-code-padding: 16px;
     word-spacing: normal;
     tab-size: 4;
     hyphens: none;
-    scrollbar-width: thin;
 
     @media print {
       text-shadow: none;
@@ -47,6 +46,7 @@ $hds-code-block-code-padding: 16px;
 
 // isStandalone
 .hds-code-block--is-standalone {
+  overflow: hidden; // hide corners of scrollbar that poke out
   border-radius: var(--token-border-radius-medium);
 }
 
@@ -125,6 +125,20 @@ $hds-code-block-code-padding: 16px;
   border-radius: inherit;
 }
 
+.hds-code-block__footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px $hds-code-block-code-padding;
+  border-top: 1px solid var(--hds-code-block-color-border-primary);
+}
+
+.hds-code-block__height-toggle-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 // Code
 .hds-code-block__code {
   @include hds-focus-ring-basic();
@@ -132,6 +146,8 @@ $hds-code-block-code-padding: 16px;
   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);
   font-size: 0.8125rem;
   font-family: var(--token-typography-code-200-font-family);
   border-radius: inherit;
diff --git a/showcase/app/templates/components/code-block.hbs b/showcase/app/templates/components/code-block.hbs
index 21e27dbb4bb..c0c5d371e70 100644
--- a/showcase/app/templates/components/code-block.hbs
+++ b/showcase/app/templates/components/code-block.hbs
@@ -231,7 +231,7 @@ console.log(`I am ${codeLang} code`);"
 
   Height limit
 
-  
+  
     
       {{! template-lint-disable no-whitespace-for-layout }}
       
       {{! template-lint-enable no-whitespace-for-layout }}
     
+    
+      {{! template-lint-disable no-whitespace-for-layout }}
+      
+      {{! template-lint-enable no-whitespace-for-layout }}
+    
   
 
   

From acf985f4223ca69f88ef71dc5c3617cb25acd50a Mon Sep 17 00:00:00 2001
From: Kristin Bradley 
Date: Wed, 16 Apr 2025 09:02:01 -0700
Subject: [PATCH 02/31] HDS-4745 Add changeset

---
 .changeset/fresh-kangaroos-sing.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fresh-kangaroos-sing.md

diff --git a/.changeset/fresh-kangaroos-sing.md b/.changeset/fresh-kangaroos-sing.md
new file mode 100644
index 00000000000..19eec772132
--- /dev/null
+++ b/.changeset/fresh-kangaroos-sing.md
@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`CodeBlock` - Added height toggle control which is present when a `maxHeight` is set and code content height exceeds the `maxHeight` value

From 432d80288e4a433972ee2d279d344a35af62f01a Mon Sep 17 00:00:00 2001
From: Kristin Bradley 
Date: Wed, 16 Apr 2025 14:45:42 -0700
Subject: [PATCH 03/31] HDS-4745 Add tests for heigh toggle feature

---
 .../app/templates/components/code-block.hbs   |  2 -
 .../components/hds/code-block/index-test.js   | 57 +++++++++++++++++++
 2 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/showcase/app/templates/components/code-block.hbs b/showcase/app/templates/components/code-block.hbs
index c0c5d371e70..7a28a37bd19 100644
--- a/showcase/app/templates/components/code-block.hbs
+++ b/showcase/app/templates/components/code-block.hbs
@@ -292,9 +292,7 @@ function assertObjectsEqual (actual, expected, testName) {
       {{! template-lint-enable no-whitespace-for-layout }}
     
     
-      {{! template-lint-disable no-whitespace-for-layout }}
       
-      {{! template-lint-enable no-whitespace-for-layout }}
     
   
 
diff --git a/showcase/tests/integration/components/hds/code-block/index-test.js b/showcase/tests/integration/components/hds/code-block/index-test.js
index 8ba150281b0..2e29b18411c 100644
--- a/showcase/tests/integration/components/hds/code-block/index-test.js
+++ b/showcase/tests/integration/components/hds/code-block/index-test.js
@@ -233,6 +233,63 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
       .hasAttribute('style', 'max-height: 100px;');
   });
 
+  test('it displays a "Show more" button if the height of the code content is greater than the maxHeight', async function (assert) {
+    // Note: We set a very small maxHeight to ensure the code block is scrollable
+    await render(hbs`
+      
+    `);
+    assert
+      .dom('.hds-code-block__height-toggle-button')
+      .exists()
+      .hasText('Show more');
+  });
+
+  test('it does not display a height toggle button if the height of the code content is less than the maxHeight', async function (assert) {
+    await render(hbs`
+      
+    `);
+    assert.dom('.hds-code-block__height-toggle-button').doesNotExist();
+  });
+
+  test('it expands to show all content and displays a "Show less" button when "Show more" is clicked', async function (assert) {
+    await render(hbs`
+      
+    `);
+
+    await click('.hds-code-block__height-toggle-button');
+
+    assert
+      .dom('.hds-code-block__code')
+      .hasAttribute('style', 'max-height: none;');
+    assert
+      .dom('.hds-code-block__height-toggle-button')
+      .exists()
+      .hasText('Show less');
+  });
+
+  test('it collapses to show less content and displays a "Show more" button when "Show less" is clicked', async function (assert) {
+    await render(hbs`
+      
+    `);
+
+    await click('.hds-code-block__height-toggle-button');
+
+    assert
+      .dom('.hds-code-block__height-toggle-button')
+      .exists()
+      .hasText('Show less');
+
+    await click('.hds-code-block__height-toggle-button');
+
+    assert
+      .dom('.hds-code-block__code')
+      .hasAttribute('style', 'max-height: 5px;');
+    assert
+      .dom('.hds-code-block__height-toggle-button')
+      .exists()
+      .hasText('Show more');
+  });
+
   // ASSERTION
 
   test('it should throw an assertion if no value for @code is provided', async function (assert) {

From 4cb48702f36b85562d11d452c0b7f8d10be2b3a0 Mon Sep 17 00:00:00 2001
From: Kristin Bradley 
Date: Wed, 16 Apr 2025 16:21:47 -0700
Subject: [PATCH 04/31] HDS-4745 Fix issue with determining height of content
 with container when non-pixel units are used

---
 .../src/components/hds/code-block/index.ts        | 15 ++++++++++-----
 showcase/app/templates/components/code-block.hbs  |  1 +
 .../components/hds/code-block/index-test.js       | 11 ++++++-----
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/components/hds/code-block/index.ts b/packages/components/src/components/hds/code-block/index.ts
index b039d2c99f2..9418ed849c1 100644
--- a/packages/components/src/components/hds/code-block/index.ts
+++ b/packages/components/src/components/hds/code-block/index.ts
@@ -71,6 +71,7 @@ export default class HdsCodeBlock extends Component {
   @tracked private _prismCode: SafeString = htmlSafe('');
   @tracked private _isExpanded: boolean = false;
   @tracked private _codeContentHeight: number = 0;
+  @tracked private _codeContainerHeight: number = 0;
 
   // Generates a unique ID for the code content
   private _preCodeId = 'pre-code-' + guidFor(this);
@@ -96,10 +97,10 @@ export default class HdsCodeBlock extends Component {
     return this._isExpanded ? 'none' : this.args.maxHeight;
   }
 
-  // Shows footer if maxHeight is set and its value is less than the height of the pre tag content
+  // Shows footer if maxHeight is set and the pre tag content height is greater than the pre tag height
   get showFooter(): boolean {
     if (this.args.maxHeight) {
-      return this._codeContentHeight > parseInt(this.args.maxHeight, 10);
+      return this._codeContentHeight > this._codeContainerHeight;
     }
     return false;
   }
@@ -151,9 +152,13 @@ export default class HdsCodeBlock extends Component {
           element,
         });
 
-        // Get the height of the preCodeElement
-        const preCodeElement = document.getElementById(this._preCodeId);
-        this._codeContentHeight = preCodeElement?.scrollHeight ?? 0;
+        // Get the actual height & the content height of the preCodeElement
+        // eslint-disable-next-line ember/no-runloop
+        schedule('afterRender', (): void => {
+          const preCodeElement = document.getElementById(this._preCodeId);
+          this._codeContentHeight = preCodeElement?.scrollHeight ?? 0;
+          this._codeContainerHeight = preCodeElement?.clientHeight ?? 0;
+        });
 
         // Force prism-line-highlight plugin initialization
         // Context: https://github.com/hashicorp/design-system/pull/1749#discussion_r1374288785
diff --git a/showcase/app/templates/components/code-block.hbs b/showcase/app/templates/components/code-block.hbs
index 7a28a37bd19..56802daa0cb 100644
--- a/showcase/app/templates/components/code-block.hbs
+++ b/showcase/app/templates/components/code-block.hbs
@@ -291,6 +291,7 @@ function assertObjectsEqual (actual, expected, testName) {
       
       {{! template-lint-enable no-whitespace-for-layout }}
     
+
     
       
     
diff --git a/showcase/tests/integration/components/hds/code-block/index-test.js b/showcase/tests/integration/components/hds/code-block/index-test.js
index 2e29b18411c..4f4caa363fa 100644
--- a/showcase/tests/integration/components/hds/code-block/index-test.js
+++ b/showcase/tests/integration/components/hds/code-block/index-test.js
@@ -236,7 +236,7 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
   test('it displays a "Show more" button if the height of the code content is greater than the maxHeight', async function (assert) {
     // Note: We set a very small maxHeight to ensure the code block is scrollable
     await render(hbs`
-      
+      
     `);
     assert
       .dom('.hds-code-block__height-toggle-button')
@@ -245,15 +245,16 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
   });
 
   test('it does not display a height toggle button if the height of the code content is less than the maxHeight', async function (assert) {
+    // Note: We use ems since if they were incorrectly interpreted as pixels, the test would fail)
     await render(hbs`
-      
+      
     `);
     assert.dom('.hds-code-block__height-toggle-button').doesNotExist();
   });
 
   test('it expands to show all content and displays a "Show less" button when "Show more" is clicked', async function (assert) {
     await render(hbs`
-      
+      
     `);
 
     await click('.hds-code-block__height-toggle-button');
@@ -269,7 +270,7 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
 
   test('it collapses to show less content and displays a "Show more" button when "Show less" is clicked', async function (assert) {
     await render(hbs`
-      
+      
     `);
 
     await click('.hds-code-block__height-toggle-button');
@@ -283,7 +284,7 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
 
     assert
       .dom('.hds-code-block__code')
-      .hasAttribute('style', 'max-height: 5px;');
+      .hasAttribute('style', 'max-height: 1em;');
     assert
       .dom('.hds-code-block__height-toggle-button')
       .exists()

From 3be6dc84a6aa816ec1be6f95d24aced98a0df9aa Mon Sep 17 00:00:00 2001
From: Kristin Bradley 
Date: Fri, 18 Apr 2025 13:48:05 -0700
Subject: [PATCH 05/31] HDS-4745 Add gradient that appears behin Show more
 button, refactor related CodeBlock styles, update Showcase examples

---
 .../src/components/hds/code-block/index.hbs   | 16 +++-----
 .../src/components/hds/code-block/index.ts    |  7 +++-
 .../styles/components/code-block/index.scss   | 38 +++++++++++++++++--
 .../app/templates/components/code-block.hbs   | 16 ++++----
 4 files changed, 54 insertions(+), 23 deletions(-)

diff --git a/packages/components/src/components/hds/code-block/index.hbs b/packages/components/src/components/hds/code-block/index.hbs
index 85a8e84f766..df54ec3df12 100644
--- a/packages/components/src/components/hds/code-block/index.hbs
+++ b/packages/components/src/components/hds/code-block/index.hbs
@@ -31,16 +31,12 @@
     {{/if}}
   
   {{#if this.showFooter}}
-    
\ No newline at end of file
diff --git a/packages/components/src/components/hds/code-block/index.ts b/packages/components/src/components/hds/code-block/index.ts
index 9418ed849c1..494acc120b0 100644
--- a/packages/components/src/components/hds/code-block/index.ts
+++ b/packages/components/src/components/hds/code-block/index.ts
@@ -97,7 +97,7 @@ export default class HdsCodeBlock extends Component {
     return this._isExpanded ? 'none' : this.args.maxHeight;
   }
 
-  // Shows footer if maxHeight is set and the pre tag content height is greater than the pre tag height
+  // Shows overlay footer if maxHeight is set and the pre tag content height is greater than the pre tag height
   get showFooter(): boolean {
     if (this.args.maxHeight) {
       return this._codeContentHeight > this._codeContainerHeight;
@@ -201,6 +201,11 @@ export default class HdsCodeBlock extends Component {
       classes.push('line-numbers');
     }
 
+    // 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');
+    }
+
     return classes.join(' ');
   }
 }
diff --git a/packages/components/src/styles/components/code-block/index.scss b/packages/components/src/styles/components/code-block/index.scss
index b1a81084883..9a42aaa42cc 100644
--- a/packages/components/src/styles/components/code-block/index.scss
+++ b/packages/components/src/styles/components/code-block/index.scss
@@ -40,6 +40,11 @@ $hds-code-block-code-padding: 16px;
       text-shadow: none;
     }
   }
+
+  code {
+    display: block;
+    padding: $hds-code-block-code-padding;
+  }
 }
 
 // VARIANTS
@@ -125,12 +130,33 @@ $hds-code-block-code-padding: 16px;
   border-radius: inherit;
 }
 
-.hds-code-block__footer {
+.hds-code-block__overlay-footer {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 8px $hds-code-block-code-padding;
-  border-top: 1px solid var(--hds-code-block-color-border-primary);
+  padding: 12px $hds-code-block-code-padding;
+}
+
+.hds-code-block--has-overflow {
+  .hds-code-block__overlay-footer {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .hds-code-block__code {
+    // gradient to add contrast for button & indicate overflow
+    &::after {
+      position: sticky; // prevent gradient from scrolling together with content
+      bottom: 0;
+      display: block;
+      height: 52px; // matches height of height toggle button plus additional padding
+      background: linear-gradient(360deg, #0D0E12 37.07%, rgba(13, 14, 18, 25%) 100%);
+      content: "";
+      pointer-events: none;
+    }
+  }
 }
 
 .hds-code-block__height-toggle-button {
@@ -144,7 +170,6 @@ $hds-code-block-code-padding: 16px;
   @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);
@@ -216,6 +241,11 @@ $hds-code-block-code-padding: 16px;
     .hds-code-block__code {
       position: relative;
       // reserve space for line numbers
+      padding-left: $hds-code-block-line-numbers-width;
+    }
+
+    .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});
     }
 
diff --git a/showcase/app/templates/components/code-block.hbs b/showcase/app/templates/components/code-block.hbs
index 56802daa0cb..d168757dcfb 100644
--- a/showcase/app/templates/components/code-block.hbs
+++ b/showcase/app/templates/components/code-block.hbs
@@ -232,11 +232,11 @@ console.log(`I am ${codeLang} code`);"
   Height limit
 
   
-    
+    
       {{! template-lint-disable no-whitespace-for-layout }}
       
+    
       {{! template-lint-disable no-whitespace-for-layout }}
       
-      
+    
+      
     
   
 
@@ -305,13 +305,13 @@ function assertObjectsEqual (actual, expected, testName) {
     
       
     
-    
+    
       {{! template-lint-disable no-whitespace-for-layout }}
       
Date: Fri, 18 Apr 2025 14:24:59 -0700
Subject: [PATCH 07/31] HDS-4745 Tweak height of gradient to match visual
 design, remove bottom padding around code when there is overflow to reduce
 space at bottom of scrolled content

---
 .../components/src/styles/components/code-block/index.scss   | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/styles/components/code-block/index.scss b/packages/components/src/styles/components/code-block/index.scss
index 50caff46b9b..6fc76711bc1 100644
--- a/packages/components/src/styles/components/code-block/index.scss
+++ b/packages/components/src/styles/components/code-block/index.scss
@@ -151,11 +151,14 @@ $hds-code-block-code-padding: 16px;
       position: sticky; // prevent gradient from scrolling together with content
       bottom: 0;
       display: block;
-      height: 52px; // matches height of height toggle button plus additional padding
+      height: 50px;
       background: linear-gradient(360deg, #0d0e12 37.07%, rgba(13, 14, 18, 25%) 100%);
       content: "";
       pointer-events: none;
     }
+
+    // reduce the amount of space at the bottom of the code block when user scrolls to the bottom
+    code { padding-bottom: 0; }
   }
 }
 

From ce6896b58a5a0f5fddda1c8997d045ea63d7c89f Mon Sep 17 00:00:00 2001
From: Kristin Bradley 
Date: Fri, 18 Apr 2025 14:45:50 -0700
Subject: [PATCH 08/31] HDS-4745 Make border of numbering extend to bottom of
 code block

---
 .../src/styles/components/code-block/index.scss           | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/styles/components/code-block/index.scss b/packages/components/src/styles/components/code-block/index.scss
index 6fc76711bc1..891c804b6d1 100644
--- a/packages/components/src/styles/components/code-block/index.scss
+++ b/packages/components/src/styles/components/code-block/index.scss
@@ -15,6 +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: 50px;
 
 // CODE-BLOCK PARENT/WRAPPER
 
@@ -151,7 +152,7 @@ $hds-code-block-code-padding: 16px;
       position: sticky; // prevent gradient from scrolling together with content
       bottom: 0;
       display: block;
-      height: 50px;
+      height: $hds-code-block-code-bottom-gradient-height;
       background: linear-gradient(360deg, #0d0e12 37.07%, rgba(13, 14, 18, 25%) 100%);
       content: "";
       pointer-events: none;
@@ -160,6 +161,11 @@ $hds-code-block-code-padding: 16px;
     // reduce the amount of space at the bottom of the code block when user scrolls to the bottom
     code { padding-bottom: 0; }
   }
+
+  // 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__height-toggle-button {

From 65e6a799ae00097e6efe50035f928b52e1b1e3c7 Mon Sep 17 00:00:00 2001
From: Kristin Bradley 
Date: Fri, 18 Apr 2025 14:49:58 -0700
Subject: [PATCH 09/31] HDS-4745 Fix linting, change height toggle button to
 secondary color

---
 packages/components/src/components/hds/code-block/index.hbs   | 4 ++--
 .../components/src/styles/components/code-block/index.scss    | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/hds/code-block/index.hbs b/packages/components/src/components/hds/code-block/index.hbs
index df54ec3df12..45d01b29f3f 100644
--- a/packages/components/src/components/hds/code-block/index.hbs
+++ b/packages/components/src/components/hds/code-block/index.hbs
@@ -33,9 +33,9 @@
   {{#if this.showFooter}}
     
   {{/if}}
diff --git a/packages/components/src/styles/components/code-block/index.scss b/packages/components/src/styles/components/code-block/index.scss
index 891c804b6d1..248abee6985 100644
--- a/packages/components/src/styles/components/code-block/index.scss
+++ b/packages/components/src/styles/components/code-block/index.scss
@@ -159,7 +159,9 @@ $hds-code-block-code-bottom-gradient-height: 50px;
     }
 
     // reduce the amount of space at the bottom of the code block when user scrolls to the bottom
-    code { padding-bottom: 0; }
+    code {
+      padding-bottom: 0;
+    }
   }
 
   // make border extend to bottom of the code block

From b517c1202896f4fcf8e1cd81165d59cdd05c385c Mon Sep 17 00:00:00 2001
From: Kristin Bradley 
Date: Fri, 18 Apr 2025 15:29:49 -0700
Subject: [PATCH 10/31] HDS-4745 Implement dark button styles following copy
 button

---
 .../src/components/hds/code-block/index.hbs   | 18 +++++++++--
 .../styles/components/code-block/index.scss   | 30 ++++++++++---------
 .../app/templates/components/code-block.hbs   |  3 +-
 3 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/packages/components/src/components/hds/code-block/index.hbs b/packages/components/src/components/hds/code-block/index.hbs
index 45d01b29f3f..6e2d11d8f21 100644
--- a/packages/components/src/components/hds/code-block/index.hbs
+++ b/packages/components/src/components/hds/code-block/index.hbs
@@ -33,9 +33,23 @@
   {{#if this.showFooter}}
     
   {{/if}}
diff --git a/packages/components/src/styles/components/code-block/index.scss b/packages/components/src/styles/components/code-block/index.scss
index 248abee6985..ba654811a20 100644
--- a/packages/components/src/styles/components/code-block/index.scss
+++ b/packages/components/src/styles/components/code-block/index.scss
@@ -170,12 +170,6 @@ $hds-code-block-code-bottom-gradient-height: 50px;
   }
 }
 
-.hds-code-block__height-toggle-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 // Code
 .hds-code-block__code {
   @include hds-focus-ring-basic();
@@ -194,11 +188,9 @@ $hds-code-block-code-bottom-gradient-height: 50px;
   }
 }
 
-// CopyButton
+// General dark button styles
+.hds-code-block__height-toggle-button,
 .hds-code-block__copy-button {
-  position: absolute;
-  top: 11px; // 12px -1px accounting for border
-  right: 12px; // 12px -1px accounting for border
   // Overriding default colors
   color: var(--hds-code-block-color-foreground-primary);
   background-color: var(--hds-code-block-color-surface-faint);
@@ -206,18 +198,21 @@ $hds-code-block-code-bottom-gradient-height: 50px;
 
   &:hover,
   &.mock-hover {
+    color: var(--hds-code-block-color-foreground-primary);
     background-color: var(--hds-code-block-color-surface-primary);
     border-color: var(--hds-code-block-color-border-strong);
   }
 
   &:active,
   &.mock-active {
+    color: var(--hds-code-block-color-foreground-primary);
     background-color: var(--hds-code-block-color-surface-interactive-active);
   }
 
   &:focus,
   &.mock-focus,
   &:focus-visible {
+    color: var(--hds-code-block-color-foreground-primary);
     background-color: var(--hds-code-block-color-surface-faint);
     border-color: var(--hds-code-block-color-focus-action-internal);
 
@@ -226,6 +221,17 @@ $hds-code-block-code-bottom-gradient-height: 50px;
     }
   }
 
+  .hds-icon {
+    color: var(--hds-code-block-color-foreground-primary);
+  }
+}
+
+// CopyButton
+.hds-code-block__copy-button {
+  position: absolute;
+  top: 11px; // 12px -1px accounting for border
+  right: 12px; // 12px -1px accounting for border
+
   &.hds-copy-button--status-success {
     .hds-icon {
       color: var(--hds-code-block-color-foreground-success);
@@ -237,10 +243,6 @@ $hds-code-block-code-bottom-gradient-height: 50px;
       color: var(--hds-code-block-color-foreground-critical);
     }
   }
-
-  .hds-icon {
-    color: var(--hds-code-block-color-foreground-primary);
-  }
 }
 
 .hds-code-block {
diff --git a/showcase/app/templates/components/code-block.hbs b/showcase/app/templates/components/code-block.hbs
index d168757dcfb..abaeba1db11 100644
--- a/showcase/app/templates/components/code-block.hbs
+++ b/showcase/app/templates/components/code-block.hbs
@@ -260,11 +260,12 @@ function assertObjectsEqual (actual, expected, testName) {
       {{! template-lint-enable no-whitespace-for-layout }}
     
 
-    
+    
       {{! template-lint-disable no-whitespace-for-layout }}
       
Date: Fri, 25 Apr 2025 14:22:12 -0400
Subject: [PATCH 14/31] Fix: Refactor toggle button to prevent focus being lost

---
 .../src/components/hds/code-block/index.hbs   | 27 ++++++-------------
 1 file changed, 8 insertions(+), 19 deletions(-)

diff --git a/packages/components/src/components/hds/code-block/index.hbs b/packages/components/src/components/hds/code-block/index.hbs
index 6e2d11d8f21..9f958289535 100644
--- a/packages/components/src/components/hds/code-block/index.hbs
+++ b/packages/components/src/components/hds/code-block/index.hbs
@@ -32,25 +32,14 @@
   
   {{#if this.showFooter}}
     
   {{/if}}
 
\ No newline at end of file

From 163e5f66981b0cb50ee9b894f3c949cf16295ee0 Mon Sep 17 00:00:00 2001
From: Dylan Hyun 
Date: Fri, 25 Apr 2025 14:25:52 -0400
Subject: [PATCH 15/31] Feat: Update toggle icon and label

---
 .../components/src/components/hds/code-block/index.hbs    | 4 ++--
 .../integration/components/hds/code-block/index-test.js   | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/components/hds/code-block/index.hbs b/packages/components/src/components/hds/code-block/index.hbs
index 9f958289535..ea0531a04b4 100644
--- a/packages/components/src/components/hds/code-block/index.hbs
+++ b/packages/components/src/components/hds/code-block/index.hbs
@@ -34,9 +34,9 @@