Skip to content

UCPKN-3880: Pass attributes to modal and toast sections. #693

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Oct 20, 2025
Merged

UCPKN-3880: Pass attributes to modal and toast sections. #693

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6a5ccbb
UCPKN-3879: Allow passing attributes to modal header, body and footer.
kp77 Sep 23, 2025
70fce48
UCPKN-3880: Allow passing attributes to toast elements, add custom co…
kp77 Oct 1, 2025
b982b7d
UCPKN-3880: Add test for toast without close button.
kp77 Oct 10, 2025
2dafe73
UCPKN-3880: Avoid overriding toast close button aria-label attribute.
kp77 Oct 10, 2025
d0eb1aa
Merge branch 'development' into UCPKN-3880
tibi2303 Oct 20, 2025
71addc9
UCPKN-3880: Updated tests.
tibi2303 Oct 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions src/components/bcl-modal/__snapshots__/modal.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ exports[`OE - modal renders correctly 1`] = `
class="modal-content"
>
<div
class="modal-header"
class="test-class modal-header"
>
<h5
class="modal-title"
Expand All @@ -32,7 +32,7 @@ exports[`OE - modal renders correctly 1`] = `
/>
</div>
<div
class="modal-body"
class="test-class modal-body"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Expand All @@ -48,7 +48,7 @@ exports[`OE - modal renders correctly 1`] = `
</p>
</div>
<div
class="modal-footer"
class="test-class modal-footer"
>
<button
class="btn btn-secondary"
Expand Down Expand Up @@ -86,7 +86,7 @@ exports[`OE - modal renders correctly small 1`] = `
class="modal-content"
>
<div
class="modal-header"
class="test-class modal-header"
>
<h5
class="modal-title"
Expand All @@ -102,7 +102,7 @@ exports[`OE - modal renders correctly small 1`] = `
/>
</div>
<div
class="modal-body"
class="test-class modal-body"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Expand All @@ -118,7 +118,7 @@ exports[`OE - modal renders correctly small 1`] = `
</p>
</div>
<div
class="modal-footer"
class="test-class modal-footer"
>
<button
class="btn btn-secondary"
Expand Down Expand Up @@ -156,7 +156,7 @@ exports[`OE - modal renders correctly with fullscreen breakpoint 1`] = `
class="modal-content"
>
<div
class="modal-header"
class="test-class modal-header"
>
<h5
class="modal-title"
Expand All @@ -172,7 +172,7 @@ exports[`OE - modal renders correctly with fullscreen breakpoint 1`] = `
/>
</div>
<div
class="modal-body"
class="test-class modal-body"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Expand All @@ -188,7 +188,7 @@ exports[`OE - modal renders correctly with fullscreen breakpoint 1`] = `
</p>
</div>
<div
class="modal-footer"
class="test-class modal-footer"
>
<button
class="btn btn-secondary"
Expand Down Expand Up @@ -226,7 +226,7 @@ exports[`OE - modal renders correctly with scrollable modal 1`] = `
class="modal-content"
>
<div
class="modal-header"
class="test-class modal-header"
>
<h5
class="modal-title"
Expand All @@ -242,7 +242,7 @@ exports[`OE - modal renders correctly with scrollable modal 1`] = `
/>
</div>
<div
class="modal-body"
class="test-class modal-body"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Expand All @@ -258,7 +258,7 @@ exports[`OE - modal renders correctly with scrollable modal 1`] = `
</p>
</div>
<div
class="modal-footer"
class="test-class modal-footer"
>
<button
class="btn btn-secondary"
Expand Down Expand Up @@ -297,7 +297,7 @@ exports[`OE - modal renders correctly with static backdrop 1`] = `
class="modal-content"
>
<div
class="modal-header"
class="test-class modal-header"
>
<h5
class="modal-title"
Expand All @@ -313,7 +313,7 @@ exports[`OE - modal renders correctly with static backdrop 1`] = `
/>
</div>
<div
class="modal-body"
class="test-class modal-body"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Expand All @@ -329,7 +329,7 @@ exports[`OE - modal renders correctly with static backdrop 1`] = `
</p>
</div>
<div
class="modal-footer"
class="test-class modal-footer"
>
<button
class="btn btn-secondary"
Expand Down Expand Up @@ -367,7 +367,7 @@ exports[`OE - modal renders correctly with verticaly centered modal 1`] = `
class="modal-content"
>
<div
class="modal-header"
class="test-class modal-header"
>
<h5
class="modal-title"
Expand All @@ -383,7 +383,7 @@ exports[`OE - modal renders correctly with verticaly centered modal 1`] = `
/>
</div>
<div
class="modal-body"
class="test-class modal-body"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Expand All @@ -399,7 +399,7 @@ exports[`OE - modal renders correctly with verticaly centered modal 1`] = `
</p>
</div>
<div
class="modal-footer"
class="test-class modal-footer"
>
<button
class="btn btn-secondary"
Expand Down
20 changes: 16 additions & 4 deletions src/components/bcl-modal/modal.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,10 @@
- body (block) (default: '')
- footer (block) (default: '')
- attributes (drupal attrs)

