@douyinfe/semi-foundation 2.27.0-alpha.2 → 2.27.0

package/lib/es/tabs/tabs.scss

@@ -46,7 +46,7 @@ $module: #{$prefix}-tabs;
                 margin-right: $spacing-tabs_tab_icon-marginRight;
                 top: $spacing-tabs_tab_icon-top;
                 color: $color-tabs_tab-icon-default;
-                transition: color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text; //线条式tabs的 color的transition
+                transition: color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//线条式tabs的 color的transition
 
             }
 
@@ -109,88 +109,6 @@ $module: #{$prefix}-tabs;
         }
     }
 
-    &-tab-single {
-        &.#{$module}-tab {
-            @include font-size-regular;
-            cursor: pointer;
-            box-sizing: border-box;
-            position: relative;
-            display: inline-block;
-            // float: left;
-
-            font-weight: $font-tabs_tab-fontWeight;
-            color: $color-tabs_tab_line_default-text-default;
-
-            user-select: none;
-
-            .#{$prefix}-icon {
-                position: relative;
-                margin-right: $spacing-tabs_tab_icon-marginRight;
-                top: $spacing-tabs_tab_icon-top;
-                color: $color-tabs_tab-icon-default;
-                transition: color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//线条式tabs的 color的transition
-
-            }
-
-            .#{$prefix}-icon-close {
-                margin-right: 0;
-                font-size: 14px;
-                color: var(--semi-color-text-2);
-                margin-left: 10px;
-                cursor: pointer;
-            }
-
-            &:hover {
-                color: $color-tabs_tab_line_default-text-hover;
-
-                .#{$prefix}-icon {
-                    color: $color-tabs_tab-icon-hover;
-                }
-            }
-
-            &:active {
-                color: $color-tabs_tab_line_default-text-active;
-
-                .#{$prefix}-icon {
-                    color: $color-tabs_tab-icon-active;
-                }
-            }
-        }
-
-        &.#{$module}-tab-active {
-
-            &,
-            &:hover {
-                cursor: default;
-                // border-bottom: 2px solid $color-tabs_tab_line_indicator_selected-icon-default;
-                font-weight: $font-tabs_tab_active-fontWeight;
-                color: $color-tabs_tab_line_selected-text-default;
-
-                .#{$prefix}-icon {
-                    color: $color-tabs_tab_selected-icon-default;
-                }
-
-                .#{$prefix}-icon-close {
-                    color: var(--semi-color-text-2);
-                }
-            }
-
-            .#{$prefix}-icon-close:hover {
-                color: var(--semi-color-text-1);
-            }
-        }
-
-        &.#{$module}-tab-disabled {
-            cursor: not-allowed;
-            color: $color-tabs_tab_line_disabled-text-default;
-
-            &:hover {
-                color: $color-tabs_tab_line_disabled-text-hover;
-                border-bottom: none;
-            }
-        }
-    }
-
     &-bar-collapse {
         &,
         .#{$module}-bar-overflow-list {
@@ -216,10 +134,10 @@ $module: #{$prefix}-tabs;
                     outline-offset: $width-tabs-outline-offset;
                 }
             }
-            & > .#{$prefix}-button-disabled {
+            & > .#{$prefix}-button-disabled{
                 color: $color-tabs_tab-pane_arrow_disabled-text-default;
                 background-color: $color-tabs_tab-pane_arrow_disabled-bg-default;
