feat(skeleton): add width and height props to set the skeleton size (#…

…1886)
vtex · Aug 26, 2024 · 31a5232 · 31a5232
2 parents 661874b + ef9ff16
commit 31a5232
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 5 deletions.
diff --git a/packages/shoreline/src/components/skeleton/skeleton.tsx b/packages/shoreline/src/components/skeleton/skeleton.tsx
@@ -1,3 +1,4 @@
+import { type CSSProperty, style } from '@vtex/shoreline-utils'
 import type { ComponentPropsWithoutRef } from 'react'
 import { forwardRef } from 'react'
 
@@ -9,13 +10,24 @@ import { forwardRef } from 'react'
  */
 export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
   function Skeleton(props, ref) {
-    const { shape = 'rect', ...otherProps } = props
+    const {
+      shape = 'rect',
+      width = '100%',
+      height = '100%',
+      style: styleObject = {},
+      ...otherProps
+    } = props
 
     return (
       <div
         data-sl-skeleton
         data-sl-skeleton-shape={shape}
         ref={ref}
+        style={style({
+          '--sl-skeleton-width': width,
+          '--sl-skeleton-height': height,
+          ...styleObject,
+        })}
         {...otherProps}
       />
     )
@@ -28,6 +40,16 @@ export interface SkeletonOptions {
    * @default rect
    */
   shape?: 'circle' | 'rect'
+  /**
+   * CSS width
+   * @default '100%'
+   */
+  width?: CSSProperty.Width
+  /**
+   * CSS height
+   * @default '100%'
+   */
+  height?: CSSProperty.Height
 }
 
 export type SkeletonProps = SkeletonOptions & ComponentPropsWithoutRef<'div'>
diff --git a/packages/shoreline/src/components/skeleton/stories/show.stories.tsx b/packages/shoreline/src/components/skeleton/stories/show.stories.tsx
@@ -7,8 +7,8 @@ export default {
 export function Show() {
   return (
     <div>
-      <Skeleton style={{ width: 200, height: 200 }} />
-      <Skeleton shape="circle" style={{ width: 200, height: 200 }} />
+      <Skeleton width="200px" height="200px" />
+      <Skeleton shape="circle" width="200px" height="200px" />
     </div>
   )
 }
diff --git a/packages/shoreline/src/themes/sunrise/components/skeleton.css b/packages/shoreline/src/themes/sunrise/components/skeleton.css
@@ -13,12 +13,16 @@
 }
 
 [data-sl-skeleton] {
+  --sl-skeleton-width: 100%;
+  --sl-skeleton-height: 100%;
+
   display: block;
   position: relative;
-  width: 100%;
-  height: 100%;
+  width: var(--sl-skeleton-width);
+  height: var(--sl-skeleton-height);
   background: var(--sl-bg-base-soft);
   overflow: hidden;
+
   &::after {
     animation: sl-keyframes-pulse 2s ease-in-out 0.5s infinite;
     background: var(--sl-bg-muted-pressed);