@douyinfe/semi-foundation 2.36.0-alpha.0 → 2.36.0

package/steps/fillSteps.scss

@@ -1,209 +1,198 @@
 $module: #{$prefix}-steps;
-$fill: #{$module}-item-fill;
-
-@mixin steps-item {
-    @include box-sizing;
-    display: flex;
-    height: $height-steps_item;
-    position: relative;
-    overflow: hidden;
-    // margin-right: $spacing-steps_item-marginRight;
-    border: $width-steps_item-border solid $color-steps-border-default;
-    border-radius: $radius-steps_item;
-    padding: $spacing-steps_item-paddingY $spacing-steps_item-paddingX;
-    transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text; // item 字体颜色动效
-    transform:scale($transform_scale-step-item);
-    transition: background-color $transition_duration-steps_item-backgroundColor $transition_function-steps_item_backgroundColor $transition_delay-steps_item_backgroundColor; //step backgroundColor 的transition变化
-    column-gap: $spacing-steps_item_content-marginLeft;
-
-    .#{$module}-item-title {
-        position: relative;
-        // display: inline-block;
-        @include font-size-header-5;
-        font-weight: $font-weight-bold;
-        width: $width-steps_item_title;
-        @include text-overflow-hidden;
-        color: $color-steps_main-text-default;
-        transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text
-                    
+
+.#{$module} {
+    .#{$prefix}-col {
+        flex: 1;
     }
 
-    .#{$module}-item-description {
-        @include font-size-regular;
-        color: $color-steps_minor-text-default;
-        width: $width-steps_item_description;
-        @include text-overflow-hidden;
+    &-vertical {
+        .#{$prefix}-row-flex {
+            flex-direction: column;
+        }
     }
 
-    &-process {
-        background-color: $color-steps_process-bg-default;
+    // .#{$module}-horizontal {
+    //     .#{$module}-item-title {
+    //         &-text {
+    //             position: relative;
+    //             &::after {
+    //                 content: '';
+    //                 display: block;
+    //                 width: 9999px;
+    //                 height: 1px;
+    //                 position: absolute;
+    //                 top: 12px;
+    //                 left: 120%;
+    //                 background-color: var(--semi-color-border);
+    //             }
+    //         }
+    //     }
+    // }
 
-        .#{$module}-item-left:not(.#{$module}-item-icon) {
-            background: $color-steps_primary-bg-default;
+    .#{$module}-item {
+        @include box-sizing;
+        display: flex;
+        height: $height-steps_item;
+        position: relative;
+        overflow: hidden;
+        margin-right: $spacing-steps_item-marginRight;
+        border: $width-steps_item-border solid $color-steps-border-default;
+        border-radius: $radius-steps_item;
+        padding: $spacing-steps_item-paddingY $spacing-steps_item-paddingX;
+        transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text; // item 字体颜色动效
+        transform:scale($transform_scale-step-item);
+        transition: background-color $transition_duration-steps_item-backgroundColor $transition_function-steps_item_backgroundColor $transition_delay-steps_item_backgroundColor; //step backgroundColor 的transition变化
+        
+        .#{$module}-item-title {
+            position: relative;
+            // display: inline-block;
+            @include font-size-header-5;
+            font-weight: $font-weight-bold;
+            width: $width-steps_item_title;
+            @include text-overflow-hidden;
+            color: $color-steps_main-text-default;
+            transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text
+                     
         }
 
-        .#{$module}-item-title,
-        .#{$module}-item-icon {
-            color: $color-steps_primary-icon-default;
+        .#{$module}-item-description {
+            @include font-size-regular;
+            color: $color-steps_minor-text-default;
+            width: $width-steps_item_description;
+            @include text-overflow-hidden;
         }
-    }
 
