Allow to define CSS classes for any element

Author: Dominic Tubach

README.md

@@ -61,6 +61,29 @@ be achieved with this CSS selector:
 ```css
 :not(.json-forms-description-tooltip)
 ```
+### Custom CSS Classes
+
+For any control and layout it is possible to specify CSS classes in the UI
+schema that will be added to the generated HTML code. The classes can be set at
+the property `cssClasses` in the `options` property, e.g.:
+
+```json
+{
+  "type": "VerticalLayout",
+  "elements": [
+    {
+      "type": "Control",
+      "scope": "#/properties/name",
+      "options": {
+        "cssClasses": ["my-name-control-class"]
+      }
+    }
+  ],
+  "options": {
+    "cssClasses": ["my-layout-class"]
+  }
+}
+```
 
 ## Limitations
 

src/Form/FormArrayFactory.php

@@ -53,6 +53,16 @@ public function createFormArray(DefinitionInterface $definition, FormStateInterf
           $formState->set(['form', $definition->getPropertyFormName()], $form);
         }
 
+        if (is_array($definition->getOptionsValue('cssClasses'))
+          && [] !== $definition->getOptionsValue('cssClasses')
+        ) {
+          $form['#attributes']['class'] ??= [];
+          $form['#attributes']['class'] = [
+            ...$form['#attributes']['class'],
+            ...$definition->getOptionsValue('cssClasses'),
+          ];
+        }
+
         return $form;
       }
     }

src/JsonForms/Definition/Control/ControlDefinition.php

@@ -216,13 +216,7 @@ public function getOptions(): ?\stdClass {
     return $this->controlSchema->options ?? NULL;
   }
 
-  /**
-   * @param string $key
-   * @param mixed $default
-   *
-   * @return mixed
-   */
-  public function getOptionsValue(string $key, $default = NULL) {
+  public function getOptionsValue(string $key, mixed $default = NULL): mixed {
     return $this->controlSchema->options->{$key} ?? $default;
   }
 

src/JsonForms/Definition/Custom/CustomDefinition.php

@@ -50,6 +50,14 @@ public function __construct(
     $this->rootDefinition = $rootDefinition ?? $this;
   }
 
+  public function getOptions(): ?\stdClass {
+    return $this->uiSchema->options ?? NULL;
+  }
+
+  public function getOptionsValue(string $key, mixed $default = NULL): mixed {
+    return $this->uiSchema->options->{$key} ?? $default;
+  }
+
   /**
    * {@inheritDoc}
    */

src/JsonForms/Definition/Custom/MarkupDefinition.php

@@ -52,6 +52,14 @@ public function getContentMediaType(): string {
     return $this->markupSchema->contentMediaType;
   }
 
+  public function getOptions(): ?\stdClass {
+    return $this->markupSchema->options ?? NULL;
+  }
+
+  public function getOptionsValue(string $key, mixed $default = NULL): mixed {
+    return $this->markupSchema->options->{$key} ?? $default;
+  }
+
   /**
    * {@inheritDoc}
    */

src/JsonForms/Definition/DefinitionInterface.php

@@ -23,6 +23,10 @@
 
 interface DefinitionInterface {
 
+  public function getOptions(): ?\stdClass;
+
+  public function getOptionsValue(string $key, mixed $default = NULL): mixed;
+
   /**
    * @param mixed $default
    *

src/JsonForms/Definition/Layout/LayoutDefinition.php

@@ -94,13 +94,7 @@ public function getOptions(): ?\stdClass {
     return $this->layoutSchema->options ?? NULL;
   }
 
-  /**
-   * @param string $key
-   * @param mixed $default
-   *
-   * @return mixed
-   */
-  public function getOptionsValue(string $key, $default = NULL) {
+  public function getOptionsValue(string $key, mixed $default = NULL): mixed {
     return $this->layoutSchema->options->{$key} ?? $default;
   }