From 11b7281d6e1d93357e2a4c4cd15c579ccc1031b3 Mon Sep 17 00:00:00 2001 From: Dylan Hyun Date: Mon, 5 May 2025 19:11:58 -0400 Subject: [PATCH 01/11] Fix: Line numbers and highlighting rendering --- .../src/components/hds/code-block/index.hbs | 4 +- .../src/components/hds/code-block/index.ts | 56 ++++++++++++++----- 2 files changed, 44 insertions(+), 16 deletions(-) diff --git a/packages/components/src/components/hds/code-block/index.hbs b/packages/components/src/components/hds/code-block/index.hbs index ea0531a04b4..c8e552d4ae6 100644 --- a/packages/components/src/components/hds/code-block/index.hbs +++ b/packages/components/src/components/hds/code-block/index.hbs @@ -3,7 +3,7 @@ SPDX-License-Identifier: MPL-2.0 }} -
+
{{~yield (hash Title=(component "hds/code-block/title"))~}} {{~yield (hash Description=(component "hds/code-block/description"))~}} @@ -17,7 +17,7 @@ data-start={{@lineNumberStart}} id={{this._preCodeId}} tabindex="0" - > + > {{~this._prismCode~}} diff --git a/packages/components/src/components/hds/code-block/index.ts b/packages/components/src/components/hds/code-block/index.ts index 07bd750aa4c..78f5005e007 100644 --- a/packages/components/src/components/hds/code-block/index.ts +++ b/packages/components/src/components/hds/code-block/index.ts @@ -10,6 +10,7 @@ import { assert } from '@ember/debug'; import { next, schedule } from '@ember/runloop'; import { htmlSafe } from '@ember/template'; import { guidFor } from '@ember/object/internals'; +import { modifier } from 'ember-modifier'; import Prism from 'prismjs'; @@ -75,6 +76,31 @@ export default class HdsCodeBlock extends Component { // Generates a unique ID for the code content private _preCodeId = 'pre-code-' + guidFor(this); + private _preCodeElement!: HTMLPreElement; + private _observer!: IntersectionObserver; + + // If a code block is hidden from view, and made visible after load, the Prism code needs to be re-run + private _setUpObserver = modifier((element: HTMLElement) => { + const codeBlock = element.querySelector('code') as HTMLElement; + this._observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + this.setPrismCode(codeBlock); + } + }); + }); + this._observer.observe(element); + + return () => { + this._observer.disconnect(); + }; + }); + + private _setUpCodeBlockCode = modifier((element: HTMLElement) => { + this._preCodeElement = element.querySelector('pre') as HTMLPreElement; + this.setPrismCode(element); + return () => {}; + }); // code text content for the CodeBlock get code(): string { @@ -152,24 +178,26 @@ export default class HdsCodeBlock extends Component { element, }); - // 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 - 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', (): void => { + // Get the actual height & the content height of the preCodeElement + this._codeContentHeight = this._preCodeElement?.scrollHeight ?? 0; + this._codeContainerHeight = this._preCodeElement?.clientHeight ?? 0; + + // we need to re-trigger the line numbers generation as late as possible to account for any line wrapping styles that are applied + if (this.args.hasLineWrapping && Prism?.plugins?.['lineNumbers']) { + // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access + Prism.plugins['lineNumbers'].highlight(this._preCodeElement); + } + + // 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 // 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')); - }); - } + } + }); }); } } From 65c3779739c3d037d4236dd9d71999fb7ccf86bc Mon Sep 17 00:00:00 2001 From: Dylan Hyun Date: Tue, 6 May 2025 08:28:09 -0400 Subject: [PATCH 02/11] Fix: Line number plugin set up --- packages/components/src/components/hds/code-block/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/hds/code-block/index.ts b/packages/components/src/components/hds/code-block/index.ts index 78f5005e007..7b963d4d391 100644 --- a/packages/components/src/components/hds/code-block/index.ts +++ b/packages/components/src/components/hds/code-block/index.ts @@ -81,6 +81,7 @@ export default class HdsCodeBlock extends Component { // If a code block is hidden from view, and made visible after load, the Prism code needs to be re-run private _setUpObserver = modifier((element: HTMLElement) => { + this._preCodeElement = element.querySelector('pre') as HTMLPreElement; const codeBlock = element.querySelector('code') as HTMLElement; this._observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { @@ -97,7 +98,6 @@ export default class HdsCodeBlock extends Component { }); private _setUpCodeBlockCode = modifier((element: HTMLElement) => { - this._preCodeElement = element.querySelector('pre') as HTMLPreElement; this.setPrismCode(element); return () => {}; }); @@ -187,7 +187,7 @@ export default class HdsCodeBlock extends Component { // we need to re-trigger the line numbers generation as late as possible to account for any line wrapping styles that are applied if (this.args.hasLineWrapping && Prism?.plugins?.['lineNumbers']) { // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access - Prism.plugins['lineNumbers'].highlight(this._preCodeElement); + Prism.plugins['lineNumbers'].resize(this._preCodeElement); } // Force prism-line-highlight plugin initialization From 70d6c7efe3ca57a69a5dbf955d66e24ca3894404 Mon Sep 17 00:00:00 2001 From: Dylan Hyun Date: Tue, 13 May 2025 11:23:52 -0400 Subject: [PATCH 03/11] Chore: Add changeset --- .changeset/selfish-apes-breathe.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/selfish-apes-breathe.md diff --git a/.changeset/selfish-apes-breathe.md b/.changeset/selfish-apes-breathe.md new file mode 100644 index 00000000000..f0972244056 --- /dev/null +++ b/.changeset/selfish-apes-breathe.md @@ -0,0 +1,5 @@ +--- +"@hashicorp/design-system-components": patch +--- + +`CodeBlock` - Fixed issues with line numbers when line wrapping is present, and line highlighting when hidden from view initially such as inside a tabs component From b1b25cf82ec11aa041b0e29dda2340f85f4633e0 Mon Sep 17 00:00:00 2001 From: Dylan Hyun Date: Wed, 14 May 2025 15:13:14 -0400 Subject: [PATCH 04/11] Fix: Convert to ResizeObserver --- packages/components/src/components/hds/code-block/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/components/hds/code-block/index.ts b/packages/components/src/components/hds/code-block/index.ts index 7b963d4d391..12c36d33a4f 100644 --- a/packages/components/src/components/hds/code-block/index.ts +++ b/packages/components/src/components/hds/code-block/index.ts @@ -77,15 +77,15 @@ export default class HdsCodeBlock extends Component { // Generates a unique ID for the code content private _preCodeId = 'pre-code-' + guidFor(this); private _preCodeElement!: HTMLPreElement; - private _observer!: IntersectionObserver; + private _observer!: ResizeObserver; // If a code block is hidden from view, and made visible after load, the Prism code needs to be re-run private _setUpObserver = modifier((element: HTMLElement) => { this._preCodeElement = element.querySelector('pre') as HTMLPreElement; const codeBlock = element.querySelector('code') as HTMLElement; - this._observer = new IntersectionObserver((entries) => { + this._observer = new ResizeObserver((entries) => { entries.forEach((entry) => { - if (entry.isIntersecting) { + if (entry.contentBoxSize) { this.setPrismCode(codeBlock); } }); From 590960b504ed133ab8256e0beed43eff805124b6 Mon Sep 17 00:00:00 2001 From: Dylan Hyun Date: Thu, 15 May 2025 09:56:23 -0400 Subject: [PATCH 05/11] Fix: Refactor prism plugin updates --- .../src/components/hds/code-block/index.ts | 48 +++++++++++-------- .../app/templates/components/code-block.hbs | 1 + 2 files changed, 29 insertions(+), 20 deletions(-) diff --git a/packages/components/src/components/hds/code-block/index.ts b/packages/components/src/components/hds/code-block/index.ts index 12c36d33a4f..a25357872ff 100644 --- a/packages/components/src/components/hds/code-block/index.ts +++ b/packages/components/src/components/hds/code-block/index.ts @@ -81,12 +81,12 @@ export default class HdsCodeBlock extends Component { // If a code block is hidden from view, and made visible after load, the Prism code needs to be re-run private _setUpObserver = modifier((element: HTMLElement) => { - this._preCodeElement = element.querySelector('pre') as HTMLPreElement; - const codeBlock = element.querySelector('code') as HTMLElement; + this._preCodeElement = element.querySelector('.hds-code-block__code') as HTMLPreElement; this._observer = new ResizeObserver((entries) => { entries.forEach((entry) => { if (entry.contentBoxSize) { - this.setPrismCode(codeBlock); + this._updateCodeHeights(); + this._updatePrismPlugins(); } }); }); @@ -180,28 +180,36 @@ export default class HdsCodeBlock extends Component { // eslint-disable-next-line ember/no-runloop schedule('afterRender', (): void => { - // Get the actual height & the content height of the preCodeElement - this._codeContentHeight = this._preCodeElement?.scrollHeight ?? 0; - this._codeContainerHeight = this._preCodeElement?.clientHeight ?? 0; - - // we need to re-trigger the line numbers generation as late as possible to account for any line wrapping styles that are applied - if (this.args.hasLineWrapping && Prism?.plugins?.['lineNumbers']) { - // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access - Prism.plugins['lineNumbers'].resize(this._preCodeElement); - } - - // 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 - // 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')); - } + this._updateCodeHeights(); + // we need to delay re-evaluating the context for prism plugins for as much as possible, and `afterRender` is the 'latest' we can use in the component lifecycle + this._updatePrismPlugins(); }); }); } } + private _updateCodeHeights(): void { + if (!this._isExpanded) { + // Get the actual height & the content height of the preCodeElement + this._codeContentHeight = this._preCodeElement?.scrollHeight ?? 0; + this._codeContainerHeight = this._preCodeElement?.clientHeight ?? 0; + } + } + + private _updatePrismPlugins(): void { + if (this.hasLineNumbers && Prism?.plugins?.['lineNumbers']) { + // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access + Prism.plugins['lineNumbers'].resize(this._preCodeElement); + } + + // Force prism-line-highlight plugin initialization + // Context: https://github.com/hashicorp/design-system/pull/1749#discussion_r1374288785 + if (this.args.highlightLines) { + // 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')); + } + } + @action toggleExpanded(): void { this._isExpanded = !this._isExpanded; diff --git a/showcase/app/templates/components/code-block.hbs b/showcase/app/templates/components/code-block.hbs index 1108807b4e8..6bb49b02319 100644 --- a/showcase/app/templates/components/code-block.hbs +++ b/showcase/app/templates/components/code-block.hbs @@ -659,6 +659,7 @@ console.log(`I am ${codeLang} code`);" @language="go" @highlightLines="2, 4" @hasLineWrapping={{true}} + @maxHeight="130px" @value="package main import 'fmt' func main() { From b7bd88673c2a807e2432d401566c6e7942fd796a Mon Sep 17 00:00:00 2001 From: Dylan Hyun Date: Thu, 15 May 2025 10:19:38 -0400 Subject: [PATCH 06/11] Fix: Line numbers on dynamic updates --- .../src/components/hds/code-block/index.ts | 13 ++++++++- .../app/controllers/components/code-block.js | 28 +++++++++++++++++++ .../app/styles/showcase-pages/code-block.scss | 4 +++ .../app/templates/components/code-block.hbs | 10 +++++++ 4 files changed, 54 insertions(+), 1 deletion(-) diff --git a/packages/components/src/components/hds/code-block/index.ts b/packages/components/src/components/hds/code-block/index.ts index a25357872ff..57e60bb38ae 100644 --- a/packages/components/src/components/hds/code-block/index.ts +++ b/packages/components/src/components/hds/code-block/index.ts @@ -81,7 +81,9 @@ export default class HdsCodeBlock extends Component { // If a code block is hidden from view, and made visible after load, the Prism code needs to be re-run private _setUpObserver = modifier((element: HTMLElement) => { - this._preCodeElement = element.querySelector('.hds-code-block__code') as HTMLPreElement; + this._preCodeElement = element.querySelector( + '.hds-code-block__code' + ) as HTMLPreElement; this._observer = new ResizeObserver((entries) => { entries.forEach((entry) => { if (entry.contentBoxSize) { @@ -98,6 +100,7 @@ export default class HdsCodeBlock extends Component { }); private _setUpCodeBlockCode = modifier((element: HTMLElement) => { + this._isExpanded = false; // reset expanded state on updates this.setPrismCode(element); return () => {}; }); @@ -171,6 +174,14 @@ export default class HdsCodeBlock extends Component { this._prismCode = htmlSafe(Prism.util.encode(code).toString()); } + // Existing line numbers must be removed in order to be updated correctly + if (element.querySelector('.line-numbers-rows')) { + const lineNumbers = element.querySelector( + '.line-numbers-rows' + ) as HTMLElement; + element.removeChild(lineNumbers); + } + // Force prism-line-numbers plugin initialization, required for Prism.highlight usage // See https://github.com/PrismJS/prism/issues/1234 Prism.hooks.run('complete', { diff --git a/showcase/app/controllers/components/code-block.js b/showcase/app/controllers/components/code-block.js index 4748833804f..45ea5c04b91 100644 --- a/showcase/app/controllers/components/code-block.js +++ b/showcase/app/controllers/components/code-block.js @@ -31,6 +31,25 @@ export default class CodeBlockController extends Controller { @tracked isModalActive = false; @tracked declaration = 'let'; @tracked input = ''; + @tracked value_demo1 = this.value_start_demo1; + + value_start_demo1 = `package main +import 'fmt' +func main() { + res = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam' + fm.Println(res) +}`; + + value_new_demo1 = `package main +import 'fmt' +func main() { + res = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam' + fm.Println(res) +} +func main2() { + res = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam' + fm.Println(res) +}`; constructor() { super(...arguments); @@ -76,4 +95,13 @@ export default class CodeBlockController extends Controller { deactivateModal() { this.isModalActive = false; } + + @action + onUpdateClickDemo1() { + if (this.value_demo1 === this.value_start_demo1) { + this.value_demo1 = this.value_new_demo1; + } else { + this.value_demo1 = this.value_start_demo1; + } + } } diff --git a/showcase/app/styles/showcase-pages/code-block.scss b/showcase/app/styles/showcase-pages/code-block.scss index 95f09b880a5..3643b94ba89 100644 --- a/showcase/app/styles/showcase-pages/code-block.scss +++ b/showcase/app/styles/showcase-pages/code-block.scss @@ -13,4 +13,8 @@ body.components-code-block { left: 0; } } + + .shw-component-code-block-demo-btn { + margin-top: 12px; + } } diff --git a/showcase/app/templates/components/code-block.hbs b/showcase/app/templates/components/code-block.hbs index 6bb49b02319..174c7df07ec 100644 --- a/showcase/app/templates/components/code-block.hbs +++ b/showcase/app/templates/components/code-block.hbs @@ -721,5 +721,15 @@ func main() { {{/if}} + + + + \ No newline at end of file From d977fa01486d629c95d69d93eb4a34695aeec3f2 Mon Sep 17 00:00:00 2001 From: Dylan Hyun Date: Thu, 15 May 2025 10:22:14 -0400 Subject: [PATCH 07/11] Fix: Rename observer --- packages/components/src/components/hds/code-block/index.hbs | 2 +- packages/components/src/components/hds/code-block/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/hds/code-block/index.hbs b/packages/components/src/components/hds/code-block/index.hbs index c8e552d4ae6..931ef1dd859 100644 --- a/packages/components/src/components/hds/code-block/index.hbs +++ b/packages/components/src/components/hds/code-block/index.hbs @@ -3,7 +3,7 @@ SPDX-License-Identifier: MPL-2.0 }} -
+
{{~yield (hash Title=(component "hds/code-block/title"))~}} {{~yield (hash Description=(component "hds/code-block/description"))~}} diff --git a/packages/components/src/components/hds/code-block/index.ts b/packages/components/src/components/hds/code-block/index.ts index 57e60bb38ae..df4e2d76dab 100644 --- a/packages/components/src/components/hds/code-block/index.ts +++ b/packages/components/src/components/hds/code-block/index.ts @@ -80,7 +80,7 @@ export default class HdsCodeBlock extends Component { private _observer!: ResizeObserver; // If a code block is hidden from view, and made visible after load, the Prism code needs to be re-run - private _setUpObserver = modifier((element: HTMLElement) => { + private _setUpCodeObserver = modifier((element: HTMLElement) => { this._preCodeElement = element.querySelector( '.hds-code-block__code' ) as HTMLPreElement; From 8ce856f4d0d53711315f6cd183c5526143129da4 Mon Sep 17 00:00:00 2001 From: Dylan Hyun Date: Thu, 15 May 2025 10:25:00 -0400 Subject: [PATCH 08/11] Chore: Update changeset --- .changeset/selfish-apes-breathe.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/selfish-apes-breathe.md b/.changeset/selfish-apes-breathe.md index f0972244056..453bdb834b8 100644 --- a/.changeset/selfish-apes-breathe.md +++ b/.changeset/selfish-apes-breathe.md @@ -2,4 +2,4 @@ "@hashicorp/design-system-components": patch --- -`CodeBlock` - Fixed issues with line numbers when line wrapping is present, and line highlighting when hidden from view initially such as inside a tabs component +`CodeBlock` - Fixed issues with line numbers when line wrapping is present and when the number of lines changes dynamically. Also fixed line highlighting when Code Block is hidden from view initially such as when used inside a Tabs component. From a95ff63612a0e545a8cee9d7341f5e22bb169806 Mon Sep 17 00:00:00 2001 From: Dylan Hyun Date: Fri, 16 May 2025 10:21:39 -0400 Subject: [PATCH 09/11] Fix: Line highlight with no line numbers offset --- .changeset/selfish-apes-breathe.md | 2 +- .../src/styles/components/code-block/index.scss | 16 +++++++++++++--- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/.changeset/selfish-apes-breathe.md b/.changeset/selfish-apes-breathe.md index 453bdb834b8..46717e5ad0c 100644 --- a/.changeset/selfish-apes-breathe.md +++ b/.changeset/selfish-apes-breathe.md @@ -2,4 +2,4 @@ "@hashicorp/design-system-components": patch --- -`CodeBlock` - Fixed issues with line numbers when line wrapping is present and when the number of lines changes dynamically. Also fixed line highlighting when Code Block is hidden from view initially such as when used inside a Tabs component. +`CodeBlock` - Fixed issues with line numbers when line wrapping is present and when the number of lines changes dynamically; line highlighting when the Code Block is hidden from view initially such as when used inside a Tabs component; and line highlighting when hasLineNumbers is false. diff --git a/packages/components/src/styles/components/code-block/index.scss b/packages/components/src/styles/components/code-block/index.scss index c995c208ac2..c5f24efc996 100644 --- a/packages/components/src/styles/components/code-block/index.scss +++ b/packages/components/src/styles/components/code-block/index.scss @@ -147,6 +147,7 @@ $hds-code-block-code-footer-height: 48px; } code { + position: relative; display: inline-block; padding-right: $hds-code-block-code-padding; } @@ -220,6 +221,13 @@ $hds-code-block-code-footer-height: 48px; position: relative; // reserve space for line numbers padding-left: calc(#{$hds-code-block-line-numbers-width} + #{$hds-code-block-code-padding}); + + // When line numbers are enabled, line highlighing is calculated based on the pre element instead of the code element + // To ensure the offset is correct, we need to set the position of the code element to static + // Source: https://github.com/PrismJS/prism/blob/v2/src/plugins/line-highlight/prism-line-highlight.ts#L92 + code { + position: static; + } } .hds-code-block__overlay-footer { @@ -250,15 +258,17 @@ $hds-code-block-code-footer-height: 48px; } } } + + .line-highlight { + left: 0; + } } // Highlighted Lines .line-highlight { position: absolute; right: 0; - left: 0; - // Note: position seems off by a few px although not sure why - margin-top: -3px; + left: -$hds-code-block-code-padding; background-color: var(--hds-code-block-color-line-highlight); border: solid var(--hds-code-block-color-line-highlight-border); border-width: 1px 0 1px 4px; From 4a0cbecfa86790c433f09561cc3056e616a4da8c Mon Sep 17 00:00:00 2001 From: Dylan Hyun Date: Fri, 16 May 2025 10:56:58 -0400 Subject: [PATCH 10/11] Fix: Address feedback --- .../src/components/hds/code-block/index.ts | 12 +++++++----- showcase/app/styles/showcase-pages/code-block.scss | 4 ---- showcase/app/templates/components/code-block.hbs | 2 +- 3 files changed, 8 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 df4e2d76dab..923e743025d 100644 --- a/packages/components/src/components/hds/code-block/index.ts +++ b/packages/components/src/components/hds/code-block/index.ts @@ -100,7 +100,9 @@ export default class HdsCodeBlock extends Component { }); private _setUpCodeBlockCode = modifier((element: HTMLElement) => { - this._isExpanded = false; // reset expanded state on updates + if (this.showFooter) { + this._isExpanded = false; // reset expanded state on updates + } this.setPrismCode(element); return () => {}; }); @@ -175,10 +177,10 @@ export default class HdsCodeBlock extends Component { } // Existing line numbers must be removed in order to be updated correctly - if (element.querySelector('.line-numbers-rows')) { - const lineNumbers = element.querySelector( - '.line-numbers-rows' - ) as HTMLElement; + const lineNumbers = element.querySelector( + '.line-numbers-rows' + ) as HTMLElement; + if (lineNumbers) { element.removeChild(lineNumbers); } diff --git a/showcase/app/styles/showcase-pages/code-block.scss b/showcase/app/styles/showcase-pages/code-block.scss index 3643b94ba89..95f09b880a5 100644 --- a/showcase/app/styles/showcase-pages/code-block.scss +++ b/showcase/app/styles/showcase-pages/code-block.scss @@ -13,8 +13,4 @@ body.components-code-block { left: 0; } } - - .shw-component-code-block-demo-btn { - margin-top: 12px; - } } diff --git a/showcase/app/templates/components/code-block.hbs b/showcase/app/templates/components/code-block.hbs index 174c7df07ec..fae8c9f4c9f 100644 --- a/showcase/app/templates/components/code-block.hbs +++ b/showcase/app/templates/components/code-block.hbs @@ -727,7 +727,7 @@ func main() { type="button" @text="Update" @isInline={{true}} - class="shw-component-code-block-demo-btn" + {{style marginTop="12px"}} {{on "click" this.onUpdateClickDemo1}} /> From 7edf390b4c8912d774d9975922bd06c259348248 Mon Sep 17 00:00:00 2001 From: Dylan Hyun Date: Fri, 16 May 2025 11:59:40 -0400 Subject: [PATCH 11/11] Fix: Revert showFooter check in set up modifier --- packages/components/src/components/hds/code-block/index.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/components/src/components/hds/code-block/index.ts b/packages/components/src/components/hds/code-block/index.ts index 923e743025d..a2cbbd70f46 100644 --- a/packages/components/src/components/hds/code-block/index.ts +++ b/packages/components/src/components/hds/code-block/index.ts @@ -100,9 +100,7 @@ export default class HdsCodeBlock extends Component { }); private _setUpCodeBlockCode = modifier((element: HTMLElement) => { - if (this.showFooter) { - this._isExpanded = false; // reset expanded state on updates - } + this._isExpanded = false; // reset expanded state on updates this.setPrismCode(element); return () => {}; });