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

package/avatar/variables.scss

@@ -24,29 +24,85 @@ $font-avatar_extra_large-lineHeight: 77px; // 文本行高 - 超大
 
 $radius-avatar: var(--semi-border-radius-circle); // 头像圆角
 
-$width-avatar_extra_large-border: 3px; // 头像描边尺寸 - 超大
-$spacing-avatar_extra_large-marginLeft: -32px; // 头像左侧外边距 - 超大
+$width-avatar_extra_large-border: 3px; // 头像组头像描边尺寸 - 超大
+$spacing-avatar_extra_large-marginLeft: -32px; // 头像组头像左侧外边距 - 超大
 
-$width-avatar_large-border: 3px; // 头像描边尺寸 - 大
+$width-avatar_large-border: 3px; // 头像组头像描边尺寸 - 大
 $spacing-avatar_large-marginLeft: -18px; // 头像左侧外边距 - 大
 
-$width-avatar_medium-border: 2px; // 头像描边尺寸 - 中
+$width-avatar_medium-border: 2px; // 头像组头像描边尺寸 - 中
 $spacing-avatar_medium-marginLeft: -12px; // 头像左侧外边距 - 中
 
-$width-avatar_default-border: 2px; // 头像描边尺寸 - 默认
+$width-avatar_default-border: 2px; // 头像组头像描边尺寸 - 默认
 $spacing-avatar_default-marginLeft: -12px; // 头像左侧外边距 - 默认
 
-$width-avatar_small-border: 2px; // 头像描边尺寸 - 小
+$width-avatar_small-border: 2px; // 头像组头像描边尺寸 - 小
 $spacing-avatar_small-marginLeft: -12px; // 头像左侧外边距 - 小
 
-$width-avatar_extra_small-border: 1px; // 头像描边尺寸 - 超小
+$width-avatar_extra_small-border: 1px; // 头像组头像描边尺寸 - 超小
 $spacing-avatar_extra_small-marginLeft: -10px; // 头像左侧外边距 - 超小
 
-$width-avatar_extra_extra_small-border: 1px; // 头像描边尺寸 - 极小
+$width-avatar_extra_extra_small-border: 1px; // 头像组头像描边尺寸 - 极小
 $spacing-avatar_extra_extra_small-marginLeft: -4px; // 头像左侧外边距 - 极小
-
 $width-avatar-outline: 2px; //头像聚焦轮廓宽度
 
