Add new alert modifiers and new alert variation prototype

[AriannaChau]

Overview

This PR adds two new modifiers for the alert pattern: Adding an icon and adding a floating style.
There's also an alert added to a prototype to get a feel for the intended use of the offline alert.

A couple of other issues can come from this:

• Add more icon background colors
• Adding white background as its own modifier?
• Add positioning for specific offline alert
• Create a new offline/wifi icon

Screenshots

Icon modifier:

Floating modifier:

Alert in practice:

Testing

1. Deploy link (icon)
2. Deploy link (floating)

---

• Fixes Offline variation of alert pattern #1547

[changeset-bot]

🦋 Changeset detected

Latest commit: 4152711

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@cloudfour/patterns	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✔️ Deploy Preview for cloudfour-patterns ready!

🔨 Explore the source changes: 4152711

🔍 Inspect the deploy log: https://app.netlify.com/sites/cloudfour-patterns/deploys/6195919f3454900007c37535

😎 Browse the preview: https://deploy-preview-1557--cloudfour-patterns.netlify.app

[tylersticka]

This is looking great, and I think the list of future issues is spot on.

I left some comments inline. I also notice that when I apply the dark theme to the story, the text disappears.

You may want to consider theming the alert for light and dark containing themes, but then supporting adding a theme class (such as t-light) directly so you'll get the text, link and background colors where desired.

[dromo77]

@tylersticka I'm picking up where Arianna left off with this PR. It looks like she addressed almost all the feedback. I resolved a couple merge conflicts and addressed a small piece of feedback that looked like it hadn't been updated yet. Would you mind taking a look again?

[tylersticka]

Something looks amiss when the alert is full-width at very wide sizes: https://deploy-preview-1557--cloudfour-patterns.netlify.app/?path=/story/components-alert--icon

[dromo77]

Something looks amiss when the alert is full-width at very wide sizes

@tylersticka c-alert__inner has a max-width equal to our size.$max-width-spread token. When the alert only has text, the alert content lines up with the page content. But it's funky when there's an icon. I'm not sure what the best solution. We could remove the max-width with a modifier when there is an icon present. The downside of this is that some alert messages will be constrained and others won't. We could remove the max-width altogether, but that would allow alert content to span the full width of its container. We might also consider changing the style of the icon a bit on very large screens so that it works with the max-width. This is a quick example, but maybe something like this?

[tylersticka]

This is a quick example, but maybe something like this?

@dromo77 I like that idea, it feels the most flexible and responsive. It might look even more purposeful and "on-brand" if the container became a circle past that max-width size?

[tylersticka]

The responsiveness feels great now! Some more feedback left inline, reach out if you have questions or aren't sure where to go next.

[tylersticka]

This icon feels like it could be more consistent with other elements of our patterns.

I think this is especially clear if you compare it to the way our bell icon looks inside of a slashed button:

When searching the Noun Project for "offline," I notice that a common visual is a cloud with a slash through it. Have we missed an opportunity to use a cloud where it makes symbolic sense? 🤔

[dromo77]

I like the idea of using a cloud. What do you think of this @tylersticka?

[tylersticka]

I like that better. Is it possible to make the cloud larger in relation to the slash?

[dromo77]

It's subtle, but here's an update version with the cloud a little larger in proportion to the slash.

[tylersticka]

I like that better!

Can the icon itself be larger within its container? I think I'm reacting to its size relative to the capital "Y" in "You"

[dromo77]

Here it is a little bigger:

[tylersticka]

I like that! How do you feel about it?

[dromo77]

I like it too!

[tylersticka]

Something I just noticed: In general, we want to name our icons based on what they are, not what they're for. So instead of offline, we might name it cloud-slash.

That might seem silly, but in other projects we've run into issues where we name an icon after one feature, it ends up being used for something else, and then later we stop using it for the original feature, so it's sort of in limbo. Better to just name it what it is.

Otherwise, this is great!