diff --git a/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/bulk-selection.md b/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/bulk-selection.md index 7fd3fa7e3b..7abd3f9edd 100644 --- a/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/bulk-selection.md +++ b/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/bulk-selection.md @@ -2,48 +2,113 @@ id: Bulk selection section: patterns --- +import '../../components/components.css'; -## Bulk selection -Use a bulk selection pattern when you want to select or deselect multiple items in a content view (list, table, or card grid). The bulk selector uses a [split button](/components/menus/menu-toggle#split-button-toggle-with-checkbox) component to control selection from the [toolbar](/components/toolbar). Besides controlling selection, the bulk selector reflects the selection status of the related component (partially selected, all items selected, or no items selected). +**Bulk selection** enables users to select or deselect multiple items in a content view, such as lists, tables, or card views. ## Bulk selector -The bulk selector is created using a Split button and is always located as the leftmost item in a toolbar. +You can add a bulk selection control in the toolbar of a content view. This control, a bulk selector, lets users control selection via a [split button](/components/menus/menu-toggle#split-button-toggle-with-checkbox) component. The bulk selector also reflects the selection status of the related content, including partial selection, full selection, or no selection. -Bulk selector +
+![Bulk selector with annotation pointers highlighting the split button: a checkbox on the left and a dropdown caret on the right with an open menu.](./img/bulk-selection.svg) +
-**1. Bulk selector:** The bulk selector uses a split button to combine a selection checkbox with a dropdown menu. +1. **Bulk selector:** A split button that combines a selection checkbox with a dropdown menu toggle. -**2. Checkbox:** The state of the checkbox reflects the current selection state of the list, table, or card grid. +2. **Menu:** A list of bulk selection options for the related content view. A bulk selection menu should include the following options: + - "Select none", which clears a previous selection. + - "Select page", which selects all items on the current page (when pagination is in use). + - "Select all", which selects all items across all pages. This can be omitted if this isn't supported in your implementation. + - (Optionally) Additional menu items that match some predetermined filter criteria, such as “Running VMs”, "Errors”, and so on. -Bulk Selector Checkbox States +
+![Annotation pointers highlighting the relationship between the bulk selector checkbox and the individual row checkboxes (selected, partially selected, and unselected).](./img/bulk-selection-selected.svg) +
-**3. Items selected:** This text always reflects the total number of items selected. If pagination is in use, it will reflect the items selected across all pages. +1. **Checkbox:** Control that reflects the current selection state of the item. Checkbox states will be automatically updated by bulk selector menu selections, but can also be manually selected. Manually clicking the checkbox in the bulk selector will select all items in the related content view. -**4. Menu:** at a minimum the menu will include: -* Select none - to clear selections across all pages. -* Select page - to select all items on the current page (when pagination is in use). -* Select all - to select all items across pages. +2. **Selection status:** Text label that reflects the total number of items selected. If pagination is in use, it will reflect the number of items selected across all pages. -Additional menu items can be added to select items that match some predetermined filter criteria, such as “Red Cars or Blue Cars” / “Running VMs”, etc. +3. **Selected checkbox:** Indicates that an item has been selected. Either a partial selection (dash) or a full selection (check mark) can be displayed in a checkbox. For more details about the behavior of the checkbox, refer to [checkbox states](#checkbox-states). + +4. **Empty checkbox:** Indicates that an item has not been selected. ## Usage -### Bulk selection from the toolbar -The example below shows a bulk selector placed in a toolbar above a table using pagination. -Bulk selection from toolbar +### Selection in toolbars +A bulk selector is often placed in the toolbar of a table that uses pagination. + +
+![A table toolbar showing the bulk selection menu expanded, with options to select none, page, or all.](./img/bulk-selection-toolbar.svg) +
+ +In this example, there are 50 total items in this dataset across 10 pages. Only the first page has been selected, so partial selection is reflected across checkboxes. The user can select (or deselect) additional items via the bulk selection checkbox, the bulk selection menu, or by clicking on a row's checkbox. The selected items count will update whenever selection is changed. + +### Selection for global actions +Bulk selection is often used to select multiple items and perform an action on them. In these instances, the selection state persists—even after the action has completed—until the user purposefully changes the selection. + +### Integrated selection for tables +Tables include integrated bulk selection by default in the header row. + +
+![A table header row showing the integrated bulk selection checkbox at the start of the row.](./img/bulk-selection-table.svg) +
+ +A checkbox in a table's header row will select or deselect all items in the table (or all items on the current page if pagination is in use). + +We recommend only using integrated bulk selection when a table doesn't contain a toolbar. When a toolbar is present, you should instead default to controlling bulk selection via the toolbar. This provides better visibility for the number of selected item, maintains better consistency between view types, and allows for more selection flexibility. + +**Note:** To hide integrated bulk selection and enable the toolbar control in our [table component](/components/table), set the `canSelectAll` prop to "false". + +## Behavior + +### Checkbox states + +
+![Four bulk selector states: disabled (gray), partial selection (minus icon), unchecked (empty), and full selection (check mark).](./img/checkbox-states.svg) +
+ +There are a few checkbox states that can result from bulk selection: + +1. **Disabled:** Cannot be interacted with. +2. **Partial selection:** Uses the minus icon to represent that the item is part of a partial selection, meaning that only some items are selected. +3. **Unchecked:** Represents that the item hasn't been selected. +4. **Full selection:** Uses the check mark icon to represent that the item is part of a full selection, where all items are selected in a content view. + +#### No items selected + +
+![Annotated bulk selector in the "None selected" state; the checkbox is empty and the "Select none" menu option is disabled.](./img/empty-selection.svg) +
+ +1. **Checkbox:** Empty. When clicked, selects all items. +2. **Menu toggle:** Opens and closes the selection menu. +3. **Menu:** Displays selection options. "Select none" is disabled, since no items are selected. + +#### Some items selected + +
+![Annotated bulk selector in the "Partial selection" state; the checkbox shows a minus icon and the text label indicates the number of items selected.](./img/partial-selection.svg) +
-There are 50 total items in this dataset spread across 10 pages (5 items per page), but only the first page has been selected and therefore partial selection is reflected in the checkbox. The user may select (or deselect) additional items either through the use of the bulk selection checkbox, the bulk selection menu, or by clicking on the checkbox at the front of a row. The selected items count will update whenever selection is changed. +1. **Checkbox:** Filled, containing a minus icon. When clicked, deselects all selected items. +2. **Text label:** Displays the number of selected items. When clicked, opens and closes the selection menu. +3. **Menu toggle:** Opens and closes the selection menu. +4. **Menu:** Displays selection options. -### Bulk selection and global actions -Bulk selection is often used to select multiple items and perform an action on them. Note that after an action is completed, the selection state remains as is until the user changes the selection. +The following guidance outlines the behavior of the bulk selector for different selection states. -### Integrated bulk selection for tables -Tables are unique to other view in that they include integrated bulk selection by default. Below is an example of a PatternFly table component with integrated bulk selection in the header row. +#### All items selected -Integrated bulk selection in a table +
+![Annotated bulk selector in the "Full selection" state; the checkbox shows a check mark icon and the text label indicates all items are selected.](./img/full-selection.svg) +
-**1. Bulk selection checkbox:** A checkbox in the header row of a table will select (or deselect) all items in the table or all items on the current page if pagination is in use. +1. **Checkbox:** Filled, containing a check mark icon. When clicked, deselects all selected items. +2. **Text label:** Displays the number of selected items. When clicked, opens and closes the selection menu. +3. **Menu toggle:** Opens and closes the selection menu. +4. **Menu:** Displays selection options. -In PatternFly we recommend that integrated bulk selection only be used in cases where a table is placed in a page without a toolbar. Whenever a toolbar is present, we recommend using the toolbar to control bulk selection. This will provide for better visibility on the count of selected items, lead to better consistency between view types, and allow for more variety of selection options. +## Placement -Note: To hide integrated bulk selection and enable selection control from the toolbar in the PatternFly React Table component, set the canSelectAll prop to ‘false’. +When used in a toolbar, the bulk selector should be the first item. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-select-checkbox.png b/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-select-checkbox.png deleted file mode 100644 index 09ac40db28..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-select-checkbox.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection-example.png b/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection-example.png deleted file mode 100644 index a36b84be29..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection-example.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection-no-toolbar.png b/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection-no-toolbar.png deleted file mode 100644 index d00d77c596..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection-no-toolbar.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection-selected.svg b/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection-selected.svg new file mode 100644 index 0000000000..91af24b0d9 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection-selected.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection-table.svg b/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection-table.svg new file mode 100644 index 0000000000..1eb7d90582 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection-table.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection-toolbar.svg b/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection-toolbar.svg new file mode 100644 index 0000000000..0e6329f18f --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection-toolbar.svg @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection.svg b/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection.svg new file mode 100644 index 0000000000..6172e0cee1 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-selector.png b/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-selector.png deleted file mode 100644 index 00ea1ca32e..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/bulk-selector.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/checkbox-states.svg b/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/checkbox-states.svg new file mode 100644 index 0000000000..0e8234a0df --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/checkbox-states.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/empty-selection.svg b/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/empty-selection.svg new file mode 100644 index 0000000000..9036584c22 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/empty-selection.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/full-selection.svg b/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/full-selection.svg new file mode 100644 index 0000000000..ab016f6884 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/full-selection.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/partial-selection.svg b/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/partial-selection.svg new file mode 100644 index 0000000000..c32d91bedf --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/patterns/bulk-selection/img/partial-selection.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +