ILIAS
ILIAS copied to clipboard
UI/Input: align/unify HTML structure
This restructures the HTML of Forms, i.e. their input-elements. Central to this PR is tpl.context_form.html:
<fieldset class="c-input"
data-il-ui-type="{TYPE}"
data-il-ui-name="{NAME}"
{DISABLED}>
<!-- BEGIN error -->
<div class="c-input__error-msg" aria-describedby="{ERROR_FOR_ID}" role="alert">{ERROR}</div>
<!-- END error -->
<legend>
<label tabindex="0" <!-- BEGIN for -->for="{ID}" <!-- END for -->>{LABEL}<!-- BEGIN required --><span class="asterisk">*</span><!-- END required --></label>
</legend>
<div class="c-input__field">
{INPUT}
</div>
<!-- BEGIN byline -->
<div class="c-input__help-byline">{BYLINE}</div>
<!-- END byline -->
</fieldset>
All Fields are wrapped into this structure, where dependant fields (again wrapped in form context) will show under <div class="c-input__field">
.
A little gimmick is the pure CSS implementation of Optional/Switchable Groups.
Currently, the CSS ist missing/broken, but @catenglaender is informed and on it, so I have little doubt the visual impacts will be quite small and ultimately for the better ;)