{"componentChunkName":"component---src-pages-experimental-edit-pattern-index-mdx","path":"/experimental/edit-pattern/","result":{"pageContext":{"frontmatter":{"title":"Edit Pattern"},"relativePagePath":"/experimental/edit-pattern/index.mdx","titleType":"prepend","MdxNode":{"id":"cb1b859b-9ae2-51a8-a351-3960d3aa18fe","children":[],"parent":"ab98f2d5-68a7-5cce-b609-425d16de75c4","internal":{"content":"---\ntitle: Edit Pattern\n---\n\n\n\nEditing is making changes to a resource that already exists in the system.\nUpdating and editing should use the same behavior as when the resource is created. This should only vary in situations where the number of editable fields is significantly smaller or larger than during creation, or the context of current settings is required.\n\n\n\n#### Status:\n\n[Experimental](/experimental/overview/)\n\n#### Maintainers:\n\n[Vikki Paterson](https://github.com/vikkipaterson), [Chloe Poulter](https://github.com/chloepoulterdesign)\n\n\n Low-impact edit\n High-impact edit\n Optional extras\n\n\n\n\nExample of an edit modal in context\n\n## Low-impact edit\n\nFor low-impact edits, allow editing with no warning. This approach is typically used when editing doesn’t have a wider impact.\n\n\n\n\n\n\nExample of an edit button in a table\n\n\n
\n\n### Modal\n\nIf an object was created in a modal, its editable fields can be made available in a modal. A modal can also be used where a small subset of fields are editable.\nIf enough fields are editable to require scrolling, use a side-panel or full-page edit dialog instead.\n\n\n\n\n\n\nExample of a low consequence edit action in a modal\n\n\n
\n\n### Side-panel\n\nIf an object was created in a side panel, its editable fields can be made available in a side panel. A side panel can also be used where context in the main view of the screen is useful in the editing flow.\n\n\n\n\n\n\nExample of a low impact edit action in a side panel\n\n\n
\n\n## High-impact edit\n\nWarn the user of the consequences of editing. This pattern is typically used when editing has a wider impact.\nInform users of the likely consequences of the edit to their system, and inform them that editing cannot be undone. Include a warning stage.\n\n### Modal\n\nA high-impact edit action of only a few fields can use a danger modal. A second confirm edit modal should also be inserted before the changes are saved. If desired, the confirmation modal can include a [summary of changes](#summary-of-changes).\n\n\n\n\n\n\n\n Example of a high-impact editing modal and consequent warning modal\n\n\n\n
\n\n### Side-panel\n\nIf an object was created in a side panel, or there are too many editable fields for a modal, a slide-over panel can be used.\n\n\n\n\n\n\nExample of a high-impact edit action in a side panel\n\n\n
\n\nHigh-impact side panel edits should also warn the user of destructive edits with a warning before changes are saved.\n\n\n\n\n\n\n\n Example of a warning screen in a side panel before a user saves changes\n\n\n\n
\n\n### Full page\n\nWhen an object was created in a full-page flow, or the volume of editable fields is high, use a full-page edit dialog.\n\n\n\n\n\n\nExample of a full-page edit view\n\n\n
\n\n\n\n\n\n\n\n Example of a modal warning users of the consequences of saving after a\n full-page edit\n\n\n\n
\n\n## Optional extras\n\n### Summary of changes\n\nAdding a summary of changes to the warning stage of a high-impact flow can help the user manage and understand all of the changes they have made.\n\n\n\n\n\n\nExample of a summary of changes in a modal\n\n\n
\n\n### Non-editable fields\n\nWhen a small number of fields are not editable, display their set value in a disabled field.\n\n\n\n\n\n\nExample of a single non-editable field\n\n\n
\n\nWhere a majority of variables are not editable, consider using an option that will display only editable fields. In a small number of cases, make individual variables editable in modals.\n\n### Success notifications\n\nAn optional success notification can be used to confirm that the user's changes have been saved.\n\n\n\n\n\n\nExample of a successful editing toast notification\n\n\n
\n","type":"Mdx","contentDigest":"124db69043c69f8405a0ce59c148aa91","counter":1626,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Edit Pattern"},"exports":{},"rawBody":"---\ntitle: Edit Pattern\n---\n\n\n\nEditing is making changes to a resource that already exists in the system.\nUpdating and editing should use the same behavior as when the resource is created. This should only vary in situations where the number of editable fields is significantly smaller or larger than during creation, or the context of current settings is required.\n\n\n\n#### Status:\n\n[Experimental](/experimental/overview/)\n\n#### Maintainers:\n\n[Vikki Paterson](https://github.com/vikkipaterson), [Chloe Poulter](https://github.com/chloepoulterdesign)\n\n\n Low-impact edit\n High-impact edit\n Optional extras\n\n\n\n\nExample of an edit modal in context\n\n## Low-impact edit\n\nFor low-impact edits, allow editing with no warning. This approach is typically used when editing doesn’t have a wider impact.\n\n\n\n\n\n\nExample of an edit button in a table\n\n\n
\n\n### Modal\n\nIf an object was created in a modal, its editable fields can be made available in a modal. A modal can also be used where a small subset of fields are editable.\nIf enough fields are editable to require scrolling, use a side-panel or full-page edit dialog instead.\n\n\n\n\n\n\nExample of a low consequence edit action in a modal\n\n\n
\n\n### Side-panel\n\nIf an object was created in a side panel, its editable fields can be made available in a side panel. A side panel can also be used where context in the main view of the screen is useful in the editing flow.\n\n\n\n\n\n\nExample of a low impact edit action in a side panel\n\n\n
\n\n## High-impact edit\n\nWarn the user of the consequences of editing. This pattern is typically used when editing has a wider impact.\nInform users of the likely consequences of the edit to their system, and inform them that editing cannot be undone. Include a warning stage.\n\n### Modal\n\nA high-impact edit action of only a few fields can use a danger modal. A second confirm edit modal should also be inserted before the changes are saved. If desired, the confirmation modal can include a [summary of changes](#summary-of-changes).\n\n\n\n\n\n\n\n Example of a high-impact editing modal and consequent warning modal\n\n\n\n
\n\n### Side-panel\n\nIf an object was created in a side panel, or there are too many editable fields for a modal, a slide-over panel can be used.\n\n\n\n\n\n\nExample of a high-impact edit action in a side panel\n\n\n
\n\nHigh-impact side panel edits should also warn the user of destructive edits with a warning before changes are saved.\n\n\n\n\n\n\n\n Example of a warning screen in a side panel before a user saves changes\n\n\n\n
\n\n### Full page\n\nWhen an object was created in a full-page flow, or the volume of editable fields is high, use a full-page edit dialog.\n\n\n\n\n\n\nExample of a full-page edit view\n\n\n
\n\n\n\n\n\n\n\n Example of a modal warning users of the consequences of saving after a\n full-page edit\n\n\n\n
\n\n## Optional extras\n\n### Summary of changes\n\nAdding a summary of changes to the warning stage of a high-impact flow can help the user manage and understand all of the changes they have made.\n\n\n\n\n\n\nExample of a summary of changes in a modal\n\n\n
\n\n### Non-editable fields\n\nWhen a small number of fields are not editable, display their set value in a disabled field.\n\n\n\n\n\n\nExample of a single non-editable field\n\n\n
\n\nWhere a majority of variables are not editable, consider using an option that will display only editable fields. In a small number of cases, make individual variables editable in modals.\n\n### Success notifications\n\nAn optional success notification can be used to confirm that the user's changes have been saved.\n\n\n\n\n\n\nExample of a successful editing toast notification\n\n\n
\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/experimental/edit-pattern/index.mdx"}}}}