Danger pattern guidance #113
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/primer/design/99u5j02mi |
… as prepping locations for mockups
content/ui-patterns/danger.mdx
Outdated
|
|
||
| When users are making a destructive change to their GitHub account, we need to make sure they have a clear understanding of what is about to happen. Many times these changes are reversible, but may have irreversible side effects (making a repository public). Other times, they're not reversible at all (deleting an organization). Either way, we need to ensure that we've done everything we can to make sure there are no gaps in communication that may cause unintended effects so that we don't lose trust with users. | ||
|
|
||
| There are a couple types of data that will need to be modified through our UI. Some of these types are not critical and require no particularly special treatment. These non-critical destructive flows include deleting a comment, issue, pull request, or discussion. |
There was a problem hiding this comment.
Some notes here:
- Could be: "There are some types of data" (instead of "a couple")
- I'm not sure I follow the first sentence though. Would it be easier to determine that this paragraph deals with non-critical destructive flows, and the follow paragraph deals with critical destructive flows if the order of sentences were reversed: "Non-critical destructive flows include deleting a comment, issue, pull request, or discussion. These types of data need to be modified through the UI [still not sure what this means exactly], most aren't critical and require no special treatment."
There was a problem hiding this comment.
Ah - initially, that was going to lead directly into: "critical and non-critical", which is where "a couple" came from.
I'll fix that. Thanks Yaili!
… ready for feedback.
| - All page sections that will trigger a destructive sequence should be highlighted with a [`red border`](https://primer.style/css/utilities/borders#border-colors) and an [`alert` octicon](https://primer.style/octicons/alert-16) to build an accessible, intuitive pattern of recognition. When users notice those details, they should know to tread carefully. Ideally, these will be centralized into a "Danger Zone" section. | ||
| - Any actions that will delete significant user data must use the [`danger button`](https://primer.style/css/components/buttons#danger-button) component. | ||
|
|
||
| <img alt='Visual treatment of Danger Zone' src={Img1} /> |
There was a problem hiding this comment.
@ashygee @vdepizzol In these images where there is a number/caption, do we want to use another style to highlight the relevant part of the image? Or keep the numbers? Figma
|
|
||
| <img alt='Example image of UI describing if or how data can be recovered' src={Img5} /> | ||
|
|
||
| 4. In cases where the data will delete a user account, an organization, or a repository, the user should be asked to enter their password before confirming. |
There was a problem hiding this comment.
@ashygee @vdepizzol following yesterday's conversation, we saw that there are instances where the password is requested currently, and other cases where the name of repo is requested. Should we include that case here too and explain when to do which?
/cc @AnthonyVsShark @yaili @mamuso