{"action":"opened","issue":{"url":"https://api.github.com/repos/seek-oss/seek-style-guide/issues/330","repository_url":"https://api.github.com/repos/seek-oss/seek-style-guide","labels_url":"https://api.github.com/repos/seek-oss/seek-style-guide/issues/330/labels{/name}","comments_url":"https://api.github.com/repos/seek-oss/seek-style-guide/issues/330/comments","events_url":"https://api.github.com/repos/seek-oss/seek-style-guide/issues/330/events","html_url":"https://github.com/seek-oss/seek-style-guide/issues/330","id":259354753,"number":330,"title":"Alert styles","user":{"login":"georgespyropoulos","id":1896277,"avatar_url":"https://avatars2.githubusercontent.com/u/1896277?v=4","gravatar_id":"","url":"https://api.github.com/users/georgespyropoulos","html_url":"https://github.com/georgespyropoulos","followers_url":"https://api.github.com/users/georgespyropoulos/followers","following_url":"https://api.github.com/users/georgespyropoulos/following{/other_user}","gists_url":"https://api.github.com/users/georgespyropoulos/gists{/gist_id}","starred_url":"https://api.github.com/users/georgespyropoulos/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/georgespyropoulos/subscriptions","organizations_url":"https://api.github.com/users/georgespyropoulos/orgs","repos_url":"https://api.github.com/users/georgespyropoulos/repos","events_url":"https://api.github.com/users/georgespyropoulos/events{/privacy}","received_events_url":"https://api.github.com/users/georgespyropoulos/received_events","type":"User","site_admin":false},"labels":[{"id":668020519,"url":"https://api.github.com/repos/seek-oss/seek-style-guide/labels/rfc","name":"rfc","color":"0052cc","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-09-21T02:11:15Z","updated_at":"2017-09-21T02:11:15Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"# Summary\r\n\r\nAlert styles are a way to highlight certain pieces of copy to give them the correct visual weight and tone to communicate a message to the user.\r\n\r\nBig thanks to @stephaniemoss for putting this together!  I am merely the messenger here\r\n\r\n# Motivation\r\n\r\nCurrently our styling for these types of alerts is inconsistent, so there is no pattern to deal with them. This means they get implemented in different ways across streams and products which can confuse the user.\r\n\r\nHaving a consistent set of patterns for dealing with alerts helps with overall communication, consistency and gives everyone the tools to make sure their copy is seen and understood in the right contexts.\r\n\r\n# Detailed design\r\n\r\nThe alerts are a set of visual patterns that have different types and a hierarchy that can be applied to a number of different implementations.\r\n\r\n## There are 4 types of alerts:\r\n\r\n### Positive\r\n\r\nThis alert uses green and ticks. It is used for positive and success alerts to let the user know that something has succeeded.\r\n\r\n![image](https://user-images.githubusercontent.com/1896277/30675283-f8f29e44-9ec2-11e7-9660-beeda8aa68ba.png)\r\n\r\n### Info\r\n\r\nThis alert uses purple and an i within a circle (info icon). It is used for important information that a user should definitely read.\r\n\r\n![image](https://user-images.githubusercontent.com/1896277/30675302-0b7deb90-9ec3-11e7-8d81-2cf761681005.png)\r\n\r\n### Critical\r\n\r\nThis alert uses pink and an exclamation mark in a triangle (error icon). It is used for errors to let a user know that something has gone wrong and they can’t continue.\r\n\r\n![image](https://user-images.githubusercontent.com/1896277/30675324-25e9e01a-9ec3-11e7-8161-b5f59b184600.png)\r\n\r\n### Help\r\n\r\nThis alert uses grey and a question mark in a circle (help icon). It is used for helpful but not critical information, usually accessed voluntarily by the user in case they need further instructions or help.\r\n\r\n![image](https://user-images.githubusercontent.com/1896277/30675345-41816726-9ec3-11e7-94fb-d576f86d41d2.png)\r\n\r\n## There are three different alert levels\r\n\r\n### Primary\r\n\r\nUsed when you want the alert to be loud and draw attention. Dark background, light text, light icons.\r\n\r\n![image](https://user-images.githubusercontent.com/1896277/30675473-2750c562-9ec4-11e7-8607-64d9642e6383.png)\r\n\r\n\r\n### Secondary\r\n\r\nUsed when you want the alert to be on a normal volume level. Light background, dark text, dark icons, underline.\r\n\r\n![image](https://user-images.githubusercontent.com/1896277/30675470-24692150-9ec4-11e7-8144-bb9fb439dd59.png)\r\n\r\n\r\n### Tertiary\r\n\r\nUsed when the alert should be integrated into the design and not confused with another type of element like a button. Dark icon and text but no background tint or underline.\r\n\r\n![image](https://user-images.githubusercontent.com/1896277/30675469-2238cc14-9ec4-11e7-9c72-177357a418bf.png)\r\n\r\n## Generic anatomy\r\n\r\n![image](https://user-images.githubusercontent.com/1896277/30675494-3b97437a-9ec4-11e7-9a3c-064f311b6b7f.png)\r\n\r\n## Colour specifications \r\n\r\n![image](https://user-images.githubusercontent.com/1896277/30675502-4deb43c8-9ec4-11e7-9cb0-8387b119ee0c.png)\r\n![image](https://user-images.githubusercontent.com/1896277/30675507-52a171e4-9ec4-11e7-9187-3ac61fbd8157.png)\r\n\r\n## Example in use\r\n\r\n![image](https://user-images.githubusercontent.com/1896277/30675520-5c7e5dd0-9ec4-11e7-98ab-3418fde40a5d.png)\r\n\r\n## Example usages\r\n\r\nAll images and design details are available here\r\n\r\n[Alert styles.zip](https://github.com/seek-oss/seek-style-guide/files/1319741/Alert.styles.zip)\r\n\r\n# How We Teach This\r\n\r\nSince this is a new feature, there won't be any need to communicate any breaking changes to styleguide consumers.  Alert styles will have their own demo page will which allow designers and developers to view all variations and options that can be applied to alerts.\r\n\r\n# Drawbacks\r\n\r\nCan't see any reason why we shouldn't have alert styles...\r\n\r\n# Alternatives\r\n\r\nThe current designs are comprehensive and have been through multiple iterations.  The zip file under 'Example uses' shows how the alert styles could be used in across seek's products\r\n\r\nThe impact of not doing this is that alert styles are not currently uniform, even for teams that use the styleguide heavily.  This RFC is attempting to make alert styling uniform across seek\r\n\r\n# Unresolved questions\r\n\r\nShould we build all alert options initially or start with an MVP and add features incrementally\r\n"}}
{"actor":{"display_login":"georgespyropoulos"}}