ILIAS icon indicating copy to clipboard operation
ILIAS copied to clipboard

UI/Input: align/unify HTML structure

Open nhaagen opened this issue 9 months ago • 3 comments

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 ;)

nhaagen avatar May 16 '24 13:05 nhaagen