From e21f449a4bca0abc781f131210828c66ba4c272c Mon Sep 17 00:00:00 2001 From: Jesse Boyd Date: Wed, 21 Aug 2019 11:35:30 +1000 Subject: [PATCH] Update form style This commit updates some form templates to take into account changes to how the Design System deals with form structure. --- dta_uikit_base.theme | 43 +++++---- .../form/form-element--checkbox.html.twig | 95 +++++++++++++++++++ templates/form/form-element-label.html.twig | 26 +++++ 3 files changed, 146 insertions(+), 18 deletions(-) create mode 100644 templates/form/form-element--checkbox.html.twig create mode 100644 templates/form/form-element-label.html.twig diff --git a/dta_uikit_base.theme b/dta_uikit_base.theme index 6c9dbd9..b8a641d 100644 --- a/dta_uikit_base.theme +++ b/dta_uikit_base.theme @@ -8,28 +8,35 @@ * **/ -/* Turns the 'wrapped label' setting on for checkboxes. */ -function dta_uikit_base_preprocess_input__checkbox(&$variables) { - $variables['element']['#wrapped_label'] = TRUE; -} - -/* Turns the 'wrapped label' setting on for radio buttons. */ -function dta_uikit_base_preprocess_input__radio(&$variables) { - $variables['element']['#wrapped_label'] = TRUE; -} - +// /* Turns the 'wrapped label' setting on for checkboxes. */ +// function dta_uikit_base_preprocess_input__checkbox(&$variables) { +// $variables['element']['#wrapped_label'] = TRUE; +// } +// +// /* Turns the 'wrapped label' setting on for radio buttons. */ +// function dta_uikit_base_preprocess_input__radio(&$variables) { +// $variables['element']['#wrapped_label'] = TRUE; +// } +// function dta_uikit_base_theme_suggestions_form_element_alter(array &$suggestions, array $variables) { - if ($variables['element']['#type'] === 'checkbox' || $variables['element']['#type'] === 'radio') { - $suggestions[] = 'form_element__wrapped'; - } + if ($variables['element']['#type'] === 'checkbox') { + $suggestions[] = 'form_element__checkbox'; + } + if ($variables['element']['#type'] === 'radio') { + $suggestions[] = 'form_element__radio'; + } } -function dta_uikit_base_preprocess_form_element__wrapped(&$variables) { - $variables['label']['#theme'] = 'form_element_label__open'; - $variables['label_open'] = $variables['label']; - unset($variables['label']); - $variables['title'] = $variables['element']['#title']; +function dta_uikit_base_theme_suggestions_form_element_label_alter(array &$suggestions, array $variables) { + $suggestions[] = 'form_element_label'; } +// +// function dta_uikit_base_preprocess_form_element__wrapped(&$variables) { +// $variables['label']['#theme'] = 'form_element_label__open'; +// $variables['label_open'] = $variables['label']; +// unset($variables['label']); +// $variables['title'] = $variables['element']['#title']; +// } /** * Implements hook_theme_suggestions_block_alter(). diff --git a/templates/form/form-element--checkbox.html.twig b/templates/form/form-element--checkbox.html.twig new file mode 100644 index 0000000..81dcfa5 --- /dev/null +++ b/templates/form/form-element--checkbox.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', + 'au-control-input', + '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 %} + diff --git a/templates/form/form-element-label.html.twig b/templates/form/form-element-label.html.twig new file mode 100644 index 0000000..f853e40 --- /dev/null +++ b/templates/form/form-element-label.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 -%} + {{ title }} +{%- endif %}