+$width-avatar_additional-border: 1.5px; // 额外描边尺寸
+$color-avatar_additional-border: var(--semi-color-primary); // 额外描边颜色
+$spacing-avatar_additional-borderGap: 2px; // 额外描边与内侧间距
+
+$width-avatar-bottom_slot_circle_small: 12px; // small 头像底部 slot 圆形半径
+$width-avatar-bottom_slot_circle_default: 16px; // default 头像底部 slot 圆形半径
+$width-avatar-bottom_slot_circle_medium: 18px; // medium 头像底部 slot 圆形半径
+$width-avatar-bottom_slot_circle_large: 28px; // large 头像底部 slot 圆形半径
+$width-avatar-bottom_slot_circle_extra_large: 28px; // extra large 头像底部 slot 圆形半径
+$color-avatar-bottom_slot_bg:var(--semi-color-primary); // 头像底部 slot 背景色
+
+$radius-avatar-bottom_slot_square:4px;  // 底部 slot square 圆角
+$font-avatar_bottom_slot-small-fontSize: 5px; // small 底部 slot 文字大小
+$font-avatar_bottom_slot-default-fontSize: 12px; // default 底部 slot 文字大小
+$font-avatar_bottom_slot-medium-fontSize: 12px; // medium 底部 slot 文字大小
+$font-avatar_bottom_slot-large-fontSize: 12px; // large 底部 slot 文字大小
+$font-avatar_bottom_slot-extra_large-fontSize: 14px; // extra large 底部 slot 文字大小
+$spacing-avatar-bottom_slot_square-paddingX:4px; // 底部 slot square 形状左边距
+$spacing-avatar-bottom_slot_square-paddingY:1px; //底部 slot square 形状右边距
+
+$font-avatar_top_slot-small-fontSize: 5px; // small 顶部 slot 文字大小
+$font-avatar_top_slot-default-fontSize: 6px; // default 顶部 slot 文字大小
+$font-avatar_top_slot-medium-fontSize: 8px; // medium 顶部 slot 文字大小
+$font-avatar_top_slot-large-fontSize: 14px; // large 顶部 slot 文字大小
+$font-avatar_top_slot-extra_large-fontSize: 16px; // extra large 顶部 slot 文字大小
+
+$spacing-avatar-top_slot_small-content-marginTop: 0px; // small 顶部文字 marginTop
+$spacing-avatar-top_slot_default-content-marginTop: -2px; // default 顶部文字 marginTop
+$spacing-avatar-top_slot_medium-content-marginTop: 0px; // medium 顶部文字 marginTop
+$spacing-avatar-top_slot_large-content-marginTop: 0px; // large 顶部文字 marginTop
+$spacing-avatar-top_slot_extra_large-content-marginTop: 0px; // extra large 顶部文字 marginTop 
+
+$color-avatar-bottom_slot_square-border:var(--semi-color-bg-0); // 底部 square 边框颜色
+$width-avatar-bottom_slot_square_small-border:2px; // small 头像底部 square 边框宽度
+$width-avatar-bottom_slot_square_default-border:2px; // default 头像底部 square 边框宽度
+$width-avatar-bottom_slot_square_medium-border:2px; // medium 头像底部 square 边框宽度 
+$width-avatar-bottom_slot_square_large-border:2px; // large 头像底部 square 边框宽度
+$width-avatar-bottom_slot_square_extra_large-border:2px; // extra large 头像底部 square 边框宽度
+
+$color-avatar-top_slot_text:var(--semi-color-bg-0); //顶部 Slot 文字颜色
+$color-avatar-top_slot_gradient_start: var(--semi-color-primary); // 顶部 slot 渐变起始色
+$color-avatar-top_slot_gradient_end: var(--semi-color-primary); //  顶部 slot 渐变结束色
+
+
+$spacing-avatar-top_slot_small-shift: -28px; // small 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+$spacing-avatar-top_slot_default-shift: -32px; // default 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+$spacing-avatar-top_slot_medium-shift: -30px; // medium 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+$spacing-avatar-top_slot_large-shift: -30px; // large 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+$spacing-avatar-top_slot_extra_large-shift: -32px; // extra large 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+
+$spacing-avatar-top_slot_small-scale: 0.4; // small 顶部 slot 缩放比例
+$spacing-avatar-top_slot_default-scale: 0.7; // default 顶部 slot 缩放比例
+$spacing-avatar-top_slot_medium-scale: 0.8; // medium 顶部 slot 缩放比例
+$spacing-avatar-top_slot_large-scale: 1.1; // large 顶部 slot 缩放比例
+$spacing-avatar-top_slot_extra_large-scale: 1.4; // large 顶部 slot 缩放比例 
+
+
 // radius
 $radius-avatar_extra_extra_small: 3px; // 极小尺寸头像的圆角
 $radius-avatar_extra_small: 3px; // 超小尺寸头像的圆角
@@ -54,4 +110,4 @@ $radius-avatar_small: 3px; // 小尺寸头像的圆角
 $radius-avatar_default: 3px; // 默认尺寸头像的圆角
 $radius-avatar_medium: 3px; // 中尺寸头像的圆角
 $radius-avatar_large: 6px; // 大尺寸头像的圆角
-$radius-avatar_extra_large: 12px; // 超大尺寸头像的圆角
+$radius-avatar_extra_large: 12px; // 超大尺寸头像的圆角

package/badge/badge.scss

@@ -163,6 +163,19 @@ $module: #{$prefix}-badge;
         }
     }
 
