Skip to content

Website: Convert Form > SuperSelect demos to the new format#3687

Open
shleewhite wants to merge 3 commits intomainfrom
hds-5858/super-select-demos
Open

Website: Convert Form > SuperSelect demos to the new format#3687
shleewhite wants to merge 3 commits intomainfrom
hds-5858/super-select-demos

Conversation

@shleewhite
Copy link
Contributor

@shleewhite shleewhite commented Mar 9, 2026

📌 Summary

If merged, this PR would convert the Form > SuperSelect demos to thew new format.

Current
Proposed

🔗 External links

Jira ticket: HDS-5858


💬 Please consider using conventional comments when reviewing this PR.

📋 PCI review checklist
  • If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
  • If applicable, I've worked with GRC to document the impact of any changes to security controls.
    Examples of changes to controls include access controls, encryption, logging, etc.
  • If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment.
    Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.

@vercel
Copy link

vercel bot commented Mar 9, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
hds-showcase Ready Ready Preview Mar 12, 2026 2:52pm
hds-website Ready Ready Preview Mar 12, 2026 2:52pm

Request Review

If options are implemented as an array of strings and have the same name, they will be treated as the same, so selecting one will select others with the same name. To avoid this, implement your options using objects. (e.g. [{name: "name", label: "label"}, ...])
!!!

**Nested data structure example:**
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would you maybe want to call out somewhere that the javascript in the updated code-snippets contains a nested data structure example?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a note!

{{@option.size}}
</span>
```
[[code-snippets/example-selected-item-component execute=false]]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For this example, would we maybe want to add another code type since it doesn't really matter if it's GTS or HBS? (I know if you expand the code you can see the extra code around it in the GTS file though...)

Image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm kind of inclined to leave it as is... Just because it is what the consumers should do and it shows how you can correctly add arguments to the component. But I dont feel that strongly.

</F.Options>
</Hds::Form::SuperSelect::Single::Field>
```
[[code-snippets/super-select-single-selected-item-component]]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For this one, in the updated code sippet,the pre-selected "Small" text no longer displays. Is that as expected?

Image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor

@KristinLBradley KristinLBradley left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just added a few minor comments & questions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs-website Updates to the documentation website

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants