Feature/86 update custom containers

[bencodezen]

The styles are temporarily in a global stylus file and needs refactoring, but until the atomic theme is ready, wanted to split this off to a different PR so people could get access and start using this feature sooner rather than later.

Also, the icons are completely fill-ins and open to us figuring out what icon / symbols we want for each custom container box. And as always, totally open to changes / new style ideas. I mainly migrated existing styles from the current docs.

[phanan]

Hmm… To be honest, I'd prefer to keep the current style as-is, as it already has two elements to explain the intention: color and text/label. The icons don't add anything new IMHO, and instead are prone to unnecessary aesthetical discussions/bikeshedding.

[shentao]

Agree with An on the icons.

[bencodezen]

Since we are planning on a redesign at some point, the idea is to minimize the amount of change that people have to deal with while allowing contributors more ways of breaking up information.

[phanan]

I'm not sure I follow. We already have these components right?

[bencodezen]

Unless I'm mistaken, the existing docs we have the tip and danger container equivalents, but don't have the other ones.

As far as the types go, the naming / color association with the custom containers tend to imply certain things:

• Tip (Green): This is something good to do and basically recommended
• Info (Blue): Neutral information that is worth noting but has neither positive or negative implications
• Warning (Yellow): This is information we think should watch out for, but if you choose to ignore this, it's up to you
• Danger (Red): This is bad and we need you to pay attention to think or else you'll regret it later

Do we already have all of these in the existing docs?

[phanan]

Yeah I’m not sure about availability of current components, but Info definitely is missing there. I would still follow the current vuejs.org color palette and remove the icons though.

On Mon 11. May 2020 at 12:45 Ben Hong notifications@github.com wrote:

Unless I'm mistaken, the existing docs we have the tip and danger container equivalents, but don't have the other ones.

— You are receiving this because your review was requested. Reply to this email directly, view it on GitHub https://github.com/vuejs/docs-next/pull/90#issuecomment-626625802, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB5O3UXPY2JGCOBWBZUCL5LRQ7JM7ANCNFSM4M4XUZBA .

[bencodezen]

@phanan Icons have been removed except for the danger to maintain consistency. The styles will update accordingly once I've migrated the existing site's CSS over to an atomic VuePress theme.

[sdras]

I'm sorry I'm late to the party here, I disagree with removing the icons. We talked through in a few meetings and with Evan that we needed more than one style for information, danger and the like.

• Icons can help with cognitive leaks because the user can immediately identify what kind of information they're seeing, there are studies that show that the use of icons can help a person navigate a site faster and understand meaning quicker

I would love to talk this through. @phanan is there a meeting you can attend? I know it's tough and I can't always join either, but would be good to get comms in one place :)

[phanan]

Sure, I'll try to attend the next meetings. Re: the icons, I do agree that icons can help with cognitive leaks. In this case, however, I'd argue that it's superfluous for the same reason above: labels and colors. Having three elements to convey one message to me is an overkill.

[sdras]

Just so I understand, are you proposing to kill the warning one and keep the others? That's the only one I see that's repetition. The other labels we decided to add.