chore: fix Avatar/AvatarGroup size type error

.github/workflows/cypress.yml

@@ -24,13 +24,13 @@ jobs:
         runs-on: ubuntu-latest
         container:
             # https://github.com/cypress-io/cypress-docker-images/tree/master/browsers
-            image: cypress/browsers:node18.12.0-chrome103-ff107
+            image: cypress/browsers:node-20.17.0-chrome-128.0.6613.113-1-ff-129.0.2-edge-128.0.2739.42-1
         if: ${{ github.repository_owner == 'DouyinFE' }}
         steps:
             - name: Checkout
               uses: actions/checkout@v3
             - name: Install global packages
-              run: npm i -g lerna@^6 yarn
+              run: npm i -g lerna@^6
             - name: Build storybook
               run: |
                   yarn bootstrap
@@ -42,8 +42,8 @@ jobs:
                   name: storybook-static
                   if-no-files-found: error
                   path: storybook
-            - name: Reclaim cache directory
-              run: chown -R 1001:1001 /github/home/.cache && echo "pwn dat cache"
+            # - name: Reclaim cache directory
+            #   run: chown -R 1001:1001 /github/home/.cache && echo "pwn dat cache"
             - name: Cypress install
               uses: cypress-io/github-action@v5
               with:
@@ -52,7 +52,7 @@ jobs:
     chrome-tests:
         runs-on: ubuntu-latest
         container:
-            image: cypress/browsers:node18.12.0-chrome103-ff107
+            image: cypress/browsers:node-20.17.0-chrome-128.0.6613.113-1-ff-129.0.2-edge-128.0.2739.42-1
             options: --user 1001
         needs: install
         steps:

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