Decathlon / vitamin-web

Decathlon Design System UI components for web applications
https://decathlon.github.io/vitamin-web
Apache License 2.0
279 stars 77 forks source link

feat(@vtmn/svelte, @vtmn/react, @vtmn/vue): make it possible to pass height to `VtmnSkeleton` component #1403

Closed thollander closed 1 year ago

thollander commented 1 year ago

Currently, VtmnSkeleton component is not managing the possibility to give a height, it always looks like this :

image

We’d like to be able in our use case to manage its height :

image

To do so, we have an override in Svelte implementation doing this :

<script>
  import { VtmnSkeleton } from '@vtmn/svelte';
  import { cn } from '@nfs/ecommerce-front-utils/dist/aliases';

  export let height = '13rem';
</script>

<style>
  div :global(.resize-skeleton) {
    height: var(--custom-height);
  }
</style>

<div style="--custom-height: {height}">
  <VtmnSkeleton class={cn('resize-skeleton', $$props.class)} />
</div>

The goal is to remove this override and make it possible directly in Vtmn.