web-js
web-js copied to clipboard
Refactor components with modifiers
Components which toggle modifier classes on some elements should be refactored to make them also work, if the element doesn't have a class. The following code snippet does exactly that. Maybe this can be extracted into a utils.js
file
appendModifier = (className: string | undefined, modifier: string): string => {
if (!className) {
return modifier;
}
return className + '--' + modifier;
};
getFirstClass = (element: HTMLElement): string | undefined => {
return element.classList[0];
};
It can the be used like this
const containerOpenClass = this.appendModifier(this.getFirstClass(this.container), 'open');
this.container.classList.toggle(containerOpenClass);
Would keep the behaviour with --open
, but maybe remove the modifier options with a way to set the whole appendClass but at current state I would stay with the implementation we did and can be rediscussed when refractoring the core in 3.0.
Yes, sounds good