From d044c44cff206b38fea9d84c27294cc0ec9652e5 Mon Sep 17 00:00:00 2001
From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com>
Date: Tue, 27 May 2025 09:52:50 -0400
Subject: [PATCH 1/3] docs(expandable-section): Updates design guidelines for
v6.
---
.../expandable-section/expandable-section.md | 21 ++++++++++++++-----
.../img/exp-sect-disclosure.svg | 18 ++++++++++++++++
.../img/exp-sect-truncate.svg | 7 +++++++
3 files changed, 41 insertions(+), 5 deletions(-)
create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-disclosure.svg
create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-truncate.svg
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..1068cab7f6 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.

-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](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.
-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
+
+
+
+
+
+### Expandable section for truncated text
+
+
+
+
+
### Expandable section in a form
@@ -46,5 +58,4 @@ We recommend using the dynamic toggle text when designing with the expandable se

-
-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 @@
+
From 2fc054b9e6e932c9b7c772d12ab474651815ac9c Mon Sep 17 00:00:00 2001
From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com>
Date: Tue, 27 May 2025 09:54:19 -0400
Subject: [PATCH 2/3] Remove extra spacing.
---
.../components/expandable-section/expandable-section.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
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 1068cab7f6..0f77a3b131 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,7 +12,7 @@ An expandable section has two main elements.

-1. **Toggle (fa-angle-right ):** 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
From c399ab6666325cea5f70c146a99d65ee7caf006d Mon Sep 17 00:00:00 2001
From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com>
Date: Tue, 27 May 2025 09:55:39 -0400
Subject: [PATCH 3/3] Replace v4 links.
---
.../components/expandable-section/expandable-section.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
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 0f77a3b131..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
@@ -16,7 +16,7 @@ An expandable section has two main elements.
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 can also 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 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.