diff --git a/packages/shoreline/src/components/skeleton/skeleton.tsx b/packages/shoreline/src/components/skeleton/skeleton.tsx index b877d0a546..27a1df5051 100644 --- 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( function Skeleton(props, ref) { - const { shape = 'rect', ...otherProps } = props + const { + shape = 'rect', + width = '100%', + height = '100%', + style: styleObject = {}, + ...otherProps + } = props return (
) @@ -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 index a5113f04a4..d3f4f9c4dd 100644 --- 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 (
- - + +
) } diff --git a/packages/shoreline/src/themes/sunrise/components/skeleton.css b/packages/shoreline/src/themes/sunrise/components/skeleton.css index 919da93379..33a67e8141 100644 --- 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);