feat(design-system): Skeleton update (#5052)

.changeset/blue-students-invent.md

@@ -0,0 +1,8 @@
+---
+'@talend/design-system': minor
+---
+
+feat(design-system): There is some limitation when designing skeletons
+
+Add new width for header and paragraph skeletons
+Add new SkeletonSized that can be shaped for any needs

packages/design-system/src/components/Skeleton/Primitive/Skeleton.Primitive.tsx

@@ -1,4 +1,5 @@
 import { forwardRef, HTMLAttributes, Ref } from 'react';
+
 import classNames from 'classnames';
 
 import styles from './Skeleton.module.scss';

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

@@ -5,13 +5,15 @@ import SkeletonButtonIcon, { SkeletonButtonIconProps } from './variations/Skelet
 import SkeletonHeading, { SkeletonHeadingProps } from './variations/SkeletonHeading';
 import SkeletonInput, { SkeletonInputProps } from './variations/SkeletonInput';
 import SkeletonParagraph, { SkeletonParagraphProps } from './variations/SkeletonParagraph';
+import SkeletonSized, { SkeletonSizedProps } from './variations/SkeletonSized';
 
 export type SkeletonProps =
 	| ({ variant: 'button' } & SkeletonButtonProps)
 	| ({ variant: 'buttonIcon' } & SkeletonButtonIconProps)
 	| ({ variant: 'heading' } & SkeletonHeadingProps)
 	| ({ variant: 'paragraph' } & SkeletonParagraphProps)
-	| ({ variant: 'input' } & SkeletonInputProps);
+	| ({ variant: 'input' } & SkeletonInputProps)
+	| ({ variant: 'sized' } & SkeletonSizedProps);
 
 export const Skeleton = forwardRef((props: SkeletonProps, ref: Ref<HTMLSpanElement>) => {
 	switch (props.variant) {
@@ -40,6 +42,11 @@ export const Skeleton = forwardRef((props: SkeletonProps, ref: Ref<HTMLSpanEleme
 			return <SkeletonInput {...rest} ref={ref} />;
 		}
 
+		case 'sized': {
+			const { variant, ...rest } = props;
+			return <SkeletonSized {...rest} ref={ref} />;
+		}
+
 		default: {
 			return null;
 		}

packages/design-system/src/components/Skeleton/index.ts

@@ -1,8 +1,17 @@
-export * from './Skeleton';
 import SkeletonButton from './variations/SkeletonButton';
 import SkeletonButtonIcon from './variations/SkeletonButtonIcon';
 import SkeletonHeading from './variations/SkeletonHeading';
 import SkeletonInput from './variations/SkeletonInput';
 import SkeletonParagraph from './variations/SkeletonParagraph';
+import SkeletonSized from './variations/SkeletonSized';
+
+export * from './Skeleton';
 
-export { SkeletonHeading, SkeletonButtonIcon, SkeletonButton, SkeletonParagraph, SkeletonInput };
+export {
+	SkeletonHeading,
+	SkeletonButtonIcon,
+	SkeletonButton,
+	SkeletonParagraph,
+	SkeletonInput,
+	SkeletonSized,
+};

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

@@ -1,5 +1,7 @@
 import { forwardRef, Ref } from 'react';
+
 import classNames from 'classnames';
+
 import SkeletonPrimitive, { SkeletonPrimitiveProps } from '../Primitive/Skeleton.Primitive';
 
 import PrimitiveStyles from '../Primitive/Skeleton.module.scss';

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

@@ -1,5 +1,7 @@
 import { forwardRef, Ref } from 'react';
+
 import classNames from 'classnames';
+
 import SkeletonPrimitive, { SkeletonPrimitiveProps } from '../Primitive/Skeleton.Primitive';
 
 import PrimitiveStyles from '../Primitive/Skeleton.module.scss';

packages/design-system/src/components/Skeleton/variations/SkeletonHeading.module.scss

@@ -15,4 +15,28 @@
 	&.size-S {
 		height: 1.4rem;
 	}
+
+	&.width-XS {
+		max-width: 10%;
+	}
+
+	&.width-S {
+		max-width: 20%;
+	}
+
+	&.width-M {
+		max-width: 40%;
+	}
+
+	&.width-L {
+		max-width: 60%;
+	}
+
+	&.width-XL {
+		max-width: 80%;
+	}
+
+	&.width-100 {
+		max-width: 100%;
+	}
 }

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

@@ -1,22 +1,24 @@
 import { forwardRef, Ref } from 'react';
+
 import classNames from 'classnames';
+
 import SkeletonPrimitive, { SkeletonPrimitiveProps } from '../Primitive/Skeleton.Primitive';
 
 import styles from './SkeletonHeading.module.scss';
 
 export type SkeletonHeadingProps = Omit<SkeletonPrimitiveProps, 'className'> & {
 	size?: 'L' | 'M' | 'S';
+	width?: 'XS' | 'S' | 'M' | 'L' | 'XL' | '100';
 };
 
 const SkeletonHeading = forwardRef(
-	({ size = 'L', ...props }: SkeletonHeadingProps, ref: Ref<HTMLSpanElement>) => {
+	({ size = 'L', width, ...props }: SkeletonHeadingProps, ref: Ref<HTMLSpanElement>) => {
 		return (
 			<SkeletonPrimitive
 				isBlock
 				className={classNames(styles.skeletonHeading, {
-					[styles['size-L']]: size === 'L',
-					[styles['size-M']]: size === 'M',
-					[styles['size-S']]: size === 'S',
+					[styles[`size-${size}`]]: size,
+					[styles[`width-${width}`]]: width,
 				})}
 				{...props}
 				ref={ref}

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

@@ -1,8 +1,10 @@
+import { forwardRef, Ref } from 'react';
+
 import { StackVertical } from '../../Stack';
 import SkeletonPrimitive, { SkeletonPrimitiveProps } from '../Primitive/Skeleton.Primitive';
-import styles from './SkeletonInput.module.scss';
 import SkeletonParagraph from './SkeletonParagraph';
-import { forwardRef, Ref } from 'react';
+
+import styles from './SkeletonInput.module.scss';
 
 export type SkeletonInputProps = Omit<SkeletonPrimitiveProps, 'className'>;
 

packages/design-system/src/components/Skeleton/variations/SkeletonParagraph.module.scss

@@ -7,4 +7,28 @@
 	&.size-S {
 		height: 1.2rem;
 	}
+
+	&.width-XS {
+		max-width: 10%;
+	}
+
+	&.width-S {
+		max-width: 20%;
+	}
+
+	&.width-M {
+		max-width: 40%;
+	}
+
+	&.width-L {
+		max-width: 60%;
+	}
+
+	&.width-XL {
+		max-width: 80%;
+	}
+
+	&.width-100 {
+		max-width: 100%;
+	}
 }

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

@@ -1,21 +1,24 @@
 import { forwardRef, Ref } from 'react';
+
 import classNames from 'classnames';
+
 import SkeletonPrimitive, { SkeletonPrimitiveProps } from '../Primitive/Skeleton.Primitive';
 
 import styles from './SkeletonParagraph.module.scss';
 
 export type SkeletonParagraphProps = Omit<SkeletonPrimitiveProps, 'className'> & {
 	size?: 'M' | 'S';
+	width?: 'XS' | 'S' | 'M' | 'L' | 'XL' | '100';
 };
 
 const SkeletonParagraph = forwardRef(
-	({ size = 'M', ...props }: SkeletonParagraphProps, ref: Ref<HTMLSpanElement>) => {
+	({ size = 'M', width, ...props }: SkeletonParagraphProps, ref: Ref<HTMLSpanElement>) => {
 		return (
 			<SkeletonPrimitive
 				isBlock
 				className={classNames(styles.skeletonParagraph, {
-					[styles['size-M']]: size === 'M',
-					[styles['size-S']]: size === 'S',
+					[styles[`size-${size}`]]: size,
+					[styles[`width-${width}`]]: width,
 				})}
 				{...props}
 				ref={ref}

packages/design-system/src/components/Skeleton/variations/SkeletonSized.module.scss

@@ -0,0 +1,5 @@
+@use '~@talend/design-tokens/lib/tokens';
+
+.skeleton-sized-circle {
+	border-radius: tokens.$coral-radius-round;
+}

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

@@ -0,0 +1,33 @@
+import { forwardRef, Ref } from 'react';
+
+import classNames from 'classnames';
+
+import SkeletonPrimitive, { SkeletonPrimitiveProps } from '../Primitive/Skeleton.Primitive';
+
+import style from './SkeletonSized.module.scss';
+
+export type SkeletonSizedProps = Omit<SkeletonPrimitiveProps, 'className'> & {
+	height?: number;
+	width?: number;
+	isCircle?: boolean;
+};
+
+const SkeletonSized = forwardRef(
+	(
+		{ height = 1.4, width = 2, 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}
+			/>
+		);
+	},
+);
+SkeletonSized.displayName = 'SkeletonSized';
+
+export default SkeletonSized;

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

@@ -1,11 +1,13 @@
-import { Meta, Canvas, Story, Controls } from '@storybook/blocks';
+import { Canvas, Controls, Meta, Story } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
+
 import {
+	Skeleton,
 	SkeletonButton,
-	SkeletonParagraph,
 	SkeletonHeading,
 	SkeletonInput,
-	Skeleton,
+	SkeletonParagraph,
 	StackHorizontal,
 	StackVertical,
 } from '../../';
@@ -82,6 +84,15 @@ It illustrates any input element.
 	<Story of={Stories.SkeletonInputStory} />
 </Canvas>
 
+#### Sized
+
+It can be the size needed
+
+<Canvas>
+	<Story of={Stories.SkeletonSizedStory} />
+</Canvas>
+<Controls of={Stories.SkeletonSizedStory} />
+
 #### Composition example
 
 Combine all of them to mock content!

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

@@ -7,10 +7,10 @@ import {
 	SkeletonHeading,
 	SkeletonInput,
 	SkeletonParagraph,
+	SkeletonSized,
 	StackHorizontal,
 	StackVertical,
 } from '../../';
-
 import SkeletonPrimitive from '../../components/Skeleton/Primitive/Skeleton.Primitive';
 
 export default {
@@ -34,6 +34,10 @@ const SkeletonParagraphTemplate: StoryFn<typeof SkeletonParagraph> = args => {
 	return <SkeletonParagraph {...args} />;
 };
 
+const SkeletonSizedTemplate: StoryFn<typeof SkeletonSized> = args => {
+	return <SkeletonSized {...args} />;
+};
+
 const SkeletonInputTemplate: StoryFn<typeof SkeletonInput> = args => {
 	return <SkeletonInput {...args} />;
 };
@@ -71,6 +75,11 @@ SkeletonHeadingStory.argTypes = {
 		control: { type: 'select' },
 		description: 'optional (default is "L")',
 	},
+	width: {
+		options: ['100', 'XL', 'L', 'M', 'S', 'XS'],
+		control: { type: 'select' },
+		description: 'optional',
+	},
 };
 
 export const SkeletonParagraphStory = SkeletonParagraphTemplate.bind({});
@@ -83,6 +92,26 @@ SkeletonParagraphStory.argTypes = {
 		control: { type: 'select' },
 		description: 'optional (default is "M")',
 	},
+	width: {
+		options: ['100', 'XL', 'L', 'M', 'S', 'XS'],
+		control: { type: 'select' },
+		description: 'optional',
+	},
+};
+
+export const SkeletonSizedStory = SkeletonSizedTemplate.bind({});
+SkeletonSizedStory.args = {
+	isCircle: true,
+};
+SkeletonSizedStory.argTypes = {
+	height: {
+		control: { type: 'number' },
+		defaultValue: 10,
+	},
+	width: {
+		control: { type: 'number' },
+		defaultValue: 10,
+	},
 };
 
 export const SkeletonInputStory = SkeletonInputTemplate.bind({});