Add an official alert/flash component

[anthony-robin]

Currently, there is no alert/flash component working out of the box.

An experiment was made with v1.x on this Codepen but it does not work anymore with v2.x.

Here is the original issue on the main repo asking for alert/flash: picocss#12

What do you think about this new component ?

[Yohn]

Yeah, I would like to have an alert type role in place for PicoCSS.

role="alert" docs

I'm completely open for a pull request as long as we're following the guidelines in the docs above to some degree.

The codepen definitely has a good starting point to work off of, we should use the v2 variables instead of creating more that have the same values.

For the green and red colors, I'd like to use the del and ins colors, for both dark and light modes. Not sure about a warning or info colors, we'll have to investigate what color codes are used within the pico colors.

This would also be good to work as a classless alert, so a default alert color scheme without classes, and then for more robust alert we could add the classes. Maybe there's an aria attribute that can be used instead of classes for the different type of alerts.

From the docs:

The alert role is of the five live region roles. Dynamic changes that are less urgent should use a less aggressive method, such as including aria-live="polite" or using an other live region role like status. If the user is expected to close the alert, then the alertdialog role should be used instead.

[Yohn]

Something like the following for a default, classless alert may work.

[role="alert"] {
	background-color: var(--pico-primary-focus);
	display: block;
	padding: calc(var(--pico-spacing) * 0.5);
	margin-block-start: calc(var(--pico-spacing) * 0.5);
	border-radius: var(--pico-border-radius);
	border: var(--pico-border-width) solid var(--pico-primary);
	color: var(--pico-primary-inverse);
}

[Znote]

I missed this feature, went looking for it only to find this thread.

A nice additional feature would be to be able to close/hide the alert after it has been presented.

[Yohn]

Codepen
That codepen has some different variations I created for the alerts. I didn't add a close / hide option, but one could be added, maybe when I get done with a clients project this week I can circle back to add the alerts to my fork here.