diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/filters.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/filters.md index 0f278d14c5..a6adf7be58 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/filters.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/filters.md @@ -12,87 +12,186 @@ related: [ ] --- +import "../../components/components.css" + **Filters** allow users to narrow down content from data in tables, data lists or card views, among many others. -PatternFly provides a number of components that can be used in a variety of combinations to create a custom filtering experience. These elements may be used in a toolbar or on their own. +## Filter types + +Filters can contain 1 attribute or multiple attributes. PatternFly components can be combined in different ways to create more complex filtering experiences. These different filter types can be used in a toolbar or on their own. -Filters can consist of one or multiple attributes. - Filters consisting of single attributes include: +Filters consisting of single attributes include: * [Text entry](#text-entry-filters) * [Single select](#single-select) * [Checkbox select](#checkbox-select) - Filters consisting of multiple attributes include: * [Attribute-value](#attribute-value-filter) * [Filter group](#filter-group) * [Toggle group](#toggle-group) * [Faceted filter](#faceted-filter) -## Variations for one attribute -There are various ways to allow users to filter down content. Filtering methods include [text entry filters](#text-entry-filters), [single selects](#single-select) and [checkbox selects](#checkbox-select). +## Filter features + +All types of filters can include any of the following attributes: +* [Filter labels](#filter-labels): A way for users to see their selections when the menu is closed. +* [Typeahead](#typeahead): A way for users to narrow down the list of options when looking for the value they want to select. +* [Badge count](#badge-count): Indication of how many selections were made within the menu. + +The following table outlines which features are supported for each filter type. Just because a feature is supported, does not mean it must be used in your filters. + +| **Filter type** | **Filter labels** | **Typeahead** | **Badge count** +| ----------------- | ------- | ------ | ------- | +| Text entry| Yes (only for attribute filters) | Yes | No | +| Single select | Yes (only for attribute filters) | Yes | No | +| Checkbox select | Yes | No (but you can have a search inside the menu) | Yes | +| Attribute-value | Yes | Yes (except for checkbox selects) | Yes (only for checkbox select) +| Filter group | Yes | Yes (only for single selects) | Yes (only for checkbox selects) | +| Toggle group | No | No | No| +| Faceted filter | Yes | Yes | Yes| + +### Filter labels + +When filters are applied, filter labels can be used to provide feedback to the user on what they are filtering on. + +
+![Filter label that shows an active filter based on the user's selection.](./img/filter-label.svg) +
+ +1. **Filter label:** Shows users what conditions they are filtering on. Can show boolean relationships between different attribute-value pairs. Individual filter labels can be removed by clicking the ‘x’ in each label, and entire filter groups can be removed using the group ‘x’. + +Follow these best practices for using filter labels: +* Filters between attribute categories should be combined with a boolean “AND” operator. +* Filters within a category are shown grouped together and should be combined with a boolean “OR” operator. + * **Example:** An item must be Stopped “OR” Down “AND” have Samsung “OR” Hewlett-Packard as a vendor. +* If the list is not otherwise sorted, items that satisfy a higher number of filters should be shown higher up the page. + * **Example:** Items that have both Samsung and Hewlett-Packard as vendors are listed before items that only have Samsung or Hewlett-Packard. +In this example, the result will be to show all items that have a status of stopped “OR” down “AND” are from vendor Samsung “OR” Hewlett-Packard “AND” match the keyword. + +#### When to use +Use filter labels when: +* The value of the applied filter is not shown on the control itself. +* There is more than 1 value for a given facet. +* There are boolean filter rules being applied. + +**Don’t use** filter labels when the current settings of the controls are sufficient to convey applied filters. + +### Typeahead +Adding typeahead capabilities to your filters is useful when there is a large number of items to select from the filter dropdown. Users can quickly find the value they would like to filter by typing in the field. + +
+![Before and after typeahead filtering in a menu.](./img/typeahead.svg) +
+ +Typeahead is supported in single selects, faceted filters that can handle 1 input. Users can scroll through the dropdown list or type in the box to find the desired option. + +#### When to use +Use a typeahead filter when: +* A dropdown list has a large number of options. In these cases, typeahead can help a user find their desired option in less time. +* Typeahead filters can be used in place of a textbox filter, in certain cases. For example, when filtering by name, using a typeahead filter will ensure that only valid filters surface. This will avoid the need to present an empty state when invalid values are entered. + +#### Behavior +A filter query is triggered whenever a new value is set by the user. The following are triggers applicable to the variations of the typeahead filter shown in the previous example. + +| Value selector                       | Trigger | +| -------------------------------------------| ------ | +| Search field                         | The user types in an input and/or presses the Enter key after typing in the input field. This action will create a filter for the first value shown in the filtered list. | +| Select lists                     | The user selects or deselects an item in the list. | + +### Badge count +Badges are used to indicate a count. In filters, badges can be used in the following ways: + +#### Badge in checkbox select +You can opt to use a badge in a checkbox select to indicate to the user how many items they have selected when the toggle is collapsed. + +
+![Badge in menu toggle that displays the number of items that have been selected as filter conditions.](./img/badge-count.svg) +
+ +## Variations for 1 attribute +There are various ways to allow users to filter down content. Single filtering methods include [text entry filters](#text-entry-filters), [single selects](#single-select) and [checkbox selects](#checkbox-select). ### Text entry filters A text entry filter provides the user with an input field to type in values that filter the view, whether or not their input is an exact match. The text entry filter uses the [search input](/components/search-input) component which can be used with or without a button. -text input filters +
+![1 basic search input field and 1 search input with a submit button.](./img/text-entry-filters.svg) +
1. **Basic search input:** Filters automatically, as soon as the user starts typing. -2. **Search input with button:** Filters on enter, or click of arrow button. +2. **Search input with button:** Filters on enter, or clicks of the arrow button. Note, the placeholder text in your text entry filter should indicate what the user can filter on. If the inputted string is constrained to filter a **single column**, the placeholder text of the input field should read “Filter by _attribute name_”. If the inputted string filters **all columns**, the placeholder text of the input field should read “Filter” instead. #### Behavior Although both basic filter components have the same end result, they differ in when the search is triggered. With search inputs, the data in the table automatically filters as the user types. With input groups, the user must press enter to apply the search, and start filtering data in the table. -**Note:** With both basic filter components, the user can only filter by one input at a time. +**Note:** With both basic filter components, the user can only filter by 1 input at a time. #### When to use Use a text entry filter when you’d like to give users the ability to search values in unbound data. Using the _search input_ component is preferred, however, use the _input group_ component when you are worried about performance issues with querying a large data set after every stroke. #### Supported features -Text entry filters support [filter labels](#filter-label), but do not support [type-ahead](#type-ahead) or [badges](#badge-count). +Text entry filters support [filter labels](#filter-labels), but do not support [typeahead](#typeahead) or [badges](#badge-count). + +Filter labels are supported for text entry filters, but in general, we recommend not showing a label to avoid redundancy, except for cases when text entry filters are used inside of [attribute-value filters](#attribute-value-filter). -**Filter labels** are supported for text entry filters, but in general, we recommend not showing a label to avoid redundancy, except for cases when text entry filters are used inside of [attribute-value filters](#attribute-value-filter). Since you can only search by one value at a time, the value will already be shown in the input field. +Since you can only search by 1 value at a time, the value will already be shown in the input field, as shown in the following image. -text input labels +
+![Search value shown in the search input field.](./img/search-value.svg) +
### Single select -A single select provides the user with a fixed set of values from which they can only select one value. This filter type uses the [single select component](/components/select/react#single). If the single select filter is the only filter in the toolbar, it should have an “All options” menu item by default as a way to reset the filter (unless a selection must be made at all times). This “All” option will be selected by default, acting as an equivalent of no filter selected. +A single select provides the user with a fixed set of values from which they can only select 1 value. This filter type uses the [single select component](/components/select/react#single). + +If the single select filter is the only filter in the toolbar, it should have an “All options” menu item that's selected by default, acting as an equivalent of no filter selected. -single select list filter +
+![Single select menu with 'all options' item selected.](./img/single-select-default.svg) +
+ +When a different menu item is selected, it should be displayed in the toggle. Selecting "All options" will reset any selected options. + +
+![Single select menu with specific item selected.](./img/single-select-selection-mode.svg) +
#### Behavior The user is presented with a list of values to choose from. A selected value is indicated with a blue checkmark to the right of the value. When a value is selected, the selection appears in the toggle. When a user selects a different value, the initial selected value becomes unselected. The new value inherits the blue checkmark and is reflected in the toggle. #### When to use -Use a single select list when you’d like users to only select one option from a **predefined list** of options. +Use a single select list when you’d like users to only select 1 option from a **predefined list** of options. #### Supported features -Single selects can include [type-aheads](#type-ahead) as an added feature. - -**Type-ahead** functionality can be added to single selects, allowing users to input a search inside the toggle, filtering down from the list of menu options shown. This is especially useful for very long lists that would be inconvenient for the user to scroll through. Type-ahead is recommended for lists that are more than 10 items long. +Typeahead functionality can be added to single selects, allowing users to input a search inside the toggle, filtering down from the list of menu options shown. This is especially useful for very long lists that would be inconvenient for the user to scroll through. typeahead is recommended for lists that are more than 10 items long. -type-ahead in a single select +
+![Before and after typeahead filtering in a menu.](./img/typeahead-input.svg) +
-Stand alone single selects in a toolbar do not use badge counts or filter labels since only one selection can be made, and the selection will already be apparent in the toggle. +Stand alone single selects in a toolbar do not use badge counts or filter labels since only 1 selection can be made, and the selection will already be apparent in the toggle. ### Checkbox select -A checkbox select provides the user with a fixed set of values from which they can select multiple values. This filter type uses the [checkbox select component](/components/select/react#checkbox-input). +A checkbox select provides the user with a fixed set of values from which they can select multiple values. This filter type uses the [checkbox select component](/components/menus/select#checkbox-select). -checkbox select +
+![Before and after multiple items are selected from a checkbox select menu.](./img/checkbox-select-menus.svg) +
#### Behavior -The user is presented with a list of values to choose from. From this list, users may select or deselect one or more values at a time, with selections indicated by a blue checkbox preceding the value. The dropdown should remain open as the user makes selections until they click away or manually close it. Selected values will appear as filter labels underneath the filter, allowing the user to see their selections even when the toggle is collapsed. +The user is presented with a list of values to choose from. From this list, users can select or deselect 1 or more values at a time, with selections indicated by a blue checkbox preceding the value. The dropdown should remain open as the user makes selections until they click away or manually close it. Selected values will appear as filter labels underneath the filter, allowing the user to see their selections even when the toggle is collapsed. #### When to use Use a checkbox select for selecting multiple values from a predefined list. Multiple values will be combined using a logical “OR” operation. #### Supported features -Checkbox select supported features include [filter labels](#filter-label), and optionally, [badges](#badge-count). +Checkbox select supported features include [filter labels](#filter-labels), and optionally, [badges](#badge-count). -add ons for checkbox select +
+![Badge in select menu toggle that shows the number of selected items.](./img/checkbox-select.svg) +
**Filter labels** are used as a way for users to view all their selections when the menu of selections is collapsed. @@ -100,7 +199,9 @@ Checkbox select supported features include [filter labels](#filter-label), and o Although **typeahead** is not supported for checkbox selects, you can add a search input inside the menu, right above the items the user can select from. This will allow the user to filter down the list of options. -search in checkbox select +
+![Search field placed within a menu.](./img/typeahead-search.svg) +
## Variations for multiple attributes There are multiple ways of combining variations for single attribute filters into multiple attribute filters, including [attribute-value filters](#attribute-value-filter), [filter groups](#filter-group), [toggle groups](#toggle-group) and [faceted filters](#faceted-filter). @@ -108,13 +209,21 @@ There are multiple ways of combining variations for single attribute filters int ### Attribute-value filter The attribute-value filter gives users the ability to specify an attribute-value pair for filtering a data set. -Attribute filter with basic search +
+![Attribute selector with text entry field.](./img/attribute-a.svg) +
-Attribute filter with single select +
+![Attribute selector with a single select menu.](./img/attribute-b.svg) +
-Attribute filter with checkbox +
+![Attribute selector with a checkbox select menu.](./img/attribute-c.svg) +
-Attribute filter with date picker +
+![Attribute selector with a date picker.](./img/attribute-d.svg) +
The following elements make up an attribute-value (textbox) filter. 1. **Attribute selector:** A select list that allows the user to select the attribute that they want to filter against. @@ -131,7 +240,7 @@ The following elements make up an attribute-value (textbox) filter. #### Behavior To use an attribute-filter, the user must first select an _attribute_ to filter on using the left toggle, followed by choosing the specific _values_ to filter on using the right toggle. Whatever is selected in the attribute toggle will determine what is shown in the value toggle. -The value toggles behave as described in the [variations for one attribute](#variations-for-one-attribute) section. The only difference for multiple attributes is that as users make filter selections using the attribute filter, each selection will **always** show up as a label underneath the filters. +The value toggles behave as described in the [variations for 1 attribute](#variations-for-1-attribute) section. The only difference for multiple attributes is that as users make filter selections using the attribute filter, each selection will **always** show up as a label underneath the filters. When using the attribute filter, a filter query is triggered whenever the user sets a new value. The following are triggers applicable to the variations of the attribute-value filter shown above. @@ -145,41 +254,63 @@ When using the attribute filter, a filter query is triggered whenever the user s Use an attribute-value filter when users have multiple attributes to filter on. This filter should be used over a faceted filter when the attributes use different selection formats (for example, attribute A uses a single select, but attribute B uses a checkbox select). #### Supported features -Attribute-value filter features include [filter labels](#filter-label), [badges](#badge-count), and [type-ahead](#type-ahead). +Attribute-value filter features include [filter labels](#filter-labels), [badges](#badge-count), and [typeahead](#typeahead). **Filter labels** are strongly recommended for attribute filters as a way for users to view all their selections when the user switches between attribute filters and when the menu of selections is collapsed. **Badges** can be used in a checkbox select value selector toggle to indicate how many selections have been made. -**Type-ahead** allows the user to narrow down their search and is supported for all value selection types except checkbox selects. Although typeahead is **not supported** for checkbox selects, you can add a search input inside the menu, above the items the user can select from. +**typeahead** allows the user to narrow down their search and is supported for all value selection types except checkbox selects. Although typeahead is **not supported** for checkbox selects, you can add a search input inside the menu, above the items the user can select from. ### Filter group -A filter group is a set of filters that appear side by side in a toolbar. This filter type uses the [select list](/components/select) component. +A filter group is a set of filters that appear side by side in a toolbar. This filter type uses the [select list](/components/menus/select) component. + +**Filter group with only single selects** + +
+![Filter group with 2 single select menus.](./img/filter-group-single.svg) +
+ +1. When an option is selected, it is reflected in the toggle. +1. The default selection should be “All _attribute-name_” to indicate that no filter has been applied. This option also allows users to clear whatever filter they can have applied. -filter group with multiple selects -1. **Filter group with only single select:** Filter group made up of single selects. When an option is selected, it is reflected in the toggle. The default selection should be “All _attribute-name_” to indicate that no filter has been applied. This option also allows users to clear whatever filter they may have applied. -2. **Filter group with multiple selection types:** Filter group with single select, checkbox select, and date picker. When there are no selections, the toggle should contain the attribute name. When selections are made, the behavior will depend on the selection type. For single selects and date pickers, the selection will appear in the toggle. For checkbox selects, the attribute name will remain in the toggle, with the addition of a badge containing the number of filters selected. In all cases, selections should appear as filter labels underneath the filters. +**Filter group with multiple selection types** + +
+![Filter group with multiple, mixed selection types.](./img/filter-group-multiple.svg) +
+ +Filter group with single select, checkbox select, and date picker. When there are no selections, the toggle should contain the attribute name. + +When selections are made, the behavior will depend on the selection type: +1. **Single select:** The selection will appear in the toggle. +1. **Checkbox selects:** The attribute name will remain in the toggle, with the addition of a badge containing the number of filters selected. +1. **Date pickers:** The selection will appear in the toggle. + +In all cases, selections should appear as filter labels underneath the filters. #### When to use Use a filter group when you only have a handful of attributes that you want to show. Only use this filter when space allows; otherwise consider using an attribute-value or faceted filter instead. #### Behavior -Filter queries are applied when the user selects or deselects an item in the list or selects a date/time range. If the filter group is only made up of single selects, the selected filters will be shown inside each filter’s toggle. If the filter group contains multiple selects, the selected filters will be shown as filter labels underneath the filters. Additionally, you may also choose to display the selected number of items in each filter as a badge in their toggle. A clear filter action to the right of the filters will remove all applied filters. +Filter queries are applied when the user selects or deselects an item in the list or selects a date/time range. If the filter group is only made up of single selects, the selected filters will be shown inside each filter’s toggle. If the filter group contains multiple selects, the selected filters will be shown as filter labels underneath the filters. Additionally, you can also choose to display the selected number of items in each filter as a badge in their toggle. A clear filter action to the right of the filters will remove all applied filters. #### Supported features -Filter groups support [filter labels](#filter-label), [badges](#badge-count), and [type-ahead](#type-ahead). +Filter groups support [filter labels](#filter-labels), [badges](#badge-count), and [typeahead](#typeahead). -**Filter labels** are recommended for filter groups that have one or more checkbox selects. If the filter group only consists of single selects, there is no need to add filter labels as the count will always be one. +**Filter labels** are recommended for filter groups that have 1 or more checkbox selects. If the filter group only consists of single selects, there is no need to add filter labels as the count will always be one. **Badges** can be used in a checkbox select toggle to indicate how many selections have been made for that attribute filter. -**Type-ahead** allows the user to narrow down their search and is supported for all value selection types except checkbox selects. Although typeahead is **not supported** for checkbox selects, you can add a search input inside the menu, above the items the user can select from. +**typeahead** allows the user to narrow down their search and is supported for all value selection types except checkbox selects. Although typeahead is **not supported** for checkbox selects, you can add a search input inside the menu, above the items the user can select from. ### Toggle group A toggle group filter allows users to select from a set of predefined different elements to filter something on. This filter uses the [toggle group component](/components/toggle-group). -toggle group +
+![Toggle group for a chart visual.](./img/toggle-filter.svg) +
#### When to use Use a toggle group filter when you have few filter options that you want users to filter from, without hiding the options in a select list. A common usage for toggle groups is for filtering a chart view, to include or remove a data point from view. @@ -188,24 +319,31 @@ Use a toggle group filter when you have few filter options that you want users t Information will be shown to the user based on the toggles they select. If something is selected, it means the information is being filtered on. #### Supported features -Toggle groups do not use or support filter labels, badges, or type-ahead. +Toggle groups do not use or support filter labels, badges, or typeahead. ### Faceted filter -Faceted filtering is useful when items can be described by categories according to multiple dimensions or facets. This filter usually uses the [grouped checkbox select list](/components/select#grouped-checkbox-input) component. +Faceted filtering is useful when items can be described by categories according to multiple dimensions or facets. This filter usually uses the [grouped checkbox select list](/components/menus/select#grouped-checkbox-input) component. -faceted filter with checkbox +
+![Menu with 2 named groups of selectable items.](./img/faceted-filter.svg) +
The following elements can be used in a faceted (checkbox) filter: 1. **Facets:** Different categories containing filter values, such as _Status_ or _Vendor_. -2. **Values:** What users might filter on. Each category is made up of checkbox selects, where each category can have multiple options selected. Never include two selection types within the same faceted filter. -3. **Filter labels:** Records of each selection, shown when the options menu is collapsed. +2. **Values:** What users might filter on. Each category is made up of checkbox selects, where each category can have multiple options selected. Never include 2 selection types within the same faceted filter. -**Note:** Consider adding an “Other” option to attribute lists where items may not fall under any of the specified values. +
+![Filter labels that display items selected from filter groups.](./img/faceted-filter-collapsed.svg) +
+ +1. **Facets:** When the options menu is collapsed, selected values are displayed as labels in named groups, which use the name of the facet as the group label. + +**Note:** Consider adding an “Other” option to attribute lists where items can not fall under any of the specified values. #### When to use Use a faceted filter when: * The user is browsing a set of items without robust knowledge of what is in the set. -* The important characteristics of the items to be filtered are mostly traits with a small and discrete set of choices like color, status, availability, or distributer rather than arbitrary text or numeric values such as name, date created, or amount of available space. +* The important characteristics of the items to be filtered are mostly traits with a small and discrete set of choices like color, status, availability, or distributor rather than arbitrary text or numeric values such as name, date created, or amount of available space. * The facets to filter from are all checkbox select **Do not use** a faceted filter when the important characteristics of the items are mostly open-ended values and/or have a mix of single and multiple select. Additionally, if space is limited, consider using an [attribute-value](#attribute-value-filter) filter instead. @@ -214,108 +352,46 @@ Use a faceted filter when: New filters are applied or removed as the user selects or deselects values using checkboxes. A badge count can optionally be added to the toggle to indicate the number of selections made in the filter. Selections will appear as filter labels underneath the filter. Note that there is an "AND" relationship between facets, and an "OR" relationship between values. #### Supported features -Faceted filters support [filter labels](#filter-label), [badges](#badge-count), and [type-ahead](#type-ahead). - -**Filter labels** are recommended as a way for users to see their selections when the menu is closed. - -**Badges** can be used at the toggle level to indicate how many selections were made within the menu. - -**Type-ahead** can be used as a way for users to narrow down the list of options when looking for the value they want to select. - -## Filter features -Different attributes can be added to different filters. These include: -* [Filter labels](#filter-label) -* [Badge count](#badge-count) -* [Type-ahead](#type-ahead) - -This table describes which features are **supported** for each filter type. Note that just because a feature is supported, does not mean it must be used in your filters. - -| Filter type | Filter labels | Type-ahead | Badge count -| ----------------- | ------- | ------ | ------- | -| **Text entry**| Yes (if within an attribute filter) | Yes | No | -| **Single select** | Yes (if within an attribute filter) | Yes | No | -| **Checkbox select** | Yes | No (but you can have a search inside the menu) | Yes | -| **Attribute-value** | Yes | Yes (except for checkbox selects) | Yes (only for checkbox select) -| **Filter group** | Yes | Yes (only for single selects) | Yes (only for checkbox selects) | -| **Toggle group** | No | No | No| -| **Faceted filter** | Yes | Yes | Yes| - -### Filter label -When filters are applied, filter labels may be used to provide feedback to the user on what they are filtering on. - -Filter labels may be used to show boolean relationships between different attribute-value pairs. Individual filter labels can be removed by clicking the ‘x’ in each label, and entire filter groups can be removed using the group ‘x’. - -label groups - -Follow these best practices for using filter labels: -* Filters between attribute categories should be combined with a boolean “AND” operator. -* Filters within a category are shown grouped together and should be combined with a boolean “OR” operator. - * **Example:** An item must be Stopped “OR” Down “AND” have Samsung “OR” Hewlett-Packard as a vendor. -* If the list is not otherwise sorted, items that satisfy a higher number of filters should be shown higher up the page. - * **Example:** Items that have both Samsung and Hewlett-Packard as vendors are listed before items that only have Samsung or Hewlett-Packard. -In this example, the result will be to show all items that have a status of stopped “OR” down “AND” are from vendor Samsung “OR” Hewlett-Packard “AND” match the keyword. - -#### When to use -Use filter labels when: -* The value of the applied filter is not shown on the control itself. -* There is more than one value for a given facet. -* There are boolean filter rules being applied. - -**Don’t use** filter labels when the current settings of the controls are sufficient to convey applied filters. - -### Badge count -Badges are used to indicate a count. In filters, badges can be used in the following ways: - -#### Badge in checkbox select -You may opt to use a badge in a checkbox select to indicate to the user how many items they have selected when the toggle is collapsed. - -badge - -### Type-ahead -Adding type-ahead capabilities to your filters is useful when there is a large number of items to select from the filter dropdown. Users can quickly find the value they would like to filter by typing in the field. - -type ahead example - -Type-ahead is supported in single selects, faceted filters that can handle one input. Users may scroll through the dropdown list or type in the box to find the desired option. - -#### When to use -Use a type-ahead filter when: -* A dropdown list has a large number of options. In these cases, type-ahead can help a user find their desired option in less time. -* Type-ahead filters can be used in place of a textbox filter, in certain cases. For example, when filtering by name, using a type-ahead filter will ensure that only valid filters surface. This will avoid the need to present an empty state when invalid values are entered. - -#### Behavior -A filter query is triggered whenever a new value is set by the user. The following are triggers applicable to the variations of the type-ahead filter shown in the previous example. - -| Value selector                       | Trigger | -| -------------------------------------------| ------ | -| Search field                         | The user types in an input and/or presses the Enter key after typing in the input field. This action will create a filter for the first value shown in the filtered list. | -| Select lists                     | The user selects or deselects an item in the list. | +Faceted filters support [filter labels](#s), [badges](#badge-count), and [typeahead](#typeahead). ## Filter validation -If your filter has limitations, you may present an error state on your filter toggle to communicate these limitations to users. Examples of instances where you may want to use filter validation include: +If your filter has limitations, you can present an error state on your filter toggle to communicate these limitations to users. Examples of instances where you can want to use filter validation include: * In cases where free-form text input validation is needed * When there is a limit on how many filters a user can apply at a time -* When there is a limit on how many options can be selected for one attribute +* When there is a limit on how many options can be selected for 1 attribute When using error validation in a filter, include a tooltip on hover with an explanation of what went wrong. -Example of filter validation +
+![Filter with a danger icon that has an informative tooltip.](./img/filter-error.svg) +
## Layout considerations -Filters may be included in a [toolbar](/components/toolbar) and are usually left aligned. There may be more than one filter used in a single toolbar, and in some cases, custom filters may make up a full toolbar. Filters may also be used alone outside of a toolbar. +Filters can be included in a [toolbar](/components/toolbar) and are usually left aligned. There can be more than 1 filter used in a single toolbar, and in some cases, custom filters can make up a full toolbar. Filters can also be used alone outside of a toolbar. ## Mobile considerations -In responsive views, filters may be hidden within the filter icon. On click, the toolbar will expand to reveal the filter. If there are multiple filter elements, they will be collapsed into a single faceted filter. Read more about toolbars in mobile views in [the toolbar design guidelines](/components/toolbar/design-guidelines#the-toolbar-on-mobile). +In responsive views, filters can be hidden within the filter icon. On click, the toolbar will expand to reveal the filter. If there are multiple filter elements, they will be collapsed into a single faceted filter. Read more about toolbars in mobile views in [the toolbar design guidelines](/components/toolbar/design-guidelines#the-toolbar-on-mobile). -mobile view +
+![Toolbar action required to open a filtering menu on mobile.](./img/mobile-before.svg) +
+ +
+![Mobile view of a toolbar after applying a filter.](./img/mobile-after.svg) +
## Examples **Filter group in data list toolbar** -example of filter group in data list +
+![Filters applied to a data list.](./img/filter-group-data-list.svg) +
**Attribute filter in table toolbar** -example of attribute value filter in table + +
+![Attribute filter option for a table.](./img/attribute-filter-table.svg) +
## Content @@ -325,5 +401,4 @@ Filter placeholder text in input fields should read “Filter by [attribute name **Examples:** _Filter by status_, _Filter by vendor_ ### Clearing filters -The option to clear all filters will be displayed after the last filter label. It should read “Clear filters” in sentence case. When clicked, it should remove all applied filters and collapse the toolbar back into a single row. - +The option to clear all filters will be displayed after the last filter label. It should read “Clear filters” in sentence case. When clicked, it should remove all applied filters and collapse the toolbar back into a single row. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-a.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-a.svg new file mode 100644 index 0000000000..7d703b4a24 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-a.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-b.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-b.svg new file mode 100644 index 0000000000..1a57165b60 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-b.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-c.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-c.svg new file mode 100644 index 0000000000..b104939623 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-c.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-d.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-d.svg new file mode 100644 index 0000000000..70d0682c86 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-d.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-filter-checkbox.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-filter-checkbox.png deleted file mode 100644 index 166a0758dc..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-filter-checkbox.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-filter-date-picker.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-filter-date-picker.png deleted file mode 100644 index e7ae6692b3..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-filter-date-picker.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-filter-single.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-filter-single.png deleted file mode 100644 index f72fba6b64..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-filter-single.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-filter-table.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-filter-table.svg new file mode 100644 index 0000000000..665076916e --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-filter-table.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-filter.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-filter.png deleted file mode 100644 index b1958dfc78..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-filter.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/badge-count.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/badge-count.svg new file mode 100644 index 0000000000..545c3ca3f5 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/badge-count.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/badge.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/badge.png deleted file mode 100644 index 3a4858d045..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/badge.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/checkbox-search.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/checkbox-search.png deleted file mode 100644 index 9e7d38e97d..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/checkbox-search.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/checkbox-select-add.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/checkbox-select-add.png deleted file mode 100644 index 37f4e80f9d..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/checkbox-select-add.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/checkbox-select-menus.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/checkbox-select-menus.svg new file mode 100644 index 0000000000..f0a26e3714 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/checkbox-select-menus.svg @@ -0,0 +1,96 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/checkbox-select.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/checkbox-select.png deleted file mode 100644 index 31afa79c4b..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/checkbox-select.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/checkbox-select.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/checkbox-select.svg new file mode 100644 index 0000000000..82aca050b8 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/checkbox-select.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/chips.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/chips.png deleted file mode 100644 index 16dc56aec3..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/chips.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/error-table.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/error-table.png deleted file mode 100644 index a01aa33e24..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/error-table.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/ex-datalist.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/ex-datalist.png deleted file mode 100644 index 1f9f026c3c..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/ex-datalist.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/ex-table.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/ex-table.png deleted file mode 100644 index ff56d0744e..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/ex-table.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/faceted-filter-collapsed.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/faceted-filter-collapsed.svg new file mode 100644 index 0000000000..6489baa30f --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/faceted-filter-collapsed.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/faceted-filter.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/faceted-filter.svg new file mode 100644 index 0000000000..50b2cb07c5 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/faceted-filter.svg @@ -0,0 +1,93 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/faceted-grouped.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/faceted-grouped.png deleted file mode 100644 index 8c6122142b..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/faceted-grouped.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/faceted-single.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/faceted-single.png deleted file mode 100644 index 5c8b316008..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/faceted-single.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-error.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-error.svg new file mode 100644 index 0000000000..25b30f0e04 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-error.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-group-2.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-group-2.png deleted file mode 100644 index f6d3670381..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-group-2.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-group-data-list.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-group-data-list.svg new file mode 100644 index 0000000000..868452fd20 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-group-data-list.svg @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-group-multiple.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-group-multiple.svg new file mode 100644 index 0000000000..65f21333b1 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-group-multiple.svg @@ -0,0 +1,104 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-group-single.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-group-single.svg new file mode 100644 index 0000000000..e54013b9fb --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-group-single.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-group.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-group.png deleted file mode 100644 index 5d1938856e..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-group.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-label.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-label.svg new file mode 100644 index 0000000000..71894be64f --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-label.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/mobile-after.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/mobile-after.svg new file mode 100644 index 0000000000..8c05f859fc --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/mobile-after.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/mobile-before.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/mobile-before.svg new file mode 100644 index 0000000000..38bbfd7d90 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/mobile-before.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/mobile.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/mobile.png deleted file mode 100644 index 747c58035d..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/mobile.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/search-value.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/search-value.svg new file mode 100644 index 0000000000..570df14cf1 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/search-value.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/single-select-default.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/single-select-default.svg new file mode 100644 index 0000000000..e49d2c4ac7 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/single-select-default.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/single-select-selection-mode.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/single-select-selection-mode.svg new file mode 100644 index 0000000000..25d9e56d31 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/single-select-selection-mode.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/single-select.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/single-select.png deleted file mode 100644 index b3ea2fc38f..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/single-select.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/single-type-ahead.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/single-type-ahead.png deleted file mode 100644 index 4b1bc900fe..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/single-type-ahead.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/text-entry-filters.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/text-entry-filters.svg new file mode 100644 index 0000000000..6d69b6310b --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/text-entry-filters.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/text-input-chips.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/text-input-chips.png deleted file mode 100644 index 228c70ab06..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/text-input-chips.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/text-input.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/text-input.png deleted file mode 100644 index 4ba5809757..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/text-input.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/toggle-filter.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/toggle-filter.svg new file mode 100644 index 0000000000..cf9880af37 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/toggle-filter.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/toggle-group.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/toggle-group.png deleted file mode 100644 index 8bc351d0e0..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/toggle-group.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/type-ahead-single.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/type-ahead-single.png deleted file mode 100644 index e8166f1620..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/type-ahead-single.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/typeahead-input.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/typeahead-input.svg new file mode 100644 index 0000000000..e4c2a235e5 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/typeahead-input.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/typeahead-search.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/typeahead-search.svg new file mode 100644 index 0000000000..c85390235a --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/typeahead-search.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/typeahead.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/typeahead.svg new file mode 100644 index 0000000000..8052d08b37 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/typeahead.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +