feature #6642 Add a Twig component to display flash messages (javiereguiluz)

This PR was squashed before being merged into the 4.x branch.

Discussion
----------

Add a Twig component to display flash messages

We're going to transform the entire UI using Twig Components. We've already have 2 components and this adds the third one.

It's called `Banner` and it can render flash messages / notifications.

Some comments:

* I called it `Banner` to follow GitHub's Primer component naming (https://primer.style/components/banner) I like GitHub components and I'm getting many ideas from them.
* The prop names `withDismissButton` and `variant` are also inspired/copied from GtiHub components
* I created an `Enum` (the first one in this bundle!; this is fine because we now require PHP 8.1 and enums are supported there) to define the possible values of `variant`. I opted for the namespace `Config\Enum\...` because we already have `Config\Option\...` for the constant-based classes. The idea is to turn (in the future) the constants into enums, so we need a different namespace. Do you like `Enum\` or do you prefer a different name?

Thanks!

Commits
-------

0e878ab Add a Twig component to display flash messages

Author: javiereguiluz

assets/css/easyadmin-theme/base.css

@@ -1,3 +1,7 @@
+:root {
+    color-scheme: light dark;
+}
+
 /* Reset styles
    ========================================================================= */
 html, body {
@@ -869,6 +873,14 @@ a.user-menu-wrapper .user-details:hover {
     box-shadow: none;
     outline: none;
     background-size: .75em;
+    padding: .5em;
+    top: .75em;
+    right: .5em;
+}
+.alert .btn-close:focus,
+.alert .btn-close:hover {
+    opacity: 1;
+    background-color: light-dark(rgba(128, 128, 128, 0.2), rgba(128, 128, 128, 0.5));
 }
 
 .alert:last-of-type {
@@ -920,6 +932,9 @@ a.user-menu-wrapper .user-details:hover {
 .ea-dark-scheme .modal-header .btn-close {
     filter: invert(1);
 }
+[data-bs-theme="dark"] .btn-close {
+    filter: none;
+}
 
 /* Utilities */
 .text-primary { color: var(--text-primary-color) !important; }

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\Alert;
 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(Alert::class)
+            ->tag('twig.component')
     ;
 };

public/app.b1430af9.css public/app.fc5841f9.css

@@ -2,7 +2,7 @@
   "entrypoints": {
     "app": {
       "css": [
-        "/app.b1430af9.css"
+        "/app.fc5841f9.css"
       ],
       "js": [
         "/app.1ecd6d7a.js"

public/entrypoints.json

@@ -1,5 +1,5 @@
 {
-  "app.css": "app.b1430af9.css",
+  "app.css": "app.fc5841f9.css",
   "app.js": "app.1ecd6d7a.js",
   "form.js": "form.bcec6c2a.js",
   "page-layout.js": "page-layout.3347892e.js",

public/manifest.json

@@ -0,0 +1,34 @@
+<?php
+
+namespace EasyCorp\Bundle\EasyAdminBundle\Twig\Component;
+
+use EasyCorp\Bundle\EasyAdminBundle\Twig\Component\Option\AlertVariant;
+
+/**
+ * Highlights important messages that require the user's attention, such as notifications and flash messages.
+ * Inspired by https://primer.style/components/banner.
+ */
+class Alert
+{
+    public AlertVariant $variant = AlertVariant::Info;
+    public bool $withDismissButton = false;
+
+    public function mount(string|AlertVariant $variant): void
+    {
+        try {
+            $this->variant = \is_string($variant) ? AlertVariant::from($variant) : $variant;
+        } catch (\ValueError) {
+            throw new \InvalidArgumentException(sprintf('The alert variant "%s" is not valid. Valid values are: %s', $variant, implode(', ', array_map(static fn (AlertVariant $variant): string => $variant->value, AlertVariant::cases()))));
+        }
+    }
+
+    public function getDefaultCssClass(): string
+    {
+        $cssClass = sprintf('alert %s', $this->variant->asBootstrapCssClass());
+        if ($this->withDismissButton) {
+            $cssClass .= ' alert-dismissible';
+        }
+
+        return $cssClass;
+    }
+}

src/Twig/Component/Alert.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace EasyCorp\Bundle\EasyAdminBundle\Twig\Component\Option;
+
+enum AlertVariant: 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 asBootstrapCssClass(): string
+    {
+        return 'alert-'.$this->value;
+    }
+}

src/Twig/Component/Option/AlertVariant.php

@@ -0,0 +1,7 @@
+<div {{ attributes.defaults({class: this.defaultCssClass(), 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/components/Alert.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:Alert variant="{{ label }}" withDismissButton>
                     {{ message|trans|raw }}
-                </div>
+                </twig:ea:Alert>
             {% endfor %}
         {% endfor %}
     </div>