Skip to content

Commit

Permalink
feature #6642 Add a Twig component to display flash messages (javiere…
Browse files Browse the repository at this point in the history
…guiluz)

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
  • Loading branch information
javiereguiluz committed Dec 15, 2024
2 parents 28dc420 + 0e878ab commit 81e468d
Show file tree
Hide file tree
Showing 9 changed files with 85 additions and 6 deletions.
15 changes: 15 additions & 0 deletions assets/css/easyadmin-theme/base.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
:root {
color-scheme: light dark;
}

/* Reset styles
========================================================================= */
html, body {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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; }
Expand Down
4 changes: 4 additions & 0 deletions config/services.php
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -403,5 +404,8 @@

->set(Flag::class)
->tag('twig.component')

->set(Alert::class)
->tag('twig.component')
;
};
2 changes: 1 addition & 1 deletion public/app.b1430af9.css → public/app.fc5841f9.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/entrypoints.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"entrypoints": {
"app": {
"css": [
"/app.b1430af9.css"
"/app.fc5841f9.css"
],
"js": [
"/app.1ecd6d7a.js"
Expand Down
2 changes: 1 addition & 1 deletion public/manifest.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
34 changes: 34 additions & 0 deletions src/Twig/Component/Alert.php
Original file line number Diff line number Diff line change
@@ -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;
}
}
20 changes: 20 additions & 0 deletions src/Twig/Component/Option/AlertVariant.php
Original file line number Diff line number Diff line change
@@ -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;
}
}
7 changes: 7 additions & 0 deletions templates/components/Alert.html.twig
Original file line number Diff line number Diff line change
@@ -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>
5 changes: 2 additions & 3 deletions templates/flash_messages.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 81e468d

Please sign in to comment.