diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/img/inline-edit-behavior.gif b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/img/inline-edit-behavior.gif new file mode 100644 index 0000000000..117f5f9274 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/img/inline-edit-behavior.gif differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/img/inline-edit-field-specific.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/img/inline-edit-field-specific.svg new file mode 100644 index 0000000000..74ec8275dd --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/img/inline-edit-field-specific.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/img/inline-edit-full-page.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/img/inline-edit-full-page.svg new file mode 100644 index 0000000000..e8985ea096 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/img/inline-edit-full-page.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/img/inline-edit-page-elements-1.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/img/inline-edit-page-elements-1.svg new file mode 100644 index 0000000000..0e13b28a46 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/img/inline-edit-page-elements-1.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/img/inline-edit-page-elements-2.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/img/inline-edit-page-elements-2.svg new file mode 100644 index 0000000000..f13c58f25e --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/img/inline-edit-page-elements-2.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/img/inline-edit-table-rows.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/img/inline-edit-table-rows.svg new file mode 100644 index 0000000000..bd1c8965f6 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/img/inline-edit-table-rows.svg @@ -0,0 +1,123 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/img/inline-edit-table.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/img/inline-edit-table.svg new file mode 100644 index 0000000000..73278369ba --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/img/inline-edit-table.svg @@ -0,0 +1,92 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/inline-edit.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/inline-edit.md index 51d17d4c13..25370f3269 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/inline-edit.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/inline-edit/inline-edit.md @@ -3,6 +3,8 @@ id: Inline edit section: components --- +import '../components.css'; + ## Elements Elements vary depending on inline edit variation @@ -18,7 +20,11 @@ Elements vary depending on inline edit variation ### When not to use * The editing is the primary function of the view. For example, in an edit modal. -Inline edit components. +## Behavior + +
+![Example of the behavior of an inline edit field.](./img/inline-edit-behavior.gif) +
## Variations 1. **[Page inline edit](/components/inline-edit/design-guidelines#page-inline-edit):** enables the user to edit a [specific field](/components/inline-edit/design-guidelines#table-inline-edit) in a details page or in a [full page](/components/inline-edit/design-guidelines#full-page-edit). @@ -31,7 +37,12 @@ Elements vary depending on inline edit variation ### Page inline elements -Form inline edit elements +
+![Elements of field specific inline edits.](./img/inline-edit-page-elements-1.svg) +
+
+![Elements of full page inline edits](./img/inline-edit-page-elements-2.svg) +
1. **Toggle:** Indicates the edit action 2. **[Tooltip](/components/tooltip):** Provides a short description of the inline edit toggle @@ -49,7 +60,9 @@ The pencil toggle is placed inline with the header for fields that are editable. * **The check icon** saves the changes and switches the item back to read-only mode. * **The close icon** returns to the read-only mode without saving new data. -Specific field edit +
+![Example of field specific inline edits.](./img/inline-edit-field-specific.svg) +
### Full page edit @@ -62,7 +75,9 @@ Any editing is triggered by an edit link for the whole section. All edits should * **Editable fields** should function like any form. * Users can save or cancel changes using the ‘Save’ or ‘Cancel’ button. Both actions return a page or description list to the read-only mode. -Full page edit +
+![Example of full page inline edits.](./img/inline-edit-full-page.svg) +
### Table inline edit @@ -70,7 +85,9 @@ Any editing is triggered by an edit link for the whole section. All edits should ### Table inline elements -Table inline edit elements +
+![Elements of inline edits in a table.](./img/inline-edit-table.svg) +
1. **Editable inactive row:** Inactive row with read-only styling 2. **Editable active row:** Ability to edit form components is enabled @@ -96,7 +113,9 @@ Clicking the pencil icon toggles the particular table row into edit mode. In the * **The check icon button** submits the changes and switches the row back to the read-only mode. * **The close icon** returns to read-only mode without saving new data. -Row editing +
+![Example of inline edits in a table.](./img/inline-edit-table-rows.svg) +
Some are elements may be difficult to edit in a table. You can make them editable in a [modal](/components/modal) instead.