diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/expandable-section.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/expandable-section.md index 91a524a1b4..70341a359b 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/expandable-section.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/expandable-section.md @@ -12,16 +12,28 @@ An expandable section has two main elements. ![Elements of an expandable section.](./img/exp-sect-elements.svg) -1. **Caret:** Indicates whether the section is expanded or collapsed. +1. **Toggle (fa-angle-right):** Indicates whether the section is expanded or collapsed. 2. **Toggle text:** Informs the user what will be shown when the component is expanded. ## Usage -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. +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](/charts/about-charts), [cards](/components/card), [data lists](/components/data-list), or [table views](/components/table). Expandable sections can also be used in [alerts](/components/alert) to show additional information. -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. +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. ## Variations +### Expandable section disclosure + +
+![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) +
+ +### Expandable section for truncated text + +
+![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) +
+ ### Expandable section in a form
@@ -46,5 +58,4 @@ We recommend using the dynamic toggle text when designing with the expandable se ![Example of an expandable section in a documentation page.](./img/exp-sect-docs-page.svg)
- -For more information regarding accessibility, visit the [expandable section accessibility tab](https://v4-archive.patternfly.org/v4/components/expandable-section/accessibility). +For more information regarding accessibility, visit the [expandable section accessibility tab](/components/expandable-section/accessibility). diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-disclosure.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-disclosure.svg new file mode 100644 index 0000000000..71ff9c6823 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-disclosure.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-truncate.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-truncate.svg new file mode 100644 index 0000000000..9de571b1ac --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-truncate.svg @@ -0,0 +1,7 @@ + + + + + + +