Alert component: ds-c-alert__body div no longer fills entire Alert when using display: flex

[anthony-kopczyk]

Describe the bug

We're seeing the ds-c-alert__body class no longer filling the entire Alert component, causing 'display: flex' children of the Alert to no longer fill the entire Alert component.

Our team is in the midst of upgrading to v6 from v4 of the medicare design system (should be v4 of general design system). For the MFA nudge banner, we're using an Alert component with some CSS to adjust coloring. With v5 of the design system we're seeing the ds-c-alert__body class no longer fills the entire Alert. Because of this, the 'close' button on the nudge banner is no longer right justified, since the body doesn't fill the entire width (We're using display: flex).

I'm guessing this is related to the addition of the screen reader text. It may have modified layout some. I didn't find an immediate cause looking through the CSS. For now, we'll probably override the CSS but reverting the v4 behavior would be preferable so we don't need overrides.

To Reproduce

• Create Alert component with the children being a
  with display: flex with children of its own.
• See the children don't fill the entire width of the component.

Expected behavior

The children fo an Alert component should fill the entire width of the component when using display: flex.

Screenshots
For these screenshots I removed our customized coloration to rule that out as a factor.

v4 of medicare DS

v5 and v6 of medicare DS (apologies if this is already resolved in DS 7)

Desktop (please complete the following information):

• OS: Mac OS Big Sur 11.6
• Browser Chrome
• Version Version 107.0.5304.110 (Official Build) (arm64)

Additional context

Reiterating, we're using the medicare design system. So version numbers above are for medicare design system releases, not the base.

[pwolfert]

Hey @anthony-kopczyk, thanks for reaching out! The alert component has indeed undergone some changes between v4 and v6.

Because dismissable alerts is not a pattern that we currently support and have guidance on, we're going to need to check in with Melissa before we make the change (after she gets back next week). I do know that this pattern has been discussed in the past by Medicare.gov designers, and we've talked about potentially doing discovery on a related toast component, but at the moment no decision has been made about officially supporting this specific usage.

If it's blocking your upgrade, I suggest you update your override for now to put flex-grow: 1 on .ds-c-alert__body. We'd also need to do some tests to make sure that change in our core design system wouldn't have negative downstream effects on supported behaviors.

We'll hopefully have an answer for you next week!

[pwolfert]

CC @line47, @babsdenney

[krithimurthy]

Hi @anthony-kopczyk, following up on this one more time, sorry it took some time! We spoke with Melissa about this and have established that we won't be making this change at the moment, as the dismissible alert pattern needs further discovery for a potentially new component in the design system.

That being said, we also recognize that our alert documentation is confusing and contradictory, so we will be updating that to further emphasize that our design systems don't currently support dismissible functionality.

Like @pwolfert stated above, we suggest to continue with an override for now.

Thanks for bringing this to our attention and we'll loop you in when it gets prioritized in the future!