- header_attributes (drupal attrs)
- body_attributes (drupal attrs)
- footer_attributes (drupal attrs)

Blocks
- header
- messages
Expand All @@ -29,9 +32,12 @@
{% set _verticaly_centered = verticaly_centered ?? false %}
{% set _scrollable = scrollable ?? false %}
{% set _header = header|default('') %}
{% set _header_attributes = header_attributes ?: create_attribute() %}
{% set _messages = messages|default('') %}
{% set _body = body|default('') %}
{% set _body_attributes = body_attributes ?: create_attribute() %}
{% set _footer = footer|default('') %}
{% set _footer_attributes = footer_attributes ?: create_attribute() %}

{% set _classes = ['modal', 'fade'] %}

Expand Down Expand Up @@ -62,16 +68,22 @@
>
<div class="modal-content">
{% if header is not empty %}
<div class="modal-header">
<div
{{- _header_attributes.addClass(['modal-header']) -}}
>
{%- block header _header -%}
</div>
{% endif %}
{%- block messages _messages -%}
<div class="modal-body">
<div
{{- _body_attributes.addClass(['modal-body']) -}}
>
{%- block body _body -%}
</div>
{% if footer is not empty %}
<div class="modal-footer">
<div
{{- _footer_attributes.addClass(['modal-footer']) -}}
>
{%- block footer _footer -%}
</div>
{% endif %}
Expand Down
79 changes: 75 additions & 4 deletions src/components/bcl-toasts/__snapshots__/toasts.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,22 @@ exports[`OE - Toasts render correctly with body wrapper classes 1`] = `
class="toast"
role="alert"
>
<div
class="test-class toast-header"
>
Toast title
<button
aria-label="Close"
class="test-class btn-close"
data-bs-dismiss="toast"
type="button"
/>
</div>
<div
class="wrapper-class another-wrapper-class"
>
<div
class="toast-body"
class="test-class toast-body"
>
Hello, world! This is a toast message.

Expand All @@ -35,6 +46,9 @@ exports[`OE - Toasts render correctly with body wrapper classes 1`] = `
</div>
</div>
</div>
<p>
Toast custom content.
</p>
</div>
</jest>
`;
Expand Down Expand Up @@ -69,7 +83,7 @@ exports[`OE - Toasts render correctly with multiple toasts 1`] = `
just now
</small>
<button
aria-label="close"
aria-label="Close"
class="btn-close"
data-bs-dismiss="toast"
type="button"
Expand Down Expand Up @@ -101,7 +115,7 @@ exports[`OE - Toasts render correctly with multiple toasts 1`] = `
2 seconds ago
</small>
<button
aria-label="close"
aria-label="Close"
class="btn-close"
data-bs-dismiss="toast"
type="button"
Expand All @@ -127,7 +141,61 @@ exports[`OE - Toasts renders correctly with a single toast 1`] = `
role="alert"
>
<div
class="toast-body"
class="test-class toast-header"
>
Toast title
<button
aria-label="Close"
class="test-class btn-close"
data-bs-dismiss="toast"
type="button"
/>
</div>
<div
class="test-class toast-body"
>
Hello, world! This is a toast message.

