@douyinfe/semi-foundation 2.24.3 → 2.25.0-alpha.0

package/anchor/anchor.scss

@@ -75,12 +75,18 @@ $module: #{$prefix}-anchor;
             border-radius: $width-anchor-outline_border_radius;
             transition: color $transition_duration-anchor_title-text $transition_function-anchor_title-text $transition_delay-anchor_title-text;//锚点选项文字的动效
             transform: scale($transform_scale-anchor_title-text);
+            background: $color-anchor_title-bg-default;
             &:hover {
                 color: $color-anchor_title-text-hover;
             }
 
             &-active {
                 color: $color-anchor_title-text-active;
+                background: $color-anchor_title-bg-active;
+                &:hover{
+                    color: $color-anchor_title_active-text-hover;
+                }
+
             }
 
             &:focus-visible {

package/anchor/foundation.ts

@@ -30,10 +30,8 @@ export default class AnchorFoundation<P = Record<string, any>, S = Record<string
         super({ ...AnchorFoundation.defaultAdapter, ...adapter });
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     init = () => {};
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     destroy = () => {};
 
     addLink = (link: string) => {
@@ -171,7 +169,7 @@ export default class AnchorFoundation<P = Record<string, any>, S = Record<string
                  *      2. There is a scroll axis (clientHeight < scrollHeight | | clientWidth < scrollWidth)
                  *      3.overflowX or overflowY has a value and is not visible or clip
                  *       For details, please see https://github.com/stipsan/compute-scroll-into-view
-                 * 
+                 *
                  * behavior定义滚动行为
                  *  - 可选 'auto' | 'smooth' | Function
                  *  - Function 自定义滚动行为
@@ -184,9 +182,12 @@ export default class AnchorFoundation<P = Record<string, any>, S = Record<string
                  */
                 behavior: actions => {
                     // We just need to scroll the innermost target container
-                    const innermostAction = get(actions, '0');
-                    const el = get(innermostAction, 'el');
-                    const top = get(innermostAction, 'top');
+                    const verticalScrollAction = actions.find(action => {
+                        const { el } = action;
+                        return el.scrollHeight > el.clientHeight;
+                    });
+                    const el = get(verticalScrollAction, 'el');
+                    const top = get(verticalScrollAction, 'top');
                     if (el) {
                         const offsetTop = top - targetOffset;
                         if (el.scroll && canSmoothScroll) {

package/anchor/linkFoundation.ts

@@ -16,7 +16,6 @@ export default class LinkFoundation extends BaseFoundation<LinkAdapter> {
         // this.setInitValue();
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     destroy() {}
 
     handleAddLink() {

package/anchor/variables.scss

@@ -6,9 +6,13 @@ $color-anchor_slide_muted-bg-active: var(--semi-color-white); // 选中颜色 -
 
 $color-anchor_title-text-default: var(--semi-color-text-2); // 文字颜色 - 未选中
 $color-anchor_title-text-hover: var(--semi-color-tertiary-hover); // 文字颜色 - 未选中悬浮态
+$color-anchor_title_active-text-hover: $color-anchor_title-text-hover;  // 文字颜色 - 选中悬浮态
 $color-anchor_title-text-active: var(--semi-color-text-0); // 文字颜色 - 选中
 $color-anchor_title-text-disabled: var(--semi-color-disabled-text); // 文字颜色 - 禁用
 
+$color-anchor_title-bg-default: transparent; // 背景色
+$color-anchor_title-bg-active: transparent; // 背景色 - 选中
+
 $color-anchor_title-outline-focus: var(--semi-color-primary-light-active); // 轮廓 - 聚焦
 
 // Spacing

package/autoComplete/autoComplete.scss

@@ -27,6 +27,8 @@ $module: #{$prefix}-autocomplete;
         padding-top: $spacing-autoComplete_loading_wrapper-paddingTop;
         padding-bottom: $spacing-autoComplete_loading_wrapper-paddingBottom;
         cursor: not-allowed;
+        // make sure that spin align vertical, no need to make 20px as a spacing token here
+        height: 20px;
         // height: $spacing-extra-loose;
         // @include all-center;
         .#{$prefix}-spin {

package/autoComplete/foundation.ts

@@ -1,4 +1,3 @@
-/* eslint-disable prefer-const, max-len */
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { isString, isNumber, isUndefined, isObject } from 'lodash';
 import warning from '../utils/warning';
@@ -39,7 +38,9 @@ export interface AutoCompleteAdapter<P = Record<string, any>, S = Record<string,
     notifyFocus: (event?: any) => void;
     notifyBlur: (event?: any) => void;
     rePositionDropdown: () => void;
-    persistEvent: (event: any) => void
+    persistEvent: (event: any) => void;
+    registerClickOutsideHandler: (cb: (e: any) => void) => void;
+    unregisterClickOutsideHandler: () => void
 }
 
 class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<AutoCompleteAdapter<P, S>, P, S> {
@@ -79,7 +80,7 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
     }
 
     destroy(): void {
-        // this._adapter.unregisterClickOutsideHandler();
+        this._adapter.unregisterClickOutsideHandler();
         // this.unBindKeyBoardEvent();
     }
 
@@ -114,7 +115,7 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
         this.isPanelOpen = true;
         this._adapter.toggleListVisible(true);
         this._setDropdownWidth();
-        // this._adapter.registerClickOutsideHandler(e => this.closeDropdown(e));
+        this._adapter.registerClickOutsideHandler(e => this.closeDropdown(e));
         this._adapter.notifyDropdownVisibleChange(true);
         this._modifyFocusIndexOnPanelOpen();
     }
@@ -122,7 +123,7 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
     closeDropdown(e?: any): void {
         this.isPanelOpen = false;
         this._adapter.toggleListVisible(false);
-        // this._adapter.unregisterClickOutsideHandler();
+        this._adapter.unregisterClickOutsideHandler();
         this._adapter.notifyDropdownVisibleChange(false);
         // After closing the panel, you can still open the panel by pressing the enter key
         // this.unBindKeyBoardEvent();
@@ -155,7 +156,7 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
         this._adapter.notifySearch(inputValue);
         this._adapter.notifyChange(inputValue);
         this._modifyFocusIndex(inputValue);
-        if (!this.isPanelOpen){
+        if (!this.isPanelOpen) {
             this.openDropdown();
         }
     }
@@ -234,7 +235,7 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
 
         const options = this._generateList(data);
         // Get the option whose value match from options
-        let selectedOption: StateOptionItem | Array<StateOptionItem> = options.filter(option => renderSelectedItem(option) === selectedValue);
+        let selectedOption: StateOptionItem | Array<StateOptionItem> = options.length ? options.filter(option => renderSelectedItem(option) === selectedValue) : [];
         const canMatchInData = selectedOption.length;
 
         const selectedOptionIndex = options.findIndex(option => renderSelectedItem(option) === selectedValue);
@@ -261,11 +262,13 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
 
         let { data, defaultActiveFirstOption } = this.getProps();
 
-        let renderSelectedItem = this._getRenderSelectedItem();
-
-        const options = this._generateList(data);
+        let selectedOptionIndex = -1;
 
-        const selectedOptionIndex = options.findIndex(option => renderSelectedItem(option) === searchValue);
+        if (searchValue) {
+            let renderSelectedItem = this._getRenderSelectedItem();
+            const options = this._generateList(data);
+            selectedOptionIndex = options.findIndex(option => renderSelectedItem(option) === searchValue);
+        }
 
         if (selectedOptionIndex === -1 && defaultActiveFirstOption) {
             if (focusIndex !== 0) {
@@ -287,7 +290,9 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
         let { renderSelectedItem } = this.getProps();
 
         if (typeof renderSelectedItem === 'undefined') {
-            renderSelectedItem = (option: any) => option.value;
+            renderSelectedItem = (option: any) => {
+                return option?.value;
+            };
         } else if (renderSelectedItem && typeof renderSelectedItem === 'function') {
             // do nothing
         }
@@ -335,6 +340,9 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
             case KeyCode.ESC:
                 this.closeDropdown();
                 break;
+            case KeyCode.TAB:
+                this.closeDropdown();
+                break;
             default:
                 break;
         }
@@ -383,7 +391,7 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
 
     _handleArrowKeyDown(offset: number): void {
         const { visible } = this.getStates();
-        if (!visible){
+        if (!visible) {
             this.openDropdown();
         } else {
             this._getEnableFocusIndex(offset);  
@@ -392,7 +400,7 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
 
     _handleEnterKeyDown() {
         const { visible, options, focusIndex } = this.getStates();
-        if (!visible){
+        if (!visible) {
             this.openDropdown();
         } else {
             if (focusIndex !== undefined && focusIndex !== -1 && options.length !== 0) {
@@ -420,12 +428,7 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
         // only need persist on react adapter
         // https://reactjs.org/docs/legacy-event-pooling.html
         this._persistEvent(e);
-        // In order to handle the problem of losing onClick binding when clicking on the padding area, the onBlur event is triggered first to cause the react view to be updated
-        // internal-issues:1231
-        setTimeout(() => {
-            this._adapter.notifyBlur(e);
-            this.closeDropdown();
-        }, 100);
+        this._adapter.notifyBlur(e);
     }
 }
 

package/autoComplete/optionFoundation.ts

@@ -22,10 +22,8 @@ export default class OptionFoundation extends BaseFoundation<OptionDefaultAdapte
         super({ ...adapter });
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     init() {}
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     destroy() {}
 
     onOptionClick(option: BasicOptionProps) {

package/avatar/animation.scss

@@ -0,0 +1,19 @@
+$animation_duration-additionalBorder: 800ms; // 边框动画持续时间
+$animation_duration-content: 1000ms; // 内容动画持续时间
+
+
+$animation_opacity-additionalBorder-start: 1; // 边框动画起始透明度
+$animation_opacity-additionalBorder-end: 0; // 边框动画结束透明度
+
+
+$animation_width-additionalBorder-end:0; // 边框动画结束宽度
+
+
+$animation_scale-additionalBorder-start: 1; // 边框动画起始缩放比例
+$animation_scale-additionalBorder-end: 1.15; // 边框动画结束缩放比例
+
+$animation_scale-content-start: 1; // 边框动画起始缩放比例
+$animation_scale-content-middle: 0.9; // 边框动画中间态缩放比例
+$animation_scale-content-end: 1; // 边框动画结束缩放比例
+
+

package/avatar/avatar.scss

@@ -1,6 +1,8 @@
+@import "./animation.scss";
 @import './variables.scss';
 @import './mixin.scss';
 
+
 $module: #{$prefix}-avatar;
 $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'light-green', 'lime', 'orange', 'pink',
     'purple', 'red', 'teal', 'violet', 'yellow';
@@ -15,6 +17,12 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     text-align: center;
     vertical-align: middle;
 
+
+
+
+
+
+
     &:focus-visible {
         outline: $width-avatar-outline solid $color-avatar-outline-focus;
     }
@@ -33,7 +41,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
         display: flex;
         align-items: center;
         @include font-size-regular;
-        font-weight: 600;
+        font-weight: $font-weight-bold;
     }
 
     &-content {
@@ -149,6 +157,197 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &:hover {
         cursor: pointer;
     }
+
+
+}
+
+
+.#{$module}-wrapper{
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    width: fit-content;
+    .#{$module}-top_slot-bg{
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        border-radius: 50%;
+        overflow: hidden;
+        
+        &-small{
+            width: $width-avatar_small;
+            height: $width-avatar_small;
+        }
+
+        &-default{
+            width: $width-avatar_default;
+            height: $width-avatar_default;
+        }
+
+        &-medium{
+            width: $width-avatar_medium;
+            height: $width-avatar_medium;
+        }
+
+        &-large{
+            width: $width-avatar_large;
+            height: $width-avatar_large;
+        }
+
+        &-extra-large{
+            width: $width-avatar_extra_large;
+            height: $width-avatar_extra_large;
+        }
+
+
+        &-svg{
+            position: absolute;
+        }
+        &-svg-small{
+            top: $spacing-avatar-top_slot_small-shift;
+            scale: $spacing-avatar-top_slot_small-scale;
+        }
+        &-svg-default{
+            top: $spacing-avatar-top_slot_default-shift;
+            scale: $spacing-avatar-top_slot_default-scale;
+        }
+        &-svg-medium{
+            top: $spacing-avatar-top_slot_medium-shift;
+            scale: $spacing-avatar-top_slot_medium-scale;
+        }
+        &-svg-large{
+            top: $spacing-avatar-top_slot_large-shift;
+            scale: $spacing-avatar-top_slot_large-scale;
+        }
+        &-svg-extra-large{
+            top: $spacing-avatar-top_slot_extra_large-shift;
+            scale: $spacing-avatar-top_slot_extra_large-scale;
+        }
+    }
+
+    .#{$module}-top_slot-bg-with_border{
+        //top: $width-avatar_additional-border;
+    }
+
+    .#{$module}-top_slot-wrapper{
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        .#{$module}-top_slot{
+            color:$color-avatar-top_slot_text;
+            font-weight: $font-weight-bold;
+            &-content{
+                user-select: none;
+                position: relative;
+                line-height: normal;
+                &-small{
+                    font-size: $font-avatar_top_slot-small-fontSize;
+                    margin-top: $spacing-avatar-top_slot_small-content-marginTop;
+                }
+                &-default{
+                    font-size: $font-avatar_top_slot-default-fontSize;
+                    margin-top: $spacing-avatar-top_slot_default-content-marginTop;
+                }
+                &-medium{
+                    font-size: $font-avatar_top_slot-medium-fontSize;
+                    margin-top: $spacing-avatar-top_slot_medium-content-marginTop;
+                }
+                &-large{
+                    font-size: $font-avatar_top_slot-large-fontSize;
+                    margin-top: $spacing-avatar-top_slot_large-content-marginTop;
+                }
+                &-extra-large{
+                    font-size: $font-avatar_top_slot-extra_large-fontSize;
+                    margin-top: $spacing-avatar-top_slot_extra_large-content-marginTop;
+                }
+            }
+
+        }
+    }
+
+
+
+    .#{$module}-bottom_slot{
+        color:var(--semi-color-bg-0);
+        position: absolute;
+        cursor: pointer;
+        bottom: $spacing-avatar_additional-borderGap + $width-avatar_additional-border;
+        transform: translateY(50%);
+        user-select: none;
+        &-shape_circle{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: $color-avatar-bottom_slot_bg;
+            border-radius: var(--semi-border-radius-circle);
+            line-height:normal;
+        }
+        &-shape_circle-small{
+            width:$width-avatar-bottom_slot_circle_small;
+            height:$width-avatar-bottom_slot_circle_small;
+            font-size: $font-avatar_bottom_slot-small-fontSize;
+        }
+        &-shape_circle-default{
+            width:$width-avatar-bottom_slot_circle_default;
+            height:$width-avatar-bottom_slot_circle_default;
+            font-size: $font-avatar_bottom_slot-default-fontSize;
+        }
+        &-shape_circle-medium{
+            width:$width-avatar-bottom_slot_circle_medium;
+            height:$width-avatar-bottom_slot_circle_medium;
+            font-size: $font-avatar_bottom_slot-medium-fontSize;
+        }
+        &-shape_circle-large{
+            width:$width-avatar-bottom_slot_circle_large;
+            height:$width-avatar-bottom_slot_circle_large;
+            font-size: $font-avatar_bottom_slot-large-fontSize;
+        }
+
+        &-shape_circle-extra-large{
+            width:$width-avatar-bottom_slot_circle_extra_large;
+            height:$width-avatar-bottom_slot_circle_extra_large;
+            font-size: $font-avatar_bottom_slot-extra_large-fontSize;
+        }
+
+
+
+        &-shape_square{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: $color-avatar-bottom_slot_bg;
+            border-radius: $radius-avatar-bottom_slot_square;
+            padding: $spacing-avatar-bottom_slot_square-paddingY $spacing-avatar-bottom_slot_square-paddingX;
+            font-weight: $font-weight-bold;
+            border-style: solid;
+            border-color: $color-avatar-bottom_slot_square-border;
+        }
+
+        &-shape_square-small{
+            font-size: $font-avatar_bottom_slot-small-fontSize;
+            border-width: $width-avatar-bottom_slot_square_small-border;
+        }
+        &-shape_square-default{
+            font-size: $font-avatar_bottom_slot-default-fontSize;
+            border-width: $width-avatar-bottom_slot_square_default-border;
+
+        }
+        &-shape_square-medium{
+            font-size: $font-avatar_bottom_slot-medium-fontSize;
+            border-width: $width-avatar-bottom_slot_square_medium-border;
+
+        }
+        &-shape_square-large{
+          font-size: $font-avatar_bottom_slot-large-fontSize;
+            border-width: $width-avatar-bottom_slot_square_large-border;
+        }
+
+        &-shape_square-extra-large{
+            font-size: $font-avatar_bottom_slot-extra_large-fontSize;
+              border-width: $width-avatar-bottom_slot_square_extra_large-border;
+          }
+    }
 }
 
 .#{$module}-group {
@@ -206,6 +405,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
         }
     }
 
+
     .#{$module}-item-more {
         background-color: $color-avatar_more_default-bg-default;
     }
@@ -217,4 +417,117 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     }
 }
 
+
+.#{$module}-additionalBorder{
+    border-style: solid;
+    border-color: $color-avatar_additional-border;
+    display: inline-block;
+    box-sizing: border-box;  
+    position: absolute;
+    border-width: $width-avatar_additional-border;
+    top: -1 *  $width-avatar_additional-border - $spacing-avatar_additional-borderGap;
+    left: -1 *  $width-avatar_additional-border - $spacing-avatar_additional-borderGap;
+
+    &-extra-extra-small{
+        width: $width-avatar_extra_extra_small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+        height: $width-avatar_extra_extra_small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+    }
+
+    &-extra-small{
+        width: $width-avatar_extra-small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+        height: $width-avatar_extra-small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+    }
+
+    &-small{
+        width: $width-avatar_small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+        height: $width-avatar_small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+    }
+
+    &-default{
+        width: $width-avatar_default + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+        height: $width-avatar_default + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+    }
+
+    &-medium{
+      
+        width: $width-avatar_medium + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+        height: $width-avatar_medium + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+    }
+
+    &-large{
+        width: $width-avatar_large + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+        height: $width-avatar_large + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+       
+    }
+
+    &-extra-large{
+        width: $width-avatar_extra_large + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+        height: $width-avatar_extra_large + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+    }
+}
+
+.#{$module}-square.#{$module}-additionalBorder-extra_extra_small {
+    border-radius: $radius-avatar-extra_extra_small;
+}
+
+.#{$module}-square.#{$module}-additionalBorder-extra_small {
+    border-radius: $radius-avatar-extra_small;
+}
+
+.#{$module}-square.#{$module}-additionalBorder-small {
+    border-radius: $radius-avatar-small;
+}
+
+.#{$module}-square.#{$module}-additionalBorder-default {
+    border-radius: $radius-avatar-default;
+}
+
+.#{$module}-square.#{$module}-additionalBorder-medium {
+    border-radius: $radius-avatar-medium;
+}
+
+.#{$module}-square.#{$module}-additionalBorder-large {
+    border-radius: $radius-avatar-large;
+}
+
+.#{$module}-additionalBorder-circle{
+    border-radius: var(--semi-border-radius-circle);
+}
+
+
+.#{$module}-additionalBorder-animated{
+    animation: $animation_duration-additionalBorder linear infinite #{$module}-additionalBorder;
+}
+
+.#{$module}-animated{
+    animation: $animation_duration-content linear infinite #{$module}-content ;
+}
+
+@keyframes #{$module}-additionalBorder {
+    0% {
+        opacity: $animation_opacity-additionalBorder-start;
+        transform: scale($animation_scale-additionalBorder-start)
+    }
+
+    to {
+        border-width: $animation_width-additionalBorder-end;
+        opacity: $animation_opacity-additionalBorder-end;
+        transform: scale($animation_scale-additionalBorder-end);
+    }
+}
+
+@keyframes #{$module}-content{
+    0% {
+        transform: scale($animation_scale-content-start)
+    }
+
+    50% {
+        transform: scale($animation_scale-content-middle)
+    }
+
+    to {
+        transform: scale($animation_scale-content-start)
+    }
+}
+
 @import './rtl.scss';