-    &-wait {
-        .#{$module}-item-left:not(.#{$module}-item-icon) {
-            background: $color-steps-bg-default;
-        }
+        &-process {
+            background-color: $color-steps_process-bg-default;
+
+            .#{$module}-item-left:not(.#{$module}-item-icon) {
+                background: $color-steps_primary-bg-default;
+            }
 
-        .#{$module}-item-icon {
-            color: $color-steps-icon-default;
+            .#{$module}-item-title,
+            .#{$module}-item-icon {
+                color: $color-steps_primary-icon-default;
+            }
         }
-    }
 
-    &-finish {
+        &-wait {
+            .#{$module}-item-left:not(.#{$module}-item-icon) {
+                background: $color-steps-bg-default;
+            }
 
-        .#{$prefix}-icon,
-        .#{$module}-item-title {
-            color: $color-steps_success-text-default;
+            .#{$module}-item-icon {
+                color: $color-steps-icon-default;
+            }
         }
 
-        &-hover:hover {
-            background-color: $color-steps-bg-hover;
+        &-finish {
 
             .#{$prefix}-icon,
             .#{$module}-item-title {
-                color: $color-steps_success-text-hover;
+                color: $color-steps_success-text-default;
             }
-        }
 
-        &:active {
-            background-color: $color-steps-bg-active;
+            &-hover:hover {
+                background-color: $color-steps-bg-hover;
 
-            .#{$prefix}-icon,
-            .#{$module}-item-title {
-                color: $color-steps_success-text-active;
+                .#{$prefix}-icon,
+                .#{$module}-item-title {
+                    color: $color-steps_success-text-hover;
+                }
             }
-        }
-    }
 
-    &-error {
+            &:active {
+                background-color: $color-steps-bg-active;
 
-        .#{$prefix}-icon,
-        .#{$module}-item-title {
-            color: $color-steps_danger-text-default;
+                .#{$prefix}-icon,
+                .#{$module}-item-title {
+                    color: $color-steps_success-text-active;
+                }
+            }
         }
 
-        &-hover:hover {
-            background: $color-steps-bg-hover;
+        &-error {
 
             .#{$prefix}-icon,
             .#{$module}-item-title {
-                color: $color-steps_danger-text-hover;
+                color: $color-steps_danger-text-default;
             }
-        }
 
-        &:active {
-            background-color: $color-steps-bg-active;
+            &-hover:hover {
+                background: $color-steps-bg-hover;
 
-            .#{$prefix}-icon,
-            .#{$module}-item-title {
-                color: $color-steps_danger-text-active;
+                .#{$prefix}-icon,
+                .#{$module}-item-title {
+                    color: $color-steps_danger-text-hover;
+                }
             }
-        }
-    }
 
-    &-warning {
+            &:active {
+                background-color: $color-steps-bg-active;
 
-        .#{$module}-item-title,
-        .#{$prefix}-icon {
-            color: $color-steps_warning-text-default;
+                .#{$prefix}-icon,
+                .#{$module}-item-title {
+                    color: $color-steps_danger-text-active;
+                }
+            }
         }
 
-        &-hover:hover {
-            background: $color-steps-bg-hover;
+        &-warning {
 
             .#{$module}-item-title,
             .#{$prefix}-icon {
-                color: $color-steps_warning-text-hover;
+                color: $color-steps_warning-text-default;
             }
-        }
 
-        &:active {
-            background-color: $color-steps-bg-active;
+            &-hover:hover {
+                background: $color-steps-bg-hover;
 
-            .#{$module}-item-title,
-            .#{$prefix}-icon {
-                color: $color-steps_warning-text-active;
+                .#{$module}-item-title,
+                .#{$prefix}-icon {
+                    color: $color-steps_warning-text-hover;
+                }
             }
-        }
-    }
 
