From cc8278dbcefd3cd094b01e4ffa47a462eadd8993 Mon Sep 17 00:00:00 2001
From: Florent Torregrosa
<14238-florenttorregrosa@users.noreply.drupalcode.org>
Date: Mon, 3 Jul 2023 11:36:42 +0200
Subject: [PATCH] Issue #3359437 by mademo, Grimreaper, pdureau: Field display:
respect label inline or above
---
assets/css/component/field.css | 3 +++
templates/overrides/system/field.html.twig | 18 +++++++++++++++---
ui_suite_bootstrap.libraries.yml | 5 +++++
3 files changed, 23 insertions(+), 3 deletions(-)
create mode 100644 assets/css/component/field.css
diff --git a/assets/css/component/field.css b/assets/css/component/field.css
new file mode 100644
index 00000000..2ba4f0c3
--- /dev/null
+++ b/assets/css/component/field.css
@@ -0,0 +1,3 @@
+.field--label--inline::after {
+ content: ":";
+}
diff --git a/templates/overrides/system/field.html.twig b/templates/overrides/system/field.html.twig
index b68d67a9..e28e4067 100644
--- a/templates/overrides/system/field.html.twig
+++ b/templates/overrides/system/field.html.twig
@@ -38,18 +38,30 @@
* @ingroup themeable
*/
#}
+{{ attach_library('ui_suite_bootstrap/field') }}
{%
set title_classes = [
+ 'field--label',
+ 'field--label--' ~ label_display|clean_class,
label_display == 'visually_hidden' ? 'visually-hidden',
+ label_display == 'inline' ? 'float-start',
+ label_display == 'inline' ? 'pe-2',
+ 'fw-bold',
]
%}
-<div{{ attributes.addClass(classes) }}>
+{% set field_items_attributes = create_attribute({
+ 'class': [
+ 'field--items',
+ multiple and label_display == 'inline' ? 'float-start',
+ ]
+}) %}
+<div{{ attributes }}>
{% if not label_hidden %}
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
{% endif %}
- <div class="field__items">
+ <div{{ field_items_attributes }}>
{% for item in items %}
- <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+ <div{{ item.attributes.addClass('field--item') }}>{{ item.content }}</div>
{% endfor %}
</div>
</div>
diff --git a/ui_suite_bootstrap.libraries.yml b/ui_suite_bootstrap.libraries.yml
index b8a524c1..51644822 100644
--- a/ui_suite_bootstrap.libraries.yml
+++ b/ui_suite_bootstrap.libraries.yml
@@ -45,6 +45,11 @@ example_carousel:
theme:
assets/css/example/carousel.css: {}
+field:
+ css:
+ component:
+ assets/css/component/field.css: {}
+
form:
css:
component:
--
GitLab