feat: [Skeleton] add shape attributes (#1119)

Co-authored-by: fengxin <[email protected]>
Co-authored-by: pointhalo <[email protected]>

content/feedback/skeleton/index-en-US.md

@@ -10,7 +10,7 @@ brief: A placeholder preview of content before the data loaded.
 
 ## Overview
 
--   `Avatar`: Avatar placeholder, by default uses Avatar medium sizing: `width: 48px`, `height: 48px`. Supports other sizes after v1.0.
+-   `Avatar`: Avatar placeholder, by default uses Avatar medium sizing: `width: 48px`, `height: 48px`. Supports Avatar's size and shape attributes after v1.0.
 -   `Image`: Image placeholder, default size: `width: 100%`, `height: 100%`.
 -   `Title`: Title placeholder, default size: `width: 100%`, `height: 24px`.
 -   `Paragraph`: Content part placeholder, default size: `width: 100%`, `height: 16px`, `margin-bottom: 10px`.
@@ -393,6 +393,7 @@ import { Skeleton, Avatar } from '@douyinfe/semi-ui';
 | class Name | Class name | string | - |
 | size | Size of the avatar, one of `extra-extra-small`, `extra-small`, `small`, `medium`, `large`, `extra-large`, **v>=1.0** | string | `medium` |
 | style | Inline style | CSSProperties | - |
+| shape | Shape of the avatar, one of `circle`, `square` | string | `circle` |
 
 ### Skeleton.Paragraph
 
@@ -404,7 +405,7 @@ import { Skeleton, Avatar } from '@douyinfe/semi-ui';
 
 ## Content Guidelines
 
-- Unchanged fixed content directly displays fixed content, and variable content is displayed using skeleton screen
+-   Unchanged fixed content directly displays fixed content, and variable content is displayed using skeleton screen
 
 ## Design Tokens
 

content/feedback/skeleton/index.md

@@ -9,7 +9,7 @@ brief: 在需要等待加载内容的位置提供的占位组件。
 
 ## 概述
 
--   `Avatar`：占位头像，默认为圆形，默认尺寸：Avatar medium: `width: 48px`，`height: 48px`。支持 Avatar 的 size 属性 （**v>=1.0**)
+-   `Avatar`：占位头像，默认为圆形，默认尺寸：Avatar medium: `width: 48px`，`height: 48px`。支持 Avatar 的 size、shape 属性 （**v>=1.0**)
 -   `Image`：占位图像，默认尺寸：`width: 100%`，`height: 100%`。
 -   `Title`：占位标题，默认尺寸：`width: 100%`， `height: 24px`。
 -   `Paragraph`：占位内容部分，默认尺寸：`width: 100%`，`height: 16px`，`margin-bottom: 10px`。
@@ -364,13 +364,13 @@ import { Skeleton, Avatar } from '@douyinfe/semi-ui';
 
 ### Skeleton
 
-| 属性        | 说明                                       | 类型       | 默认值 |
-| ----------- | ------------------------------------------ | ---------- | ------ |
-| active      | 是否展示动画效果                           | boolean    | false  |
-| className   | 类名                                       | string     | -      |
-| loading     | 为 true 时，显示占位元素。反之则显示子组件 | boolean    | true   |
-| placeholder | 加载等待时的占位元素                       | ReactNode | -      |
-| style       | 样式                                       | CSSProperties     | -      |
+| 属性        | 说明                                       | 类型          | 默认值 |
+| ----------- | ------------------------------------------ | ------------- | ------ |
+| active      | 是否展示动画效果                           | boolean       | false  |
+| className   | 类名                                       | string        | -      |
+| loading     | 为 true 时，显示占位元素。反之则显示子组件 | boolean       | true   |
+| placeholder | 加载等待时的占位元素                       | ReactNode     | -      |
+| style       | 样式                                       | CSSProperties | -      |
 
 ### Skeleton.Avatar
 
@@ -381,20 +381,19 @@ import { Skeleton, Avatar } from '@douyinfe/semi-ui';
 | className | 类名 | string | - |
 | size | 设置头像的大小，支持 `extra-extra-small`, `extra-small`、`small`、`medium`、`large`、`extra-large` **v>=1.0** | string | `medium` |
 | style | 样式 | CSSProperties | - |
+| shape | 指定头像的形状，支持 `circle`、`square` | string | `circle` |
 
 ### Skeleton.Paragraph
 
-| 属性      | 说明                 | 类型   | 默认值 |
-| --------- | -------------------- | ------ | ------ |
-| className | 类名                 | string | -      |
-| rows      | 设置段落占位图的行数 | number | 4      |
+| 属性      | 说明                 | 类型          | 默认值 |
+| --------- | -------------------- | ------------- | ------ |
+| className | 类名                 | string        | -      |
+| rows      | 设置段落占位图的行数 | number        | 4      |
 | style     | 样式                 | CSSProperties | -      |
 
 ## 文案规范
-- 不变的固定内容直接展示固定内容，可变的内容使用骨架屏展示
-
-
 
+-   不变的固定内容直接展示固定内容，可变的内容使用骨架屏展示
 
 ## 设计变量
 

packages/semi-foundation/skeleton/skeleton.scss

@@ -11,7 +11,9 @@ $module: #{$prefix}-skeleton;
     }
 
     &-avatar {
-        border-radius: 50%;
+        &-circle {
+            border-radius: 50%;
+        }
 
         &-extra-extra-small {
             width: $width-skeleton_avatar_extra_extra_small;

packages/semi-ui/skeleton/item.tsx

@@ -19,15 +19,17 @@ export interface ParagraphProps extends BasicProps {
 
 export interface AvatarProps extends BasicProps {
     size?: typeof strings.SIZE[number];
+    shape?: string;
 }
 
 export type GenericProps = BasicProps & AvatarProps;
 
 const sizeSet = strings.SIZE;
+const shapeSet = strings.SHAPE;
 
-const generator = <T extends BasicProps >(type: string) =>
-    (BasicComponent: ComponentType<T>): FC<T> =>
-        (props): ReactElement => <BasicComponent type={type} {...props} />;
+const generator = <T extends BasicProps>(type: string) => (BasicComponent: ComponentType<T>): FC<T> => (
+    props
+): ReactElement => <BasicComponent type={type} {...props} />;
 
 class Generic extends PureComponent<GenericProps> {
     static propTypes = {
@@ -36,18 +38,27 @@ class Generic extends PureComponent<GenericProps> {
         style: PropTypes.object,
         className: PropTypes.string,
         size: PropTypes.oneOf(sizeSet),
+        shape: PropTypes.oneOf(shapeSet),
     };
 
     static defaultProps = {
         prefixCls: cssClasses.PREFIX,
-        size: 'medium'
+        size: 'medium',
+        shape: 'circle',
     };
 
     render() {
-        const { prefixCls, className, type, size, ...others } = this.props;
-        const classString = cls(className, `${prefixCls}-${type}`, {
-            [`${prefixCls}-${type}-${size}`]: type.toUpperCase() === 'AVATAR'
-        });
+        const { prefixCls, className, type, size, shape, ...others } = this.props;
+        const classString = cls(
+            className,
+            `${prefixCls}-${type}`,
+            {
+                [`${prefixCls}-${type}-${size}`]: type.toUpperCase() === 'AVATAR',
+            },
+            {
+                [`${prefixCls}-${type}-${shape}`]: type.toUpperCase() === 'AVATAR',
+            }
+        );
         return React.createElement('div', { className: classString, ...others });
     }
 }
@@ -75,8 +86,10 @@ export class Paragraph extends PureComponent<ParagraphProps> {
         const classString = cls(className, `${prefixCls}-paragraph`);
         return (
             <ul className={classString} style={style}>
-                {[...Array(rows)].map((e, i) => <li key={i} />)}
+                {[...Array(rows)].map((e, i) => (
+                    <li key={i} />
+                ))}
             </ul>
         );
     }
-}
+}