+    &-success {
+        &.#{$module}-solid {
+            background-color: $color-badge_success_solid-bg-default;
+        }
+        &.#{$module}-light {
+            background-color: $color-badge_success_light-bg-default;
+            color: $color-badge_success_light-text-default;
+        }
+        &.#{$module}-inverted {
+            color: $color-badge_success_inverted-text-default;
+        }
+    }
+
 }
 
 @import "./rtl.scss";

package/badge/constants.ts

@@ -7,7 +7,7 @@ const cssClasses = {
 };
 
 const strings = {
-    TYPE_SET: ['primary', 'secondary', 'tertiary', 'warning', 'danger'],
+    TYPE_SET: ['success', 'primary', 'secondary', 'tertiary', 'warning', 'danger'],
     THEME_SET: ['solid', 'light', 'inverted'],
     POS_SET: ['leftTop', 'leftBottom', 'rightTop', 'rightBottom'],
 };

package/badge/variables.scss

@@ -29,6 +29,10 @@ $color-badge_warning_light-bg-default: var(--semi-color-warning-light-default);
 $color-badge_warning_light-text-default: var(--semi-color-warning); // 文字颜色 - 浅版危险
 $color-badge_warning_inverted-text-default: var(--semi-color-warning); // 文字颜色 - 白底
 
+$color-badge_success_solid-bg-default: var(--semi-color-success); // 背景颜色 - 成功
+$color-badge_success_light-bg-default: var(--semi-color-success-light-default); // 背景颜色 - 浅版成功
+$color-badge_success_light-text-default: var(--semi-color-success); // 文字颜色 - 浅版成功
+$color-badge_success_inverted-text-default: var(--semi-color-success); // 文字颜色 - 白底
 
 $width-badge_dot: 8px; // 点状徽标宽度
 $height-badge_dot: 8px; // 点状徽标高度

package/base/foundation.ts

@@ -8,7 +8,6 @@ import log from '../utils/log';
 import { noop } from 'lodash';
 
 export type noopFunction = (...args: any) => any;
-// eslint-disable-next-line
 export interface DefaultAdapter<P = Record<string, any>, S = Record<string, any>> {
     getContext(key: string): any;
     getContexts(): any;
@@ -16,7 +15,7 @@ export interface DefaultAdapter<P = Record<string, any>, S = Record<string, any>
     getProps(): P;
     getState(key: string): any;
     getStates(): S;
-    setState(s: Pick<S, keyof S>, callback?: any): void;
+    setState<K extends keyof S>(s: Pick<S, K>, callback?: any): void;
     getCache(c: string): any;
     getCaches(): any;
     setCache(key: any, value: any): void;
@@ -88,7 +87,7 @@ class BaseFoundation<T extends Partial<DefaultAdapter<P, S>>, P = Record<string,
         return this._adapter.getStates();
     }
 
-    setState(states: S, cb?: (...args: any) => void) {
+    setState<K extends keyof S>(states: Pick<S, K>, cb?: (...args: any) => void) {
         return this._adapter.setState({ ...states }, cb);
     }
 

package/breadcrumb/breadcrumb.scss

@@ -15,10 +15,12 @@ $module: #{$prefix}-breadcrumb;
 
         &-loose {
             @include font-size-regular;
+            font-size: $font-breadcrumb_loose-fontSize;
         }
 
         &-compact {
             @include font-size-small;
+            font-size: $font-breadcrumb_compact-fontSize;
         }
     }
 
@@ -67,6 +69,10 @@ $module: #{$prefix}-breadcrumb;
             color: $color-breadcrumb_active-text-active;
             cursor: default;
         }
+
+        .#{$prefix}-typography {
+            font-weight: $font-breadcrumb_active-fontWeight;
+        }
     }
 
     &-item-icon {
@@ -80,14 +86,14 @@ $module: #{$prefix}-breadcrumb;
         }
     }
 
