web-js icon indicating copy to clipboard operation
web-js copied to clipboard

Refactor components with modifiers

Open luca-rath opened this issue 3 years ago • 2 comments

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);

luca-rath avatar Nov 03 '21 11:11 luca-rath

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.

alexander-schranz avatar Nov 03 '21 15:11 alexander-schranz

Yes, sounds good

luca-rath avatar Nov 03 '21 15:11 luca-rath