Skip to content

Commit 10c8758

Browse files
author
Jesse Boyd
authored
Update form style (#19)
Update form style
2 parents b505ae1 + e21f449 commit 10c8758

File tree

3 files changed

+146
-18
lines changed

3 files changed

+146
-18
lines changed

‎dta_uikit_base.theme

+25-18
Original file line numberDiff line numberDiff line change
@@ -8,28 +8,35 @@
88
*
99
**/
1010

11-
/* Turns the 'wrapped label' setting on for checkboxes. */
12-
function dta_uikit_base_preprocess_input__checkbox(&$variables) {
13-
$variables['element']['#wrapped_label'] = TRUE;
14-
}
15-
16-
/* Turns the 'wrapped label' setting on for radio buttons. */
17-
function dta_uikit_base_preprocess_input__radio(&$variables) {
18-
$variables['element']['#wrapped_label'] = TRUE;
19-
}
20-
11+
// /* Turns the 'wrapped label' setting on for checkboxes. */
12+
// function dta_uikit_base_preprocess_input__checkbox(&$variables) {
13+
// $variables['element']['#wrapped_label'] = TRUE;
14+
// }
15+
//
16+
// /* Turns the 'wrapped label' setting on for radio buttons. */
17+
// function dta_uikit_base_preprocess_input__radio(&$variables) {
18+
// $variables['element']['#wrapped_label'] = TRUE;
19+
// }
20+
//
2121
function dta_uikit_base_theme_suggestions_form_element_alter(array &$suggestions, array $variables) {
22-
if ($variables['element']['#type'] === 'checkbox' || $variables['element']['#type'] === 'radio') {
23-
$suggestions[] = 'form_element__wrapped';
24-
}
22+
if ($variables['element']['#type'] === 'checkbox') {
23+
$suggestions[] = 'form_element__checkbox';
24+
}
25+
if ($variables['element']['#type'] === 'radio') {
26+
$suggestions[] = 'form_element__radio';
27+
}
2528
}
2629

27-
function dta_uikit_base_preprocess_form_element__wrapped(&$variables) {
28-
$variables['label']['#theme'] = 'form_element_label__open';
29-
$variables['label_open'] = $variables['label'];
30-
unset($variables['label']);
31-
$variables['title'] = $variables['element']['#title'];
30+
function dta_uikit_base_theme_suggestions_form_element_label_alter(array &$suggestions, array $variables) {
31+
$suggestions[] = 'form_element_label';
3232
}
33+
//
34+
// function dta_uikit_base_preprocess_form_element__wrapped(&$variables) {
35+
// $variables['label']['#theme'] = 'form_element_label__open';
36+
// $variables['label_open'] = $variables['label'];
37+
// unset($variables['label']);
38+
// $variables['title'] = $variables['element']['#title'];
39+
// }
3340

3441
/**
3542
* Implements hook_theme_suggestions_block_alter().

‎templates/form/form-element--checkbox.html.twig

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
{#
2+
/**
3+
* @file
4+
* Theme override for a form element.
5+
*
6+
* Available variables:
7+
* - attributes: HTML attributes for the containing element.
8+
* - errors: (optional) Any errors for this form element, may not be set.
9+
* - prefix: (optional) The form element prefix, may not be set.
10+
* - suffix: (optional) The form element suffix, may not be set.
11+
* - required: The required marker, or empty if the associated form element is
12+
* not required.
13+
* - type: The type of the element.
14+
* - name: The name of the element.
15+
* - label: A rendered label element.
16+
* - label_display: Label display setting. It can have these values:
17+
* - before: The label is output before the element. This is the default.
18+
* The label includes the #title and the required marker, if #required.
19+
* - after: The label is output after the element. For example, this is used
20+
* for radio and checkbox #type elements. If the #title is empty but the
21+
* field is #required, the label will contain only the required marker.
22+
* - invisible: Labels are critical for screen readers to enable them to
23+
* properly navigate through forms but can be visually distracting. This
24+
* property hides the label for everyone except screen readers.
25+
* - attribute: Set the title attribute on the element to create a tooltip but
26+
* output no label element. This is supported only for checkboxes and radios
27+
* in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement().
28+
* It is used where a visual label is not needed, such as a table of
29+
* checkboxes where the row and column provide the context. The tooltip will
30+
* include the title and required marker.
31+
* - description: (optional) A list of description properties containing:
32+
* - content: A description of the form element, may not be set.
33+
* - attributes: (optional) A list of HTML attributes to apply to the
34+
* description content wrapper. Will only be set when description is set.
35+
* - description_display: Description display setting. It can have these values:
36+
* - before: The description is output before the element.
37+
* - after: The description is output after the element. This is the default
38+
* value.
39+
* - invisible: The description is output after the element, hidden visually
40+
* but available to screen readers.
41+
* - disabled: True if the element is disabled.
42+
* - title_display: Title display setting.
43+
*
44+
* @see template_preprocess_form_element()
45+
*/
46+
#}
47+
{%
48+
set classes = [
49+
'js-form-item',
50+
'form-item',
51+
'au-control-input',
52+
'js-form-type-' ~ type|clean_class,
53+
'form-item-' ~ name|clean_class,
54+
'js-form-item-' ~ name|clean_class,
55+
title_display not in ['after', 'before'] ? 'form-no-label',
56+
disabled == 'disabled' ? 'form-disabled',
57+
errors ? 'form-item--error',
58+
]
59+
%}
60+
{%
61+
set description_classes = [
62+
'description',
63+
description_display == 'invisible' ? 'visually-hidden',
64+
]
65+
%}
66+
<div{{ attributes.addClass(classes) }}>
67+
{% if label_display in ['before', 'invisible'] %}
68+
{{ label }}
69+
{% endif %}
70+
{% if prefix is not empty %}
71+
<span class="field-prefix">{{ prefix }}</span>
72+
{% endif %}
73+
{% if description_display == 'before' and description.content %}
74+
<div{{ description.attributes }}>
75+
{{ description.content }}
76+
</div>
77+
{% endif %}
78+
{{ children }}
79+
{% if suffix is not empty %}
80+
<span class="field-suffix">{{ suffix }}</span>
81+
{% endif %}
82+
{% if label_display == 'after' %}
83+
{{ label }}
84+
{% endif %}
85+
{% if errors %}
86+
<div class="form-item--error-message">
87+
{{ errors }}
88+
</div>
89+
{% endif %}
90+
{% if description_display in ['after', 'invisible'] and description.content %}
91+
<div{{ description.attributes.addClass(description_classes) }}>
92+
{{ description.content }}
93+
</div>
94+
{% endif %}
95+
</div>

‎templates/form/form-element-label.html.twig

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{#
2+
/**
3+
* @file
4+
* Theme override for a form element label.
5+
*
6+
* Available variables:
7+
* - title: The label's text.
8+
* - title_display: Elements title_display setting.
9+
* - required: An indicator for whether the associated form element is required.
10+
* - attributes: A list of HTML attributes for the label.
11+
*
12+
* @see template_preprocess_form_element_label()
13+
*/
14+
#}
15+
{%
16+
set classes = [
17+
title_display == 'after' ? 'option',
18+
title_display == 'invisible' ? 'visually-hidden',
19+
required ? 'js-form-required',
20+
required ? 'form-required',
21+
'au-control-input__text',
22+
]
23+
%}
24+
{% if title is not empty or required -%}
25+
<label{{ attributes.addClass(classes) }}>{{ title }}</label>
26+
{%- endif %}

0 commit comments

Comments
 (0)