-    &-item-icon+&-item-title {
-        margin-left: $spacing-breadcrumb_item_text-marginLeft;
-    }
+    // &-item-icon+&-item-title {
+    //     margin-left: $spacing-breadcrumb_item_text-marginLeft;
+    // }
 
     &-item-link {
         display: inline-flex;
         align-items: center;
-        column-gap: 4px;
+        column-gap: $spacing-breadcrumb_item_text-marginLeft;
         text-decoration: inherit;
         transition: color $transition_duration-breadcrumb_link-text $transition-function_breadcrumb_link-text $transition_delay-breadcrumb_link-text;
         transform: scale($transform_scale-breadcrumb_link-text);

package/breadcrumb/foundation.ts

@@ -1,4 +1,3 @@
-/* eslint-disable prefer-const */
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import isEnterPress from '../utils/isEnterPress';
 import { BreadcrumbItemInfo, Route } from './itemFoundation';

package/breadcrumb/variables.scss

@@ -17,3 +17,7 @@ $color-breadcrumb-restItem-text-default: var(--semi-color-text-2); // 面包屑
 
 $font-breadcrumb_default-fontWeight: $font-weight-regular; // 面包屑文字字重 - 未选中
 $font-breadcrumb_active-fontWeight: $font-weight-bold; // 面包屑文字字重 - 选中
+
+
+$font-breadcrumb_compact-fontSize:$font-size-small; // 面包屑文字大小 - 紧凑
+$font-breadcrumb_loose-fontSize:$font-size-regular; // 面包屑文字大小 - 宽松

package/button/button.scss

@@ -11,7 +11,6 @@ $module: #{$prefix}-button;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    margin: 0;
     cursor: pointer;
     user-select: none;
     border: $width-button-border $color-button_primary-border-default solid;
@@ -40,74 +39,117 @@ $module: #{$prefix}-button;
     &-danger {
         background-color: $color-button_danger-bg-default;
         color: $color-button_danger-text-default;
-      transition: background-color $transition_duration-button_danger-bg $transition_function-button_danger-bg $transition_delay-button_danger-bg,
-      border $transition_duration-button_danger-border $transition_function-button_danger-border $transition_delay-button_danger-border;
-      transform: scale($transform-scale-button_danger);
+        transition: background-color $transition_duration-button_danger-bg $transition_function-button_danger-bg $transition_delay-button_danger-bg,
+        border $transition_duration-button_danger-border $transition_function-button_danger-border $transition_delay-button_danger-border;
+        transform: scale($transform-scale-button_danger);
 
+        &-disabled {
+            background-color: $color-button_disabled_danger-bg-default;
+
+            &.#{$module}-light {
+                background-color: $color-button_disabled_light_danger-bg-default;
+            }
+        }
 
         &:hover {
             background-color: $color-button_danger-bg-hover;
         }
+
         &:active {
             background-color: $color-button_danger-bg-active;
         }
+
         &.#{$module}-light,
         &.#{$module}-borderless {
             color: $color-button_danger_borderless-text-default;
         }
+
         &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
             outline: $width-button-outline solid $color-button_danger-outline-focus;
         }
     }
+
     &-warning {
         background-color: $color-button_warning-bg-default;
         color: $color-button_warning-text-default;
-      transition: background-color $transition_duration-button_warning-bg $transition_function-button_warning-bg $transition_delay-button_warning-bg,
-      border $transition_duration-button_warning-border $transition_function-button_warning-border $transition_delay-button_warning-border;
-      transform:scale($transform_scale-button_warning);
+        transition: background-color $transition_duration-button_warning-bg $transition_function-button_warning-bg $transition_delay-button_warning-bg,
+        border $transition_duration-button_warning-border $transition_function-button_warning-border $transition_delay-button_warning-border;
+        transform: scale($transform_scale-button_warning);
+
+        &-disabled {
+            background-color: $color-button_disabled_warning-bg-default;
+
+            &.#{$module}-light {
+                background-color: $color-button_disabled_light_warning-bg-default;
+            }
+        }
 
         &:hover {
             background-color: $color-button_warning-bg-hover;
         }