-                &:hover {
+                &:hover{
                     color: $color-tabs_tab-pane_arrow_disabled-text-hover;
                     background-color: $color-tabs_tab-pane_arrow_disabled-bg-hover;
                 }
@@ -228,12 +146,12 @@ $module: #{$prefix}-tabs;
 
         .#{$module}-bar-arrow-start {
             margin-right: $spacing-tabs_overflow_icon-marginRight;
-            & > .#{$prefix}-button {
+            & > .#{$prefix}-button{
                 color: $color-tabs_tab-pane_arrow-text-default;
                 padding: $spacing-tabs_tab-pane_arrow;
                 border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;
                 background-color: $color-tabs_tab-pane_arrow-bg-default;
-                &:hover {
+                &:hover{
                     background-color: var(--semi-color-fill-0);
                     color: $color-tabs_tab-pane_arrow-text-hover;
                     border-color: $color-tabs_tab-pane_arrow-border-hover;
@@ -249,17 +167,17 @@ $module: #{$prefix}-tabs;
 
         .#{$module}-bar-arrow-end {
             margin-left: $spacing-tabs_overflow_icon-marginLeft;
-            & > .#{$prefix}-button {
+            & > .#{$prefix}-button{
                 color: $color-tabs_tab-pane_arrow-text-default;
                 padding: $spacing-tabs_tab-pane_arrow;
                 border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;
                 background-color: $color-tabs_tab-pane_arrow-bg-default;
-                &:hover {
+                &:hover{
                     background-color: var(--semi-color-fill-0);
                     color: $color-tabs_tab-pane_arrow-text-hover;
                     border-color: $color-tabs_tab-pane_arrow-border-hover;
                 }
-                &:active {
+                &:active{
                     background-color: var(--semi-color-fill-1);
                     color: $color-tabs_tab-pane_arrow-text-active;
                     border-color: $color-tabs_tab-pane_arrow-border-active;
@@ -284,13 +202,12 @@ $module: #{$prefix}-tabs;
         &.#{$module}-bar-top {
             border-bottom: $width-tabs_bar_line-border solid $color-tabs_tab_line_default-border-default;
             transition: color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text; //线条式tabs的 color的transition
-            transform: scale($transform_scale-tabs_tab_line-item);
+            transform:scale($transform_scale-tabs_tab_line-item);
 
             .#{$module}-tab {
                 padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
                 transition: border-bottom-color $transition_duration-tabs_tab_line-border $transition_function-tabs_tab_line-border $transition_delay-tabs_tab_line-border,
-                    color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text; //线条式tabs的border-color 的 transition
-                
+                color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text; //线条式tabs的border-color 的 transition
                 &:nth-of-type(1) {
                     padding-left: 0;
                 }
@@ -474,7 +391,7 @@ $module: #{$prefix}-tabs;
             transition: background-color $transition_duration-tabs_tab_card-bg $transition_function-tabs_tab_card-bg $transition_delay-tabs_tab_card-bg, //卡片式tabs的bg的transition
             color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//卡片式tabs的 color的transition
 
-            transform: scale($transform_scale-tabs_tab_card-item);
+            transform:scale($transform_scale-tabs_tab_card-item);
 
             &:hover {
                 background: $color-tabs_tab_card-bg-hover;
@@ -518,9 +435,9 @@ $module: #{$prefix}-tabs;
             color: $color-tabs_tab_button-text-default;
             border: none;
             transition: background-color $transition_duration-tabs-tab_button-bg $transition_function-tabs_tab_button-bg $transition_delay-tabs_tab_button-bg,//按钮tabs的背景色的transition
-                color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//按钮式tabs的 color的transition
+            color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//按钮式tabs的 color的transition
 
-            transform: scale($transform_scale-tabs_tab_button-item);
+            transform:scale($transform_scale-tabs_tab_button-item);
 
             &:hover {
                 border: none;
@@ -579,12 +496,10 @@ $module: #{$prefix}-tabs;
 
 
     @keyframes #{$module}-panel-keyframe-leftShow {
-
         0% {
             transform: translateX($animation_transform_translateX-tabs_tabPanel-leftShow);
             opacity: $animation_opacity-tabs_tabPanel_show;
         }
-
         100% {
             transform: translateX(0);
             opacity: 1;
@@ -592,12 +507,10 @@ $module: #{$prefix}-tabs;
 
     }
     @keyframes #{$module}-panel-keyframe-rightShow {
-
         0% {
             transform: translateX($animation_transform_translateX-tabs_tabPanel-rightShow);
             opacity: $animation_opacity-tabs_tabPanel_show;
         }
-
         100% {
             transform: translateX(0);
             opacity: 1;
@@ -605,12 +518,10 @@ $module: #{$prefix}-tabs;
     }
 
     @keyframes #{$module}-panel-keyframe-topShow {
-        
         0% {
             transform: translateY($animation_transform_translateX-tabs_tabPanel-leftShow);
             opacity: $animation_opacity-tabs_tabPanel_show;
         }
-        
         100% {
             transform: translateY(0);
             opacity: 1;
@@ -618,12 +529,10 @@ $module: #{$prefix}-tabs;
 
     }
     @keyframes #{$module}-panel-keyframe-bottomShow {
-        
         0% {
             transform: translateY($animation_transform_translateX-tabs_tabPanel-rightShow);
             opacity: $animation_opacity-tabs_tabPanel_show;
         }
-         
         100% {
             transform: translateY(0);
             opacity: 1;
@@ -631,241 +540,23 @@ $module: #{$prefix}-tabs;
     }
 
 
-    &-pane-animate-leftShow {
+    &-pane-animate-leftShow{
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-leftShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
         animation-fill-mode: forwards;
     }
-    &-pane-animate-rightShow {
+    &-pane-animate-rightShow{
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-rightShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
         animation-fill-mode: forwards;
     }
 
-    &-pane-animate-topShow {
+    &-pane-animate-topShow{
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-topShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
         animation-fill-mode: forwards;
     }
-
-    &-pane-animate-bottomShow {
+    &-pane-animate-bottomShow{
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-bottomShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
         animation-fill-mode: forwards;
     }
-
-    &-tab-line {
-        &.#{$module}-tab-top {
-
-            &.#{$module}-tab {
-                padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
-                transition: border-bottom-color $transition_duration-tabs_tab_line-border $transition_function-tabs_tab_line-border $transition_delay-tabs_tab_line-border,
-                    color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text; //线条式tabs的border-color 的 transition
-                
-                &:nth-of-type(1) {
-                    padding-left: 0;
-                }
-
-                border-bottom: $width-tabs_bar_line_tab-border solid transparent;
-
-                &:hover {
-                    border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
-                }
-
-                &:focus-visible {
-                    outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
-                    outline-offset: $width-tabs_bar_line-outline-offset;
-                }
-
-                &:active {
-                    border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-active;
-                }
-
-                // &:not(:last-of-type) {
-                //     margin-right: $spacing-tabs_bar_line_tab-marginRight;
-                // }
-
-                &-small {
-                    padding: $spacing-tabs_bar_line_tab_small-paddingTop $spacing-tabs_bar_line_tab_small-paddingRight $spacing-tabs_bar_line_tab_small-paddingBottom $spacing-tabs_bar_line_tab_small-paddingLeft;
-                }
-
-                &-medium {
-                    padding: $spacing-tabs_bar_line_tab_medium-paddingTop $spacing-tabs_bar_line_tab_medium-paddingRight $spacing-tabs_bar_line_tab_medium-paddingBottom $spacing-tabs_bar_line_tab_medium-paddingLeft;
-                }
-            }
-
-            &.#{$module}-tab-active {
-
-                &,
-                &:hover {
-                    border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_indicator_selected-icon-default;
-                }
-            }
-        }
-
-        &.#{$module}-tab-left {
-
-            &.#{$module}-tab {
-                padding: $spacing-tabs_bar_line_tab_left-padding;
-                border-left: $width-tabs_bar_line_tab-border solid transparent;
-                transition: background-color $transition_duration-tabs-tab_button-bg $transition_function-tabs_tab_button-bg $transition_delay-tabs_tab_button-bg,//按钮tabs的背景色的transition
-                color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//按钮式tabs的 color的transition
-
-                &:hover {
-                    border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
-                    background-color: $color-tabs_tab_line_vertical-bg-hover;
-                }
-
-                &:focus-visible {
-                    outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
-                    outline-offset: $width-tabs-outline-offset;
-                }
-
-                &:active {
-                    border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-active;
-                    background-color: $color-tabs_tab_line_vertical-bg-active;
-                }
-
-                &-small {
-                    padding: $spacing-tabs_bar_line_tab_left_small-padding;
-                }
-
-                &-medium {
-                    padding: $spacing-tabs_bar_line_tab_left_medium-padding;
-                }
-            }
-
-            &.#{$module}-tab-active {
-                background-color: $color-tabs_tab_line_vertical_selected-bg-default;
-
-                &,
-                &:hover {
-                    border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_indicator_selected-icon-default;
-                    background-color: $color-tabs_tab_line_vertical_selected-bg-default;
-                }
-            }
-        }
-    }
-
-    &-tab-card {
-        &.#{$module}-tab-top {
-
-            &.#{$module}-tab {
-                border: $width-tabs_bar_card-border solid transparent;
-                border-bottom: none;
-                border-radius: $radius-tabs_tab_card;
-
-                &:hover {
-                    border-bottom: none;
-                }
-
-            }
-
-            &.#{$module}-tab-active {
-
-                &,
-                &:hover {
-                    padding: $spacing-tabs_bar_card_tab_active-paddingTop $spacing-tabs_bar_card_tab_active-paddingRight $spacing-tabs_bar_card_tab_active-paddingBottom $spacing-tabs_bar_card_tab_active-paddingLeft;
-                    border: $width-tabs_bar_card-border solid $color-tabs_tab_card_indicator_selected-icon-default;
-                    border-bottom: $width-tabs_bar_card-border solid $color-tabs_tab_card_selected-bg-default;
-                    background: transparent;
-                    // padding-bottom: $spacing-tight + 1;
-                }
-            }
-        }
-
-        &.#{$module}-tab-left {
-
-            &.#{$module}-tab {
-                border: $width-tabs_bar_card-border solid transparent;
-                border-right: none;
-                border-radius: $radius-tabs_tab_card_left;
-
-                &:hover {
-                    border-right: none;
-                }
-
-            }
-
-            &.#{$module}-tab-active {
-
-                &:after {
-                    content: " ";
-                    width: 1px;
-                    position: absolute;
-                    right: -1px;
-                    top: 0;
-                    bottom: 0;
-                    background: $color-tabs_tab_card_selected-bg-default;
-                }
-
-                &,
-                &:hover {
-                    padding: $spacing-tabs_bar_card_tab_left_active-paddingY $spacing-tabs_bar_card_tab_left_active-paddingX;
-                    border: $width-tabs_bar_card-border solid $color-tabs_tab_card_indicator_selected-icon-default;
-                    border-right: none;
-                    background: transparent;
-                    // padding-bottom: $spacing-tight + 1;
-                }
-            }
-        }
-
-        &.#{$module}-tab {
-            padding: $spacing-tabs_bar_card_tab-paddingY $spacing-tabs_bar_card_tab-paddingX;
-            transition: background-color $transition_duration-tabs_tab_card-bg $transition_function-tabs_tab_card-bg $transition_delay-tabs_tab_card-bg, //卡片式tabs的bg的transition
-            color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//卡片式tabs的 color的transition
-
-            transform: scale($transform_scale-tabs_tab_card-item);
-
-            &:hover {
-                background: $color-tabs_tab_card-bg-hover;
-            }
-
-            &:focus-visible {
-                outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
-                outline-offset: $width-tabs-outline-offset;
-            }
-
-            &:active {
-                background: $color-tabs_tab_card-bg-active;
-            }
-        }
-    }
-
-    &-tab-button {
-        border: none;
-
-        &.#{$module}-tab {
-            padding: $spacing-tabs_bar_button_tab-paddingY $spacing-tabs_bar_button_tab-paddingX;
-            border-radius: $radius-tabs_tab_button;
-            color: $color-tabs_tab_button-text-default;
-            border: none;
-            transition: background-color $transition_duration-tabs-tab_button-bg $transition_function-tabs_tab_button-bg $transition_delay-tabs_tab_button-bg,//按钮tabs的背景色的transition
-            color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//按钮式tabs的 color的transition
-
-            transform: scale($transform_scale-tabs_tab_button-item);
-
-            &:hover {
-                border: none;
-                background-color: $color-tabs_tab_button-bg-hover;
-            }
-
-            &:focus-visible {
-                outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
-                outline-offset: $width-tabs-outline-offset;
-            }
-
-            &:active {
-                background-color: $color-tabs_tab_button-bg-active;
-            }
-        }
-
-        &.#{$module}-tab-active {
-
-            &,
-            &:hover {
-                color: $color-tabs_tab_button_selected-text-default;
-                border: none;
-                background-color: $color-tabs_tab_button_selected-bg-default;
-            }
-        }
-    }
 }
 
 @import "./rtl.scss";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.27.0-alpha.2",
