chore: fix Avatar/AvatarGroup size type error

content/show/avatar/index-en-US.md

@@ -456,7 +456,7 @@ import { Avatar, AvatarGroup } from '@douyinfe/semi-ui';
 | overlapFrom | Set the coverage direction of the avatars, one of `start`, `end` | string | `start` |
 | renderMore | Customize the more tag  | (restNumber: number, restAvatars: ReactNode[]) => ReactNode | - |
 | shape      | Shape of the avatar, one of `circle`, `square`                                      | string | `circle` |
-| size       | Size of the avatar, one of `extra-extra-small`, `extra-small`, `small`, `default`, `medium`, `large`, `extra-large` | string | `medium` |
+| size       | Size of the avatar, one of `extra-extra-small`, `extra-small`, `small`, `default`, `medium`, `large`, `extra-large` and valid value like "10px" | string | `medium` |
 
 ## Accessibility
 

content/show/avatar/index.md

@@ -452,7 +452,7 @@ import { AvatarGroup, Avatar } from '@douyinfe/semi-ui';
 | overlapFrom | 设置头像覆盖方向，支持 `start`, `end` | string | `start` |
 | renderMore | 自定义渲染 more 标签 | (restNumber: number, restAvatars: ReactNode[]) => ReactNode | - |
 | shape | 指定头像的形状，支持`circle`、`square` | string | `circle` |
-| size | 设置头像的大小，支持 `extra-extra-small`, `extra-small`、`small`、`default`、`medium`、`large`、`extra-large` | string | `medium` |
+| size | 设置头像的大小，支持 `extra-extra-small`, `extra-small`、`small`、`default`、`medium`、`large`、`extra-large` 和合法的 width 属性值例，如 "10px"| string | `medium` |
 
 ## Accessibility
 

packages/semi-ui/avatar/_story/avatar.stories.tsx

@@ -1,7 +1,18 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import Demo from './Demo';
+import Avatar from '../index';
+import AvatarGroup from '../avatarGroup';
 
 const stories = storiesOf('Avatar', module);
 
 stories.add('Avatar', () => <Demo />);
+
+stories.add('Avatar', () => <>
+    <Avatar size={'6rem'} />
+    <Avatar size="small" />
+    <AvatarGroup size="6rem">
+        <Avatar color="red" alt='Lisa LeBlanc'>LL</Avatar>
+        <Avatar alt='Caroline Xiao'>CX</Avatar>
+    </AvatarGroup>
+</>);

packages/semi-ui/avatar/interface.ts

@@ -25,7 +25,7 @@ export interface AvatarProps extends BaseProps {
     children?: React.ReactNode;
     color?: AvatarColor;
     shape?: AvatarShape;
-    size?: AvatarSize;
+    size?: string;
     hoverMask?: React.ReactNode;
     src?: string;
     srcSet?: string;
@@ -68,7 +68,7 @@ export type AvatarGroupOverlapFrom = 'start' | 'end';
 export interface AvatarGroupProps {
     children?: React.ReactNode;
     shape?: AvatarGroupShape;
-    size?: AvatarGroupSize;
+    size?: string;
     overlapFrom?: AvatarGroupOverlapFrom;
     maxCount?: number;
     renderMore?: (restNumber?: number, restAvatars?: React.ReactNode[]) => React.ReactNode