tdesign-react 0.19.1 → 0.20.0

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

@@ -27,12 +27,12 @@
     pointer-events: none;
   }
 
-  &-content {
+  &__content {
     position: relative;
     .scrollbar();
   }
 
-  &-pagination {
+  &__pagination {
     padding: @table-padding-normal  @table-padding-horizontal;
     box-sizing: border-box;
   }
@@ -75,24 +75,19 @@
 
   td,
   th {
-    > a {
-      text-decoration: none;
-      color: @table-link-text-color;
-    }
-
-    &.align-left {
+    &.@{prefix}-align-left {
       text-align: left;
     }
 
-    &.align-right {
+    &.@{prefix}-align-right {
       text-align: right;
     }
 
-    &.align-center {
+    &.@{prefix}-align-center {
       text-align: center;
     }
 
-    &.text-ellipsis {
+    &.@{prefix}-text-ellipsis {
       .text-ellipsis();
     }
   }
@@ -114,8 +109,8 @@
   }
 
   // 展开/收起列
-  .@{prefix}-table-expandable-icon-cell,
-  .@{prefix}-table-selection-cell {
+  .@{prefix}-table__expandable-icon-cell,
+  .@{prefix}-table__selection-cell {
     padding: 0;
   }
 
@@ -133,15 +128,15 @@
 
   // 边框线表格
   &--bordered {
-    .@{prefix}-table-content {
+    .@{prefix}-table__content {
       border-left: 1px solid @table-border-color;
     }
-    .@{prefix}-table--empty {
+    .@{prefix}-table__empty {
       border-left: 1px  solid  @table-border-color;
       border-right: 1px  solid  @table-border-color;
     }
     // 表格边框优化，适配固定列/固定表头场景
-    .@{prefix}-table-content {
+    .@{prefix}-table__content {
       border: 1px solid @table-border-color;
       border-bottom: 0;
       border-radius: @border-radius;
@@ -196,7 +191,7 @@
       border-bottom: 1px solid @table-border-color;
     }
 
-    .@{prefix}-table-pagination {
+    .@{prefix}-table__pagination {
       border: 1px solid @table-border-color;
       border-top: 0;
     }
@@ -204,7 +199,7 @@
     // 固定表头表格底部边框线显示优化
     &.@{prefix}-table__header--fixed {
 
-      .@{prefix}-table-content {
+      .@{prefix}-table__content {
         border-bottom: 1px solid @table-border-color;
 
         tr {
@@ -277,7 +272,7 @@
   }
 
   // 文本顶端对齐
-  &.@{prefix}-table-valign__top {
+  &.@{prefix}-table--align-top {
     tbody {
       td {
         vertical-align: top;
@@ -360,7 +355,7 @@
       }
     }
 
-    .@{prefix}-table-content {
+    .@{prefix}-table__content {
       overflow: auto hidden;
     }
 
@@ -455,14 +450,14 @@
 
     &.@{prefix}-table--has-fixed {
       // 可向左滚动时，左边显示固定列显示阴影，右边同理
-      .@{prefix}-table-content--scrollable-to-left {
+      .@{prefix}-table__content--scrollable-to-left {
 
         .@{prefix}-table__cell--fixed-left-last::after {
           box-shadow: inset 8px 0 8px -4px var(--td-table-shadow-color);
         }
       }
 
-      .@{prefix}-table-content--scrollable-to-right {
+      .@{prefix}-table__content--scrollable-to-right {
 
         .@{prefix}-table__cell--fixed-right-first::after {
           box-shadow: inset -8px 0 8px -4px var(--td-table-shadow-color);
@@ -489,11 +484,6 @@
   // 数据行禁用
   .@{prefix}-table__row--disabled {
     color: @table-row-disabled-color;
-
-    a {
-      color: @table-row-disabled-color;
-      cursor: not-allowed;
-    }
   }
 
   // 复杂表头容器
@@ -567,26 +557,20 @@
   color: @text-color-disabled;
 }
 
-.@{prefix}-table-expanded-cell {
+.@{prefix}-table__expanded-cell {
   padding-left: 45px;
 }
 
-.@{prefix}-table--loading-async {
+.@{prefix}-table__async-loading {
   text-align: center;
-  color: @text-color-primary;
-
-  .@{prefix}-icon-loading {
-    margin-right: 10px;
-    color: @brand-color;
-  }
 }
 
-.@{prefix}-table--loading-status-load-more {
+.@{prefix}-table__async-loading.@{prefix}-is-load-more {
   cursor: pointer;
 }
 
 // 默认空表格
-.@{prefix}-table--empty {
+.@{prefix}-table__empty {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -595,8 +579,8 @@
   border-bottom: 1px solid @table-border-color;
 }
 
-.@{prefix}-table-filter-icon,
-.@{prefix}-table-sort-icon {
+.@{prefix}-table__filter-icon,
+.@{prefix}-table__sort-icon {
   margin-left: 8px;
   background-color: transparent;
   display: inline-block;
@@ -607,16 +591,16 @@
   }
 }
 
-.@{prefix}-table-sort-icon {
+.@{prefix}-table__sort-icon {
   position: absolute;
 }
 
-.@{prefix}-table-filter-pop {
+.@{prefix}-table__filter-pop {
 
-  .@{prefix}-table-filter-pop-content {
+  .@{prefix}-table__filter-pop-content {
     margin: -8px;
 
-    .@{prefix}-table-filter-pop-content__inner {
+    .@{prefix}-table__filter-pop-content-inner {
       padding: 16px;
     }
 
@@ -631,7 +615,7 @@
       line-height: 34px;
     }
 
-    .@{prefix}-table-filter-pop-content__button {
+    .@{prefix}-table__filter-pop-content-button {
       border-top: 1px solid @table-border-color;
       padding: 16px;
 
@@ -642,17 +626,17 @@
   }
 }
 
-.@{prefix}-table-sort-icon-active {
+.@{prefix}-table__sort-icon--active {
   color: @table-icon-active-color;
 }
 
-.@{prefix}-table-double-icons {
+.@{prefix}-table__double-icons {
   display: inline-grid;
   vertical-align: middle;
   width: 14px;
 }
 
-.@{prefix}-table-expand-box {
+.@{prefix}-table__expand-box {
   padding: 10px 8px;
   display: inline-grid;
   vertical-align: middle;

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

@@ -11,7 +11,7 @@
   background-color: @tab-default-bg;
 
   .@{prefix}-icon {
-    font-size: 16px;
+    font-size: @tab-icon-size;
   }
 
   &__header {
@@ -35,7 +35,7 @@
     display: flex;
     flex-direction: row;
     position: absolute;
-    border-bottom: 1px solid @tab-card-stroke;
+    border-bottom: @tab-bar-operations-border;
 
     &--left {
       left: 0;
@@ -46,7 +46,7 @@
 
       .@{prefix}-tabs__btn {
         &:first-child {
-          box-shadow: -10px 0 20px 5px rgba(0, 0, 0, 5%);
+          box-shadow: @tab-bar-operations-btn-box-shadow;
         }
       }
     }
@@ -59,11 +59,11 @@
     align-items: center;
     justify-content: center;
     background-color: @tab-card-bg;
-    border-left: 1px solid @tab-card-stroke;
+    border-left: @tab-btn-border;
     cursor: pointer;
     color: @tab-default-text;
-    font-size: @font-size-l;
-    transition: all @anim-duration-moderate @anim-time-fn-easing;
+    font-size: @tab-nav-item-font-size;
+    transition: @tab-bar-transtion;
     z-index: 1;
     opacity: 1;
 
@@ -82,13 +82,13 @@
     }
 
     &--left {
-      border-right: 1px solid @tab-card-stroke;
-      box-shadow: 10px 0 20px 5px rgba(0, 0, 0, 5%);
+      border-right: @tab-btn-border;
+      box-shadow: @tab-btn-box-shadow;
 
       &.fade-enter,
       &.fade-enter-from,
       &.fade-leave-to {
-        transform: translateX(-50px);
+        transform: @tab-btn-fade-transform-left;
       }
     }
 
@@ -96,7 +96,7 @@
       &.fade-enter,
       &.fade-enter-from,
       &.fade-leave-to {
-        transform: translateX(50px);
+        transform: @tab-btn-fade-transform-right;
       }
     }
   }
@@ -142,10 +142,10 @@
     display: block;
     background-color: @tab-card-bg;
     text-align: center;
-    border-bottom: 1px solid @tab-default-stroke;
+    border-bottom: @tab-bar-operations-border;
     cursor: pointer;
     color: @tab-card-text;
-    font-size: @font-size-l;
+    font-size: @tab-nav-item-font-size;
 
     &.@{prefix}-size-m {
       height: @tab-height-middle;
@@ -166,7 +166,7 @@
     align-self: stretch;
     overflow: hidden;
     white-space: nowrap;
-    transform: translate(0);
+    transform: @tab-nav-scroll-transform;
   }
 
   &__nav-wrap {
@@ -175,7 +175,7 @@
     font-size: 0;
 
     &.@{prefix}-is-smooth {
-      transition: transform @anim-duration-moderate @anim-time-fn-easing;
+      transition: @tab-nav-warp-is-smooth-transform;
     }
 
     &.@{prefix}-is-vertical {
@@ -185,9 +185,9 @@
 
   &__bar {
     position: absolute;
-    background-color: @tab-default-stroke-select;
+    background-color: @tab-default-bar-bg-color;
     z-index: 1;
-    transition: all @anim-duration-moderate @anim-time-fn-easing;
+    transition: @tab-bar-transtion;
 
     &.@{prefix}-is-top {
       bottom: 0;
@@ -224,25 +224,25 @@
     z-index: 0;
     cursor: pointer;
     flex-shrink: 0;
-    transition: background-color @anim-time-fn-easing @anim-duration-base;
+    transition: @tab-nav-item-transition;
 
     &-wrapper {
       display: block;
-      padding: 5px 8px;
-      margin-left: 8px;
-      margin-right: 8px;
-      line-height: 22px;
+      padding: @tab-nav-item-wrapper-padding;
+      margin-left: @tab-nav-item-margin-left;
+      margin-right: @tab-nav-item-margin-right;
+      line-height: @tab-nav-item-line-height;
       border-radius: @border-radius;
-      transition: background-color @anim-time-fn-easing @anim-duration-base;
+      transition: @tab-nav-item-transition;
 
       --ripple-color: @bg-color-container-active;
     }
 
     &.@{prefix}-size-l {
-      font-size: @font-size-l;
+      font-size: @tab-nav-item-font-size;
 
       .@{prefix}-tabs__nav-item-wrapper {
-        padding: 9px 12px;
+        padding: @tab-nav-item-wrapper-padding-large;
       }
     }
 
@@ -278,7 +278,7 @@
     &.@{prefix}-is-active {
       color: @tab-default-text-select;
       // font-weight: 500;
-      text-shadow: 0 0 .3px currentColor; // 由于在wins上字体变粗时会扩大width的宽度，导致有抖动的问题；因此采用text-shadow来代替
+      text-shadow: @tab-btn-text-shadow-active; // 由于在wins上字体变粗时会扩大width的宽度，导致有抖动的问题；因此采用text-shadow来代替
     }
 
     &.@{prefix}-is-disabled {
@@ -287,8 +287,8 @@
     }
 
     & > .remove-btn {
-      margin-left: 8px;
-      transition: all .3s cubic-bezier(.645, .045, .355, 1);
+      margin-left: @tab-btn-remove-btn-margin-left;
+      transition: @tab-btn-remove-btn-transition;
     }
 
     --ripple-color: @bg-color-container-active;
@@ -298,9 +298,9 @@
     background-color: @tab-card-bg;
 
     &.@{prefix}-tabs__nav-item {
-      padding-left: 16px;
-      padding-right: 16px;
-      border-bottom: 1px solid @tab-card-stroke;
+      padding-right: @tab-nav-card-nav-item-padding-right;
+      padding-left: @tab-nav-card-nav-item-padding-left;
+      border-bottom: @tab-btn-border;
 
       &::after {
         display: none;
@@ -313,11 +313,11 @@
       }
 
       &:not(:first-of-type) {
-        border-left: 1px solid @tab-card-stroke;
+        border-left: @tab-btn-border;
       }
 
       &:last-of-type {
-        border-right: 1px solid @tab-card-stroke;
+        border-right: @tab-btn-border;
       }
 
       &.@{prefix}-is-active {
@@ -327,14 +327,14 @@
       }
 
       &.@{prefix}-size-l {
-        padding-left: 24px;
-        padding-right: 24px;
+        padding-left: @tab-nav-card-nav-item-padding-left-large;
+        padding-right: @tab-nav-card-nav-item-padding-right-large;
       }
     }
 
     .@{prefix}-icon-close {
       color: @tab-card-icon;
-      transition: color @anim-time-fn-easing @anim-duration-base;
+      transition: @tab-btn-icon-close-transition;
 
       &:hover {
         color: @tab-card-icon-select;

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

@@ -25,7 +25,7 @@
 @tab-default-icon-disabled: @text-color-disabled;
 
 @tab-default-stroke: @component-stroke;
-@tab-default-stroke-select: @brand-color;
+@tab-default-bar-bg-color: @brand-color;
 @tab-default-stroke-size: 2px;
 
 // 卡片选项卡
@@ -48,3 +48,34 @@
 @tab-height-middle: 48px;
 @tab-height-large: 64px;
 @tab-btn-width: 40px;
+@tab-nav-item-margin-left: 8px;
+@tab-nav-item-margin-right: 8px;
+@tab-nav-item-wrapper-padding: 5px 8px;
+@tab-nav-item-wrapper-padding-large: 9px 12px;
+@tab-btn-remove-btn-margin-left: 8px;
+@tab-nav-card-nav-item-padding-right: 16px;
+@tab-nav-card-nav-item-padding-left: 16px;
+@tab-nav-card-nav-item-padding-right-large: 24px;
+@tab-nav-card-nav-item-padding-left-large: 24px;
+// 尺寸
+@tab-icon-size: @font-size-l; // icon尺寸
+@tab-nav-item-font-size: @font-size-l; // tab文本字体大小
+@tab-nav-item-line-height: 22px; // tab文字行高
+// 圆角&边框
+@tab-btn-border: 1px solid @tab-card-stroke; // 按钮边框
+@tab-bar-operations-border: 1px solid @tab-card-stroke; // 卡片边框
+// 动画&过度
+@tab-nav-scroll-transform: translate(0); // 滚动栏滚动过度
+@tab-btn-fade-transform-left: translateX(-50px); // 按钮过渡动画
+@tab-btn-fade-transform-right: translateX(50px); // 按钮过渡动画
+@tab-nav-warp-is-smooth-transform: transform @anim-duration-moderate
+  @anim-time-fn-easing; // smooth 过渡动画
+@tab-nav-item-transition: background-color @anim-time-fn-easing
+  @anim-duration-base;
+@tab-btn-remove-btn-transition: all .3s cubic-bezier(.645, .045, .355, 1); // 删除按钮动画过渡
+@tab-btn-icon-close-transition: color @anim-time-fn-easing @anim-duration-base; // 关闭按钮过渡动画
+// 阴影
+@tab-bar-operations-btn-box-shadow: -10px 0 20px 5px rgba(0, 0, 0, 5%); // 按钮阴影
+@tab-bar-transtion: all @anim-duration-moderate @anim-time-fn-easing; // 选项卡过渡动画
+@tab-btn-box-shadow: 10px 0px 20px 5px rgba(0, 0, 0, .05); // 按钮阴影
+@tab-btn-text-shadow-active: 0 0 .3px currentColor; // 按钮选中颜色 win系统兼容

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

@@ -30,14 +30,9 @@
   .@{prefix}-tag__icon-close {
     margin-right: 0;
     margin-left: 4px;
-    fill: @tag-close-icon-color;
     font-size: @tag-large-font-size;
     cursor: pointer;
-    transition: fill @anim-duration-base @anim-time-fn-easing;
-
-    &:hover {
-      fill: @tag-close-icon-hover-color;
-    }
+    transition: color @anim-duration-base @anim-time-fn-easing;
   }
 
   ::selection {
@@ -48,6 +43,14 @@
     color: @tag-default-text-color;
     background-color: @tag-default-background-color;
 
+    .@{prefix}-tag__icon-close {
+      color: @tag-close-icon-color;
+
+      &:hover {
+        color: @tag-close-icon-hover-color;
+      }
+    }
+
     &.@{prefix}-tag--checked {
       color: @tag-checked-color;
       background-color: @tag-checked-background-color;
@@ -82,11 +85,8 @@
       }
 
       .@{prefix}-icon {
-        fill: @tag-disabled-color;
-        cursor: not-allowed;
-
         &:hover {
-          fill: @tag-disabled-color;
+          cursor: pointer;
         }
       }
     }
@@ -135,11 +135,11 @@
       }
     }
 
-    .@{prefix}-tag__icon-close {
-      fill: @brand-color;
-
-      &:hover {
-        fill: @brand-color-hover;
+    &.@{prefix}-tag--light, &.@{prefix}-tag--plain {
+      .@{prefix}-tag__icon-close {
+        &:hover {
+          color: @brand-color-hover;
+        }
       }
     }
   }
@@ -155,11 +155,11 @@
       }
     }
 
-    .@{prefix}-tag__icon-close {
-      fill: @success-color;
-
-      &:hover {
-        fill: @success-color-hover;
+    &.@{prefix}-tag--light, &.@{prefix}-tag--plain {
+      .@{prefix}-tag__icon-close {
+        &:hover {
+          color: @success-color-hover;
+        }
       }
     }
   }
@@ -175,11 +175,11 @@
       }
     }
 
-    .@{prefix}-tag__icon-close {
-      fill: @warning-color;
-
-      &:hover {
-        fill: @warning-color-hover;
+    &.@{prefix}-tag--light, &.@{prefix}-tag--plain {
+      .@{prefix}-tag__icon-close {
+        &:hover {
+          color: @warning-color-hover;
+        }
       }
     }
   }
@@ -202,6 +202,14 @@
         fill: @error-color-hover;
       }
     }
+
+    &.@{prefix}-tag--light, &.@{prefix}-tag--plain {
+      .@{prefix}-tag__icon-close {
+        &:hover {
+          color: @error-color-hover;
+        }
+      }
+    }
   }
 
   &--dark&:not(.@{prefix}-tag--default) {

package/esm/_common/style/web/components/time-picker/_index.less

@@ -29,13 +29,11 @@
     position: relative;
 
     &.@{prefix}-is-focused {
-
       .@{prefix}-input__inner {
         border-color: @time-picker-input-color-focused;
       }
 
       .@{prefix}-input__suffix:not(.@{prefix}-input__clear) {
-
         .@{prefix}-icon {
           color: @time-picker-input-color-focused;
         }
@@ -46,7 +44,7 @@
       border: @time-picker-input-border-active;
       box-shadow: @time-picker-input-shadow-active;
 
-      &+ .@{prefix}-time-picker__icon-wrap > .@{prefix}-time-picker__icon-clear {
+      & + .@{prefix}-time-picker__icon-wrap > .@{prefix}-time-picker__icon-clear {
         display: block;
       }
     }
@@ -128,12 +126,12 @@
   }
 }
 
-.@{prefix}-time-picker-panel__container {
+.@{prefix}-time-picker__panel-container {
   margin: @time-picker-panel-container-margin;
   padding: 0;
 }
 
-.@{prefix}-time-picker-panel {
+.@{prefix}-time-picker__panel {
   width: @time-picker-width-common;
   background: @time-picker-background-color-common;
   border-radius: @border-radius;
@@ -141,7 +139,7 @@
   position: relative;
   font-size: @time-picker-font-size;
 
-  &__body {
+  &-body {
     width: 100%;
     height: @time-picker-panel-body-height;
     position: relative;
@@ -157,10 +155,9 @@
 
       > div {
         flex: 1;
-        transform:
-          translateY(
-            -((@time-picker-panel-item-height + @time-picker-panel-item-margin) /2)
-          );
+        transform: translateY(
+          -((@time-picker-panel-item-height + @time-picker-panel-item-margin) /2)
+        );
         height: @time-picker-panel-item-height;
         background-color: @time-picker-panel-item-background-color-current;
         margin: @time-picker-panel-item-margin;
@@ -229,11 +226,11 @@
 }
 
 // TODO: 结构比较复杂且不清晰 有时间优化DOM结构
-.@{prefix}-time-picker-panel-section {
+.@{prefix}-time-picker__panel-section {
   width: @time-picker-panel-section-width;
   background-color: @time-picker-background-color-common;
 
-  &__body {
+  &-body {
     width: 100%;
     display: flex;
     justify-content: space-between;
@@ -244,7 +241,7 @@
     }
   }
 
-  &__footer {
+  &-footer {
     width: 100%;
     height: @time-picker-panel-footer-height;
     display: flex;

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

@@ -1,6 +1,6 @@
 .@{d-prefix}-tooltip-demo {
 
-  .@{prefix}-popup-reference,
+  .@{prefix}-popup__reference,
   .@{prefix}-button {
     margin-right: 10px;
   }