<div
class="mt-2 pt-2 border-top"
>
<button
class="btn btn-primary btn-sm me-1"
type="button"
>
Take action
</button>
<button
class="btn btn-secondary btn-sm"
data-bs-dismiss="toast"
type="button"
>
Close
</button>
</div>
</div>
<p>
Toast custom content.
</p>
</div>
</jest>
`;

exports[`OE - Toasts renders correctly with a single toast without close button 1`] = `
<jest>
<div
aria-atomic="true"
aria-live="assertive"
class="toast"
role="alert"
>
<div
class="test-class toast-header"
>
Toast title
</div>
<div
class="test-class toast-body"
>
Hello, world! This is a toast message.

Expand All @@ -149,6 +217,9 @@ exports[`OE - Toasts renders correctly with a single toast 1`] = `
</button>
</div>
</div>
<p>
Toast custom content.
</p>
</div>
</jest>
`;
25 changes: 17 additions & 8 deletions src/components/bcl-toasts/toasts.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@
- toasts (object[]) format: [
{
- body (string) (default: '')
- body_attributes (drupal attrs)
- header (string) (default: '')
- header_attributes (drupal attrs)
- button_attributes (drupal attrs)
- custom_content (string) (default: '')
- role (string) (default: 'alert')
- with_close (boolean) (default: true)
- autohide (boolean) (default: false)
Expand Down Expand Up @@ -66,6 +71,9 @@
{% set _with_body_wrapper = _toast.with_body_wrapper ?? false %}
{% set _body_wrapper_classes = _toast.body_wrapper_classes|default('') %}
{% set _toast_attributes = _toast.attributes ?: create_attribute() %}
{% set _body_attributes = _toast.body_attributes ?: create_attribute() %}
{% set _header_attributes = _toast.header_attributes ?: create_attribute() %}
{% set _button_attributes = _toast.button_attributes ?: create_attribute() %}
{% set _toast_attributes = _toast_attributes.addClass(_classes).setAttribute('aria-atomic', 'true') %}
{% if _aria_live is not empty %}
{% set _toast_attributes = _toast_attributes.setAttribute('aria-live', _aria_live) %}
Expand All @@ -82,16 +90,16 @@
{% if _with_close or
(_toast.header is defined and _toast.header is not empty)
%}
<div class="toast-header">
<div{{ _header_attributes.addClass(['toast-header']) }}>
{{- _toast.header|default('') -}}
{% if _with_close %}
{% set button_attributes = create_attribute()
.addClass(['btn-close'])
.setAttribute('aria-label', 'close')
.setAttribute('data-bs-dismiss', 'toast')
%}
{% if not _button_attributes.hasAttribute('aria-label') %}
{% set _button_attributes = _button_attributes.setAttribute('aria-label', 'Close') %}
{% endif %}
{%- include '@oe-bcl/bcl-button/button.html.twig' with {
attributes: button_attributes,
attributes: _button_attributes
.addClass(['btn-close'])
.setAttribute('data-bs-dismiss', 'toast'),
clean_class: true
} only -%}
{% endif %}
Expand All @@ -104,12 +112,13 @@
{% endif %}
>
{% endif %}
<div class="toast-body">
<div{{ _body_attributes.addClass(['toast-body']) }}>
{{- _body -}}
</div>
{% if _with_body_wrapper %}
Copy link
Collaborator

@tibi2303 tibi2303 Oct 10, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we didnt approach correctly these toasts in the first version and now with your changes, it becomes even more complex.. I think we can simplify it but I need to think of the impact
I dont like: _body_wrapper_classes _with_body_wrapper parameters and by removing them we would have a more simple template. We can leave it like this for now.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I was also wondering about the body wrapper (there's no mention of that in the Bootstrap docs).

</div>
{% endif %}
{{- _toast.custom_content|default('') -}}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Based on: https://getbootstrap.com/docs/5.3/components/toasts/#custom-content

</div>
{% endfor %}
{% endif %}
Expand Down
Loading
Loading