-    &-clickable {
-        cursor: pointer;
-    }
-}
-
-@mixin steps-item-left {
-    &-left {
-        width: $width-steps_item_left;
-        height: $height-steps_item_left;
-        line-height: $font-steps_item_left-lineHeight;
-        text-align: center;
-        border-radius: $radius-steps_item_left;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        @include font-size-header-4;
-        font-weight: $font-weight-bold;
-        flex-grow: 0;
-
-        &.#{$module}-item-plain {
-            color: $color-steps-text-default;
+            &:active {
+                background-color: $color-steps-bg-active;
+
+                .#{$module}-item-title,
+                .#{$prefix}-icon {
+                    color: $color-steps_warning-text-active;
+                }
+            }
         }
 
-        &-process {
-            background: $color-steps_process-bg-default;
+        &-clickable {
+            cursor: pointer;
         }
-    }
-}
 
-@mixin steps-item-content {
-    &-content {
-        // margin-left: $spacing-steps_item_content-marginLeft;
-        flex: 1;
-        overflow: hidden;
-    }
-}
+        &-left {
+            width: $width-steps_item_left;
+            height: $height-steps_item_left;
+            line-height: $font-steps_item_left-lineHeight;
+            text-align: center;
+            border-radius: $radius-steps_item_left;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            @include font-size-header-4;
+            font-weight: $font-weight-bold;
+            flex-grow: 0;
 
-.#{$module} {
-    .#{$prefix}-col {
-        flex: 1;
-    }
-
-    .#{$prefix}-row-flex {
-        column-gap: $spacing-steps_item-marginRight;
-    }
+            &.#{$module}-item-plain {
+                color: $color-steps-text-default;
+            }
 
-    &-vertical {
-        .#{$prefix}-row-flex {
-            flex-direction: column;
+            &-process {
+                background: $color-steps_process-bg-default;
+            }
         }
-    }
-
-    .#{$module}-item {
-        @include steps-item;
-        @include steps-item-left;
-        @include steps-item-content;
-    }
-}
 
-// 以下 css 用于 C2D 中变体生成
-// The following css is used for variant generation in C2D
-.#{$fill} {
-    &.#{$module}-item {
-        @include steps-item;
-    }
-
-    .#{$module}-item {
-        @include steps-item-left;
-        @include steps-item-content;
+        &-content {
+            margin-left: $spacing-steps_item_content-marginLeft;
+            flex: 1;
+            overflow: hidden;
+        }
     }
 }

package/steps/navSteps.scss

@@ -1,84 +1,63 @@
 $module: #{$prefix}-steps;
 $item: #{$module}-item;
 $basicType: #{$module}-nav;
-$navItem: #{$item}-nav;
 
-@mixin steps-nav-item {
-    @include box-sizing;
+.#{$basicType} {
+    display: inline-flex;
+    flex-flow: row nowrap;
+
+    .#{$item} {
+        @include box-sizing;
         
-    &:last-child {
-        flex: none;
+        &:last-child {
+            flex: none;
 
-        .#{$item}-content {
-            width: auto;
+            .#{$item}-content {
+                width: auto;
+            }
         }
-    }
 
-    .#{$item}-container {
-        display: flex;
-        align-items: center;
-        color: $color-steps_nav_item_container-text;
+        .#{$item}-container {
+            display: flex;
+            align-items: center;
+            color: $color-steps_nav_item_container-text;
+
+            .#{$item}-icon {
+                display: inline-flex;
+                flex: 1;
+                justify-content: center;
+                color: $color-steps_nav_item-icon;
+                min-width: $width-steps_nav_item_icon-minWidth;
+            }
+        }
 
-        .#{$item}-icon {
-            display: inline-flex;
+        .#{$item}-content {
             flex: 1;
-            justify-content: center;
-            color: $color-steps_nav_item-icon;
-            min-width: $width-steps_nav_item_icon-minWidth;
+            display: inline-block;
         }
-    }
-
-    .#{$item}-content {
-        flex: 1;
-        display: inline-block;
-    }
 
