diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/active-table.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/active-table.svg new file mode 100644 index 0000000000..fcfd4d342d --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/active-table.svg @@ -0,0 +1,187 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/search-advanced.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/search-advanced.svg new file mode 100644 index 0000000000..5e403c777e --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/search-advanced.svg @@ -0,0 +1,264 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/search-find.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/search-find.svg new file mode 100644 index 0000000000..2bf9cc7e97 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/search-find.svg @@ -0,0 +1,202 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/search-input-active-table.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/search-input-active-table.png deleted file mode 100644 index b09f305932..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/search-input-active-table.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/search-input-advanced-open.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/search-input-advanced-open.png deleted file mode 100644 index 02ea3f7be1..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/search-input-advanced-open.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/search-input-default-table.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/search-input-default-table.png deleted file mode 100644 index f2b1fd242d..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/search-input-default-table.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/search-input-navigation-2-table.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/search-input-navigation-2-table.png deleted file mode 100644 index ecad801e56..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/search-input-navigation-2-table.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/search-input-navigation-table.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/search-input-navigation-table.png deleted file mode 100644 index b562a111b3..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/img/search-input-navigation-table.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/search-input.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/search-input.md index 8c6fe1bbef..d10061fc6d 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/search-input.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/search-input.md @@ -3,6 +3,8 @@ id: Search input section: components --- +import '../components.css'; + ## Usage Use a search input when you want to either filter down or locate values from a dataset that match an inputted value. @@ -10,7 +12,7 @@ Use a search input when you want to either filter down or locate values from a d A search input can act as a basic filter for narrowing a list of values as the user types. If you want a search field with an explicit submit button (not type-ahead), we recommend that you use an [input group](/components/input-group) with a search button to act as a basic text filter. -Search input active in a basic table +
![Search input active in a basic table](./img/active-table.svg)
1. **Input field:** The user’s input immediately starts filtering down the list as the user types. There is no need for them to press enter. @@ -23,7 +25,7 @@ A search input can act as a basic filter for narrowing a list of values as the u ### Search input as a find function Another way to use search input is as a find function. This would mean that the value entered within the field would then be compared to each result, and only matches would be highlighted. -Search input with active navigation in a basic table +
![Search input with active navigation in a basic table](./img/search-find.svg)
1. **Input field:** The user’s input immediately starts matching to values as they begin typing. @@ -38,7 +40,7 @@ Another way to use search input is as a find function. This would mean that the ### Advanced search The [advanced search variant](/components/search-input#advanced) is intended for more advanced search use cases across multiple attribute-value pairs. It allows users to enter complex search queries from the keyboard or to fill out a search form. Use this component for search or filter queries that involve many attributes and when you want to give the user the option to use a form to complete the search criteria. -Search input with active navigation in a basic table +
![Search input with advanced navigation in a basic table](./img/search-advanced.svg)
1. **Input field:** Accepts one or more search queries in the form of an attribute-value pair. The delimiter character used to separate attribute and value strings can be passed to the component. Typical delimiter characters are “:” or “=”. If the user enters a string that is not in the form of an attribute-value pair, it will be treated as a standard text search where the software will search for the occurrence of that string anywhere in the data set.