Merge pull request #2459 from DouyinFE/type/avatar

chore: fix Avatar/AvatarGroup size type error
DouyinFE · Sep 2, 2024 · be6e011 · be6e011
2 parents fd051c8 + 737b5a7
commit be6e011
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 9 deletions.
diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
@@ -24,13 +24,13 @@ jobs:
  runs-on: ubuntu-latest
  container:
  # https:/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:

diff --git a/content/show/avatar/index-en-US.md b/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
 

diff --git a/content/show/avatar/index.md b/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
 

diff --git a/packages/semi-ui/avatar/_story/avatar.stories.tsx b/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>
+</>);
diff --git a/packages/semi-ui/avatar/interface.ts b/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