package/avatar/constants.ts

@@ -7,9 +7,26 @@ const cssClasses = {
 const strings = {
     SHAPE: ['circle', 'square'],
     SIZE: ['extra-extra-small', 'extra-small', 'small', 'default', 'medium', 'large', 'extra-large'],
-    // eslint-disable-next-line max-len
-    COLOR: ['grey', 'red', 'pink', 'purple', 'violet', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'white'],
-    OVERLAP_FROM: ['start', 'end']
+    COLOR: [
+        'grey',
+        'red',
+        'pink',
+        'purple',
+        'violet',
+        'indigo',
+        'blue',
+        'light-blue',
+        'cyan',
+        'teal',
+        'green',
+        'light-green',
+        'lime',
+        'yellow',
+        'amber',
+        'orange',
+        'white',
+    ],
+    OVERLAP_FROM: ['start', 'end'],
 };
 
-export { cssClasses, strings };
+export { cssClasses, strings };

package/avatar/foundation.ts

@@ -5,7 +5,9 @@ export interface AvatarAdapter<P = Record<string, any>, S = Record<string, any>>
     notifyImgState(isImgExist: boolean): void;
     notifyLeave(event: any): void;
     notifyEnter(event: any): void;
-    setFocusVisible: (focusVisible: boolean) => void
+    setFocusVisible: (focusVisible: boolean) => void;
+    setScale: (scale: number) => void;
+    getAvatarNode: () => HTMLSpanElement
 }
 
 export default class AvatarFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<AvatarAdapter<P, S>, P, S> {
@@ -14,9 +16,14 @@ export default class AvatarFoundation<P = Record<string, any>, S = Record<string
         super({ ...adapter });
     }
 
