diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/data-list.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/data-list.md index 5fdfc26c84..fa693b4a6a 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/data-list.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/data-list.md @@ -4,10 +4,15 @@ section: components related: ['Table'] --- +import '../components.css'; + ## Elements + The elements mentioned below are similar for a data list with compact or default spacing. This example shows a data list with compact spacing. -example of elements on a data list +
+![Elements of a data list](./img/datalist-elements.svg) +
1. **[Toolbar](/components/toolbar/design-guidelines):** Sits above the list and contains controls for manipulating list 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. @@ -20,6 +25,7 @@ The elements mentioned below are similar for a data list with compact or default ## Usage + Think of each row in a data list as a container for some formatted content. In PatternFly, data list rows can accept any [layout](/layouts/bullseye) supported by the design system as long as all rows apply the same layout. Here are some common layouts that may be useful in a data list: * **[Grid](/layouts/grid):** Displays content in a responsive grid. @@ -42,6 +48,7 @@ Data lists can also appear in primary-detail views. Visit the [primary-detail gu * The clarity of your content would benefit from well defined columns and headings. ## Variations + PatterFly supports 2 main types of data lists: 1. **[Compact data list](#compact-spacing):** Use when you want to show as much data per page as possible. @@ -49,7 +56,9 @@ PatterFly supports 2 main types of data lists: See [when to use compact vs. default spacing](#when-to-use-a-data-list-vs.-a-table)for more information about the styling and usage. -Compact and default data list +
+![Examples of compact and default data lists.](./img/datalist-variations.svg) +
### Data list capabilities Every data list can be extended with these functionalities: @@ -62,7 +71,9 @@ Every data list can be extended with these functionalities: ### Selectable data list The selectable data list provides checkboxes that enable users to select one or more rows in the list. Users may then act on those selections using options in the [toolbar](/components/toolbar/design-guidelines). -example of selectable data list +
+![Example of a selectable data list.](./img/datalist-selectable.svg) +
1. **[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. 2. **Checkbox:** Enables a user to select a row. @@ -77,7 +88,9 @@ The selectable data list provides checkboxes that enable users to select one or ### Clickable data list The clickable data list can be used when data lists need to provide additional information while keeping the row information available via a primary-detail drawer. This can be done by clicking on the row itself. -example of clickable data list +
+![Example of a clickable data list.](./img/datalist-clickable.svg) +
1. **Row:** Enables the user to click on the row to trigger the action of opening a primary-detail drawer 2. **Primary-detail:** Additional drawer of information that allows the user to still see the data list @@ -90,7 +103,9 @@ The clickable data list can be used when data lists need to provide additional i ### Expandable data list The expandable list adds an expansion panel to every row to reveal more details about the item. -example of expandable data list +
+![Example of an expandable data list.](./img/datalist-expandable.svg) +
1. **Expand all (optional):** Expands or collapses every row in the data list at the same time. 2. **Expansion caret:** Toggles the expansion open and closed for the individual row. @@ -103,23 +118,37 @@ The expandable list adds an expansion panel to every row to reveal more details * You want to provide a way for advanced users to access information that is not applicable to all users. ### Draggable data list rows - Draggable data list rows can be added to any data list and allow you to customize the order of rows within a data list. -example of draggable data list - 1. **Drag icon:** To indicate a row is draggable, use the fa-grip icon. Use grip-vertical to indicate the ability to move a vertically-oriented component via drag and drop. Use grip-horizontal to move a horizontally-oriented component via drag and drop. For example, if you are selecting items to be dragged from two parallel lists. + +
+![Example of a draggable data list.](./img/datalist-draggable1.svg) +
+ 2. **Dragged row:** When dragging a row, it becomes slightly less opaque and floats above the static rows to indicate that it is the one moving. -example of draggable data list +
+![Example of a data list item being dragged.](./img/datalist-draggable2.svg) +
3. **Dragged row positioning:** When positioning the row, the other elements in the data list will move to indicate the dragged row’s position. + +
+![Example of a data list being reordered on drag.](./img/datalist-draggable3.svg) +
+ 4. **Final position:** After the row has been placed where desired, the data list becomes static again, until the user decides to drag another row. +
+![Example of a reordered data list after dragging an item.](./img/datalist-draggable4.svg) +
+ #### When to use Use draggable data list rows when you want to allow users to order their choices within a list. A common example of this is [column management](/components/table/react-demos#column-management-with-draggable). Users can choose the number of columns and the order they are shown in a table by selecting and dragging rows in the **Manage columns** modal. Another common use case is ordering the importance of roles or types relative to a resource. ## Spacing + Whether to use a data list with compact or default spacing is up to you and your use case. However, here is some guidance for when to use which option. You can see examples of each option for comparison. ### Compact spacing @@ -131,8 +160,6 @@ A data list may sometimes need to be compact to make more rows visible at a time * You need to minimize paging. * Readability is a secondary concern. -Example of compact spacing data list - **Example:** * You can see more data on one page. * You have a good overview about the structure of data. @@ -147,12 +174,11 @@ A data list may sometimes need more space for rich graphical data. See an exampl * You don't have to minimize paging. * Readability is a primary concern. -Example of default spacing data list - **Example:** * You can see less data on one page. * You will need a pagination to see more rows. * Data structure includes many visual elements. ## Alternative solutions + Alternative to a data list include [tables](/components/table/design-guidelines) or [card views](/components/card/design-guidelines#card-views). Card views and data lists have similar properties, but information in a card view is chunked into a grid of individual cards. In choosing between a data list and a card view, consider the type of data that will be displayed and the format that best suits that data. If you cannot easily fit all of the data that needs to be displayed into a card, a data list might be a better solution. diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-clickable.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-clickable.svg new file mode 100644 index 0000000000..ea23949747 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-clickable.svg @@ -0,0 +1,135 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-draggable1.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-draggable1.svg new file mode 100644 index 0000000000..20428986b3 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-draggable1.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-draggable2.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-draggable2.svg new file mode 100644 index 0000000000..32e8184a8c --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-draggable2.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-draggable3.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-draggable3.svg new file mode 100644 index 0000000000..908ade9a32 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-draggable3.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-draggable4.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-draggable4.svg new file mode 100644 index 0000000000..54adfcd612 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-draggable4.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-elements.svg new file mode 100644 index 0000000000..2d948dd8c3 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-elements.svg @@ -0,0 +1,167 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-expandable.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-expandable.svg new file mode 100644 index 0000000000..90af3f8c89 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-expandable.svg @@ -0,0 +1,154 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-selectable.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-selectable.svg new file mode 100644 index 0000000000..b3eab63755 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-selectable.svg @@ -0,0 +1,146 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-variations.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-variations.svg new file mode 100644 index 0000000000..9f006fba83 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/img/datalist-variations.svg @@ -0,0 +1,141 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/description-list/description-list.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/description-list/description-list.md index 777f5daff2..534233be2f 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/description-list/description-list.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/description-list/description-list.md @@ -3,31 +3,46 @@ id: Description list section: components --- +import '../components.css'; + ## Usage + Use a description list when you have a set of terms and definitions related to a single item. The content within the definitions is not limited to only plain text. This component can be extremely useful in context of Detail pages for a certain resource or item. -Definition list +
+![Example of a description list.](./img/descriptionlist-usage.svg) +
## Variations ### Default By default, the description list will be formatted so that the term stacks vertically above the description. -Default +
+![Example of a default description list.](./img/descriptionlist-default.svg) +
### Horizontal Description lists can also be horizontally formatted so that the term and description sit inline and the term comes before the description. -Horizontal +
+![Example of a horizontal description list.](./img/descriptionlist-horizontal.svg) +
### Using columns Columns can be applied in both vertical and horizontal formats. By default, there will be 24px gutters within the column grid. -Default with 2 columns +
+![Example of a default description list with two columns.](./img/descriptionlist-columns1.svg) +
-Horizontal with 2 columns +
+![Example of a horizontal description list with two columns.](./img/descriptionlist-columns2.svg) +
### Term help text To provide help text about a term in the description list, you may add popovers indicated by a dotted underline on the label. This is recommended in detailed lists where you have many popovers and using a blue link or icon would clutter the page. -Term help text +
+![Example of a description list with help text.](./img/descriptionlist-helptext.svg) +
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/description-list/img/descriptionlist-columns1.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/description-list/img/descriptionlist-columns1.svg new file mode 100644 index 0000000000..5dfb32778e --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/description-list/img/descriptionlist-columns1.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/description-list/img/descriptionlist-columns2.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/description-list/img/descriptionlist-columns2.svg new file mode 100644 index 0000000000..3f18066d95 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/description-list/img/descriptionlist-columns2.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/description-list/img/descriptionlist-default.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/description-list/img/descriptionlist-default.svg new file mode 100644 index 0000000000..0132275bbe --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/description-list/img/descriptionlist-default.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/description-list/img/descriptionlist-helptext.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/description-list/img/descriptionlist-helptext.svg new file mode 100644 index 0000000000..bdc40c68ad --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/description-list/img/descriptionlist-helptext.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/description-list/img/descriptionlist-horizontal.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/description-list/img/descriptionlist-horizontal.svg new file mode 100644 index 0000000000..c9ee6f91d4 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/description-list/img/descriptionlist-horizontal.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/description-list/img/descriptionlist-usage.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/description-list/img/descriptionlist-usage.svg new file mode 100644 index 0000000000..92ddb65125 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/description-list/img/descriptionlist-usage.svg @@ -0,0 +1,109 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/list/img/list-ordered.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/list/img/list-ordered.svg new file mode 100644 index 0000000000..3876a7d63c --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/list/img/list-ordered.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/list/img/list-unordered1.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/list/img/list-unordered1.svg new file mode 100644 index 0000000000..bb8f017478 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/list/img/list-unordered1.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/list/img/list-unordered2.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/list/img/list-unordered2.svg new file mode 100644 index 0000000000..218c5782a5 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/list/img/list-unordered2.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/list/img/list-withicons.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/list/img/list-withicons.svg new file mode 100644 index 0000000000..30e80b2c43 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/list/img/list-withicons.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/list/list.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/list/list.md index 76e1feae9d..f6aeb23526 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/list/list.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/list/list.md @@ -3,6 +3,8 @@ id: List section: components --- +import '../components.css'; + ## Usage Use lists to organize information in a digestible format. Lists can be very useful when you have a lot of text on a page. @@ -14,26 +16,31 @@ There are many different types of lists, including [unordered](#unordered), [ord ### Unordered - By default, you should use bullets when displaying an unordered list. Use an unordered list when you want to break up related content, but list items are not sequential. You may also choose to present an unordered list without the bullets, or with horizontal rules between each list item. -Example of an unordered, bulleted list +
+![Example of an unordered bulleted list.](./img/list-unordered1.svg) +
-Example of an unordered horizontal list +
+![Example of an unordered horizontal list.](./img/list-unordered2.svg) +
### Ordered - Use ordered lists to convey a sequence of events or steps in a process. An example of an ordered list is a numbered list. -Example of an ordered, numbered list +
+![Example of an ordered numbered list.](./img/list-ordered.svg) +
### With icons - Use icons to call out useful information about list elements. In the example below, each list item is a condition with a respective status icon. The object's overall status is an aggregation of the list items' statuses. Lists with icons can use small icons or big icons. -Example of a list with icons +
+![Example of a list with icons.](./img/list-withicons.svg) +
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/simple-list/img/simplelist-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/simple-list/img/simplelist-elements.svg new file mode 100644 index 0000000000..9087cab464 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/simple-list/img/simplelist-elements.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/simple-list/simple-list.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/simple-list/simple-list.md index 719f1983e4..f1a1135faa 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/simple-list/simple-list.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/simple-list/simple-list.md @@ -3,8 +3,13 @@ id: Simple list section: components --- +import '../components.css'; + ## Elements -a simple list diagram depicting the locations of the section title, item, default state, and selected state + +
+![Elements of a simple list showing the locations of the section title, items, and their different states.](./img/simplelist-elements.svg) +
1. **Section title (optional):** Section titles should be a few words. They are more commonly used in grouped lists. 2. **Item:** Items are typically single words or short phrases.