Skip to content

Conversation

@dchyun
Copy link
Contributor

@dchyun dchyun commented Apr 29, 2025

📌 Summary

This PR adds docs to the website for the new CodeBlock toggle button from #2826.

Preview link

🔗 External links

Jira ticket: HDS-4745


💬 Please consider using conventional comments when reviewing this PR.

@vercel
Copy link

vercel bot commented Apr 29, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
hds-showcase ✅ Ready (Inspect) Visit Preview May 13, 2025 7:34pm
hds-website ✅ Ready (Inspect) Visit Preview May 13, 2025 7:34pm

Copy link
Contributor

@jorytindall jorytindall left a comment

Choose a reason for hiding this comment

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

Nice improvements with these changes! A couple of small cleanup things, but I think this is looking good!

jorytindall
jorytindall previously approved these changes May 7, 2025
shleewhite
shleewhite previously approved these changes May 9, 2025
shleewhite
shleewhite previously approved these changes May 13, 2025
jorytindall
jorytindall previously approved these changes May 13, 2025
Copy link
Contributor

@jorytindall jorytindall left a comment

Choose a reason for hiding this comment

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

I left a few non-blocking comments that add some consistency between the code docs and guidelines. Otherwise, this is looking solid!

jorytindall
jorytindall previously approved these changes May 13, 2025
Copy link
Contributor

@jorytindall jorytindall left a comment

Choose a reason for hiding this comment

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

One quick resolution 🚀

jorytindall
jorytindall previously approved these changes May 13, 2025
@andgen404 andgen404 requested a review from a team May 14, 2025 15:48
@dchyun dchyun changed the base branch from main to release/website-4-20 May 14, 2025 15:52
@dchyun dchyun dismissed jorytindall’s stale review May 14, 2025 15:52

The base branch was changed.

@dchyun dchyun requested review from a team and jorytindall May 14, 2025 15:53
@dchyun dchyun merged commit 45c0e50 into release/website-4-20 May 14, 2025
11 checks passed
@dchyun dchyun deleted the dchyun/docs-code-block-toggle branch May 14, 2025 15:57

## Height toggle button

When displaying longer code snippets, it can be helpful to let users expand and collapse the content to save space in the UI. Setting a `maxHeight` on the Code Block limits how much is shown by default. If the content exceeds this height, a **Show more code** button will be displayed at the bottom of the block, allowing users to expand it. Interacting with the button again collapses the block back to its original height.
Copy link
Contributor

Choose a reason for hiding this comment

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

Working on tweaking this as it still seems a bit awkward... (I'll make a suggested edit)


## Height toggle button

When displaying longer code snippets, it can be helpful to let users expand and collapse the content to save space in the UI. Setting a `maxHeight` on the Code Block limits how much is shown by default. If the content exceeds this height, a **Show more code** button will be displayed at the bottom of the block, allowing users to expand it. Interacting with the button again collapses the block back to its original height.
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
When displaying longer code snippets, it can be helpful to let users expand and collapse the content to save space in the UI. Setting a `maxHeight` on the Code Block limits how much is shown by default. If the content exceeds this height, a **Show more code** button will be displayed at the bottom of the block, allowing users to expand it. Interacting with the button again collapses the block back to its original height.
For longer code content, it can be helpful to set a `maxHeight` for the Code Block to limit how much code is shown by default within the UI layout. If the content exceeds this height, a Show more code button will be displayed at the bottom of the Code Block, allowing users to expand it. Activating this button again will collapse the content back to its original height.

Copy link
Contributor

Choose a reason for hiding this comment

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

@andgen404 How's this? (Above suggested edit)

shleewhite pushed a commit that referenced this pull request May 16, 2025
Co-authored-by: Andrew Gendel <[email protected]>
Co-authored-by: Jory Tindall <[email protected]>
Co-authored-by: Kristin Bradley <[email protected]>
didoo pushed a commit that referenced this pull request Jun 4, 2025
Co-authored-by: Andrew Gendel <[email protected]>
Co-authored-by: Jory Tindall <[email protected]>
Co-authored-by: Kristin Bradley <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs-website Content updates to the documentation website

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants