CoreMedia Studio uses state mixins to support different component states, such as validation, read-only, highlighting, overflow behavior or text alignment. To apply a state to a component, simply implement the corresponding interface.

The following list contains state mixin interfaces, provided by CoreMedia Studio:

State mixins provide functions to dynamically add or change CSS classes to a component. This is more robust than simply adding a CSS class by passing it to the cls configuration. The following example shows how an error state can be added to a button:

import Panel from "@jangaroo/ext-ts/panel/Panel";
import Button from "@jangaroo/ext-ts/button/Button";
import ValidationState from "@coremedia/studio-client.ext.ui-components/mixins/ValidationState";
import ValidationStateMixin from "@coremedia/studio-client.ext.ui-components/mixins/ValidationStateMixin";

class MyForm extends Panel {

  #newButton: Button & ValidationStateMixin;

  //...

  updateButtonState(): void {
    if (this.#hasErrors()) {
      this.#newButton.validationState = ValidationState.ERROR;
    } else {
      this.#newButton.validationState = null;
    }
  }
}

The Studio Theme provides SCSS mixins that apply styles to CSS classes added by state mixins. Therefore, it is important to always include the Studio Theme SCSS mixin besides the Ext JS SCSS mixin. You can change styles by passing certain parameters or by setting global variables.