From 9ef3e651bfa61285c998cf19234965271a20dd5c Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Thu, 19 Sep 2024 13:51:20 -0400 Subject: [PATCH] docs(design-guidelines): Clarifies table vs tree view vs accordion. (#4241) --- .../components/accordion/accordion.md | 16 +++++++++++++++- .../components/table/table.md | 19 +++++++++++++++---- .../components/tree-view/tree-view.md | 16 +++++++++++++++- 3 files changed, 45 insertions(+), 6 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/accordion/accordion.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/accordion/accordion.md index 71fad8e1ad..cdb62deff6 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/accordion/accordion.md +++ b/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. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/table.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/table.md index 97407f24ae..2e57c3535a 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/table.md +++ b/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. -Mobile data table - - - +Mobile data table \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tree-view/tree-view.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tree-view/tree-view.md index f9d3efb4f1..12c3102fd2 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tree-view/tree-view.md +++ b/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. \ No newline at end of file