Alert tag

[pgregorova]

Yet another common tag or component we tend to use on each project, so wanted to add it in. :)

I just created some basic styles for success, warning, error and information messaging.

[bstaruk]

Looks good to me! We could craft some JS around this tag to make the alerts disappear after some time (like a toast notification, optional of course), or closable with an icon, but that doesn't have to be in this PR.

[CSKingMartin]

BEM stylings dictate this should be Alert__body instead of Alert-body. It also looks like you aren't adding any styles to this div. Is it necessary to include?

[CSKingMartin]

Some documentation here would be great! Even if it's minimal! I think some explanation on the contexts of each variant would be very useful here.

[pgregorova]

I have updated documentation and extended "global colors" within our variables. In addition, I have extended the alert type based on level it's being used, as it seems to be a common trend across projects (page/form and field-level type)

That was also partially the reason why I had that body inner container for alerts that may be page-level where the colored background extends to edges of your viewport but the messaging retains body copy width and is centered.

Additionally, I assumed we may have an example with close button as well.

[CSKingMartin]

I think this conversation is important. I think what we want to add to FC are elements that are atomic enough we don't need to generalize them. You had good thoughts on including that internal container, and a close button. But because those are things we have to 'cut' to make this new tag general enough for FC, is that a component we want to include in our starting library? Thoughts @drolsen @elseloop @bstaruk ?

[pgregorova]

With @bstaruk we’ve been debating hat maybe some of these tags don’t necesaeily need to merged into master, maybe just keep them in dev, or have a branch with our internal components we tend to reuse a lot on projects.

When it comes to alerts, I’ve been seeing them as one of the common tags in our pattern libraries, as almost every site out there has some form of notifications.

Let’s definiteky keep talking on what we should consider adding to our base and what we should archive some place for easy reuse upon needs.

[drolsen]

I'm seeing this as a "when needed" vs. baseline tag as well. However, I don't want us to lose these (and more) great pieces of work by not capturing them somewhere useful for us. I think it might be time for us to create a third branch called "library" that sits along develop and master.

I propose each dev will need to determine if what they are pushing is going to be for this new library branch or baseline develop from now on and PR accordingly.

We will continue our normal review process to ensure we all have a chance to agree upon any changes requested. As we start new projects, we simply keep library in our back pockets and pick what we need, when we need, and modify from there.

Thoughts?

[pgregorova]

@drolsen I have pushed few more updates and improvements to this tag, including your svg fix #314.

[CSKingMartin]

It looks like you may have intended this example to be labeled 'Default Example' in the HTML, and the below example to read 'Success alert'

[CSKingMartin]

It would be helpful to create color variables for these background-colors in the 'variables/colors.css' file. That way they are more easily targeted when a project gets up and running. They would fit well under the /* general colors */ comment.

[pgregorova]

I've made bunch updates and improvements while making sure it also passes accessibility. All there is left to resolve the SVG issue, so all the icons would render as expected.

Then we can decide where we could add this component, within FC core or elsewhere for future use on new projects.

[pgregorova]

Just wanted to let you @bstaruk @CSKingMartin and @drolsen know that I have updated this branch with Atomic FC and moved Alert to be part of molecules, instead of atoms