+    "version": "2.27.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "c0cf24387dbafffb2d26f77d2f757ac5238ca0ec",
+    "gitHead": "a7a3f537ef48f75e3824c156e9b25a084e562dd6",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/select/foundation.ts

@@ -1114,4 +1114,9 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     handlePopoverClose() {
         this._adapter.emit('popoverClose');
     }
+
+    // need to remove focus style of option when user hover slot
+    handleSlotMouseEnter() {
+        this._adapter.updateFocusIndex(-1);
+    }
 }

package/sideSheet/sideSheet.scss

@@ -76,6 +76,7 @@ $module: #{$prefix}-sidesheet;
         margin: $spacing-sideSheet_title-margin;
         @include font-size-header-5;
         font-weight: $font-sideSheet_title-fontWeight;
+        font-size: $font-sideSheet_title-fontSize;
         color: $color-sideSheet_main-text;
         text-align: left;
     }

package/sideSheet/variables.scss

@@ -14,3 +14,4 @@ $spacing-sideSheet_footer-padding: $spacing-loose; // 侧边栏 footer 内边距
 
 // Font
 $font-sideSheet_title-fontWeight: $font-weight-bold; // 侧边栏标题文本字重
+$font-sideSheet_title-fontSize: $font-size-header-5; // 侧边栏标题文本字号

