Closed nedjo closed 3 years ago
A bit more detail...
The best way to get a feel for how Component Schema works is through the components that ship with the Bulma Components module, which is built using Component Schema. See for example variables for the button component (based on the Bulma CSS framework's button element). One of the variables (analogous fields in ui_patterns
) is state
, defined as follows:
state:
label: 'The state of the button'
nullable: true
type: component_string
constraints:
AllowedValues:
- is-hovered
- is-focused
- is-active
- is-loading
- is-static
provides_class: true
documentation_url: https://bulma.io/documentation/elements/button/#states
The type: component_string
here references a data type as defined in component_schema.types.yml
, a format that's pretty much identical to that of a Drupal configuration schema definition:
# Extends the string type.
component_string:
label: 'Component string'
class: '\Drupal\component_schema\Component\Schema\ComponentStringData'
definition_class: '\Drupal\component_schema\Component\Schema\ComponentVariableDataDefinition'
Defining custom data classes makes it possible to provide specific data handling useful in UI components. In this case, a component_string
type is a specialized string value type that provides either an HTML class or an HTML attribute that will be added programmatically to an Attribute
object.
How exactly? The state
variable of the button component specifies provides_class: true
. Component Schema includes a Twig extension, process_component()
, that can be called from within a component template. In this case, the button component's template includes the line:
{% set errors = process_component() %}
The Twig extension invokes a data initialization call on each of the component's variables. When we get to state
, this is handled in the addClass()
method of the ComponentStringData
class.
Since the variables have already been processed based on the schema data, further logic is not needed in the template. It's enough to just render the attributes:
<{{ tag }}{{ attributes }}>
Did integration via a sub-module in the Component Schema module, see [meta] Integrate with UI Patterns module and sub-issues.
The Component Schema module parallels some of what's in UI Patterns. Are there opportunities to integrate with UI Patterns?
Modelled on core's configuration schema API, Component Schema offers a fairly large set of data types and supports features like multiple values, nested variables, and components embedded in another component. Building on core's typed data API and types, Component Schema provides a set of custom types and definitions.
A sample schema for a card component shows the use of:
type: sequence
)type: component_mapping
)is_common_variable: true
)component_type: bicon
)A sample schema for a button component shows the use of custom types that are processed in a Twig extension to provide classes; see use of
component_boolean
andcomponent_string
types, defined respectively inComponentBooleanData
andComponentStringData
.