diff --git a/src/data/nav-items.yaml b/src/data/nav-items.yaml index 53d664dfd7d8..574f6f2ce37b 100644 --- a/src/data/nav-items.yaml +++ b/src/data/nav-items.yaml @@ -136,8 +136,8 @@ path: /experimental/create-flows - title: Dashboard widgets path: /experimental/dashboard-widgets/usage - - title: Delete pattern - path: /experimental/delete-pattern + - title: Remove pattern + path: /experimental/remove-pattern - title: Export pattern path: /experimental/export-pattern - title: Generate an API key @@ -150,8 +150,6 @@ path: /experimental/navigation-pattern - title: Order summary template path: /experimental/order-summary-template/usage - - title: Remove pattern - path: /experimental/remove-pattern - title: Data visualization pages: - title: Get started diff --git a/src/pages/experimental/delete-pattern/images/1_1.png b/src/pages/experimental/delete-pattern/images/1_1.png deleted file mode 100644 index 9c40c5403e22..000000000000 Binary files a/src/pages/experimental/delete-pattern/images/1_1.png and /dev/null differ diff --git a/src/pages/experimental/delete-pattern/images/1_2.png b/src/pages/experimental/delete-pattern/images/1_2.png deleted file mode 100644 index 44fc3435115a..000000000000 Binary files a/src/pages/experimental/delete-pattern/images/1_2.png and /dev/null differ diff --git a/src/pages/experimental/delete-pattern/images/5_0.png b/src/pages/experimental/delete-pattern/images/5_0.png deleted file mode 100644 index 8a9f61ca2da0..000000000000 Binary files a/src/pages/experimental/delete-pattern/images/5_0.png and /dev/null differ diff --git a/src/pages/experimental/delete-pattern/images/5_1.png b/src/pages/experimental/delete-pattern/images/5_1.png deleted file mode 100644 index fb056b91b121..000000000000 Binary files a/src/pages/experimental/delete-pattern/images/5_1.png and /dev/null differ diff --git a/src/pages/experimental/delete-pattern/images/5_2.png b/src/pages/experimental/delete-pattern/images/5_2.png deleted file mode 100644 index 901cecb3f548..000000000000 Binary files a/src/pages/experimental/delete-pattern/images/5_2.png and /dev/null differ diff --git a/src/pages/experimental/delete-pattern/index.mdx b/src/pages/experimental/delete-pattern/index.mdx deleted file mode 100644 index 9875d847ad89..000000000000 --- a/src/pages/experimental/delete-pattern/index.mdx +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Delete pattern -description: Deleting is a destructive action. To protect user resources, your product should support ‘undo’ where possible. ---- - -### Deleting is a destructive action. To protect user resources, your product should support ‘undo’ where possible. If ‘undo’ support is impossible, request user confirmation before deleting a resource or asset. - -#### Status: - -Experimental - -#### Maintainers: - -[Vikki Paterson](https://github.com/vikkipaterson) - - - -High impact -Medium impact -Low impact - - - -![Example of a deletion pattern using a modal in context](images/1.png) - -Example of a deletion pattern using a moda - -## High impact - -A high-impact deletion cannot be reversed. The action would result in a significant loss for a user if done accidentally. - -For high-impact scenarios, a user should confirm the action by manually entering the name of the resource. The 'Delete' button is enabled when the text entered perfectly matches the resource name. - -The text should tell the user the consequences of the deletion and that the action cannot be undone. Optionally, when the delete button is selected it changes to `Deleting…`. - - - - -![Example of an un-populated high-impact deletion modal](images/2.png) - -![Example of a populated high-impact deletion modal](images/3.png) - -![Example of a high-impact deletion modal in its "deleting" state](images/5_0.png) - -![Example of a high-impact deletion modal in its "deleting" state](images/5_1.png) - - - - -You can choose to show a notification confirming deletion is completed. This is useful when the deletion of the resource takes more than a few moments. - - - - -![Example of a successful delete notification](images/5_2.png) - - - - -## Medium impact - -A medium-impact deletion is one that cannot be reversed, but would not be catastrophic if done accidentally. When deleting is medium-impact, a confirmation dialog should be presented to the user which displays: - -- The name of the resource -- Consequences of the deletion -- The action cannot be undone - -Optionally, when the delete button is selected it changes to `Deleting…`. - - - - -![Example of a standard delete modal](images/6.png) - -![Example of a standard delete modal in its "deleting" state](images/1_1.png) - -![Example of a standard delete modal in its "deleting" state](images/1_2.png) - - - - -You can choose to show a notification confirming deletion is completed. This is useful when the deletion of the resource takes more than a few moments. - - - - -![Example of a successful delete notification](images/7_updated.png) - - - - -## Low impact - -Requiring the user to confirm deletion is generally recommended. However, in very low impact situations, such as when an ‘undo’ option is available, user confirmation may not be required. diff --git a/src/pages/experimental/delete-pattern/images/1.png b/src/pages/experimental/remove-pattern/images/1.png similarity index 100% rename from src/pages/experimental/delete-pattern/images/1.png rename to src/pages/experimental/remove-pattern/images/1.png diff --git a/src/pages/experimental/delete-pattern/images/2.png b/src/pages/experimental/remove-pattern/images/2.png similarity index 100% rename from src/pages/experimental/delete-pattern/images/2.png rename to src/pages/experimental/remove-pattern/images/2.png diff --git a/src/pages/experimental/delete-pattern/images/3.png b/src/pages/experimental/remove-pattern/images/3.png similarity index 100% rename from src/pages/experimental/delete-pattern/images/3.png rename to src/pages/experimental/remove-pattern/images/3.png diff --git a/src/pages/experimental/delete-pattern/images/6.png b/src/pages/experimental/remove-pattern/images/6.png similarity index 100% rename from src/pages/experimental/delete-pattern/images/6.png rename to src/pages/experimental/remove-pattern/images/6.png diff --git a/src/pages/experimental/delete-pattern/images/7_updated.png b/src/pages/experimental/remove-pattern/images/7_updated.png similarity index 100% rename from src/pages/experimental/delete-pattern/images/7_updated.png rename to src/pages/experimental/remove-pattern/images/7_updated.png diff --git a/src/pages/experimental/remove-pattern/images/DeleteExample.png b/src/pages/experimental/remove-pattern/images/DeleteExample.png new file mode 100644 index 000000000000..d0c2d5e1ae22 Binary files /dev/null and b/src/pages/experimental/remove-pattern/images/DeleteExample.png differ diff --git a/src/pages/experimental/remove-pattern/images/DoneMedium.png b/src/pages/experimental/remove-pattern/images/DoneMedium.png new file mode 100644 index 000000000000..50019ee10e16 Binary files /dev/null and b/src/pages/experimental/remove-pattern/images/DoneMedium.png differ diff --git a/src/pages/experimental/remove-pattern/images/DoneSerious.png b/src/pages/experimental/remove-pattern/images/DoneSerious.png new file mode 100644 index 000000000000..f58149f8e658 Binary files /dev/null and b/src/pages/experimental/remove-pattern/images/DoneSerious.png differ diff --git a/src/pages/experimental/remove-pattern/images/LowImpactDelete.png b/src/pages/experimental/remove-pattern/images/LowImpactDelete.png new file mode 100644 index 000000000000..bad808cd5188 Binary files /dev/null and b/src/pages/experimental/remove-pattern/images/LowImpactDelete.png differ diff --git a/src/pages/experimental/remove-pattern/images/LowImpactRemove.png b/src/pages/experimental/remove-pattern/images/LowImpactRemove.png new file mode 100644 index 000000000000..8408e418beb8 Binary files /dev/null and b/src/pages/experimental/remove-pattern/images/LowImpactRemove.png differ diff --git a/src/pages/experimental/remove-pattern/images/RemoveExample.png b/src/pages/experimental/remove-pattern/images/RemoveExample.png new file mode 100644 index 000000000000..2f363398956e Binary files /dev/null and b/src/pages/experimental/remove-pattern/images/RemoveExample.png differ diff --git a/src/pages/experimental/remove-pattern/images/Requested.png b/src/pages/experimental/remove-pattern/images/Requested.png new file mode 100644 index 000000000000..b057307074c0 Binary files /dev/null and b/src/pages/experimental/remove-pattern/images/Requested.png differ diff --git a/src/pages/experimental/remove-pattern/images/modal-in-context.png b/src/pages/experimental/remove-pattern/images/modal-in-context.png deleted file mode 100644 index 7c6bccdcdfc1..000000000000 Binary files a/src/pages/experimental/remove-pattern/images/modal-in-context.png and /dev/null differ diff --git a/src/pages/experimental/remove-pattern/images/second-view.png b/src/pages/experimental/remove-pattern/images/second-view.png deleted file mode 100644 index 8b6a85c64dc8..000000000000 Binary files a/src/pages/experimental/remove-pattern/images/second-view.png and /dev/null differ diff --git a/src/pages/experimental/remove-pattern/index.mdx b/src/pages/experimental/remove-pattern/index.mdx index 95ee60559360..5561704a51d2 100644 --- a/src/pages/experimental/remove-pattern/index.mdx +++ b/src/pages/experimental/remove-pattern/index.mdx @@ -1,12 +1,9 @@ --- title: Remove pattern +description: Removing is an action that moves information from one location to another. Removal can be both destructive and non-destructive. Deletion is the most common type of removal and is destructive. --- - - -Removal is a non-destructive action. A user can remove an asset from a list or item without destroying it. - - +### _Removing_ is an action that moves information from one location to another. Removal can be both destructive and non-destructive. _Deletion_ is the most common type of removal and is destructive. #### Status: @@ -16,37 +13,167 @@ Removal is a non-destructive action. A user can remove an asset from a list or i [Vikki Paterson](https://github.com/vikkipaterson) -![Example of a removal using a modal in context](/images/modal-in-context.png) + + +High-impact deletion +Medium-impact deletion +Low-impact deletion +Medium-impact removal +Low-impact removal +Anatomy + + + +### Delete / Remove variations -Example of a remove pattern using a modal +| Action | Variation | Description | +| ------ | --------------- | ------------------------------------------------------------------------------------------------------------------------- | +| Delete | _High impact_ | Action can't be reversed and causes significant loss. The user types the resource name into the modal to confim deletion. | +| | _Medium impact_ | Action can't be reversed and causes some loss. The user sees a modal and confirms the consequence of deletion. | +| | _Low impact_ | Action is reversible or very low impact. A confirmation modal may not be required. | +| Remove | _Medium impact_ | Action can't be reversed and causes some loss. The user sees a modal and confirms the consequence of removal. | +| | _Low impact_ | Action is reversible or very low impact. A confirmation modal may not be required. | -## Low impact +## High-impact deletion -User confirmation is not required for low-impact removals because the asset is not destroyed. +A high-impact deletion cannot be reversed. The action would result in a significant loss for a user if done accidentally. -## High impact +When deleting is high-impact, a confirmation dialog should be presented to the user which displays: -Require user confirmation for high impact removals. Communicate the consequences of the removal, and let the user know if the removal is permanent. +- The name of the resource +- Consequences of the deletion +- This action cannot be undone. +- An editable text field for the name of the resource to be entered -Optionally, when the remove button is selected, change it to ‘Removing...’. +For high-impact scenarios, a user should confirm the action by manually entering the name of the resource. The 'Delete' button is enabled when the text entered perfectly matches the resource name. + +Optionally a [Done modal](#done-modal), [Requested modal](#requested-modal) or [Notification](#notification) can be used to confirm the action (or a combination of one modal and a notification). -![Example of a high-impact remove modal](images/first-view.png) +![The user enters the resource name in order to confirm deletion.](images/2.png) -Example of a high-impact remove modal + + {' '} + The user needs to enter the resource name in order to confirm deletion. + + +![When the resource name is entered the Delete button is enabled.](images/3.png) + + + {' '} + When the resource name is entered the Delete button is enabled. + +## Medium-impact deletion + +A medium-impact deletion is one that cannot be reversed, but would not be catastrophic if done accidentally. When deleting is medium-impact, a confirmation dialog should be presented to the user which displays: + +- The name of the resource +- Consequences of the deletion +- The action cannot be undone. + +Optionally an [Optional passive modal](#optional-passive-modal) or [Notification](#notification) can be used to confirm the action (or a combination of one modal and a notification). + + + + +![Example of a medium impact delete modal](images/6.png) + +An example of a standard delete modal + + + + +## Low-impact deletion + +Requiring the user to confirm deletion is generally recommended. However, in low impact situations, or when an ‘undo’ option is available, user confirmation may not be required. + + + + +![Example of delete options in context without warnings for low impact delete actions](images/LowImpactDelete.png) + + Low impact delete options + + + +## Medium-impact removal + +Removing has a medium impact when the action can't be reversed, and could have some impact if done accidentally. + +Text should tell the user the consequences of the removal and that the action cannot be undone. + + + + +![Example of a medium impact remove modal](images/first-view.png) + + + {' '} + Removal modals should include consequences of removal, and "This action cannot + be undone" statement. + + + + + +## Low-impact removal + +As removing does not destroy an asset, typically user confirmation is not required. + + + + +![Example of remove options in context without warnings for low impact remove actions.](images/LowImpactRemove.png) + + Example low impact remove options + + + + +## Anatomy + +### Optional passive modal + +In high or medium impact flows, an optional passive modal can be used to signify the state at the end of a remove or delete action. +Some deletion or removal actions don't happen immediately, in these situations it's recommended to inform the user through the optional passive modal. + + + + +![Example of a delete successful modal](images/Requested.png) + + + {' '} + Use a success modal to show that a delete request has been made / is in + progress. + + +![Example of a remove successful modal](images/DoneMedium.png) + + Use a success modal to show that removing is complete. + + + + +### Notification + +An optional notification can be used to confirm a delete or remove action has completed. This is useful when the action takes more than a few moments. + -![Example of a high-impact remove modal in its 'removing' state](images/second-view.png) +![Example of a successful delete notification](images/7_updated.png) - Example of a high-impact remove modal following user confirmation + {' '} + An optional notification can be used to confirm the delete or remove action + with medium or high impact actions.