Skip to content

Commit 4803fb8

Browse files
Apply suggestions from code review
Co-authored-by: Jory Tindall <[email protected]>
1 parent ddfc84d commit 4803fb8

File tree

2 files changed

+2
-2
lines changed

2 files changed

+2
-2
lines changed

website/docs/components/code-block/partials/code/how-to-use.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ loadInitializers(App, config.modulePrefix);"
149149

150150
### Limit height
151151

152-
Code content uses `auto` height by default but you can opt to set a `maxHeight` value to save space. If the content height exceeds the set max height, vertical scrolling is enabled to scroll vertically to view the overflowing content. A toggle button is rendered as well, which can be used to expand the height and show the Code Block content in its entirety.
152+
Code content uses `auto` height by default but you can opt to set a `maxHeight` value to save space. If the content height exceeds the set max height, vertical scrolling is enabled view the overflowing content and a toggle button is displayed to expand the height and show the Code Block content in its entirety.
153153

154154
```handlebars
155155
<Hds::CodeBlock

website/docs/components/code-block/partials/guidelines/guidelines.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ In the Figma component, the code examples have the appropriate number of lines b
7171

7272
## Height toggle button
7373

74-
When displaying longer code snippets, it can be helpful to let users expand and collapse the content. 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 automatically appears at the bottom of the block, allowing users to expand it. Clicking the button again collapses the block back to its original height.
74+
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.
7575

7676
In Figma, this is enabled by setting `hasToggleHeightButton` to true. The button is placed inside a footer element that only appears when the content overflows, keeping the layout clean when the toggle isn’t needed.
7777

0 commit comments

Comments
 (0)