Add a Twig component to display flash messages

config/services.php

@@ -82,6 +82,7 @@
 use EasyCorp\Bundle\EasyAdminBundle\Router\UrlSigner;
 use EasyCorp\Bundle\EasyAdminBundle\Security\AuthorizationChecker;
 use EasyCorp\Bundle\EasyAdminBundle\Security\SecurityVoter;
+use EasyCorp\Bundle\EasyAdminBundle\Twig\Component\Banner;
 use EasyCorp\Bundle\EasyAdminBundle\Twig\Component\Flag;
 use EasyCorp\Bundle\EasyAdminBundle\Twig\Component\Icon;
 use EasyCorp\Bundle\EasyAdminBundle\Twig\EasyAdminTwigExtension;
@@ -403,5 +404,8 @@
 
         ->set(Flag::class)
             ->tag('twig.component')
+
+        ->set(Banner::class)
+            ->tag('twig.component')
     ;
 };

src/Config/Enum/BannerVariant.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace EasyCorp\Bundle\EasyAdminBundle\Config\Enum;
+
+enum BannerVariant: string
+{
+    case Primary = 'primary';
+    case Secondary = 'secondary';
+    case Success = 'success';
+    case Danger = 'danger';
+    case Warning = 'warning';
+    case Info = 'info';
+    case Light = 'light';
+    case Dark = 'dark';
+
+    public function asCssClass(): string
+    {
+        return $this->value;
+    }
+}
+

src/Twig/Component/Banner.php

@@ -0,0 +1,16 @@
+<?php
+
+namespace EasyCorp\Bundle\EasyAdminBundle\Twig\Component;
+
+use EasyCorp\Bundle\EasyAdminBundle\Config\Enum\BannerVariant;
+
+class Banner
+{
+    public BannerVariant|string $variant = BannerVariant::Info;
+    public bool $withDismissButton = false;
+
+    public function getVariantCssClass(): string
+    {
+        return \is_string($this->variant) ? $this->variant : $this->variant->asCssClass();
+    }
+}

templates/components/Banner.html.twig

@@ -0,0 +1,13 @@
+{% set css_class = html_classes({
+    'alert': true,
+    'alert-dismissible': withDismissButton,
+}) %}
+{% set css_class = css_class ~ ' alert-' ~ this.getVariantCssClass() %}
+
+<div {{ attributes.defaults({class: css_class, role: 'alert'}) }}>
+    <twig:block name="content"></twig:block>
+
+    {% if withDismissButton %}
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    {% endif %}
+</div>

templates/flash_messages.html.twig

@@ -7,10 +7,9 @@
     <div id="flash-messages">
         {% for label, messages in flash_messages %}
             {% for message in messages %}
-                <div class="alert alert-{{ label }} alert-dismissible fade show" role="alert">
-                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                <twig:ea:Banner :variant="label" :withDismissButton="true">
                     {{ message|trans|raw }}
-                </div>
+                </twig:ea:Banner>
             {% endfor %}
         {% endfor %}
     </div>