Alert Component

[gregoryspragginsjr]

Hey Brandon, During our little audit we noticed that we never got around to building an alert component for you guys, which you'll inevitably need incase of an emergency or immediate global announcement (the design is tucked in the original style guide for the site). I've gone ahead and put this together (https://github.com/ColbyCommunications/colby-college-theme/commit/02a7a18da28f499a9b55fb679fcaecc2d16d77c7) + added the necessary fields to the staging site backend in the CMS Global Settings. Take a look and feel free to close this after verifying and making sure it suits your needs.

[bwaltz]

@gregoryspragginsjr Awesome, good catch! Question, I wanna try to format the block like this:

with the button in its small size, displaying inline at the end of the text. But when I put the invocation of the button next to the paragraph text in the twig

I get:

Any thoughts?

[gregoryspragginsjr]

@bwaltz Hey Brandon, that to me looks like a second button might've been added in your backend. In Global Settings make sure you didn't add 2 buttons accidentally (Be sure to close the corresponding row all the way). Then reload, and check your results. I'm playing around on staging now, and am not able to reproduce. Let me know if you'd like to connect on this today via chat as Im relatively free and working on the last bit of animation / micro interactions for you all.

[bwaltz]

@gregoryspragginsjr here's what the settings look like on my local, currently:

[bwaltz]

@gregoryspragginsjr there doesn't look to be any extra buttons, just the one. I'm not sure why moving the button resulted in several button styles being applied.

[gregoryspragginsjr]

@bwaltz Hey Brandon; missed your messages here.

I've pulled the alert component in, and have been able to replicate the issue you highlight here; its certainly an odd one. I have no idea why the component seems to want to add extra mark-up; it could be stemming from a twig / vue encoding issue, and semantics around trying to squeeze the button-group into a p tag.

Is there a particular reason why you'd like these buttons inline with the paragraph instead of off to the right like the original design? I anticipate, even with we get this to work, you could run into spacing issues because of this. Do you have any objections with placing it simply at the bottom of the paragraph. (Its currently doing this on mobile). Let me know.

[bwaltz]

@gregoryspragginsjr The most common scenario is that we won't have that much text in these alerts. For example, a typical one might look like this:

Andrew commented that there was lots of space between text and button in many situations. I was trying to think of a solution. Do you have a good solution?

[gregoryspragginsjr]

@bwaltz Cool, and yes I do. We can make this work without plopping it into the paragraph; we'll just need to amend the flex spacing. You should see a new commit come in soon. Have a good morning.

[gregoryspragginsjr]

Update: This commit (https://github.com/ColbyCommunications/colby-college-theme/commit/642c341a003965a965a4b402ac3b2a75361e66a0) should help with that spacing concern. Let me know your thoughts @bwaltz