-    .#{$item}-title {
-        @include font-size-header-6;
-        max-width: $width-steps_nav_item_title-maxWidth;
-        @include text-overflow-hidden;
-        font-weight: $font-steps_nav_item_title-fontWeight;
-    }
-
-
-    &-active {
         .#{$item}-title {
-            color: $color-steps_nav_item_title-text-active;
-            font-weight: $font-steps_nav_item_title_active-fontWeight;
+            @include font-size-header-6;
+            max-width: $width-steps_nav_item_title-maxWidth;
+            @include text-overflow-hidden;
+            font-weight: $font-steps_nav_item_title-fontWeight;
         }
-    }
-}
-
-@mixin steps-nav-small {
-    .#{$item}-title {
-        @include font-size-regular;
-    }
-}
 
-.#{$basicType} {
-    display: inline-flex;
-    flex-flow: row nowrap;
 
-    .#{$item} {
-        @include steps-nav-item;
+        &-active {
+            .#{$item}-title {
+                color: $color-steps_nav_item_title-text-active;
+                font-weight: $font-steps_nav_item_title_active-fontWeight;
+            }
+        }
     }
 
     &.#{$module}-small {
         .#{$item} {
-            @include steps-nav-small;
-        }
-    }
-}
+            .#{$item}-title {
+                @include font-size-regular;
+            }
 
-// C2D 变体生成样式
-// The following css is used for variant generation in C2D
-.#{$navItem} {
-    &.#{$item} {
-        @include steps-nav-item;
-    }
-
-    &.#{$item}-small {
-        @include steps-nav-small;
+        }
     }
-
 }

package/table/foundation.ts

@@ -135,9 +135,10 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
      * init filteredValue of filtering column, use defaultFilteredValue or [] when it is undefined
      */
     static initFilteredValue(column: BaseColumnProps<unknown>) {
-        const { defaultFilteredValue, filteredValue, onFilter } = column;
-        const hasFilter = isFunction(onFilter);
-        if (hasFilter && isUndefined(filteredValue)) {
+        const { defaultFilteredValue, filteredValue } = column;
+        // There may be cases where onFilter is empty, such as server-side filtering
+        // Because filterValue affects the output of filters, it needs to be initialized here
+        if (isUndefined(filteredValue)) {
             if (Array.isArray(defaultFilteredValue) && defaultFilteredValue.length) {
                 column.filteredValue = defaultFilteredValue;
             } else {
@@ -250,13 +251,6 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
     getFilteredSortedDataSource(dataSource: RecordType[], queries: BaseColumnProps<RecordType>[]) {
         const filteredDataSource = this.filterDataSource(dataSource, queries.filter(
             query => {
-                /**
-                 * 这里无需判断 filteredValue 是否为数组，初始化时它是 `undefined`，点击选择空时为 `[]`
-                 * 初始化时我们应该用 `defaultFilteredValue`，点击后我们应该用 `filteredValue`
-                 * 
-                 * There is no need to judge whether `filteredValue` is an array here, because it is `undefined` when initialized, and `[]` when you click to select empty
-                 * When initializing we should use `defaultFilteredValue`, after clicking we should use `filteredValue`
-                 */
                 const currentFilteredValue = query.filteredValue ? query.filteredValue : query.defaultFilteredValue;
                 return (
                     isFunction(query.onFilter) &&
@@ -465,6 +459,7 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
                                             }
                                             return arr;
                                         },
+                                        // @ts-ignore
                                         [...children]
                                     ),
                                 });
@@ -682,6 +677,9 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
         return this.getState('pagination') || {};
     }
 
+    /**
+     * Filters are considered valid if filteredValue exists
+     */
     _getAllFilters(queries?: BaseColumnProps<RecordType>[]) {
         queries = queries || this.getState('queries');
         const filters: BaseChangeInfoFilter<RecordType>[] = [];

package/table/table.scss

@@ -83,6 +83,18 @@ $module: #{$prefix}-table;
         }
     }
 
+    &-align-center {
+        .#{$module}-operate-wrapper {
+            justify-content: center;
+        }
+    }
+
+    &-align-right {
+        .#{$module}-operate-wrapper {
+            justify-content: flex-end;
+        }
+    }
+
     &-operate-wrapper {
         display: flex;
         justify-content: flex-start;

package/tabs/tabs.scss

@@ -4,6 +4,8 @@
 
 
 $module: #{$prefix}-tabs;
+// Prevent the Radio and Checkbox in ReactNode passed in through the tab attribute in Tabs from being affected by the icon style override
+$ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix}-icon-checkbox_indeterminate';
 
 .#{$module} {
     box-sizing: border-box;
