Section header#52
Conversation
edlu77
commented
May 29, 2026
edlu77
commented
- Add section header #46
|
View your CI Pipeline Execution ↗ for commit c00eabb
💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗ ☁️ Nx Cloud last updated this comment at |
🚀 Preview Deploy Report✅ Successfully deployed preview here |
![nx-cloud[bot]](https://avatars.githubusercontent.com/in/80458?s=60&v=4){kind=small}
There was a problem hiding this comment.
Important
At least one additional CI pipeline execution has run since the conclusion below was written and it may no longer be applicable.
Nx Cloud is proposing a fix for your failed CI:
We corrected the styleIncludePaths in ng-package.json from ../../../internal/scss to ../../internal/scss, aligning it with the actual directory depth of the section-link library under content-templates/. This fixes the build error where the Angular compiler could not resolve the token-utils SCSS import because the path was pointing one level too high into a non-existent directory.
Tip
✅ We verified this fix by re-running design-system:build:production.
diff --git a/libs/design-system/content-templates/section-link/ng-package.json b/libs/design-system/content-templates/section-link/ng-package.json
index 49b7b20..27b8836 100644
--- a/libs/design-system/content-templates/section-link/ng-package.json
+++ b/libs/design-system/content-templates/section-link/ng-package.json
@@ -1,6 +1,6 @@
{
"lib": {
"entryFile": "src/index.ts",
- "styleIncludePaths": ["../../../internal/scss"]
+ "styleIncludePaths": ["../../internal/scss"]
}
}
🔔 Heads up, your workspace has pending recommendations ↗ to auto-apply fixes for similar failures.
Or Apply changes locally with:
npx nx-cloud apply-locally mU9S-cvjU
Apply fix locally with your editor ↗ View interactive diff ↗
🎓 Learn more about Self-Healing CI on nx.dev
LibbyUX
left a comment
LibbyUX
left a comment
There was a problem hiding this comment.
Thank you @edlu77 ! This looks good.
Just a couple questions:
- Is it possible to default to using the divider for this component? Asking because I am moving towards always using them myself because they break up the page nicely.
- If possible, can we use the default styles for this component? Details on a previous review I wrote earlier today: #45 (review)
Thanks so much, talk soon!
|
@edlu77 - This may still be a work-in-progress, so please disregard if so! On Brave browser, I am seeing the icon button always showing with alignment issues with the icon in the icon button, and also with the alignment of the header and the icon button. 
|
axdanbol
left a comment
axdanbol
left a comment
There was a problem hiding this comment.
Please move code from design-system/content-templates/section-header/ to design-system/section-header/ & also add an entry in tsconfig.base.json
There was a problem hiding this comment.
Write proper tests using testing-library
| argTypes: { | ||
| level: { | ||
| control: { type: 'number', min: 1, max: 6 }, | ||
| description: 'The heading level (1-6) to determine the appropriate HTML tag.', |
There was a problem hiding this comment.
Use https://storybook.js.org/docs/api/arg-types#controlmax etc. instead of clampLevel
| render: (args) => ({ | ||
| props: args, | ||
| styles: ['[ang-section-header] { margin: 0 2rem; }'], | ||
| template: `<h${clampLevel(args.level)} ang-section-header anchor="${args.anchor}" underlined="${args.underlined}"> |
There was a problem hiding this comment.
Use ${argsToTemplate(args, ...)} instead of binding anchor and underlined
| @Component({ | ||
| selector: | ||
| // eslint-disable-next-line @angular-eslint/component-selector | ||
| `h1[ang-section-header], h2[ang-section-header], h3[ang-section-header], |
There was a problem hiding this comment.
As this uses attribute style selectors we should update each to hX[angSectionHeader]
| @@ -0,0 +1,15 @@ | |||
| @if (anchor()) { | |||
| <span class="ang-section-header-link-container"> | |||
| <a mat-icon-button class="ang-section-header-link" aria-label="Link to this heading" [attr.href]="`#${anchor()}`"> | |||
There was a problem hiding this comment.
This needs to use aria-labelledby instead of aria-label. You need to set a unique id on the ang-section-header-content div
3 participants
