Skip to content
Snippets Groups Projects
Commit 8c32f195 authored by Volker Killesreiter's avatar Volker Killesreiter Committed by Sascha Eggenberger
Browse files

Issue #3281381: Description toggle (help icon) does not adhere to description...

Issue #3281381: Description toggle (help icon) does not adhere to description display settings correctly
parent 45c49e3d
No related branches found
No related tags found
No related merge requests found
......@@ -68,12 +68,6 @@
width: 50px !important;
}
.help-icon__element-has-description input:not(.form-checkbox):not(.form-autocomplete):not(.form-file),
.help-icon__element-has-description select {
max-width: calc(100% - 34px);
/* 1 */
}
.field-group-details.help-icon__description-container .help-icon__description-toggle {
margin-top: 0;
}
......
......@@ -53,14 +53,6 @@
}
}
// Subtract description toggle width from input fields
.help-icon__element-has-description {
input:not(.form-checkbox):not(.form-autocomplete):not(.form-file),
select {
max-width: calc(100% - 34px); /* 1 */
}
}
// Detail summary
.field-group-details.help-icon__description-container .help-icon__description-toggle {
margin-top: 0;
......
......@@ -8,11 +8,12 @@
* @see template_preprocess_form_element()
*/
#}
{% set show_description_toggle = description_toggle and description %}
{%
set classes = [
'form-item',
'form-datetime-wrapper',
description_toggle ? 'help-icon__description-container',
show_description_toggle ? 'help-icon__description-container',
]
%}
{%
......@@ -30,13 +31,13 @@
]
%}
<div {{ attributes.addClass(classes) }}>
{% if description and description_toggle %}
{% if show_description_toggle %}
<div class="help-icon">
{% endif %}
{% if title %}
<h4{{ title_attributes.addClass(title_classes) }}>{{ title }}</h4>
{% endif %}
{% if description and description_toggle %}
{% if show_description_toggle %}
{{ attach_library('gin/gin_description_toggle') }}
<button class="help-icon__description-toggle"></button>
</div>
......
......@@ -24,12 +24,13 @@
@todo Remove prefix after https://www.drupal.org/node/2981732 has been solved.
#}
{% set show_description_toggle = description_toggle and description %}
{%
set classes = [
'claro-details',
accordion ? 'claro-details--accordion',
accordion_item ? 'claro-details--accordion-item',
description_toggle ? 'help-icon__description-container',
show_description_toggle ? 'help-icon__description-container',
]
%}
{%
......@@ -68,7 +69,7 @@
<summary{{ summary_attributes.addClass(summary_classes) }}>
{{- title -}}
<span class="required-mark"></span>
{% if description and description_toggle %}
{% if show_description_toggle %}
{{ attach_library('gin/gin_description_toggle') }}
<button class="help-icon__description-toggle"></button>
{% endif %}
......
......@@ -3,10 +3,30 @@
* @file
* Theme override for a fieldset element and its children.
*
* Available variables:
* - attributes: HTML attributes for the fieldset element.
* - errors: (optional) Any errors for this fieldset element, may not be set.
* - required: Boolean indicating whether the fieldset element is required.
* - legend: The legend element containing the following properties:
* - title: Title of the fieldset, intended for use as the text of the legend.
* - attributes: HTML attributes to apply to the legend.
* - description: The description element containing the following properties:
* - content: The description content of the fieldset.
* - attributes: HTML attributes to apply to the description container.
* - description_display: Description display setting. It can have these values:
* - before: The description is output before the element.
* - after: The description is output after the element (default).
* - invisible: The description is output after the element, hidden visually
* but available to screen readers.
* - children: The rendered child elements of the fieldset.
* - prefix: The content to add before the fieldset children.
* - suffix: The content to add after the fieldset children.
*
* @see template_preprocess_fieldset()
* @see claro_preprocess_fieldset()
*/
#}
{% set show_description_toggle = description_toggle and description.content %}
{%
set classes = [
'fieldset',
......@@ -15,7 +35,7 @@
'form-item',
'js-form-wrapper',
'form-wrapper',
description_toggle ? 'help-icon__description-container',
show_description_toggle ? 'help-icon__description-container',
]
%}
{%
......@@ -43,11 +63,11 @@
{%
set description_classes = [
'fieldset__description',
description_display == 'invisible' ? 'visually-hidden',
show_description_toggle == 'invisible' ? 'visually-hidden',
]
%}
<fieldset{{ attributes.addClass(classes) }}>
{% if description.content and description_toggle %}
{% if show_description_toggle %}
<div class="help-icon">
{% endif %}
{# Always wrap fieldset legends in a <span> for CSS positioning. #}
......@@ -56,7 +76,7 @@
<span{{ legend_span.attributes.addClass(legend_span_classes) }}>{{ legend.title }}</span>
</legend>
{% endif %}
{% if description.content and description_toggle %}
{% if show_description_toggle %}
{{ attach_library('gin/gin_description_toggle') }}
<button class="help-icon__description-toggle"></button>
</div>
......@@ -81,7 +101,7 @@
{{ errors }}
</div>
{% endif %}
{% if description_display == 'after' and description.content %}
{% if description_display in ['after', 'invisible'] and show_description_toggle %}
<div{{ description.attributes.addClass(description_classes) }}>{{ description.content }}</div>
{% endif %}
......
......@@ -10,6 +10,7 @@
Most of core-provided js assumes that the CSS class pattern js-form-item-[something] or
js-form-type-[something] exists on form items. We have to keep them.
#}
{% set show_description_toggle = description_toggle and description.content %}
{%
set classes = [
'js-form-item',
......@@ -22,7 +23,7 @@ js-form-type-[something] exists on form items. We have to keep them.
title_display not in ['after', 'before'] ? 'form-item--no-label',
disabled == 'disabled' ? 'form-item--disabled',
errors ? 'form-item--error',
description.content ? 'help-icon__description-container'
show_description_toggle ? 'help-icon__description-container'
]
%}
{%
......@@ -33,7 +34,7 @@ js-form-type-[something] exists on form items. We have to keep them.
%}
<div{{ attributes.addClass(classes) }}>
{% if label_display in ['before', 'invisible'] %}
{% if description_toggle %}
{% if show_description_toggle %}
<div class="help-icon">
{{ label }}
{{ attach_library('gin/gin_description_toggle') }}
......@@ -43,7 +44,7 @@ js-form-type-[something] exists on form items. We have to keep them.
{{ label }}
{% endif %}
{% endif %}
{% if description.content and description_toggle %}
{% if show_description_toggle %}
<div class="help-icon__element-has-description">
{% endif %}
{% if prefix is not empty %}
......@@ -59,7 +60,7 @@ js-form-type-[something] exists on form items. We have to keep them.
<span class="form-item__suffix{{disabled == 'disabled' ? ' is-disabled'}}">{{ suffix }}</span>
{% endif %}
{% if label_display == 'after' %}
{% if description.content and description_toggle %}
{% if show_description_toggle %}
<div class="help-icon">
{{ label }}
{{ attach_library('gin/gin_description_toggle') }}
......@@ -69,7 +70,7 @@ js-form-type-[something] exists on form items. We have to keep them.
{{ label }}
{% endif %}
{% endif %}
{% if description.content and description_toggle %}
{% if show_description_toggle %}
</div>
{% endif %}
{% if errors %}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment