Skip to content

Use Pajamas alert component for Rails flash

Thomas Hutterer requested to merge flash_alert_use_component into master

What does this MR do and why?

Renders the Rails Flash as a Pajamas Alert ViewComponent. This makes sure our flash alerts follow our design system, without relying on any (outdated) markup in flash.html.haml itself.

Also this resolves #335252 (closed), preventing long content from wrapping around the icon.

Screenshots or screen recordings

For these screenshots I triggered a real flash message, by removing a project member, and then made the flash text content longer in browser devtools, to show the fix.

Before After
image image

How to set up and validate locally

  • Look for a couple of easy-to-reach controller actions that do a flash[:notice] or similar and trigger them in the frontend. Removing a member from a project is one example, but please play with other examples as well.
  • The flash alert should have a colored icon (indicating that we indeed use the new Pajamas alert styles). You can also inspect the HTML and the view annotations will have HTML comments around the flash alert DOM element, with the filename of the view_component.
  • Edit the DOM to give the flash alert a reeeeeally long text, showing the text wrap behavior.
  • Optional: Play around with the component in Lookbook

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Thomas Hutterer

Merge request reports