diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/input-group/img/input-group-usage.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/input-group/img/input-group-usage.svg new file mode 100644 index 0000000000..175fb34ed5 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/input-group/img/input-group-usage.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/input-group/input-group.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/input-group/input-group.md index 4ff3a4dfc6..f03cbbe83a 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/input-group/input-group.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/input-group/input-group.md @@ -3,11 +3,15 @@ id: Input group section: components --- +import '../components.css'; + ## Usage Input groups can combine multiple elements. For example you could add buttons to 1 or both sides of a text input, like in a search field or an email input field. -Example of input groups +
+![Examples of input groups.](./img/input-group-usage.svg) +
### When to use Use an input group when the elements are directly connected to each other. Examples include an action button to act on the text, a mandatory and fixed piece of text, a class of text when in a filter, a unit of currency, and more. diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/img/text-input-group-attributes.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/img/text-input-group-attributes.svg new file mode 100644 index 0000000000..f371ece772 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/img/text-input-group-attributes.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/img/text-input-group-auto-complete.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/img/text-input-group-auto-complete.svg new file mode 100644 index 0000000000..93692ed4c3 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/img/text-input-group-auto-complete.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/img/text-input-group-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/img/text-input-group-elements.svg new file mode 100644 index 0000000000..5aeba1b504 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/img/text-input-group-elements.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/text-input-group.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/text-input-group.md index 62c3ab3c9a..833bc0a0a1 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/text-input-group.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/text-input-group.md @@ -3,9 +3,13 @@ id: Text input group section: components --- +import '../components.css'; + ## Elements -text input elements +
+![Elements of an input group.](./img/text-input-group-elements.svg) +
1. **Icon (optional):** An icon can be used in front of the input field to identify the purpose of the text input. @@ -23,7 +27,9 @@ The text input group component is useful for building more complex custom inputs The text input group can be used to create an attribute-value filter as shown below where the user selects attributes (or keys), then values, and the results are displayed in labels as a key-value pair. -attribute value filter +
+![Example of an attribute value filter.](./img/text-input-group-attributes.svg) +
See the [attribute-value filtering demo](/components/text-input-group/react-demos#attribute-value-filtering) for an interactive demo of this. @@ -31,6 +37,8 @@ See the [attribute-value filtering demo](/components/text-input-group/react-demo The text input group can also be used to create an auto-complete search component where suggestions are presented as a dropdown list as the user types. When only a single suggestion is available, the user can complete the entry without further typing by pressing the Tab key. -auto complete search +
+![Example of search with auto complete.](./img/text-input-group-auto-complete.svg) +
See the [auto-complete search with typeahead demo](/components/text-input-group/react-demos#auto-complete-search-with-typeahead) for an interactive demo of this.