tdesign-react 0.20.2 → 0.21.0

package/esm/_common/style/web/components/select/_index.less

@@ -5,7 +5,7 @@
 @import "../../mixins/_text.less";
 
 // select
-.@{prefix}-select-wrap {
+.@{prefix}-select__wrap {
   width: 100%;
 }
 
@@ -28,7 +28,7 @@
     cursor: pointer;
     border-color: @select-border-color-active;
 
-    & > .@{prefix}-select-right-icon:not(.@{prefix}-select-right-icon__clear) {
+    & > .@{prefix}-select__right-icon:not(.@{prefix}-select__right-icon-clear) {
       color: @select-right-icon-hover;
       opacity: 1;
     }
@@ -38,25 +38,25 @@
     line-height: @select-height-default;
   }
 
-  .@{prefix}-select-placeholder {
+  .@{prefix}-select__placeholder {
     margin-left: @select-placeholder-margin;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
   }
 
-  &:not(.@{prefix}-is-disabled) .@{prefix}-select-placeholder {
+  &:not(.@{prefix}-is-disabled) .@{prefix}-select__placeholder {
     color: @select-placeholder-color;
   }
 
-  & .@{prefix}-select-selectedSingle {
+  & .@{prefix}-select__single {
     margin-left: @select-placeholder-margin;
     display: block;
     color: @select-input-color;
     .text-ellipsis();
   }
 
-  & .@{prefix}-select-right-icon {
+  & .@{prefix}-select__right-icon {
     position: absolute;
     height: 100%;
     margin: @select-icon-margin;
@@ -66,11 +66,11 @@
     transition: color @anim-duration-base @anim-time-fn-easing;
   }
 
-  .@{prefix}-select-active-icon {
+  .@{prefix}-select__active-icon {
     color: @select-border-color-active;
   }
 
-  .@{prefix}-select-right-icon.@{prefix}-is-visible {
+  .@{prefix}-select__right-icon.@{prefix}-is-visible {
     transform: scaleY(-1);
     transition: transform @anim-duration-base @anim-time-fn-easing;
 
@@ -78,7 +78,7 @@
     filter: flipv;
   }
 
-  & .@{prefix}-select-left-icon {
+  & .@{prefix}-select__left-icon {
     position: absolute;
     height: 100%;
     margin: @select-icon-margin;
@@ -90,7 +90,7 @@
     align-items: center;
   }
 
-  .@{prefix}-select-input {
+  .@{prefix}-select__input {
     margin-left: @select-placeholder-margin;
     flex: 1;
 
@@ -134,7 +134,7 @@
     box-shadow: @select-input-shadow; // 无边框选择器没有阴影
   }
 
-  .@{prefix}-select-right-icon:not(.@{prefix}-select-right-icon__clear) {
+  .@{prefix}-select__right-icon:not(.@{prefix}-select__right-icon-clear) {
     color: @select-border-color-active;
     opacity: 1;
   }
@@ -157,7 +157,7 @@
     background-color: @select-option-bg-color-active;
   }
 
-  > .@{prefix}-select-selectedSingle {
+  > .@{prefix}-select__single {
     margin-right: @select-no-border-margin-right;
   }
 }
@@ -166,7 +166,7 @@
   line-height: (@select-height-l - 2px);
   font-size: @select-font-size-l;
 
-  .@{prefix}-select-input {
+  .@{prefix}-select__input {
     line-height: (@select-height-l - 2px);
     height: (@select-height-l - 2px);
 
@@ -186,7 +186,7 @@
   line-height: (@select-height-s - 2px);
   font-size: @select-font-size-s;
 
-  .@{prefix}-select-input {
+  .@{prefix}-select__input {
     line-height: (@select-height-s - 2px);
     height: (@select-height-s - 2px);
 
@@ -208,24 +208,24 @@
   color: @select-placeholder-color-disabled;
   border-color: @select-border-color;
 
-  & > .@{prefix}-select-right-icon {
+  & > .@{prefix}-select__right-icon {
     color: @select-icon-color-disabled;
   }
 
-  & > .@{prefix}-select-left-icon {
+  & > .@{prefix}-select__left-icon {
     color: @select-icon-color-disabled;
   }
 
-  & > .@{prefix}-select-selectedSingle {
+  & > .@{prefix}-select__single {
     color: @select-color-disabled;
   }
 }
 
-.@{prefix}-select-popup-reference {
+.@{prefix}-select__popup-reference {
   width: 100%;
 }
 // dropdown
-.@{prefix}-select-dropdown {
+.@{prefix}-select__dropdown {
   margin: @select-dropdown-margin;
   padding: 0; // 展开动画 如果有padding会直接生长 需要移动到内部
   max-height: @select-dropdown-max-height;
@@ -238,49 +238,50 @@
   }
 }
 
-.@{prefix}-select-dropdown.@{prefix}-popup {
+.@{prefix}-select__dropdown.@{prefix}-popup {
   padding: @select-dropdown-popup-padding;
 }
 // empty
-.@{prefix}-select-empty.@{prefix}-size-s {
+.@{prefix}-select__empty.@{prefix}-size-s {
   line-height: @select-height-s;
 }
 
-.@{prefix}-select-empty {
+.@{prefix}-select__empty {
   text-align: center;
   color: @select-color-empty;
   line-height: @select-height-default;
 }
 
-.@{prefix}-select-empty.@{prefix}-size-l {
+.@{prefix}-select__empty.@{prefix}-size-l {
   line-height: @select-height-l;
 }
 
 // loading tips
-.@{prefix}-select-loading-tips.@{prefix}-size-s {
+.@{prefix}-select__loading-tips.@{prefix}-size-s {
   line-height: @select-height-s;
 }
 
-.@{prefix}-select-loading-tips {
+.@{prefix}-select__loading-tips {
   text-align: center;
   line-height: @select-height-default;
+  color: @select-color-empty;
 }
 
-.@{prefix}-select-loading-tips.@{prefix}-size-l {
+.@{prefix}-select__loading-tips.@{prefix}-size-l {
   line-height: @select-height-l;
 }
 
 // option group
-.@{prefix}-option-group + .@{prefix}-option-group {
+.@{prefix}-select-option-group + .@{prefix}-select-option-group {
   padding-top: @select-optiongroup-border-padding;
   margin-top: @select-optiongroup-border-margin;
 }
 
-.@{prefix}-option-group__divider + .@{prefix}-option-group__divider {
+.@{prefix}-select-option-group__divider + .@{prefix}-select-option-group__divider {
   border-top: 1px @select-optiongroup-border-color solid;
 }
 
-.@{prefix}-option-group-header {
+.@{prefix}-select-option-group__header {
   ul&,
   & {
     color: @select-option-group-header-color;
@@ -292,12 +293,12 @@
   }
 }
 
-.@{prefix}-option-group-header.@{prefix}-size-l {
+.@{prefix}-select-option-group__header.@{prefix}-size-l {
   height: @select-option-height-l;
   padding: @select-option-padding-l;
 }
 
-.@{prefix}-option-group-header.@{prefix}-size-s {
+.@{prefix}-select-option-group__header.@{prefix}-size-s {
   height: @select-option-height-s;
   padding: @select-option-padding-s;
 }
@@ -380,6 +381,18 @@
   }
 }
 
+.@{prefix}-select-option.@{prefix}-select-option__hover {
+  &:not(.@{prefix}-is-disabled)&:not(.@{prefix}-is-selected) {
+    background-color: @select-option-bg-color-hover;
+    .@{prefix}-checkbox__input {
+      border-color: @select-option-checkbox-input-color-hover;
+    }
+  }
+  .@{prefix}-checkbox__label {
+    color: @select-option-checkbox-label-color-hover;
+  }
+}
+
 .@{prefix}-select-option + .@{prefix}-select-option {
   margin-top: @select-options-margin;
 }

package/esm/_common/style/web/components/steps/_index.less

@@ -17,16 +17,16 @@
     // 默认锚点
     &.@{prefix}-steps--default-anchor {
 
-      .@{prefix}-steps-item-content {
+      .@{prefix}-steps-item__content {
         margin-top: @steps-item-content-margin-top;
       }
 
-      .@{prefix}-steps-item-title {
+      .@{prefix}-steps-item__title {
         width: fit-content;
         margin-bottom: @steps-item-title-margin-bottom;
       }
 
-      .@{prefix}-steps-item-icon {
+      .@{prefix}-steps-item__icon {
         &__number {
           width: steps-circle-width;
           height: @steps-circle-height;
@@ -48,7 +48,7 @@
       .@{prefix}-steps-item {
         overflow: visible;
 
-        .@{prefix}-steps-item-title {
+        .@{prefix}-steps-item__title {
           padding-right: 0;
           margin-bottom: @steps-item-title-margin-bottom;
         }
@@ -90,12 +90,12 @@
     // 默认锚点
     &.@{prefix}-steps--default-anchor {
 
-      .@{prefix}-steps-item-content {
+      .@{prefix}-steps-item__content {
         margin-top: @steps-item-content-margin-top-vertical;
         margin-left: @steps-item-content-margin-left-vertical;
       }
 
-      .@{prefix}-steps-item-title {
+      .@{prefix}-steps-item__title {
         margin-bottom: @steps-item-title-margin-bottom;
       }
     }

package/esm/_common/style/web/components/steps/_mixin.less

@@ -16,7 +16,7 @@
       position: relative;
       display: flex;
 
-      &.@{prefix}-steps-item-canclick {
+      &.@{prefix}-steps-item--clickable {
         cursor: pointer;
       }
     }
@@ -33,24 +33,24 @@
       .default-anchor-status(error);
     }
 
-    &-icon {
+    &__icon {
       vertical-align: top;
       font-size: @steps-item-icon-font-size;
       margin-right: @steps-item-icon-margin-right;
       color: @steps-item-icon-color;
 
-      &__number {
+      &--number {
         color: @steps-item-icon-number-color-default;
         border: @step-stroke-width solid @steps-item-icon-border-color-default;
         .default-step-icon;
       }
 
-      &__finish {
+      &--finish {
         border: @step-stroke-width solid @steps-item-icon-border-color-finish;
         .default-step-icon;
       }
 
-      &__error {
+      &--error {
         border: @step-stroke-width solid @steps-item-icon-border-color-error;
         color: @steps-item-icon-number-color-error;
         .default-step-icon;
@@ -61,7 +61,7 @@
       }
     }
 
-    &-title {
+    &__title {
       position: relative;
       padding-right: @steps-title-padding-right;
       color: @steps-title-color-default;
@@ -69,7 +69,7 @@
       line-height: @steps-title-line-height;
     }
 
-    &-description {
+    &__description {
       color: @steps-description-color-default;
       font-size: @steps-description-font-size;
       margin-bottom: @steps-item-description-margin;
@@ -77,7 +77,7 @@
     }
   }
 }
-// step 图标状态
+
 .default-step-icon {
   display: flex;
   align-items: center;
@@ -95,33 +95,33 @@
 .default-anchor-status(@anchor-status) {
   & when(@anchor-status = finish) {
 
-    .@{prefix}-steps-item-icon {
+    .@{prefix}-steps-item__icon {
       .t-icon {
         color: @steps-item-icon-anchor-color;
       }
 
-      &__number {
+      &--number {
         border-color: @brand-color;
       }
     }
 
-    .@{prefix}-steps-item-title {
+    .@{prefix}-steps-item__title {
       color: @steps-title-color-finish;
       font-weight: @steps-title-font-weight;
     }
 
-    .@{prefix}-steps-item-description {
+    .@{prefix}-steps-item__description {
       color: @steps-description-color-finish;
     }
   };
   & when(@anchor-status = process) {
 
-    .@{prefix}-steps-item-icon {
+    .@{prefix}-steps-item__icon {
       .t-icon {
         color: @steps-item-icon-anchor-color;
       }
 
-      &__number {
+      &--number {
         border-color: @steps-item-icon-number-border-color-process;
         background-color: @steps-item-icon-number-bg-color-process;
         color: @steps-item-icon-number-color-process;
@@ -129,33 +129,33 @@
       }
     }
 
-    .@{prefix}-steps-item-title {
+    .@{prefix}-steps-item__title {
       color: @steps-title-color-process;
       font-weight: bold;
     }
 
-    .@{prefix}-steps-item-description {
+    .@{prefix}-steps-item__description {
       color: @steps-description-color-process;
     }
   };
   & when(@anchor-status = error) {
 
-    .@{prefix}-steps-item-icon {
+    .@{prefix}-steps-item__icon {
       .t-icon {
         color: @steps-item-icon-anchor-color-error;
       }
 
-      &__number {
+      &--number {
         color: @steps-item-icon-anchor-number-color-error;
         border-color: @steps-item-icon-anchor-number-border-color-error;
       }
     }
 
-    .@{prefix}-steps-item-title {
+    .@{prefix}-steps-item__title {
       color: @steps-title-color-error;
     }
 
-    .@{prefix}-steps-item-description {
+    .@{prefix}-steps-item__description {
       color: @steps-description-color-error;
     }
   };
@@ -164,20 +164,20 @@
 .dot-anchor-status(@anchor-status) {
   & when(@anchor-status = finish) {
 
-    .@{prefix}-steps-item-icon {
+    .@{prefix}-steps-item__icon {
       border-color: @steps-item-icon-dot-border-color-finish;
     }
   };
   & when(@anchor-status = process) {
 
-    .@{prefix}-steps-item-icon {
+    .@{prefix}-steps-item__icon {
       background: @steps-item-icon-dot-bg-color-process;
       border-color: @steps-item-icon-dot-border-color-process;
     }
   };
   & when(@anchor-status = error) {
 
-    .@{prefix}-steps-item-icon {
+    .@{prefix}-steps-item__icon {
       background: @steps-item-icon-dot-bg-color-error;
       border-color: @steps-item-icon-dot-border-color-error;
     }
@@ -188,7 +188,7 @@
 @item-direction: horizontal;
 .dot-icon(@item-direction) {
 
-  .@{prefix}-steps-item-icon {
+  .@{prefix}-steps-item__icon {
     display: block;
     width: @steps-dot-item-icon-width;
     height: @steps-dot-item-icon-height;
@@ -201,9 +201,9 @@
     }
   }
 
-  .@{prefix}-steps-item-content {
+  .@{prefix}-steps-item__content {
     & when(@item-direction = horizontal) {
-      text-align: @steps-item-conten-text-align-horizontal;
+      text-align: @steps-item-content-text-align-horizontal;
       width: @steps-dot-content-width;
     }
   }
@@ -215,7 +215,7 @@
 
     .@{prefix}-steps-item:not(:last-child) {
 
-      .@{prefix}-steps-item-title:after {
+      .@{prefix}-steps-item__title:after {
         content: "";
         display: block;
         width: 9999px;
@@ -230,7 +230,7 @@
 
     .@{prefix}-steps-item--finish:not(:last-child) {
 
-      .@{prefix}-steps-item-title:after {
+      .@{prefix}-steps-item__title:after {
         background: @steps-line-bg-color-horizontal-finish;
         height: @steps-line-height;
       }

package/esm/_common/style/web/components/steps/_var.less

@@ -60,7 +60,7 @@
 @steps-default-step-icon-font-size: @font-size-l;
 
 //位置
-@steps-item-conten-text-align-horizontal: center;
+@steps-item-content-text-align-horizontal: center;
 @steps-item-inner-align-items: center;
 
 //颜色description

package/esm/_common/style/web/components/table/_index.less

@@ -6,11 +6,15 @@
 
 @import "../../mixins/_scrollbar.less";
 
+@padding: @table-td-padding-vertical-top @table-td-padding-horizontal
+  @table-td-padding-vertical-bottom @table-td-padding-horizontal;
+
 .scrollbar {
   .scrollbar();
 }
 
 .@{prefix}-table {
+  width: 100%;
   font-size: @table-font-size;
   color: @table--text-color;
   background-color: @table-bg;
@@ -50,9 +54,7 @@
   th,
   td {
     position: relative;
-    padding:
-      @table-td-padding-vertical-top @table-td-padding-horizontal
-      @table-td-padding-vertical-bottom @table-td-padding-horizontal;
+    padding: @padding;
     border-bottom: 1px solid @table-border-color;
     line-height: @table-line-height;
     vertical-align: middle;
@@ -658,6 +660,36 @@
   }
 }
 
-.t-table-expandable-icon-cell + .t-table__cell--selectable[key="row-select"] {
+.@{prefix}-table-expandable-icon-cell + .@{prefix}-table__cell--selectable[key="row-select"] {
   padding-left: 10px;
 }
+
+.@{prefix}-table__filter--bottom-buttons {
+  display: flex;
+  justify-content: flex-end;
+  padding: 16px;
+  border-top: 1px solid @table-border-color;
+  > .@{prefix}-button + .@{prefix}-button {
+    margin-left: 8px;
+  }
+}
+
+.@{prefix}-table td.@{prefix}-table__row--full {
+  padding: 0;
+}
+
+.@{prefix}-table__row-filter-inner {
+  position: sticky;
+  left: 0;
+  padding: @padding;
+  text-align: center;
+}
+
+.@{prefix}-table__filter-result {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  > .@{prefix}-button {
+    margin-left: 8px;
+  }
+}

package/esm/_common/style/web/components/tooltip/_var.less

@@ -17,7 +17,7 @@
 @tooltip-shadow: @shadow-2;
 
 // 动画
-@tooltip-flow: t-popup_animation;
+@tooltip-flow: t-popup--animation;
 @cubic-bezier: cubic-bezier(0, .48, .33, 1);
 @flowin-transition: opacity @anim-duration-base @cubic-bezier;