package/steps/variables.scss

@@ -16,10 +16,10 @@ $color-steps_item_error_left-icon: var(--semi-color-danger); // 错误步骤条
 $color-steps_item_error_left_number-icon: var(--semi-color-primary); // 错误步骤条数字序号文本颜色
 $color-steps_item_finish-icon: var(--semi-color-primary); // 已完成步骤条图标颜色
 $color-steps_item_finish_number-icon: var(--semi-color-white); // 已完成步骤条对勾图标颜色
-$color-steps_item_left_number_icon-bg: var(--semi-color-primary); // 已完成步骤条图标背景颜色
-$color-steps_item_left_number_icon-icon: var(--semi-color-white); // 已完成步骤条图标文字颜色
+$color-steps_item_left_number_icon-bg: var(--semi-color-primary); // 步骤条图标背景颜色
+$color-steps_item_left_number_icon-icon: var(--semi-color-white); // 步骤条图标文字颜色
 $color-steps_item_process_left-icon: var(--semi-color-primary); // 进行中步骤条对勾图标颜色
-$color-steps_item_process_left_number-icon: var(--semi-color-white); // 进行中步骤条对勾图标颜色
+$color-steps_item_process_left_number-icon: var(--semi-color-white); // 进行中步骤条内部图标颜色
 $color-steps_item_title-text-hover: var(--semi-color-focus-border); // 步骤条标题文字悬停颜色
 $color-steps_item_wait_left_icon-icon: var(--semi-color-text-2); // 未到达步骤条图标颜色
 $color-steps_item_wait_left_number_icon-bg-hover: var(--semi-color-secondary-light-default); // 未到达步骤条图标背景颜色 - 悬浮态