HI,
I wonder if it is possible to define custom css class names via the UI-Schema? At least I did not find this in the documentation.
I am using the vanilla renderer.
===
Ralph
HI,
I wonder if it is possible to define custom css class names via the UI-Schema? At least I did not find this in the documentation.
I am using the vanilla renderer.
===
Ralph
Hi @rsoika,
Sadly this is not supported yet for the React Vanilla renderers. We implemented this only for the newer Vue Vanilla renderers.
OK, but how do you think about this? Couldnât we just introduce a new optional attribute and evaluate it to the cell implementation (e.g. customClassName)
Somehow analogue to the âorientationâ feature which we added to the radio button?
Do you think this could work and would you agree with such a change?
export const TextAreaCell = (props: CellProps & VanillaRendererProps) => {
const { data, className, id, enabled, config, uischema, path, handleChange } =
props;
const appliedUiSchemaOptions = merge({}, config, uischema.options);
return (
<textarea
value={data || ''}
onChange={(ev) =>
handleChange(path, ev.target.value === '' ? undefined : ev.target.value)
}
// compute additonal class names ...????
className={className ... + appliedUiSchemaOptions.customClassName}
id={id}
disabled={!enabled}
autoFocus={appliedUiSchemaOptions.focus}
placeholder={appliedUiSchemaOptions.placeholder}
/>
);
};
Yes something like this would work but is very specialized to the cell. I would prefer a much more generic approach like we implemented in the Vue Vanilla renderers.
For example, we hand over styles.control.input
in the string renderer.
This is how the styles
object is created. What happens is that:
options.styles
of the respective UI Schema element with the highest priorityStep 1 and 2 is already there in React Vanilla, although itâs not as cleanly implemented. In React Vanilla some HTML elements do not receive a CSS class and some styles are hard coded and canât be overwritten. Both of these things should be refactored.
Step 3 has no current equivalent in React Vanilla. It would be great to introduce that and should be rather simple with our already existing useVanilla
HOCs. I would like to suggest to follow the same pattern as we do in Vue Vanilla in constructing such a styles
object for each renderer.
In your example of a TextRenderer/Cell the respective UI Schema control could then define
options: {
styles: {
control: {
input: "my-custom-class"
}
}
}
And the TextAreaCell
would then receive a styles
object with control.input
set to `âmy-custom-classâ.