Issue #3281381: Description toggle (help icon) does not adhere to description... (8c32f195) · Commits · project / gin

dist/css/components/description_toggle.css

+0 −6

Original line number	Diff line number	Diff line
		@@ -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;
		}

styles/components/description_toggle.scss

+0 −8

Original line number	Diff line number	Diff line
		@@ -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;

templates/form/datetime-wrapper.html.twig

+4 −3

Original line number	Diff line number	Diff line
		@@ -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>

templates/form/details.html.twig

+3 −2

Original line number	Diff line number	Diff line
		@@ -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 %}

templates/form/fieldset.html.twig

+25 −5

Original line number	Diff line number	Diff line
		@@ -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 %}