@@ -41,7 +43,7 @@ $module: #{$prefix}-tabs;
 
             user-select: none;
 
-            .#{$prefix}-icon {
+            .#{$prefix}-icon:not(#{$ignoreIcon}) {
                 position: relative;
                 margin-right: $spacing-tabs_tab_icon-marginRight;
                 top: $spacing-tabs_tab_icon-top;
@@ -50,7 +52,7 @@ $module: #{$prefix}-tabs;
 
             }
 
-            .#{$prefix}-icon-close {
+            .#{$prefix}-icon.#{$module}-tab-icon-close {
                 margin-right: 0;
                 font-size: 14px;
                 color: var(--semi-color-text-2);
@@ -61,7 +63,7 @@ $module: #{$prefix}-tabs;
             &:hover {
                 color: $color-tabs_tab_line_default-text-hover;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-hover;
                 }
             }
@@ -69,7 +71,7 @@ $module: #{$prefix}-tabs;
             &:active {
                 color: $color-tabs_tab_line_default-text-active;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-active;
                 }
             }
@@ -84,16 +86,16 @@ $module: #{$prefix}-tabs;
                 font-weight: $font-tabs_tab_active-fontWeight;
                 color: $color-tabs_tab_line_selected-text-default;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab_selected-icon-default;
                 }
 
-                .#{$prefix}-icon-close {
+                .#{$prefix}-icon.#{$module}-tab-icon-close {
                     color: var(--semi-color-text-2);
                 }
             }
 
-            .#{$prefix}-icon-close:hover {
+            .#{$prefix}-icon.#{$module}-tab-icon-close:hover {
                 color: var(--semi-color-text-1);
             }
         }
@@ -123,7 +125,7 @@ $module: #{$prefix}-tabs;
 
             user-select: none;
 
-            .#{$prefix}-icon {
+            .#{$prefix}-icon:not(#{$ignoreIcon}) {
                 position: relative;
                 margin-right: $spacing-tabs_tab_icon-marginRight;
                 top: $spacing-tabs_tab_icon-top;
@@ -132,7 +134,7 @@ $module: #{$prefix}-tabs;
 
             }
 
-            .#{$prefix}-icon-close {
+            .#{$prefix}-icon.#{$module}-tab-icon-close {
                 margin-right: 0;
                 font-size: 14px;
                 color: var(--semi-color-text-2);
@@ -143,7 +145,7 @@ $module: #{$prefix}-tabs;
             &:hover {
                 color: $color-tabs_tab_line_default-text-hover;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-hover;
                 }
             }
@@ -151,7 +153,7 @@ $module: #{$prefix}-tabs;
             &:active {
                 color: $color-tabs_tab_line_default-text-active;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-active;
                 }
             }
@@ -166,16 +168,16 @@ $module: #{$prefix}-tabs;
                 font-weight: $font-tabs_tab_active-fontWeight;
                 color: $color-tabs_tab_line_selected-text-default;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab_selected-icon-default;
                 }
 
-                .#{$prefix}-icon-close {
+                .#{$prefix}-icon.#{$module}-tab-icon-close {
                     color: var(--semi-color-text-2);
                 }
             }
 
-            .#{$prefix}-icon-close:hover {
+            .#{$prefix}-icon.#{$module}-tab-icon-close:hover {
                 color: var(--semi-color-text-1);
             }
         }