Merge pull request #2290 from DouyinFE/feat_avatar_size_raw

feat: avatar size support raw value

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

@@ -18,7 +18,7 @@ import { Avatar, AvatarGroup } from '@douyinfe/semi-ui';
 ```
 ### Size
 
-You can change the size of the avatars with `size` property. The following sizes are supported:  `extra-extra-small`(20x20), `extra-small`(24x24),`small`(32x32), `default`(40x40), `medium`(48x48), `large`(72x72), `extra-large`(128 x 128).
+You can change the size of the avatars with `size` property. The following sizes are supported:  `extra-extra-small`, `extra-small`,`small`, `default`, `medium`, `large`, `extra-large`.
 
 ```jsx live=true
 import React from 'react';
@@ -437,7 +437,7 @@ import { Avatar, AvatarGroup } from '@douyinfe/semi-ui';
 | hoverMask    | Avatar content overlay when hover                                                                                                                                                         | ReactNode                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -        |
 | imgAttr | Native html img attributes **>=1.5.0**                                                                                                                                                    | React.ImgHTMLAttributes<HTMLImageElement\>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | - |
 | 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` |
 | src          | Resource address for imgage avatars                                                                                                                                                       | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -        |
 | srcSet       | Set the image avatar responsive resource address                                                                                                                                          | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -        |
 | style        | Style name                                                                                                                                                                                | CSSProperties                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -        |

content/show/avatar/index.md

@@ -17,7 +17,7 @@ import { Avatar, AvatarGroup } from '@douyinfe/semi-ui';
 
 ### 尺寸
 
-可以通过 `size` 属性设置图标大小，支持``extra-extra-small`(20x20)，`extra-small`(24x24)，`small`(32x32)，`default`(40x40)，`medium`(48x48)，`large`(72x72)，`extra-large`(128x128)`。
+可以通过 `size` 属性设置图标大小，支持`extra-extra-small`，`extra-small`，`small`，`default`，`medium`，`large`，`extra-large`。
 
 ```jsx live=true
 import React from 'react';
@@ -432,7 +432,7 @@ import { AvatarGroup, Avatar } from '@douyinfe/semi-ui';
 | gap | 字符头像距离左右两侧的像素大小                                                                                                                                                   | number                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | 3 |
 | imgAttr | 原生 img 属性 **>=1.5.0**                                                                                                                                             | React.ImgHTMLAttributes<HTMLImageElement\>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | - |
 | 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` |
 | src | 图片类头像的资源地址                                                                                                                                                        | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | - |
 | srcSet | 设置图片类头像响应式资源地址                                                                                                                                                    | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | - |
 | style | 样式名                                                                                                                                                               | CSSProperties                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | - |

packages/semi-ui/avatar/index.tsx

@@ -294,7 +294,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         const textStyle: CSSProperties = {};
         if (this.props.topSlot.textColor) {
             textStyle['color'] = this.props.topSlot.textColor;
-        } 
+        }
         return <div style={this.props.topSlot.style ?? {}}
             className={cls([`${prefixCls}-top_slot-wrapper`, this.props.topSlot.className ?? "", {
                 [`${prefixCls}-animated`]: this.props.contentMotion,
@@ -336,6 +336,11 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
             ...others
         } = this.props;
         const { isImgExist, hoverContent, focusVisible } = this.state;
+        let customStyle: CSSProperties = {};
+        if (!strings.SIZE.includes(size)) {
+            customStyle = { width: size, height: size };
+        }
+        customStyle = { ...customStyle, ...style };
         const shouldWrap = bottomSlot || topSlot || border;
         const mouseEvent = {
             onClick: onClick,
@@ -361,7 +366,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
 
         let avatar = <span
             {...(others as any)}
-            style={shouldWrap ? {} : style}
+            style={shouldWrap ? {} : customStyle}
             className={avatarCls}
             {...(shouldWrap ? {} : mouseEvent)}
             role='listitem'
@@ -373,10 +378,10 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
 
         if (border) {
             const borderStyle: CSSProperties = {};
-            if (typeof border ==='object' && border?.color) {
+            if (typeof border === 'object' && border?.color) {
                 borderStyle['borderColor'] = border?.color;
             }
-            avatar = <div style={{ position: "relative", ...style }}>
+            avatar = <div style={{ position: "relative", ...customStyle }}>
                 {avatar}
                 <span style={borderStyle} className={cls([
                     `${prefixCls}-additionalBorder`,
@@ -387,7 +392,8 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
                 ])}>
                 </span>
                 {
-                    (typeof this.props.border === 'object' && this.props.border.motion) && <span style={borderStyle} className={cls([
+                    (typeof this.props.border === 'object' && this.props.border.motion) &&
+                    <span style={borderStyle} className={cls([
                         `${prefixCls}-additionalBorder`,
                         `${prefixCls}-additionalBorder-${size}`,
                         {
@@ -402,10 +408,10 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
 
 
         if (shouldWrap) {
-            return <span className={cls([`${prefixCls}-wrapper`])} style={style} {...mouseEvent}>
+            return <span className={cls([`${prefixCls}-wrapper`])} style={customStyle} {...mouseEvent}>
                 {avatar}
-                {topSlot && ["extra-small","small", "default", "medium", "large", "extra-large"].includes(size) && shape === "circle" && this.renderTopSlot()}
-                {bottomSlot && ["extra-small","small", "default", "medium", "large", "extra-large"].includes(size) && this.renderBottomSlot()}
+                {topSlot && ["extra-small", "small", "default", "medium", "large", "extra-large"].includes(size) && shape === "circle" && this.renderTopSlot()}
+                {bottomSlot && ["extra-small", "small", "default", "medium", "large", "extra-large"].includes(size) && this.renderBottomSlot()}
             </span>;
         } else {
             return avatar;