+
         &:active {
             background-color: $color-button_warning-bg-active;
         }
+
         &.#{$module}-light,
         &.#{$module}-borderless {
             color: $color-button_warning_borderless-text-default;
         }
+
         &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
             outline: $width-button-outline solid $color-button_warning-outline-focus;
         }
     }
+
     &-tertiary {
         background-color: $color-button_tertiary-bg-default;
         color: $color-button_tertiary-text-default;
-      transition: background-color $transition_duration-button_tertiary-bg $transition_function-button_tertiary-bg $transition_delay-button_tertiary-bg,
-      border $transition_duration-button_tertiary-border $transition_function-button_tertiary-border $transition_delay-button_tertiary-border;
-      transform:scale($transform_scale_button_tertiary);
+        transition: background-color $transition_duration-button_tertiary-bg $transition_function-button_tertiary-bg $transition_delay-button_tertiary-bg,
+        border $transition_duration-button_tertiary-border $transition_function-button_tertiary-border $transition_delay-button_tertiary-border;
+        transform: scale($transform_scale_button_tertiary);
+
+        &-disabled {
+            background-color: $color-button_disabled_tertiary-bg-default;
+
+            &.#{$module}-light {
+                background-color: $color-button_disabled_light_tertiary-bg-default;
+            }
+        }
 
         &:hover {
             background-color: $color-button_tertiary-bg-hover;
         }
+
         &:active {
             background-color: $color-button_tertiary-bg-active;
         }
+
         &.#{$module}-light,
         &.#{$module}-borderless {
             color: $color-button_tertiary_solid-text-default;
         }
     }
+
     &-primary {
         background-color: $color-button_primary-bg-default;
         color: $color-button_primary-text-default;
         transition: background-color $transition_duration-button_primary-bg $transition_function-button_primary-bg $transition_delay-button_primary-bg,
         border $transition_duration-button_primary-border $transition_function-button_primary-border $transition_delay-button_primary-border;;
-      transform:scale($transform_scale-button_primary);
+        transform: scale($transform_scale-button_primary);
+
+        &-disabled {
+            background-color: $color-button_disabled_primary-bg-default;
+
+            &.#{$module}-light {
+                background: $color-button_disabled_light_primary-bg-default;
+            }
+        }
 
         &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
             background-color: $color-button_primary-bg-hover;
         }
+
         &:not(.#{$module}-borderless):not(.#{$module}-light):active {
             background-color: $color-button_primary-bg-active;
         }
@@ -117,17 +159,27 @@ $module: #{$prefix}-button;
             color: $color-button_primary_borderless-text-default;
         }
     }
+
     &-secondary {
         background-color: $color-button_secondary-bg-default;
         outline-color: $color-button_secondary-border-default;
         color: $color-button_secondary-text-default;
-      transition: background-color $transition_duration-button_secondary-bg $transition_function-button_secondary-bg $transition_delay-button_secondary-bg,
-      border $transition_duration-button_secondary-border $transition_function-button_secondary-border $transition_delay-button_secondary-border;
-      transform:scale($transform_scale-button_secondary);
+        transition: background-color $transition_duration-button_secondary-bg $transition_function-button_secondary-bg $transition_delay-button_secondary-bg,
+        border $transition_duration-button_secondary-border $transition_function-button_secondary-border $transition_delay-button_secondary-border;
+        transform: scale($transform_scale-button_secondary);
+
+        &-disabled {
+            background-color: $color-button_disabled_secondary-bg-default;
+
+            &.#{$module}-light {
+                background-color: $color-button_disabled_light_secondary-bg-default;
+            }
+        }
 
         &:hover {
             background-color: $color-button_secondary-bg-hover;
         }
+
         &:active {
             background-color: $color-button_secondary-bg-active;
         }
