add customClass props to Skeletons

[GMartigny]

Proposed Changes

• Add a customClass prop to Skeletons
• Use <template> rendering instead of functionnal

[jtommy]

@GMartigny why did you move to template rendering?

[GMartigny]

Because functional didn't serve any purpose here and all the rest of the lib is template. But of course, it can be reverted if you think it's out of scope for this PR.

[jtommy]

And custom-class? You can use class and it will be applied to root element.
Probably with functional is not possible, but you can add reading it from vnode (second parameter of render function), for example: vnode.data.staticClass

Functional are great in Vue 2 for a component without state and there are benchmarks in the web that show rendering improvements.

[GMartigny]

Probably with functional is not possible, but you can add reading it from vnode (second parameter of render function), for example: vnode.data.staticClass

This is indeed need to be explicit with functional rendering.

Functional are great in Vue 2 for a component without state and there are benchmarks in the web that show rendering improvements.

Didn't know, thanks for the infos. However, I still find it quite hard to parse for a human.

I took the liberty to spread the whole data coming from the context (...context.data) into the component. This allow users to also bind id and event listeners. What do you think ?

[jtommy]

Ok!

[jtommy]

Are you sur is it ok? I usually use .staticClass and not .class

[GMartigny]

Do you know the proper way to test this ?

If I do :

wrapper = mount(BSkeleton, {
  attrs: {
    class: 'custom-class'
  }
})

I don't have staticClass set.

[jtommy]

I mean in the core code, you should use context.data.attrs.statiClass instead of context.data.attrs.class

[QuentinGab]

Hi !

Is there any update on this @GMartigny ? It would be cool to be able to pass classes and styles to the component

[GMartigny]

Honestly, I don't know how to do it properly in the functional way (especially with testing). Maybe @jtommy or someone else could finish this up.

[jtommy]

As i told you https://github.com/buefy/buefy/pull/3642/files#r794054499, did you try it?

[jtommy]

@GMartigny any news?

[GMartigny]

As I said in my previous comment, I'm not familiar with Vue functionnal rendering. I tried your suggestion, but I'm not able to properly test it. If i use context.data.attrs.staticClass I don't have the class correctly set in tests.

[wesdevpro]

This PR has been migrated to a feature request discussion. Please see #3976 for reference.