Merge pull request #2474 from hashicorp/alex-ju/fix-code-block-highli…

…ght-lines `CodeBlock` - fix line numbers always shown when `highlightLines` is set
hashicorp · Oct 7, 2024 · b72869e · b72869e
2 parents 771b59c + 0f3df00
commit b72869e
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/.changeset/rich-lemons-think.md b/.changeset/rich-lemons-think.md
@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`CodeBlock` - Decoupled the display of line numbers from `highlightLines`
diff --git a/packages/components/src/components/hds/code-block/index.ts b/packages/components/src/components/hds/code-block/index.ts
@@ -192,7 +192,7 @@ export default class HdsCodeBlock extends Component<HdsCodeBlockSignature> {
     }
 
     // Note: Prism.js is using the specific class name "line-numbers" to determine implementation of line numbers in the UI
-    if (this.hasLineNumbers || this.args.highlightLines) {
+    if (this.hasLineNumbers) {
       classes.push('line-numbers');
     }
 

diff --git a/showcase/app/templates/components/code-block.hbs b/showcase/app/templates/components/code-block.hbs
@@ -311,9 +311,10 @@ function assertObjectsEqual (actual, expected, testName) {
   <Shw::Text::H3>Highlight lines</Shw::Text::H3>
 
   <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
-    <SG.Item @label="Highlight lines 2 & 4" @forceMinWidth={{true}}>
+    <SG.Item @label="Highlight lines 2 & 4, hasLineNumbers=false" @forceMinWidth={{true}}>
       <Hds::CodeBlock
         @language="javascript"
+        @hasLineNumbers={{false}}
         @highlightLines="2, 4"
         @value="import Application from '@ember/application';
 import Resolver from 'ember-resolver';