@@ -137,13 +189,14 @@ $module: #{$prefix}-button;
             color: $color-button_secondary_borderless-text-default;
         }
     }
+
     &-disabled {
         color: $color-button_disabled_solid-text-default;
-        background-color: $color-button_disabled-bg-default;
+
         &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
             color: $color-button_disabled-text-hover;
-            background-color: $color-button_disabled-bg-hover;
         }
+
         cursor: not-allowed;
 
         &.#{$module}-light,
@@ -151,16 +204,18 @@ $module: #{$prefix}-button;
             color: $color-button_disabled-text-default;
         }
     }
+
     &-borderless {
         background-color: transparent;
         border: $width-button_borderless-border $color-button_borderless-border-default solid;
-      transition:background-color $transition_duration-button_borderless-bg $transition_function-button_borderless-bg $transition_delay-button_borderless-bg;
-      transform:scale($transform_scale-button_borderless);
+        transition: background-color $transition_duration-button_borderless-bg $transition_function-button_borderless-bg $transition_delay-button_borderless-bg;
+        transform: scale($transform_scale-button_borderless);
 
         &:not(.#{$module}-disabled):hover {
             background-color: $color-button_borderless-bg-hover;
             border: $width-button_borderless-border $color-button_borderless-border-hover solid;
         }
+
         &:not(.#{$module}-disabled):active {
             background-color: $color-button_borderless-bg-active;
             border: $width-button_borderless-border $color-button_borderless-border-active solid;
@@ -170,19 +225,21 @@ $module: #{$prefix}-button;
     &-light {
         background-color: $color-button_light-bg-default;
         border: $width-button_light-border $color-button_light-border-default solid;
-      transition: background-color $transition_duration-button_light-bg $transition_function-button_light-bg $transition_delay-button_light-bg,
-      border $transition_duration-button_light-border $transition_function-button_light-border $transition_delay-button_light-border;
-      transform:scale($transform_scale-button_light);
+        transition: background-color $transition_duration-button_light-bg $transition_function-button_light-bg $transition_delay-button_light-bg,
+        border $transition_duration-button_light-border $transition_function-button_light-border $transition_delay-button_light-border;
+        transform: scale($transform_scale-button_light);
 
         &:not(.#{$module}-disabled):hover {
             background-color: $color-button_light-bg-hover;
             border: $width-button_light-border $color-button_light-border-hover solid;
         }
+
         &:not(.#{$module}-disabled):active {
             background-color: $color-button_light-bg-active;
             border: $width-button_light-border $color-button_light-border-active solid;
         }
     }
+
     &-size-small {
         height: $height-button_small;
         padding-top: $spacing-button_small-paddingTop;
@@ -190,6 +247,7 @@ $module: #{$prefix}-button;
         padding-left: $spacing-button_small-paddingLeft;
         padding-right: $spacing-button_small-paddingRight;
     }
+
     &-size-large {
         height: $height-button_large;
         padding-top: $spacing-button_large-paddingTop;
@@ -197,6 +255,7 @@ $module: #{$prefix}-button;
         padding-left: $spacing-button_large-paddingLeft;
         padding-right: $spacing-button_large-paddingRight;
     }
+
     &-block {
         width: 100%;
     }
@@ -260,6 +319,7 @@ $module: #{$prefix}-button;
                 border-top-left-radius: $radius-button_group;
                 border-bottom-left-radius: $radius-button_group;
             }
+
             &:last-child {
                 border-top-right-radius: $radius-button_group;
                 border-bottom-right-radius: $radius-button_group;
@@ -274,24 +334,31 @@ $module: #{$prefix}-button;
             &-primary {
                 background-color: $color-button_primary-bg-default;
             }
+
             &-secondary {
                 background-color: $color-button_secondary-bg-default;
             }
+
             &-tertiary {
                 background-color: $color-button_tertiary-bg-default;
             }
+
             &-warning {
                 background-color: $color-button_warning-bg-default;
             }
+
             &-danger {
                 background-color: $color-button_danger-bg-default;
             }
+
             &-disabled {
                 background-color: $color-button_disabled-bg-default;
             }
+
             &-light {
                 background-color: $color-button_light-bg-default;
             }
+
             &-borderless {
                 background-color: transparent;
             }

package/button/iconButton.scss

@@ -25,6 +25,7 @@ $module: #{$prefix}-button;
                 width: 16px;
                 height: 16px;
                 animation: .6s linear infinite #{$prefix}-animation-rotate;
+                animation-fill-mode: forwards;
             }
         }
     }

