docs(design-guidelines): Clarifies table vs tree view vs accordion. (#…

…4241)

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

@@ -14,6 +14,20 @@ section: components
 ## Usage
 Accordions are one of many ways to organize large amounts of content when there is limited space. It provides a grouping structure while the header title gives an overview of the content hidden underneath it. Due to their high interaction cost, we recommend that you use accordions sparingly when you need an additional layer of structure to your content. 
 
+### When to use accordions vs. tree tables vs. tree views
+
+**Use accordions:**
+- When you have content that users should be able to hide and display as needed.
+- When you need to make long content sections easier to navigate and parse through. 
+- When your content only includes simple blocks of text or lists—not complex information, like tables. 
+
+**Use [tree tables](/components/table#tree-table):** 
+- When you need to nest related information within a table.
+
+**Use [tree views](/components/tree-view):** 
+- When you need to communicate a hierarchical structure.
+- When you need to change content on a page, based on selection in a tree view.
+
 ## Behavior
 Users click or tap on section header of collapsed accordion and content area will expand.
 
@@ -33,4 +47,4 @@ Use when you are trying to bring focus to a single row at a time, by default the
 
 ## Accessibility
 
-For information regarding accessibility, visit the [accordion accessibility](/components/accordion/accessibility) tab.
+For information regarding accessibility, visit the [accordion accessibility](/components/accordion/accessibility) tab.

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

@@ -41,6 +41,20 @@ Lists and tables should be placed in the body of a page. The width should be set
 
 In this example, a table is positioned in the body of a page in a card.
 
+### When to use accordions vs. tree tables vs. tree views
+
+**Use [accordions](/components/accordion):**
+- When you have content that users should be able to hide and display as needed.
+- When you need to make long content sections easier to navigate and parse through. 
+- When your content only includes simple blocks of text or lists—not complex information, like tables. 
+
+**Use tree tables:** 
+- When you need to nest related information within a table.
+
+**Use [tree views](/components/tree-view):** 
+- When you need to communicate a hierarchical structure.
+- When you need to change content on a page, based on selection in a tree view.
+
 ### Showing more information in a table cell
 
 To show more information in a table cell than can fit in the row field, you may truncate the list and use a label to indicate that there are more items to view. This label should be gray and indicate the number of items left to view (example: "3 more"). It is recommended to show at least one item before hiding the rest of the items.
@@ -224,7 +238,4 @@ A table may sometimes need more space for rich graphical data. See an example be
 ## Tables on mobile
 The PatternFly table is designed to be fully responsive. When columns no longer fit within the width of the viewport, columns are stacked so that data in each row is displayed as sets of attribute-value pairs.
 
-<img src="./img/Mobile-data-table-example.png"  alt="Mobile data table"  width="375"/>
-
-
-
+<img src="./img/Mobile-data-table-example.png"  alt="Mobile data table"  width="375"/>

packages/documentation-site/patternfly-docs/content/design-guidelines/components/tree-view/tree-view.md

@@ -37,6 +37,20 @@ A tree view can be used for:
 * You need to compare 2 large sets of data. Use [charts](/charts/about) for a better view. 
 * The hierarchy is too deep and includes hundreds of items. Instead, use a [drill-down menu](/components/menu#drilldown).
 
+### When to use accordions vs. tree tables vs. tree views
+
+**Use [accordions:](/components/accordion)**
+- When you have content that users should be able to hide and display as needed.
+- When you need to make long content sections easier to navigate and parse through. 
+- When your content only includes simple blocks of text or lists—not complex information, like tables. 
+
+**Use [tree tables](/components/table#tree-table):** 
+- When you need to nest related information within a table.
+
+**Use tree views:** 
+- When you need to communicate a hierarchical structure.
+- When you need to change content on a page, based on selection in a tree view.
+
 ### Tree view in a page
 
 Tree views can be included in pages within these components: [dropdown](/components/menus/dropdown), [drawer](/components/drawer), [primary-detail](/demos/primary-detail), [modal](/components/modal), or [wizard](/components/wizard). 
@@ -98,4 +112,4 @@ Compact tree view is useful when the nodes of a tree view contain more than one
 
 1. **Guide:** Connected lines between nodes in a tree view. 
 2. **Row:** Content with one or multiple lines that can be formatted.
-3. **Container:** Area that holds the content and visually distinguishes individual rows with a filled or transparent background.
+3. **Container:** Area that holds the content and visually distinguishes individual rows with a filled or transparent background.