Website: add section on single file components to "Getting started for engineers" #3349
+42
−0
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
didoo
reviewed
Nov 4, 2025
Co-authored-by: Kristin Bradley <[email protected]>
aklkv
reviewed
Nov 4, 2025
|
|
||
| ### Single file components | ||
|
|
||
| If you are are using single file components (ie., `.gts` or `.gjs` files), the components need to be individually imported into the file for them to render. All components can be imported from the `@hashicorp/design-system-components/components` path. To use a component's signature, you must import it from the definition file. |
There was a problem hiding this comment.
Suggested change
| If you are are using single file components (ie., `.gts` or `.gjs` files), the components need to be individually imported into the file for them to render. All components can be imported from the `@hashicorp/design-system-components/components` path. To use a component's signature, you must import it from the definition file. | |
| If you are are using single file components (i.e., `.gts` or `.gjs` files), the components need to be individually imported into the file for them to render. All components can be imported from the `@hashicorp/design-system-components/components` path. To use a component's signature, you must import it from the definition file. |
See: https://www.wikihow.com/Use-i.e.-in-a-Sentence for more info
didoo
reviewed
Nov 4, 2025
|
|
||
| interface MyComponentSignature { | ||
| Args: {}; | ||
| Element: HdsFormTextInputFieldSignature; |
There was a problem hiding this comment.
Should this be like this?
Suggested change
| Element: HdsFormTextInputFieldSignature; | |
| Element: HdsFormTextInputFieldSignature['Element']; |
didoo
reviewed
Nov 4, 2025
|
|
||
| const MyComponent: TOC<MyComponentSignature> = <template> | ||
| <HdsFormTextInputField ...attributes as |F|> | ||
| <F.Label>Name</F.Label> |
There was a problem hiding this comment.
[suggestion] how about we make the Name an argument?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📌 Summary
PREVIEW
If merged, this PR would add a short blurb on how to use Helios components in SFCs.
Note: the syntax highlighting is definitely not perfect, this is a limitation of Prism as they don't have a gts/gjs highlighter. This can be addressed more holistically when we decide to add gts snippets to the component docs pages.
📸 Screenshots
🔗 External links
Jira ticket: HDS-5583
💬 Please consider using conventional comments when reviewing this PR.
📋 PCI review checklist
Examples of changes to controls include access controls, encryption, logging, etc.
Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.