chore: changed skeleton "sized" variant width and height props to str…

…ings

.changeset/nice-balloons-flash.md

@@ -0,0 +1,5 @@
+---
+'@talend/design-system': minor
+---
+
+chore: changed skeleton "sized" variant width and height props to strings

packages/design-system/src/components/Skeleton/variations/SkeletonSized.tsx

@@ -7,26 +7,24 @@ import SkeletonPrimitive, { SkeletonPrimitiveProps } from '../Primitive/Skeleton
 import style from './SkeletonSized.module.scss';
 
 export type SkeletonSizedProps = Omit<SkeletonPrimitiveProps, 'className'> & {
-	height?: number;
-	width?: number;
+	height?: string;
+	width?: string;
 	isCircle?: boolean;
 };
 
 const SkeletonSized = forwardRef(
 	(
-		{ height = 1.4, width = 2, isCircle, ...props }: SkeletonSizedProps,
+		{ height = '1.4rem', width = '2rem', isCircle, ...props }: SkeletonSizedProps,
 		ref: Ref<HTMLSpanElement>,
-	) => {
-		return (
-			<SkeletonPrimitive
-				// @ts-expect-error style is valid
-				style={{ height: `${height}rem`, width: `${width}rem` }}
-				className={classNames({ [style['skeleton-sized-circle']]: isCircle })}
-				{...props}
-				ref={ref}
-			/>
-		);
-	},
+	) => (
+		<SkeletonPrimitive
+			// @ts-expect-error style is valid
+			style={{ height, width }}
+			className={classNames({ [style['skeleton-sized-circle']]: isCircle })}
+			{...props}
+			ref={ref}
+		/>
+	),
 );
 SkeletonSized.displayName = 'SkeletonSized';
 

packages/design-system/src/stories/feedback/Skeleton.stories.tsx

@@ -102,16 +102,8 @@ SkeletonParagraphStory.argTypes = {
 export const SkeletonSizedStory = SkeletonSizedTemplate.bind({});
 SkeletonSizedStory.args = {
 	isCircle: true,
-};
-SkeletonSizedStory.argTypes = {
-	height: {
-		control: { type: 'number' },
-		defaultValue: 10,
-	},
-	width: {
-		control: { type: 'number' },
-		defaultValue: 10,
-	},
+	height: '3rem',
+	width: '20%',
 };
 
 export const SkeletonInputStory = SkeletonInputTemplate.bind({});