Update form label template (#20)

Update form label template
govau · Nov 6, 2019 · b410170 · b410170
2 parents 10c8758 + 7b307fd
commit b410170
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 7 deletions.
diff --git a/dta_uikit_base.theme b/dta_uikit_base.theme
@@ -8,10 +8,16 @@
  *
  **/
 
-// /* Turns the 'wrapped label' setting on for checkboxes. */
-// function dta_uikit_base_preprocess_input__checkbox(&$variables) {
-//  $variables['element']['#wrapped_label'] = TRUE;
-// }
+/* Alters the template for checkbox labels so it works properly. */
+function dta_uikit_base_preprocess_form_element(&$variables) {
+  if ($variables['element']['#type'] === 'checkbox' || $variables['element']['#type'] === 'radio' ){
+    $variables['label']['#theme'] = 'form_element_label__design_system';
+    $variables['title'] = $variables['element']['#title'];
+    $variables['element']['#design_system_label'] = TRUE;
+  }
+}
+
+
 //
 // /* Turns the 'wrapped label' setting on for radio buttons. */
 // function dta_uikit_base_preprocess_input__radio(&$variables) {
@@ -27,8 +33,12 @@ function dta_uikit_base_theme_suggestions_form_element_alter(array &$suggestions
   }
 }
 
-function dta_uikit_base_theme_suggestions_form_element_label_alter(array &$suggestions, array $variables) {
-  $suggestions[] = 'form_element_label';
+function dta_uikit_base_theme_suggestions_form_element_label__design_system_alter(array &$suggestions, array $variables) {
+  if (!empty($variables['element']['#design_system_label'])) {
+    $suggestions[] = 'form_element_label__design_system';
+  } else {
+    $suggestions[] = 'form_element_label';
+  }
 }
 //
 // function dta_uikit_base_preprocess_form_element__wrapped(&$variables) {

diff --git a/templates/form/form-element-label--design-system.html.twig b/templates/form/form-element-label--design-system.html.twig
@@ -0,0 +1,26 @@
+{#
+/**
+ * @file
+ * Theme override for a form element label.
+ *
+ * Available variables:
+ * - title: The label's text.
+ * - title_display: Elements title_display setting.
+ * - required: An indicator for whether the associated form element is required.
+ * - attributes: A list of HTML attributes for the label.
+ *
+ * @see template_preprocess_form_element_label()
+ */
+#}
+{%
+  set classes = [
+    title_display == 'after' ? 'option',
+    title_display == 'invisible' ? 'visually-hidden',
+    required ? 'js-form-required',
+    required ? 'form-required',
+    'au-control-input__text',
+  ]
+%}
+{% if title is not empty or required -%}
+  <label{{ attributes.addClass(classes) }}>{{ title }}</label>
+{%- endif %}
diff --git a/templates/form/form-element-label.html.twig b/templates/form/form-element-label.html.twig
@@ -18,7 +18,7 @@
     title_display == 'invisible' ? 'visually-hidden',
     required ? 'js-form-required',
     required ? 'form-required',
-    'au-control-input__text',
+    'au-label',
   ]
 %}
 {% if title is not empty or required -%}