package/button/splitButtonGroup.scss

@@ -10,19 +10,20 @@ $icon: #{$module}-with-icon;
     .#{$module} {
         border-radius: 0;
         margin-right: 1px;
-    }
 
-    :first-child {
-        border-top-left-radius: var(--semi-border-radius-small);
-        border-bottom-left-radius: var(--semi-border-radius-small);
-    }
+        &-first {
+            border-top-left-radius: var(--semi-border-radius-small);
+            border-bottom-left-radius: var(--semi-border-radius-small);
+        }
 
-    :last-child {
-        border-top-right-radius: var(--semi-border-radius-small);
-        border-bottom-right-radius: var(--semi-border-radius-small);
-        margin-right: unset;
+        &-last {
+            border-top-right-radius: var(--semi-border-radius-small);
+            border-bottom-right-radius: var(--semi-border-radius-small);
+            margin-right: unset;
+        }
     }
 
+
     &:hover {
         // 因为上面那条规则，导致原来的active被覆盖
         .#{$module}-borderless:active {

package/button/variables.scss

@@ -82,6 +82,13 @@ $color-button_disabled-text-default: var(--semi-color-disabled-text); // 禁用
 $color-button_disabled-bg-default: var(--semi-color-disabled-bg); // 禁用按钮背景颜色
 $color-button_disabled-text-hover: $color-button_disabled-text-default; // 禁用按钮文字颜色 - 悬浮
 $color-button_disabled-bg-hover: var(--semi-color-disabled-bg); // 禁用按钮背景颜色 - 悬浮
+$color-button_disabled_primary-bg-default: $color-button_disabled-bg-default; // 禁用 primary 按钮背景颜色
+$color-button_disabled_secondary-bg-default: $color-button_disabled-bg-default; // 禁用 secondary 按钮背景颜色
+$color-button_disabled_danger-bg-default: $color-button_disabled-bg-default; // 禁用 danger 按钮背景颜色
+$color-button_disabled_warning-bg-default: $color-button_disabled-bg-default; // 禁用 warning 按钮背景颜色
+$color-button_disabled_tertiary-bg-default: $color-button_disabled-bg-default; // 禁用 tertiary 按钮背景颜色
+
+
 
 // light
 $color-button_light-bg-default: var(--semi-color-fill-0); // 浅色按钮背景颜色
@@ -92,6 +99,12 @@ $color-button_light-border-hover: $color-button_light-border-default; // 浅色
 $color-button_light-border-active: $color-button_light-border-hover; // 浅色按钮描边颜色 - 按下
 $width-button_light-border: 0; // 浅色按钮描边宽度
 
+$color-button_disabled_light_primary-bg-default: $color-button_light-bg-default; // 禁用 light primary 按钮背景颜色
+$color-button_disabled_light_secondary-bg-default: $color-button_light-bg-default; // 禁用 light secondary 按钮背景颜色
+$color-button_disabled_light_danger-bg-default: $color-button_light-bg-default; // 禁用 light danger 按钮背景颜色
+$color-button_disabled_light_warning-bg-default: $color-button_light-bg-default; // 禁用 light warning 按钮背景颜色
+$color-button_disabled_light_tertiary-bg-default: $color-button_light-bg-default; // 禁用 light tertiary 按钮背景颜色
+
 // borderless
 $color-button_borderless-text-default: var(--semi-color-primary); // 无背景按钮背景颜色
 $color-button_borderless-bg-hover: var(--semi-color-fill-0); // 无背景按钮背景颜色 - 悬浮

package/calendar/calendar.scss

@@ -273,7 +273,7 @@ $module: #{$prefix}-calendar;
                 justify-content: center;
                 align-items: center;
 
-                span {
+                > span {
                     display: flex;
                     align-items: center;
                     justify-content: center;

package/calendar/eventUtil.ts

@@ -96,9 +96,9 @@ export interface DateObj {
     month: string
 }
 
-export type weeekStartsOnEnum = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export type weekStartsOnEnum = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
-export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode: string, locale: Locale, weekStartsOn: weeekStartsOnEnum) => {
+export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode: string, locale: Locale, weekStartsOn: weekStartsOnEnum) => {
     const today = getCurrDate();
     const arr: Array<DateObj> = [];
     [...Array(rangeLen).keys()].map(ind => {
@@ -121,15 +121,17 @@ export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode:
 
 /**
  *
- * @param {value} date
+ * @param {Date} date
+ * @param {Date} monthStart current month start date, using for month mode
  * @param {string} mode
  * @param {string} locale
  * @returns {object[]} { date: Date, dayString: string, ind: number, isToday: boolean, isWeekend: boolean, weekday: string }
  * create weekly object array
  */
-export const calcWeekData = (value: Date, mode = 'week', locale: Locale, weekStartsOn: weeekStartsOnEnum) => {
+export const calcWeekData = (value: Date, monthStart: Date | null, mode = 'week', locale: Locale, weekStartsOn: weekStartsOnEnum) => {
     const start = startOfWeek(value, { weekStartsOn });
-    return calcRangeData(value, start, 7, mode, locale, weekStartsOn);
+    const realValue = monthStart || value;
+    return calcRangeData(realValue, start, 7, mode, locale, weekStartsOn);
 };
 
 /**
@@ -228,7 +230,11 @@ export const filterEvents = (events: Map<string, EventObject[]>, start: Date, en
         const item = events.get(day);
         const date = new Date(day);
         if (isDateInRange(date, start, end)) {
-            res.set(day, item);
+            if (res.has(day)) {
+                res.set(day, [...res.get(day), ...item]);
+            } else {
+                res.set(day, item);
+            }
         } else if (isBefore(end, date)) {
             // do nothing
         } else {
@@ -249,8 +255,7 @@ export const filterEvents = (events: Map<string, EventObject[]>, start: Date, en
  * @returns {arr}
  * filter out event that is not in the week range
  */
-// eslint-disable-next-line max-len
-export const filterWeeklyEvents = (events: Map<string, EventObject[]>, weekStart: Date, weekStartsOn: weeekStartsOnEnum ) => filterEvents(events, weekStart, addDays(endOfWeek(weekStart, { weekStartsOn }), 1));
+export const filterWeeklyEvents = (events: Map<string, EventObject[]>, weekStart: Date, weekStartsOn: weekStartsOnEnum ) => filterEvents(events, weekStart, addDays(endOfWeek(weekStart, { weekStartsOn }), 1));
 
 /**
  * @returns {arr}
@@ -309,7 +314,7 @@ export const parseWeeklyAllDayEvent = (
     startDate: Date,
     weekStart: Date,
     parsed: Array<Array<ParsedRangeEvent>>,
-    weekStartsOn: weeekStartsOnEnum
+    weekStartsOn: weekStartsOnEnum
 ) => parseRangeAllDayEvent(event, startDate, weekStart, addDays(endOfWeek(startDate, { weekStartsOn }), 1), parsed);
 
 
@@ -329,7 +334,6 @@ export const collectDailyEvents = (events: ParsedRangeEvent[][]) => {
 };
 
 export const renderDailyEvent = (event: EventObject) => {
-    // eslint-disable-next-line prefer-const
     let { start, end, allDay, children } = event;
     let startPos,
         endPos;