-    init() { } // eslint-disable-line
+    init() {
+        const { children } = this.getProps();
+        if (typeof children === "string") {
+            this.changeScale();
+        }
+    }
 
-    destroy() { } // eslint-disable-line
+    destroy() { }
 
     handleImgLoadError() {
         const { onError } = this.getProps();
@@ -40,7 +47,7 @@ export default class AvatarFoundation<P = Record<string, any>, S = Record<string
             if (target.matches(':focus-visible')) {
                 this._adapter.setFocusVisible(true);
             }
-        } catch (error){
+        } catch (error) {
             warning(true, 'Warning: [Semi Avatar] The current browser does not support the focus-visible');
         }
     }
@@ -49,4 +56,14 @@ export default class AvatarFoundation<P = Record<string, any>, S = Record<string
         this._adapter.setFocusVisible(false);
     }
 
+    changeScale = () => {
+        const { gap } = this.getProps();
+        const node = this._adapter.getAvatarNode();
+        const stringNode = node?.firstChild as HTMLSpanElement;
+        const [nodeWidth, stringNodeWidth] = [node?.offsetWidth || 0, stringNode?.offsetWidth || 0];
+        if (nodeWidth !== 0 && stringNodeWidth !== 0 && gap * 2 < nodeWidth) {
+            const scale = nodeWidth - gap * 2 > stringNodeWidth ? 1 : (nodeWidth - gap * 2) / stringNodeWidth;
+            this._adapter.setScale(scale);
+        }
+    }
 }