From f848e5b8a54fb09892a8b92eeadc43533bc5f94a Mon Sep 17 00:00:00 2001 From: Bekah Stephens Date: Mon, 23 Jun 2025 13:14:40 -0400 Subject: [PATCH] docs(table): Updates images for v6. --- .../components/table/img/table-actionable.svg | 181 +++++++++++++++ .../table/img/table-column-sorting.svg | 94 ++++++++ .../table/img/table-compact-spacing.svg | 76 +++++++ .../components/table/img/table-comparison.svg | 92 ++++++++ .../table/img/table-compound-expand.svg | 121 ++++++++++ .../table/img/table-default-spacing.svg | 76 +++++++ .../components/table/img/table-elements.svg | 166 ++++++++++++++ .../components/table/img/table-expandable.svg | 148 ++++++++++++ .../components/table/img/table-favoriting.svg | 83 +++++++ .../components/table/img/table-mobile.svg | 125 ++++++++++ .../components/table/img/table-page.svg | 214 ++++++++++++++++++ .../components/table/img/table-popover.svg | 116 ++++++++++ .../table/img/table-row-striping.svg | 96 ++++++++ .../table/img/table-search-modal.svg | 50 ++++ .../components/table/img/table-variations.svg | 149 ++++++++++++ .../components/table/table.md | 65 ++++-- 16 files changed, 1833 insertions(+), 19 deletions(-) create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-actionable.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-column-sorting.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-compact-spacing.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-comparison.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-compound-expand.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-default-spacing.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-elements.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-expandable.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-favoriting.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-mobile.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-page.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-popover.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-row-striping.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-search-modal.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-variations.svg diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-actionable.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-actionable.svg new file mode 100644 index 0000000000..38f5f55f87 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-actionable.svg @@ -0,0 +1,181 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-column-sorting.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-column-sorting.svg new file mode 100644 index 0000000000..4c07232c10 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-column-sorting.svg @@ -0,0 +1,94 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-compact-spacing.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-compact-spacing.svg new file mode 100644 index 0000000000..6748dc91ad --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-compact-spacing.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-comparison.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-comparison.svg new file mode 100644 index 0000000000..7b47767ac4 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-comparison.svg @@ -0,0 +1,92 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-compound-expand.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-compound-expand.svg new file mode 100644 index 0000000000..241a5bd1af --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-compound-expand.svg @@ -0,0 +1,121 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-default-spacing.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-default-spacing.svg new file mode 100644 index 0000000000..e1df829f8c --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-default-spacing.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-elements.svg new file mode 100644 index 0000000000..0f38f8dee7 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-elements.svg @@ -0,0 +1,166 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-expandable.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-expandable.svg new file mode 100644 index 0000000000..55784e112d --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-expandable.svg @@ -0,0 +1,148 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-favoriting.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-favoriting.svg new file mode 100644 index 0000000000..689eab8393 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-favoriting.svg @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-mobile.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-mobile.svg new file mode 100644 index 0000000000..4e3359010d --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-mobile.svg @@ -0,0 +1,125 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-page.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-page.svg new file mode 100644 index 0000000000..d834fa0cf1 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-page.svg @@ -0,0 +1,214 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-popover.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-popover.svg new file mode 100644 index 0000000000..3e0a8c81e5 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-popover.svg @@ -0,0 +1,116 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-row-striping.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-row-striping.svg new file mode 100644 index 0000000000..07f2a1e237 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-row-striping.svg @@ -0,0 +1,96 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-search-modal.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-search-modal.svg new file mode 100644 index 0000000000..d9a2ed8ed0 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-search-modal.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-variations.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-variations.svg new file mode 100644 index 0000000000..413f439d97 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/img/table-variations.svg @@ -0,0 +1,149 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 bd08cc9d3c..a52540683e 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 @@ -3,11 +3,14 @@ id: Table section: components --- +import '../components.css'; ## Elements The elements mentioned below are similar for a table with compact or default spacing. This example shows a table with a compact spacing. -example of table and the elements +
+![Elements of a table.](./img/table-elements.svg) +
1. **[Toolbar](/components/toolbar/design-guidelines):** Sits above the table and contains controls for manipulating table data. Common actions include filtering, sorting, and pagination. 2. **[Bulk selection](/patterns/bulk-selection):** When present, selects all items in a table. If pagination is being used, this will only select items on the current page. See [bulk selection](/patterns/bulk-selection) for more information. @@ -37,7 +40,9 @@ Tables can also appear in primary-detail views. Visit the [primary-detail guidel ### Using lists and tables in a page Lists and tables should be placed in the body of a page. The width should be set by the containing element. -example of compact data table example +
+![Example of a table in a page.](./img/table-page.svg) +
In this example, a table is positioned in the body of a page in a card. @@ -63,14 +68,16 @@ Clicking on the label would open up a popover or modal depending on the number o * When you have **7 or less items**, use a [popover](/components/popover#basic) to display remaining items. - Label with popover - Label with tooltip - Labels with popovers +
+![Example of a table with a popover.](./img/table-popover.svg) +
* When you have **8 or more items**, use a modal with a search. The items inside the modal can be organized as needed for the use case. For example, it can be a list of labels, a text list, a table or data list. - 8 or more items modal +
+![Example of a modal with search.](./img/table-search-modal.svg) +
## Variations PatternFly supports 2 main types of tables: @@ -80,7 +87,9 @@ PatternFly supports 2 main types of tables: See [when to use compact vs. default spacing](#compact-vs-default-spacing) for more information about the styling and usage. -Compact and default table +
+![Examples of default and compact tables.](./img/table-variations.svg) +
### Numeral styling @@ -100,7 +109,9 @@ Every table can be extended with these functionalities: ### Expandable table -example of expandable table +
+![Example of an expandable table.](./img/table-expandable.svg) +
1. **Expand all (optional)**: Expands every row at the same time. 2. **Expansion:** Expands single row. @@ -113,7 +124,9 @@ Every table can be extended with these functionalities: ### Compound-expandable table -example of compound expandable table +
+![Example of a compound expandable table.](./img/table-compound-expand.svg) +
1. **Expandable cell:** A cell that can be clicked to reveal more detail about an item. If the expansion for an item is already open, clicking on a different cell will close the current item and open a new one. 2. **Expansion panel:** Contains details associated with an expandable item. @@ -125,7 +138,9 @@ Every table can be extended with these functionalities: ### Actionable table The actionable table provides checkboxes or radio buttons that enable users to select one or more rows in a table. Users may then act on those selections using options in the [toolbar](/components/toolbar/design-guidelines),. -example of actionable table +
+![Example of an actionable table.](./img/table-actionable.svg) +
1. **[Bulk selection](/patterns/bulk-selection):** When present, selects all items in a table with checkboxes. If pagination is being used, this will only select items on the current page. See [bulk selection](/patterns/bulk-selection) for more information. 2. **Checkbox**: Enables a user to select a row. Use when multiple rows can be selected at the same time. @@ -142,9 +157,9 @@ The actionable table provides checkboxes or radio buttons that enable users to s For tables used to compare different items against different parameters, you may use a customized version of a table. - -example of comparison table - +
+![Example of a comparison table.](./img/table-comparison.svg) +
The comparison table differs from a standard table in the follow ways: * The items being compared should be shown as columns. @@ -167,7 +182,9 @@ Although you could include the ability to remove certain parameters from inside ### Row striping Row striping can help improve legibility of a table when presenting large amounts of data. With row striping enabled, table rows will alternate between ```--pf-v6-global--BackgroundColor--100``` and ```--pf-v6-global--BackgroundColor--150``` to visually separate dense data sets. -Row striping in tables +
+![Example of row striping in tables.](./img/table-row-striping.svg) +
#### When to use * Tables with 5 or more columns. @@ -177,7 +194,9 @@ Row striping can help improve legibility of a table when presenting large amount ### Sorting by columns Sorting by columns is possible for any table variation. Enabling the component within a table eases the ability to scan and read through the content. This option is favored over adding sorting functionality to the [toolbar](/components/toolbar/design-guidelines). -Sortable table +
+![Example of a sortable table.](./img/table-column-sorting.svg) +
1. **Sortable column:** When a column is sortable, the sort icon will appear to the right of the column header in a [light grey](/design-foundations/colors#typography-and-iconography-colors) color. Sorting will not become active until the user selects the column header. This triggers the arrow to point upwards and the content to be sorted in ascending order. 3. **Hovered sort:** When a column is sortable, the sort icon will appear to the right of the column header. Upon hover, the icon will change to a [darker grey](/design-foundations/colors#typography-and-iconography-colors) indicating that the icon is actionable. @@ -194,7 +213,9 @@ If a table contains these three attributes: (System Name | Last Sync | Severity) ### Table with favoriting Adding the ability to favorite is possible for any table variation. Users can set their favorites by clicking the star icon in the favorites row. By default, the star is grey; when an item is favorited, the star becomes yellow. Clicking the star again will unfavorite the item. When an item is favorited or unfavorited, it does not move in the list unless sorting is on. -Table with favoriting +
+![Example of a table with favoriting.](./img/table-favoriting.svg) +
1. **Favorites column**: Allows users to favorite and unfavorite items in the table by clicking the item’s associated star icon. 2. **Favorites column header (optional):** Allows users to sort by favorites. @@ -217,7 +238,9 @@ A table may sometimes need to be compact to make more rows visible at a time. Th * You need to minimize paging. * Readability is a secondary concern. -Compact spacing +
+![Example of a table with compact spacing.](./img/table-compact-spacing.svg) +
**Example:** * You can see more data on 1 page. @@ -233,7 +256,9 @@ A table may sometimes need more space for rich graphical data. See an example be * You don't have to minimize paging. * Readability is a primary concern. -Default spacing +
+![Example of a table with default spacing.](./img/table-default-spacing.svg) +
**Example:** * You can see less data on one page. @@ -243,4 +268,6 @@ 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 \ No newline at end of file +
+![Example of a table on mobile.](./img/table-mobile.svg) +
\ No newline at end of file