Vuetify: [Bug Report] v-skeleton-loader (& v-boilerplate) custom types not rendered like pre-defined type

[ibrahimBeladi]

Environment

Vuetify Version: 2.1.0
Vue Version: 2.6.10
Browsers: Waterfox 56.2.14
OS: Linux x86_64

Steps to reproduce

Using a custom type (like button@2) does not render like its equivalent pre-defined type (actions).

Expected Behavior

The custom type renders like its equivalent pre-defined type.

Actual Behavior

Rendered differently.

Reproduction Link

https://codepen.io/ibrahimbeladi/pen/xxKvmLz?editors=1010

Other comments

Same goes to v-boilerplate (#9193).

[alvarobrey]

@ibrahimBeladi the devs may correct me on this, but the @ syntax always multiplies components vertically. On the other hand, actions is a predefined type with buttons displayed horizontally.

I believe this is working as intended.

[ibrahimBeladi]

On the contrary, I believe it is a bug. actions should be equivalent to button@2 and should render the same. After all, actions is a pre-defined type that expands to button@2. If that's not the case then it is not possible to use two skeleton-loaders next to each other without using the grid.

[Leespiker]

@ibrahimBeladi The preset types have their own styles and _wrap_ the types they are mapped to. You can easily override types though. See my response to a related issue here.

[ibrahimBeladi]

@Leespiker That does not really answer my issue. Overriding is limited. See the update codepen. The predefined types and their presets kind of have some custom css, so they are not a solution for all cases. I want to build custom skeleton loaders without having to write css nor rows and columns.