This is a collection of interesting form-implementations
Some extra's for fieldset components.
Better classes
The classes on taxonomy-terms has been changed to:
{%
set classes = [
'js-form-wrapper',
'form-wrapper',
'fieldset',
element['#type'] == 'checkboxes' ? 'fieldset--checkboxes',
element['#type'] == 'radios' ? 'fieldset--radios',
element['#type'] == 'radios' ? 'fieldset--' ~ element['#name']|clean_class,
]
%}
Which gives you the following classes:
// Default Drupal classes
.js-form-wrapper {}
.form-wrapper {}
// new classes
.fieldset {}
// if the fieldset is being used by checkboxes
.fieldset--checkboxes {}
// if the fieldset is being used by radiobuttons
.fieldset--radios {}
.fieldset--name-of-radiobuttons-field {}Note: Fieldset is by default being used by Drupal Core Checkboxes and Radio buttons. This component gives us a few classes to accomodate this.
More theme-able HTML
Instead of using the <legend> html inside <fieldset> we are using a <h3>. While being a bit less semantic, it does give us a way easier way of theming those titles.
Theming of fieldset siblings
When using fieldsets in sequence after each other, there will be a line drawn between the different fieldsets. (screenshot 1)
Theming of nested fieldset
Fieldset's are often used inside other fieldsets by Drupal. To normalise how they look and to give us sanity theming them, the theming for nested fieldset's is resetted.
The fieldset-title of the nested fieldset will be themed the same way as normal field labels. (screenshot 2)
This is the same as the Form component but with very basic CSS added.
Better classes
The classes on a form has been changed to:
{%
set classes = [
'form',
'form--' ~ element['#form_id']|clean_class
]
%}Which gives you the following classes:
.form {}
.forn--user-login-form {}
Extra template suggestions
Added a more specific template suggestion. One based upon the ID of the form.
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'form' -->
<!-- FILE NAME SUGGESTIONS:
x form--user-login-form.html.twig
* form.html.twig
-->In above example:
user-login-formis the ID of the form
Extra functions
Create the possibility to have form-specific preprocess functions.
So inside form--user-login-form.theme you could now have this function:
<?php
/**
* Implements template_preprocess_hook().
*/
function compony_preprocess_form__user_login_form(&$variables, $hook) {
// Do custom preprocessing here,
// only for the user-login-form.
}(Docs: Extending hooks yourself)
Default theming for form-item components and some extra functionality.
Better classes
The classes on form-element-label are now:
{%
set wrapper_classes = [
'form-item__label',
variation ? 'form-item__label--' ~ variation,
title_display == 'invisible' ? 'form-item__label--visually-hidden',
required ? 'is-required',
]
%}Which gives you the following classes:
.form-item__label {}
// In case you've added a variation from the backend
.form-item__label--my-custom-variation {}
// In case a label is visually hidden
.form-item__label--visually-hidden {}
// In case the form item is required
.is-required {}
Making more variables available in Twig
In this component 1 extra variable have been added that is available in the template:
{{ variation }} can contain any string, that is passed along from the backend.
An example of how this works can be found in the Checkbox component.
Some very basic CSS
Some resetting CSS to keep the theming sane.
Some default theming for form-item--checkboxes.
This is a javascript-free implementation that respects keyboard accessibility and has a disabled state.
We also have the theming for a switcher variation of the checkbox included.
The essentials of displaying form-item date-inputs.
By default we change the type of the input field from
<input type="date">to
<input type="text">for cross-browser-consistency.
There is also a few variations of this component:
Some default theming for form-item--radiobuttons.
This is a javascript-free implementation that respects keyboard accessibility and has a disabled state.
Theming of the form-item--select using the Select2 library.
The component is fully accessible, and will give you a filter search bar when you have more than 20 options.
The HTML for textarea components.
Theming is found in the general theming component because abstracting textarea-specific CSS is more confusing than clarifying.
Next to adding a Twig block for libraries, this component does nothing special.
A variation of the textarea component that resizes as you type.
This is using the Autosize libarary.
Using this component will make each textarea component autogrow by default.
