tdesign-react 0.19.0 → 0.20.2

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

@@ -17,29 +17,29 @@
   background: @layout-bg-color;
   flex: auto;
 
-  &-has-sider {
+  &--with-sider {
     flex-direction: row;
   }
 }
 
-.@{prefix}-layout--header {
-  height: @layout-hearder-height;
-  line-height: @layout-hearder-height;
+.@{prefix}-layout__header {
+  height: @layout-header-height;
+  line-height: @layout-header-height;
   background-color: @layout-header-bg-color;
 }
 
-.@{prefix}-layout--content {
+.@{prefix}-layout__content {
   flex: auto;
 }
 
-.@{prefix}-layout--sider {
+.@{prefix}-layout__sider {
   position: relative;
   transition: all @layout-sider-anim-duration;
   background: @layout-sider-bg-color;
   width: @layout-sider-width;
 }
 
-.@{prefix}-layout--footer {
+.@{prefix}-layout__footer {
   color: @layout-footer-color;
   padding: 24px;
 }

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

@@ -24,7 +24,7 @@
 @layout-footer-color: @text-color-placeholder;
 
 // 尺寸
-@layout-hearder-height: 64px;
+@layout-header-height: 64px;
 @layout-sider-width: 232px;
 
 // 间距

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

@@ -12,7 +12,7 @@
   overflow: auto;
   color: @list-font-color;
 
-  &-items {
+  &__inner {
     .list-style-none();
   }
 
@@ -134,57 +134,47 @@
     }
   }
 
-  &.t-size-s {
+  &.@{prefix}-size-s {
 
     .@{prefix}-list-item {
       padding: @list-item-spacer-small;
     }
   }
 
-  &.t-size-l {
+  &.@{prefix}-size-l {
 
     .@{prefix}-list-item {
       padding: @list-item-spacer-large;
     }
   }
 
-  &__load {
+  &__header,
+  &__footer {
     background: @list-bg-color-default;
-    text-align: center;
-    font-size: @list-load-font-size;
-    line-height: @list-load-line-height;
-
-    > div {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
+    padding: @list-padding;
+  }
+}
 
-    &:not(:empty) {
-      padding: @list-load-not-empty-padding; // 如果不是空子元素才设置padding
-    }
+.@{prefix}-list__load {
+  background: @list-bg-color-default;
+  text-align: center;
+  line-height: @list-load-line-height;
 
-    &.@{prefix}-list__load--loading {
-      color: @list-text-color-loading;
+  > div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-      .@{prefix}-icon,
-      .@{prefix}-loading {
-        color: @list-icon-color-loading;
-        font-size: @list-icon-size;
-        margin-right: @list-load-icon-margin;
-      }
-    }
+  &:not(:empty) {
+    padding: @list-load-not-empty-padding; // 如果不是空子元素才设置padding
+  }
 
-    &.@{prefix}-list__load--load-more {
-      color: @list-text-color-load-more;
-      cursor: pointer;
-      font-size: @list-load-more-font-size;
-    }
+  .@{prefix}-loading {
+    font-size: @list-load-font-size;
   }
 
-  &__header,
-  &__footer {
-    background: @list-bg-color-default;
-    padding: @list-padding;
+  .@{prefix}-loading.@{prefix}-is-load-more {
+    cursor: pointer;
   }
 }

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

@@ -50,8 +50,8 @@
 // 字体
 @list-item-font-size: @font-size-base;
 @list-meta-title-font-size: @font-size-l;
-@list-load-font-size: @font-size-s;
-@list-load-more-font-size: @font-size-s;
+@list-load-font-size: 16px;
+@list-load-more-font-size: 16px;
 
 // 行号
 @list-load-line-height: @text-line-height-s;

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

@@ -7,72 +7,9 @@
 @import "../../utilities/_animation.less";
 
 .@{prefix}-loading {
-  vertical-align: middle;
   position: relative;
   color: @loading-color;
   font-size: @loading-icon-size;
-  display: inline-flex;
-  align-items: center;
-
-  &--inherit-color {
-    color: inherit;
-  }
-
-  &__wrapper {
-    text-align: center;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    display: block;
-    z-index: 3500;
-
-    .@{prefix}-icon-loading {
-      position: absolute;
-      top: 50%;
-      margin-top: @loading-wrapper-icon-margin-top;
-    }
-  }
-
-  &-parent__relative {
-    position: relative;
-    height: 100%;
-  }
-
-  &-mask {
-    background-color: @loading-mask-color;
-
-    &-text {
-      position: relative;
-      top: 50%;
-      margin-top: @loading-wrapper-icon-margin-top;
-
-      .@{prefix}-icon-loading {
-        position: unset;
-      }
-
-      .@{prefix}-loading-text {
-        margin-top: @loading-wrapper-icon-margin-top;
-      }
-    }
-  }
-
-  &-fullscreen {
-    position: fixed;
-
-    .@{prefix}-loading {
-      top: 50%;
-
-      .@{prefix}-icon-loading {
-        font-size: @loading-fullscreen-icon-size;
-      }
-    }
-
-    &.@{prefix}-loading-mask {
-      background-color: @loading-fullscreen-mask-bg-color;
-    }
-  }
 
   &-lock {
     overflow: hidden;
@@ -85,25 +22,22 @@
   &.@{prefix}-size-l {
     font-size: @loading-icon-size-large;
   }
+}
 
-  &-text {
-    font-size: @loading-text-size;
-    line-height: @loading-text-line-height;
-    width: auto;
-    display: inline-block;
-    vertical-align: middle;
-    margin-left: @loading-text-margin-left;
-  }
-
-  &--blur {
-    opacity: .6;
-    user-select: none;
-    pointer-events: none;
-  }
+.@{prefix}-loading__fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: @z-index-loading;
 }
 
-.@{prefix}-icon-loading {
-  animation: t-spin 1s linear infinite;
+.@{prefix}-loading--center {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  justify-content: center;
 }
 
 .@{prefix}-loading__content {
@@ -112,6 +46,44 @@
   top: 20%;
 }
 
+.@{prefix}-loading--inherit-color {
+  color: inherit;
+}
+
+.@{prefix}-loading__parent {
+  position: relative;
+}
+
+.@{prefix}-loading__overlay {
+  background-color: @loading-mask-color;
+}
+
+/** 仅用于作为包裹元素时 */
+.@{prefix}-loading--full {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.@{prefix}-loading--hidden {
+  visibility: hidden;
+}
+
+.@{prefix}-loading--visible {
+  visibility: visible;
+}
+
+.@{prefix}-loading__text {
+  width: auto;
+  display: inline-block;
+  vertical-align: middle;
+  font-size: @loading-text-size;
+  line-height: @loading-text-line-height;
+  margin-left: @loading-text-margin-left;
+}
+
 .@{prefix}-loading__gradient {
   display: inline-flex;
   justify-content: center;

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

@@ -14,7 +14,6 @@
 //颜色
 @loading-color: @brand-color; // TODO: 新的优化设计 需要使用background conic-gradient来实现 需要调整loading组件的DOM结构 所有框架改完再删掉这个地方的值
 @loading-mask-color: @mask-disabled;
-@loading-fullscreen-mask-bg-color: @mask-disabled;
 @loading-gradient-color: @brand-color;
 
 // 字号
@@ -22,13 +21,12 @@
 @loading-text-line-height: @text-line-height-base;
 // TODO: 新的设计 用下面的size来控制 后续全部框架改成新的设计后可以去掉
 @loading-icon-size: @font-size-xxl;
-@loading-icon-size-small: @font-size-base;
+@loading-icon-size-small: 16px;
 @loading-icon-size-large: 56px;
 @loading-fullscreen-icon-size: @loading-icon-size;
 
 // 间距
 @loading-text-margin-left: 5px;
-@loading-wrapper-icon-margin-top: -12px;
 @loading-gradient-padding-s: 1px;
 @loading-gradient-padding-m: 3px;
 @loading-gradient-padding-l: 5px;

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

@@ -241,11 +241,11 @@ a.@{prefix}-menu__item {
       background: @menu-theme-dark;
     }
 
-    .@{prefix}-menu-group-title {
+    .@{prefix}-menu-group__title {
       color: @menu-menu-group-title-color--dark;
     }
 
-    &.@{prefix}-is-collapsed .@{prefix}-menu-group-title:after {
+    &.@{prefix}-is-collapsed .@{prefix}-menu-group__title:after {
       background-color: @menu-group-title-bg--collapse--dark;
     }
   }
@@ -336,7 +336,7 @@ a.@{prefix}-menu__item {
       }
     }
 
-    .@{prefix}-menu-group-title {
+    .@{prefix}-menu-group__title {
       padding: 0;
       font-size: 0;
 
@@ -385,7 +385,7 @@ a.@{prefix}-menu__item {
     }
 
     .@{prefix}-menu-group {
-      &-title {
+      &__title {
         position: relative;
         padding: 20px 16px 8px;
         height: 48px;

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

@@ -15,7 +15,7 @@
 
 // 颜色
 @menu-theme-light: #fff;
-@menu-theme-dark: @gray-color-12;
+@menu-theme-dark: @gray-color-13;
 @menu-theme-primary: @brand-color;
 
 @menu-item-color--light: @font-gray-2;

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

@@ -49,7 +49,7 @@
       margin-right: @msg-inner-margin-right;
     }
 
-    > .@{prefix}-message-close {
+    > .@{prefix}-message__close {
       display: inline-flex;
       margin-right: 0;
       margin-left: auto;
@@ -74,7 +74,7 @@
   }
 }
 
-.@{prefix}-message-list {
+.@{prefix}-message__list {
   position: fixed;
   z-index: 6000;
 

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

@@ -97,29 +97,29 @@
     line-height: @notification-content-text-height;
   }
 
-  &__detail--item {
+  &__detail-item {
     padding: @notification-detail-item-padding;
     color: @notification-detail-item-color;
     cursor: pointer;
   }
 
-  &__detail--item:hover {
+  &__detail-item:hover {
     color: @notification-detail-item-color-hover;
     background: @notification-detail-item-bg-color-hover;
     border-radius: @notification-detail-item-border-radius;
   }
 
-  &__detail--item:active {
+  &__detail-item:active {
     color: @notification-detail-item-color-active;
     background: @notification-detail-item-bg-color-active;
     border-radius: @notification-detail-item-border-radius;
   }
 
-  &__detail--item + &__detail--item {
+  &__detail-item + &__detail-item {
     margin-left: @notification-detail-item-margin-left;
   }
 
-  &__detail--item.t-is-active {
+  &__detail-item.t-is-active {
     color: @notification-detail-item-is-active-color;
   }
 

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

@@ -33,10 +33,6 @@
     height: @pagination-height-default;
     font-size: @font-size-base;
     color: @pagination-text-color;
-
-    .@{prefix}-select {
-      line-height: (@pagination-height-default - 2);
-    }
   }
 
   // 前进 后退按钮
@@ -55,11 +51,11 @@
       cursor: not-allowed;
     }
 
-    &--prev {
+    &-prev {
       margin-right: @pagination-btn-margin;
     }
 
-    &--next {
+    &-next {
       margin-left: @pagination-btn-margin;
     }
 
@@ -88,7 +84,8 @@
     border-radius: @pagination-border-radius-base;
     cursor: pointer;
     background-color: @pagination-bg-color-default;
-    transition: border @anim-duration-base linear, background-color @anim-duration-base linear;
+    transition: border @anim-duration-base linear,
+      background-color @anim-duration-base linear;
 
     .pagination-number--size(
       @pagination-height-default; @pagination-font-default;
@@ -138,13 +135,6 @@
       border: 0 none;
       padding: 0;
 
-      &.more-quickprev {
-
-        .@{prefix}-icon-double-arrow-right {
-          transform: rotate(-180deg);
-        }
-      }
-
       &:hover {
         color: @pagination-text-color-btn;
         background-color: @pagination-bg-color-btn-hover;
@@ -186,7 +176,6 @@
 
   // 迷你尺寸
   &.@{prefix}-size-s {
-
     .@{prefix}-pagination {
       &__total {
         font-size: @pagination-font-s;
@@ -221,7 +210,6 @@
         }
 
         &.@{prefix}-is-current {
-
           &.@{prefix}-is-disabled {
             .pagination-number--color(
               @pagination-bg-color-current-disabled;

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

@@ -9,10 +9,6 @@
 .@{popconfirm-cls} {
   border-radius: @popconfirm-border-radius;
 
-  &--position-hidden {
-    display: none;
-  }
-
   &__content {
     position: @popconfirm-position;
     padding: @popconfirm-padding + 4 @popconfirm-padding;
@@ -64,77 +60,4 @@
       margin-right: 0;
     }
   }
-
-  &__arrow {
-    position: absolute;
-    display: block;
-    width: @popconfirm-arrow-size;
-    height: @popconfirm-arrow-size;
-    border-style: solid;
-    transform: @popconfirm-arrow-rotate;
-    border-width: @popconfirm-arrow-border-width;
-  }
-
-  &--position-bottomRight .@{popconfirm-cls}__arrow,
-  &--position-bottom .@{popconfirm-cls}__arrow,
-  &--position-bottom-left .@{popconfirm-cls}__arrow {
-    top: @popconfirm-arrow-absolute-offset;
-    border-color: @popconfirm-arrow-bottom-border-color;
-    box-shadow: @popconfirm-arrow-bottom-shadow;
-  }
-
-  &--position-topRight .@{popconfirm-cls}__arrow,
-  &--position-top .@{popconfirm-cls}__arrow,
-  &--position-top-left .@{popconfirm-cls}__arrow {
-    bottom: @popconfirm-arrow-absolute-offset;
-    border-color: @popconfirm-arrow-top-border-color;
-    box-shadow: @popconfirm-arrow-top-shadow;
-    right: @popconfirm-arrow-margin;
-  }
-
-  &--position-bottomRight .@{popconfirm-cls}__arrow,
-  &--position-topRight .@{popconfirm-cls}__arrow {
-    right: @popconfirm-arrow-margin;
-  }
-
-  &--position-bottom .@{popconfirm-cls}__arrow,
-  &--position-top .@{popconfirm-cls}__arrow {
-    left: 50%;
-    transform: translateX(-50%) @popconfirm-arrow-rotate;
-  }
-
-  &--position-bottom-left .@{popconfirm-cls}__arrow,
-  &--position-top-left .@{popconfirm-cls}__arrow {
-    left: @popconfirm-arrow-margin;
-  }
-
-  &--position-left-top .@{popconfirm-cls}__arrow,
-  &--position-left .@{popconfirm-cls}__arrow,
-  &--position-left-bottom .@{popconfirm-cls}__arrow {
-    right: @popconfirm-arrow-absolute-offset;
-    border-color: @popconfirm-arrow-left-border-color;
-  }
-
-  &--position-right-top .@{popconfirm-cls}__arrow,
-  &--position-right .@{popconfirm-cls}__arrow,
-  &--position-right-bottom .@{popconfirm-cls}__arrow {
-    border-color: @popconfirm-arrow-right-border-color;
-    left: @popconfirm-arrow-absolute-offset;
-  }
-
-  &--position-left-top .@{popconfirm-cls}__arrow,
-  &--position-right-top .@{popconfirm-cls}__arrow {
-    top: @popconfirm-arrow-margin;
-  }
-
-  &--position-left .@{popconfirm-cls}__arrow,
-  &--position-right .@{popconfirm-cls}__arrow {
-    top: 50%;
-    transform: translateY(-50%) @popconfirm-arrow-rotate;
-  }
-
-  &--position-left-bottom .@{popconfirm-cls}__arrow,
-  &--position-right-bottom .@{popconfirm-cls}__arrow {
-    bottom: @popconfirm-arrow-margin;
-  }
 }

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

@@ -13,11 +13,7 @@
   display: inline-block;
   z-index: 5500;
 
-  ul {
-    .list-style-none();
-  }
-
-  &-content {
+  &__content {
     position: relative;
     background: @popup-bg;
     box-shadow: @popup-shadow;
@@ -28,7 +24,7 @@
     transition: max-height @popup-flow-duration @anim-time-fn-easing;
   }
 
-  &-reference {
+  &__reference {
     display: inline-block;
   }
 }
@@ -52,7 +48,7 @@
 .@{prefix}-popup[data-popper-placement^="bottom"],
 .@{prefix}-popup[data-popper-placement^="top"] {
 
-  .@{prefix}-popup-content {
+  .@{prefix}-popup__content {
     margin: @popup-content-margin 0;
 
     &--arrow {
@@ -64,7 +60,7 @@
 .@{prefix}-popup[data-popper-placement^="left"],
 .@{prefix}-popup[data-popper-placement^="right"] {
 
-  .@{prefix}-popup-content {
+  .@{prefix}-popup__content {
     margin: 0 @popup-content-margin;
 
     &--arrow {

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

@@ -18,12 +18,14 @@
 // 阴影
 @popup-shadow: @shadow-2-inset;
 @popup-top-arrow-shadow: @shadow-inset-left, @shadow-inset-bottom;
-@popup-left-arrow-shadow: @shadow-inset-left,@shadow-inset-top;
+@popup-left-arrow-shadow: @shadow-inset-left, @shadow-inset-top;
 @popup-bottom-arrow-shadow: @shadow-inset-top, @shadow-inset-right;
 @popup-right-arrow-shadow: @shadow-inset-right, @shadow-inset-bottom;
 
 // 动画
-@popup-flow: t-popup_animation;
+@popup-flow: t-popup--animation;
 @popup-flow-duration: @anim-duration-base;
 @popup-flow-fn: @anim-time-fn-ease-in;
-@popup-flow-transition: opacity @popup-flow-duration @popup-flow-fn, visibility @popup-flow-duration @popup-flow-fn;
+@popup-flow-transition: opacity @popup-flow-duration @popup-flow-fn,
+  visibility @popup-flow-duration @popup-flow-fn,
+  max-height @popup-flow-duration @anim-time-fn-easing;