[Component] Alert about doctocat HOT 11 CLOSED

To keep things simple, the best solution is probably to use the existing alert style. Thoughts?

🎨 Figma WIP

cc @ashygee @broccolini @emplums

from doctocat.

Over the summer, we had played around with the idea of a note/alert component similar to this:

https://theme-ui.com/getting-started

from doctocat.

We also discussed having different colors to represent different types of "alerts." Specifically, we discussed blue for information, yellow for warnings, and pink for protips.

from doctocat.

I guess alerts works the same way, except pink is for errors.

from doctocat.

I was reading some Figma documentation today and really liked their note component:

https://help.figma.com/hc/en-us/articles/360039823654-Download-the-Figma-Desktop-App

from doctocat.

Looks cool.

They also seem to have different types of notes:

https://help.figma.com/hc/en-us/articles/360039829154-Receive-Comment-Notifications-in-Slack

https://help.figma.com/hc/en-us/articles/360039829254-ProtoPie-and-Figma

And guessing this is the default box style:

https://help.figma.com/hc/en-us/articles/360039829154-Receive-Comment-Notifications-in-Slack

from doctocat.

Yeah! This style might be too bold for GitHub but I do like that it really stands out on the page and feels kinda slick. I think we could use something outside of the design system though for these notes since they do have a pretty specific purpose that differs from how we use Alerts in .com

from doctocat.

Latest design here: https://www.figma.com/file/qsKUZDH4xE8h6e7p7GBE8e/Doctocat-Extra-components?node-id=291%3A0

from doctocat.

@yaili What different types of alerts do we want to support? It'd be helpful if we could list them all out and assign them colors.

from doctocat.

@colebemis I think we'd have a warning/danger, alert, tip, and default (the blue one, Figma Docs calls it "note").

Would we want to align with names of our Primer components?

from doctocat.

Closed by #167

from doctocat.