Allow Alert to be more customizable, include an option for a custom icon

[sydk-adhoc]

Hello.

We have a lot of code on MCT to customize Alerts for our own purposes. These customizations include styling the header and injecting custom icons, which we're currently laying out using absolute positioning.

Have you considered allowing more cusomization, particularly the injection of custom icons?

Thanks

[jack-ryan-nava-pbc]

Thanks for raising this question @sydk-adhoc!

So the variation of the alert is tied to the aria roles and icons that are used by the design system. I get that this might feel like a limitation but the idea is to enforce some consistency.

Are you finding that there are consistent icons and styles your team is applying? Because we could consider adding new variations if that would be helpful.

@sophia-cmsds what are your thoughts here?

[sophia-cmsds]

I'd also be curious as to what icons and styles your team is applying @sydk-adhoc -- Jack's correct, the icons and styling are as such and limited to customization out of an effort to keep alerts fairly standardized. From what I understand, the decisions made around those icons and styling were the product of a lot of consideration, but that was before my time.

It might be worth coming to an office hours to talk about it with the team?

[sydk-adhoc]

Thanks, @sophia-cmsds. I'll look for your office hours and see if I can attend. I'd have to walk you through some scenarios where we use custom icons.

[sydk-adhoc]

Here is one example, which you can see if you navigate MCT to the first step of enrolling in a plan. In this case, all we're doing is using a DS icon. Given that there's no slot or prop for a custom icon, this is all being done with some funky absolute positioning, which isn't ideal. It would be nice if the component were open for this kind of customization. Obviously, if someone tried to insert an icon that wasn't configured correctly, it wouldn't work well, but that seems fine to me, so long as the parameters were clear.

It seems more cumbersome to have to request new Alert variations anytime we'd like to use a different icon. Also, without any notion of backports in the DS (at least, as far as I know, and I think I've asked for one exception in the past 4 years) -- including for bugfixes -- as long as we're behind on the DS, we can't take advantage of anything you've added unless we go through a full upgrade process. At this point, that's what we're looking at. We're just now working on migration from MGov v10 -> v11, and current is v14

[jonathanstegall]

Coming across this one, another use case for custom icons is for teams that use a totally different icon set when they extend the CMS Design System. For example, my team has its own design system that extends the CMS one, and it uses the USWDS icon set because it's quite a bit larger, so for the alert component we'd intended to use roughly equivalent icons to the aria role, but being able to switch it out gives us a more consistent style with the rest of the application's icon usage. But in this case the alert component is one of the exceptions where we'd have to do funky absolute positioning (as noted above) to use those equivalent USWDS icons.