Skip to content

Commit d044c44

Browse files
committed
docs(expandable-section): Updates design guidelines for v6.
1 parent d13ede7 commit d044c44

3 files changed

Lines changed: 41 additions & 5 deletions

File tree

packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/expandable-section.md

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,28 @@ An expandable section has two main elements.
1212
![Elements of an expandable section.](./img/exp-sect-elements.svg)
1313
</div>
1414

15-
1. **Caret:** Indicates whether the section is expanded or collapsed.
15+
1. **Toggle (fa-angle-right ):** Indicates whether the section is expanded or collapsed.
1616
2. **Toggle text:** Informs the user what will be shown when the component is expanded.
1717

1818
## Usage
19-
Use an expandable section when you want to hide optional or advanced content by default. They are commonly used in forms to reveal plain text or additional form fields. They can also be used to reveal [charts](https://v4-archive.patternfly.org/v4/charts/about), [cards](https://v4-archive.patternfly.org/v4/components/card), [data lists](https://v4-archive.patternfly.org/v4/components/data-list), or [table views](https://v4-archive.patternfly.org/v4/components/table). Expandable sections may be used in [alerts](https://v4-archive.patternfly.org/v4/components/alert) to show additional information.
19+
Use an expandable section when you want to hide optional or advanced content by default. They are commonly used in forms to reveal plain text or additional form fields. They can also be used to reveal [charts](https://v4-archive.patternfly.org/v4/charts/about), [cards](https://v4-archive.patternfly.org/v4/components/card), [data lists](https://v4-archive.patternfly.org/v4/components/data-list), or [table views](https://v4-archive.patternfly.org/v4/components/table). Expandable sections can also be used in [alerts](https://v4-archive.patternfly.org/v4/components/alert) to show additional information.
2020

21-
We recommend using the dynamic toggle text when designing with the expandable section. Dynamic toggle text will update based on the state of the expandable section. For example, it may read **Show more** when the toggle is collapsed, and **Show less** when the toggle is open.
21+
We recommend using dynamic toggle text for an expandable section, which will update the toggle text based on the state of the expandable section. For example, it may read **Show more** when the toggle is collapsed, and **Show less** when the toggle is open.
2222

2323
## Variations
2424

25+
### Expandable section disclosure
26+
27+
<div class="ws-docs-content-img">
28+
![A collapsed section of content, with a "show more" link beside an expanded content section with a "show less" link and a block of text content.](./img/exp-sect-disclosure.svg)
29+
</div>
30+
31+
### Expandable section for truncated text
32+
33+
<div class="ws-docs-content-img">
34+
![A paragraph of text, truncated at the end, with a link that says "show more", followed by a fully expanded paragraph of text that now has a link that says "show less".](./img/exp-sect-truncate.svg)
35+
</div>
36+
2537
### Expandable section in a form
2638

2739
<div class="ws-docs-content-img">
@@ -46,5 +58,4 @@ We recommend using the dynamic toggle text when designing with the expandable se
4658
![Example of an expandable section in a documentation page.](./img/exp-sect-docs-page.svg)
4759
</div>
4860

49-
50-
For more information regarding accessibility, visit the [expandable section accessibility tab](https://v4-archive.patternfly.org/v4/components/expandable-section/accessibility).
61+
For more information regarding accessibility, visit the [expandable section accessibility tab](/components/expandable-section/accessibility).

packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-disclosure.svg

Lines changed: 18 additions & 0 deletions
Loading

packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-truncate.svg

Lines changed: 7 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)