From 1af4fb518654bbf57d9f5ac2ee3317c1ddb988b3 Mon Sep 17 00:00:00 2001 From: Timur Tripp Date: Fri, 20 Sep 2024 14:11:31 -0600 Subject: [PATCH 1/4] CuBoulder/tiamat-theme#1318 Corrects spacing issue for checkboxes and radio buttons on webforms --- css/style.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/css/style.css b/css/style.css index eaaf70de..b68f442f 100644 --- a/css/style.css +++ b/css/style.css @@ -1024,6 +1024,13 @@ form label { margin-bottom: 1em; } +.form-type-radio .field-prefix, +.form-type-checkbox .field-prefix, +.form-checkbox, +.form-radio { + margin-right: 0.333rem; +} + .webform-container-inline div, .webform-container-inline div.form-item { display: inline; From cc92d68ea7046b6421d1276972702158aca8fc04 Mon Sep 17 00:00:00 2001 From: Timur Tripp Date: Mon, 23 Sep 2024 10:50:44 -0600 Subject: [PATCH 2/4] CuBoulder/tiamat-theme#1318 Creates `form-element.html.twig` --- css/style.css | 11 +--- templates/form/form-element.html.twig | 95 +++++++++++++++++++++++++++ 2 files changed, 97 insertions(+), 9 deletions(-) create mode 100644 templates/form/form-element.html.twig diff --git a/css/style.css b/css/style.css index b68f442f..7345fe46 100644 --- a/css/style.css +++ b/css/style.css @@ -1024,20 +1024,13 @@ form label { margin-bottom: 1em; } -.form-type-radio .field-prefix, -.form-type-checkbox .field-prefix, -.form-checkbox, -.form-radio { - margin-right: 0.333rem; -} - .webform-container-inline div, .webform-container-inline div.form-item { display: inline; } -form input[type="checkbox"]+label, -form input[type="radio"]+label { +.form-type-checkbox .field-label label, +.form-type-radio .field-label label { display: inline-block; font-weight: normal; } diff --git a/templates/form/form-element.html.twig b/templates/form/form-element.html.twig new file mode 100644 index 00000000..c3a6fb98 --- /dev/null +++ b/templates/form/form-element.html.twig @@ -0,0 +1,95 @@ +{# +/** + * @file + * Theme override for a form element. + * + * Available variables: + * - attributes: HTML attributes for the containing element. + * - errors: (optional) Any errors for this form element, may not be set. + * - prefix: (optional) The form element prefix, may not be set. + * - suffix: (optional) The form element suffix, may not be set. + * - required: The required marker, or empty if the associated form element is + * not required. + * - type: The type of the element. + * - name: The name of the element. + * - label: A rendered label element. + * - label_display: Label display setting. It can have these values: + * - before: The label is output before the element. This is the default. + * The label includes the #title and the required marker, if #required. + * - after: The label is output after the element. For example, this is used + * for radio and checkbox #type elements. If the #title is empty but the + * field is #required, the label will contain only the required marker. + * - invisible: Labels are critical for screen readers to enable them to + * properly navigate through forms but can be visually distracting. This + * property hides the label for everyone except screen readers. + * - attribute: Set the title attribute on the element to create a tooltip but + * output no label element. This is supported only for checkboxes and radios + * in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement(). + * It is used where a visual label is not needed, such as a table of + * checkboxes where the row and column provide the context. The tooltip will + * include the title and required marker. + * - description: (optional) A list of description properties containing: + * - content: A description of the form element, may not be set. + * - attributes: (optional) A list of HTML attributes to apply to the + * description content wrapper. Will only be set when description is set. + * - 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. This is the default + * value. + * - invisible: The description is output after the element, hidden visually + * but available to screen readers. + * - disabled: True if the element is disabled. + * - title_display: Title display setting. + * + * @see template_preprocess_form_element() + */ +#} +{% + set classes = [ + 'js-form-item', + 'form-item', + 'form-type-' ~ type|clean_class, + 'js-form-type-' ~ type|clean_class, + 'form-item-' ~ name|clean_class, + 'js-form-item-' ~ name|clean_class, + title_display not in ['after', 'before'] ? 'form-no-label', + disabled == 'disabled' ? 'form-disabled', + errors ? 'form-item--error', + ] +%} +{% + set description_classes = [ + 'description', + description_display == 'invisible' ? 'visually-hidden', + ] +%} + + {% if label_display in ['before', 'invisible'] %} + {{ label }} + {% endif %} + {% if prefix is not empty %} + {{ prefix }} + {% endif %} + {% if description_display == 'before' and description.content %} + + {{ description.content }} + + {% endif %} + {{ children }} + {% if suffix is not empty %} + {{ suffix }} + {% endif %} + {% if label_display == 'after' %} + {{ label }} + {% endif %} + {% if errors %} +
+ {{ errors }} +
+ {% endif %} + {% if description_display in ['after', 'invisible'] and description.content %} + + {{ description.content }} + + {% endif %} + From 72075ca3809e75f5f41f2a125b1109d370b6d766 Mon Sep 17 00:00:00 2001 From: Timur Tripp Date: Mon, 23 Sep 2024 10:53:51 -0600 Subject: [PATCH 3/4] CuBoulder/tiamat-theme#1318 Updates CSS class name --- css/style.css | 4 ++-- templates/form/form-element.html.twig | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 7345fe46..53a6c8ac 100644 --- a/css/style.css +++ b/css/style.css @@ -1029,8 +1029,8 @@ form label { display: inline; } -.form-type-checkbox .field-label label, -.form-type-radio .field-label label { +.form-type-checkbox .field-label-after label, +.form-type-radio .field-label-after label { display: inline-block; font-weight: normal; } diff --git a/templates/form/form-element.html.twig b/templates/form/form-element.html.twig index c3a6fb98..477682e4 100644 --- a/templates/form/form-element.html.twig +++ b/templates/form/form-element.html.twig @@ -80,7 +80,7 @@ {{ suffix }} {% endif %} {% if label_display == 'after' %} - {{ label }} + {{ label }} {% endif %} {% if errors %}
From f0e1445f61c81626824a82a537b780ff669d3a78 Mon Sep 17 00:00:00 2001 From: Timur Tripp Date: Wed, 25 Sep 2024 10:59:31 -0600 Subject: [PATCH 4/4] CuBoulder/tiamat-theme#1318 Tries nbsp fix (but results in double-space for logged-in users) --- templates/form/form-element.html.twig | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/templates/form/form-element.html.twig b/templates/form/form-element.html.twig index 477682e4..77cef6e6 100644 --- a/templates/form/form-element.html.twig +++ b/templates/form/form-element.html.twig @@ -68,7 +68,7 @@ {{ label }} {% endif %} {% if prefix is not empty %} - {{ prefix }} + {{ prefix }}  {% endif %} {% if description_display == 'before' and description.content %} @@ -77,10 +77,10 @@ {% endif %} {{ children }} {% if suffix is not empty %} - {{ suffix }} +  {{ suffix }} {% endif %} {% if label_display == 'after' %} - {{ label }} +  {{ label }} {% endif %} {% if errors %}