From b71e4e68916ef26d07e12c60f2c3078f32008105 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Romain?= Date: Mon, 11 Dec 2023 17:29:56 +0100 Subject: [PATCH] feat(design-system): Skeleton update (#5052) --- .changeset/blue-students-invent.md | 8 +++++ .../Skeleton/Primitive/Skeleton.Primitive.tsx | 1 + .../src/components/Skeleton/Skeleton.tsx | 9 ++++- .../src/components/Skeleton/index.ts | 13 ++++++-- .../Skeleton/variations/SkeletonButton.tsx | 2 ++ .../variations/SkeletonButtonIcon.tsx | 2 ++ .../variations/SkeletonHeading.module.scss | 24 ++++++++++++++ .../Skeleton/variations/SkeletonHeading.tsx | 10 +++--- .../Skeleton/variations/SkeletonInput.tsx | 6 ++-- .../variations/SkeletonParagraph.module.scss | 24 ++++++++++++++ .../Skeleton/variations/SkeletonParagraph.tsx | 9 +++-- .../variations/SkeletonSized.module.scss | 5 +++ .../Skeleton/variations/SkeletonSized.tsx | 33 +++++++++++++++++++ .../src/stories/feedback/Skeleton.mdx | 17 ++++++++-- .../src/stories/feedback/Skeleton.stories.tsx | 31 ++++++++++++++++- 15 files changed, 178 insertions(+), 16 deletions(-) create mode 100644 .changeset/blue-students-invent.md create mode 100644 packages/design-system/src/components/Skeleton/variations/SkeletonSized.module.scss create mode 100644 packages/design-system/src/components/Skeleton/variations/SkeletonSized.tsx diff --git a/.changeset/blue-students-invent.md b/.changeset/blue-students-invent.md new file mode 100644 index 00000000000..27a79b9ce38 --- /dev/null +++ b/.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 diff --git a/packages/design-system/src/components/Skeleton/Primitive/Skeleton.Primitive.tsx b/packages/design-system/src/components/Skeleton/Primitive/Skeleton.Primitive.tsx index c9b5d48aa4b..823fd16c093 100644 --- a/packages/design-system/src/components/Skeleton/Primitive/Skeleton.Primitive.tsx +++ b/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'; diff --git a/packages/design-system/src/components/Skeleton/Skeleton.tsx b/packages/design-system/src/components/Skeleton/Skeleton.tsx index 00d755017f8..e0eac5c1ba7 100644 --- a/packages/design-system/src/components/Skeleton/Skeleton.tsx +++ b/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) => { switch (props.variant) { @@ -40,6 +42,11 @@ export const Skeleton = forwardRef((props: SkeletonProps, ref: Ref; } + case 'sized': { + const { variant, ...rest } = props; + return ; + } + default: { return null; } diff --git a/packages/design-system/src/components/Skeleton/index.ts b/packages/design-system/src/components/Skeleton/index.ts index 29dafed2d48..a98d497fbf4 100644 --- a/packages/design-system/src/components/Skeleton/index.ts +++ b/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, +}; diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonButton.tsx b/packages/design-system/src/components/Skeleton/variations/SkeletonButton.tsx index 98f7891933a..fac448d1a8f 100644 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonButton.tsx +++ b/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'; diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonButtonIcon.tsx b/packages/design-system/src/components/Skeleton/variations/SkeletonButtonIcon.tsx index aec03dc29c7..bddf285bc69 100644 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonButtonIcon.tsx +++ b/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'; diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.module.scss b/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.module.scss index 28ffd26e7f0..876957cff82 100644 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.module.scss +++ b/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%; + } } diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.tsx b/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.tsx index 6ac6fe6a40f..b8bf30a69ff 100644 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.tsx +++ b/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 & { size?: 'L' | 'M' | 'S'; + width?: 'XS' | 'S' | 'M' | 'L' | 'XL' | '100'; }; const SkeletonHeading = forwardRef( - ({ size = 'L', ...props }: SkeletonHeadingProps, ref: Ref) => { + ({ size = 'L', width, ...props }: SkeletonHeadingProps, ref: Ref) => { return ( ; diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonParagraph.module.scss b/packages/design-system/src/components/Skeleton/variations/SkeletonParagraph.module.scss index 707658e6b26..27f1c4433e0 100644 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonParagraph.module.scss +++ b/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%; + } } diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonParagraph.tsx b/packages/design-system/src/components/Skeleton/variations/SkeletonParagraph.tsx index 4dffee63a69..29a4e98ee98 100644 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonParagraph.tsx +++ b/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 & { size?: 'M' | 'S'; + width?: 'XS' | 'S' | 'M' | 'L' | 'XL' | '100'; }; const SkeletonParagraph = forwardRef( - ({ size = 'M', ...props }: SkeletonParagraphProps, ref: Ref) => { + ({ size = 'M', width, ...props }: SkeletonParagraphProps, ref: Ref) => { return ( & { + height?: number; + width?: number; + isCircle?: boolean; +}; + +const SkeletonSized = forwardRef( + ( + { height = 1.4, width = 2, isCircle, ...props }: SkeletonSizedProps, + ref: Ref, + ) => { + return ( + + ); + }, +); +SkeletonSized.displayName = 'SkeletonSized'; + +export default SkeletonSized; diff --git a/packages/design-system/src/stories/feedback/Skeleton.mdx b/packages/design-system/src/stories/feedback/Skeleton.mdx index 0592e2e7dfe..3bb4de07074 100644 --- a/packages/design-system/src/stories/feedback/Skeleton.mdx +++ b/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. +#### Sized + +It can be the size needed + + + + + + #### Composition example Combine all of them to mock content! diff --git a/packages/design-system/src/stories/feedback/Skeleton.stories.tsx b/packages/design-system/src/stories/feedback/Skeleton.stories.tsx index 66fe74d42ee..4ccf32dc4fc 100644 --- a/packages/design-system/src/stories/feedback/Skeleton.stories.tsx +++ b/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 = args => { return ; }; +const SkeletonSizedTemplate: StoryFn = args => { + return ; +}; + const SkeletonInputTemplate: StoryFn = args => { return ; }; @@ -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({});