81 lines
3.0 KiB
ReStructuredText
81 lines
3.0 KiB
ReStructuredText
.. include:: /Includes.rst.txt
|
|
|
|
.. _feature-94868:
|
|
|
|
===========================================================================
|
|
Feature: #94868 - Introduce Bootstrap 5 compatible and accessible templates
|
|
===========================================================================
|
|
|
|
See :issue:`94868`
|
|
|
|
Description
|
|
===========
|
|
|
|
Until now, CSS classes of the frontend templates and partials of the Form
|
|
Framework were not consistently included in the form configuration. So far
|
|
some classes were present in the form configuration, others were hardcoded
|
|
only in the Fluid templates.
|
|
|
|
This situation has now been fixed for the Bootstrap 5 compatible template
|
|
variants stored in :file:`EXT:form/Resources/Private/Frontend/Version2`.
|
|
All CSS classes are consistently defined in the form configuration.
|
|
|
|
This simplifies the integration of the frontend. The change makes it easier for
|
|
integrators to make upgrades of the frontend framework. In most cases, it is
|
|
now no longer necessary to override a Fluid template for changes to classes.
|
|
Instead, it is only necessary to add the appropriate CSS classes to the
|
|
form configuration.
|
|
|
|
In order not to be breaking, by default the templates are still rendered
|
|
as they used to be.
|
|
|
|
To use the new Bootstrap 5 compatible templates the form rendering option
|
|
:yaml:`templateVariant` must be set from :yaml:`version1` to :yaml:`version2` in your form setup:
|
|
|
|
.. code-block:: yaml
|
|
|
|
TYPO3:
|
|
CMS:
|
|
Form:
|
|
prototypes:
|
|
standard:
|
|
formElementsDefinition:
|
|
Form:
|
|
renderingOptions:
|
|
templateVariant: version2
|
|
|
|
The CSS classes for the Bootstrap 5 compatible templates are defined
|
|
in the variant with the name :yaml:`template-variant` for each form element.
|
|
This is an example of the text element:
|
|
|
|
.. code-block:: yaml
|
|
|
|
TYPO3:
|
|
CMS:
|
|
Form:
|
|
prototypes:
|
|
standard:
|
|
formElementsDefinition:
|
|
Text:
|
|
variants:
|
|
-
|
|
identifier: template-variant
|
|
condition: 'getRootFormProperty("renderingOptions.templateVariant") == "version2"'
|
|
properties:
|
|
containerClassAttribute: 'form-element form-element-text mb-3'
|
|
elementClassAttribute: form-control
|
|
labelClassAttribute: form-label
|
|
|
|
To be able to access the configuration of the root element (type "Form")
|
|
in conditions, a new function :php:`getRootFormProperty()` has been introduced,
|
|
which can be used to access the properties of the "Form" element.
|
|
In the context of the "template-variant" variants this is used to determine
|
|
the template variant defined on the "Form" element in order to change the
|
|
CSS configuration properties or to add new ones.
|
|
|
|
In the course of Bootstrap 5 compatibility two new breakpoints "xl" and
|
|
"xxl" were added to the grid configuration which are also available in the
|
|
form editor.
|
|
|
|
.. index:: Frontend, ext:form
|