tdesign-react 0.19.1 → 0.20.0

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

@@ -7,25 +7,25 @@
 @import "./_mixin.less";
 // 进度条基本样式
 .@{prefix}-progress {
-  &--inner {
+  &__inner {
     position: relative;
     height: 100%;
     background: @progress-inner-color;
     border-radius: @progress-inner-border-radius;
   }
 
-  &--info {
+  &__info {
     margin-left: @progress-info-spacer;
     color: @progress-info-dark-color;
     white-space: nowrap;
   }
 
-  &--icon {
+  &__icon {
     font-size: @progress-icon-font-size;
   }
 }
 
-.@{prefix}-progress--bar {
+.@{prefix}-progress__bar {
   width: 100%;
   height: 6px;
   overflow: hidden;
@@ -46,14 +46,13 @@
   border-radius: (@progress-stroke-plump-width / 2);
   display: flex;
   align-items: center;
-  .@{prefix}-progress--info {
+  .@{prefix}-progress__info {
     font-size: @progress-plump-font-size;
   }
 }
 
 .@{prefix}-progress--over-ten {
-
-  .@{prefix}-progress--info {
+  .@{prefix}-progress__info {
     position: absolute;
     top: 50%;
     z-index: 10;
@@ -64,13 +63,12 @@
 }
 
 .@{prefix}-progress--under-ten {
-
-  .@{prefix}-progress--info,
-  .@{prefix}-progress--inner {
+  .@{prefix}-progress__info,
+  .@{prefix}-progress__inner {
     display: inline-block;
   }
 
-  .@{prefix}-progress--info {
+  .@{prefix}-progress__info {
     vertical-align: top;
   }
 }
@@ -79,7 +77,7 @@
 .@{prefix}-progress--circle {
   position: relative;
 
-  .@{prefix}-progress--info {
+  .@{prefix}-progress__info {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -92,23 +90,22 @@
     transform: translate(-50%, -50%);
   }
 
-  .@{prefix}-circle--outer {
+  .@{prefix}-progress__circle-outer {
     stroke: @progress-track-color;
   }
 
-  .@{prefix}-circle--inner {
+  .@{prefix}-progress__circle-inner {
     stroke: @progress-inner-color;
   }
 
-  .@{prefix}-progress--icon {
+  .@{prefix}-progress__icon {
     font-size: @progress-icon-circle-font-size;
   }
 }
 
 //进度条状态
 .@{prefix}-progress--status--active {
-
-  .@{prefix}-progress--inner {
+  .@{prefix}-progress__inner {
     &::before {
       position: absolute;
       top: 0;
@@ -117,8 +114,7 @@
       left: 0;
       z-index: 1;
       content: "";
-      animation:
-        progress-active-animation 2s
+      animation: progress-active-animation 2s
         cubic-bezier(.23, .99, .86, .2) infinite;
       background: @progress-inner-bg-color-active;
       opacity: .2;
@@ -127,46 +123,43 @@
 }
 
 .@{prefix}-progress--status--success {
-
-  .@{prefix}-progress--inner {
+  .@{prefix}-progress__inner {
     background: @progress-success;
   }
 
-  .@{prefix}-circle--inner {
+  .@{prefix}-progress__circle-inner {
     stroke: @progress-success;
   }
 
-  .@{prefix}-progress--icon {
+  .@{prefix}-progress__icon {
     color: @progress-success;
   }
 }
 
 .@{prefix}-progress--status--warning {
-
-  .@{prefix}-progress--inner {
+  .@{prefix}-progress__inner {
     background: @progress-warning;
   }
 
-  .@{prefix}-circle--inner {
+  .@{prefix}-progress__circle-inner {
     stroke: @progress-warning;
   }
 
-  .@{prefix}-progress--icon {
+  .@{prefix}-progress__icon {
     color: @progress-warning;
   }
 }
 
 .@{prefix}-progress--status--error {
-
-  .@{prefix}-progress--inner {
+  .@{prefix}-progress__inner {
     background: @progress-error;
   }
 
-  .@{prefix}-circle--inner {
+  .@{prefix}-progress__circle-inner {
     stroke: @progress-error;
   }
 
-  .@{prefix}-progress--icon {
+  .@{prefix}-progress__icon {
     color: @progress-error;
   }
 }

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

@@ -15,7 +15,7 @@
     margin-right: @radio-margin-right;
   }
 
-  &.@{radio-cls}-group-outline {
+  &.@{radio-cls}-group__outline {
 
     .@{radio-button--cls} {
 
@@ -34,22 +34,22 @@
     }
   }
 
-  &.@{radio-cls}-group-filled {
+  &.@{radio-cls}-group--filled {
     border-color: @radio-button-group-background-color-filled;
     padding: @radio-group-padding;
     border-radius: @radio-button-border-radius;
     background-color: @radio-button-group-background-color-filled;
     position: relative;
 
-    .@{radio-cls}-group-filled-bg-block {
+    .@{radio-cls}-group__bg-block {
       position: absolute;
-      left: 2px;
-      top: 2px;
+      left: @radio-group-filled-bg-block-left;
+      top: @radio-group-filled-bg-block-top;
       width: 0;
       height: calc(100% - 4px);
       background-color: @radio-button-background-color-default-filled-checked;
-      transition: all @anim-duration-base @anim-time-fn-easing;
-      border-radius: 2px;
+      transition: @radio-group-transition;
+      border-radius: @radio-button-border-radius;
     }
 
     .@{radio-button--cls} {
@@ -64,10 +64,10 @@
       &::before {
         content: "";
         position: absolute;
-        left: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 1px;
+        left: @radio-button-before-left;
+        top: @radio-button-before-top;
+        transform: @radio-button-before-transition;
+        width: @radio-button-before-width;
         height: calc(100% - 16px);
         background-color: @component-border;
         transition: opacity @anim-duration-base @anim-time-fn-ease-out;
@@ -75,7 +75,7 @@
 
       &:first-child {
         &::before {
-          opacity: 0;
+          opacity: @radio-opacity-transparent;
         }
       }
 
@@ -87,12 +87,12 @@
         transition: color @anim-duration-base linear;
 
         &::before {
-          opacity: 0;
+          opacity: @radio-opacity-transparent;
         }
 
         & + label {
           &::before {
-            opacity: 0;
+            opacity: @radio-opacity-transparent;
           }
         }
       }
@@ -104,16 +104,16 @@
           color: @radio-button-color-default-filled-disabled-checked;
         }
 
-        &.@{prefix}-is-checked ~ .@{radio-cls}-group-filled-bg-block {
+        &.@{prefix}-is-checked ~ .@{radio-cls}-group__bg-block {
           background-color: @radio-button-background-color-default-filled-disabled-checked;
         }
       }
     }
   }
 
-  &.@{radio-cls}-group-primary-filled {
+  &.@{radio-cls}-group--primary-filled {
 
-    .@{radio-cls}-group-filled-bg-block {
+    .@{radio-cls}-group__bg-block {
       background-color: @radio-button-background-color-primary-filled-checked;
     }
 
@@ -129,14 +129,14 @@
           color: @radio-button-color-primary-filled-disabled-checked;
         }
 
-        &.@{prefix}-is-checked ~ .@{radio-cls}-group-filled-bg-block {
+        &.@{prefix}-is-checked ~ .@{radio-cls}-group__bg-block {
           background-color: @radio-button-background-color-primary-filled-disabled-checked;
         }
       }
     }
   }
 
-  &.@{radio-cls}-group-small {
+  &.@{prefix}-size-s {
     height: @radio-height-small;
 
     .@{radio-button--cls} {
@@ -150,7 +150,7 @@
     }
   }
 
-  &.@{radio-cls}-group-medium {
+  &.@{prefix}-size-m {
     height: @radio-height-medium;
 
     .@{radio-button--cls} {
@@ -163,7 +163,7 @@
     }
   }
 
-  &.@{radio-cls}-group-large {
+  &.@{prefix}-size-l {
     height: @radio-height-large;
 
     .@{radio-button--cls} {
@@ -182,8 +182,8 @@
     border: @radio-button-border;
     border-color: @radio-button-border-color-default;
     border-right: 0;
-    line-height: 22px;
-    transition: color @anim-duration-base @anim-time-fn-ease-out;
+    line-height: @radio-button-line-height-default;
+    transition: @radio-button-transition;
     color: @radio-label-color;
     white-space: nowrap;
 
@@ -198,7 +198,7 @@
     }
 
     &__former {
-      opacity: 0;
+      opacity: @radio-opacity-transparent;
       height: 0;
       width: 0;
     }
@@ -247,7 +247,7 @@
   cursor: pointer;
 
   &__former {
-    opacity: 0;
+    opacity: @radio-opacity-transparent;
     position: absolute;
   }
 
@@ -258,16 +258,16 @@
     height: @radio-size;
     vertical-align: middle;
     border-radius: @border-radius-50;
-    border: 1px solid @radio-border-color;
+    border: @radio-input-border;
     background-color: @radio-input-color;
-    transition: border @anim-duration-base @anim-time-fn-ease-out;
+    transition: @radio-input-transition;
 
     &::after {
       content: "";
       position: absolute;
       top: ((@radio-size - @radio-dot-size) / 2 - 1px);
       left: ((@radio-size - @radio-dot-size) / 2 - 1px);
-      opacity: 0;
+      opacity: @radio-opacity-transparent;
       width: @radio-dot-size;
       height: @radio-dot-size;
       border-radius: @border-radius-50;

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

@@ -56,6 +56,7 @@
 @radio-height-small: 24px;
 @radio-height-medium: 32px;
 @radio-height-large: 40px;
+@radio-button-before-width: 1px;
 
 // 字号
 @radio-font: @font-size-base;
@@ -71,12 +72,27 @@
 @radio-button-line-height-small: @text-line-height-s;
 @radio-button-line-height-medium: @text-line-height-base;
 @radio-button-line-height-large: @text-line-height-l;
-
+@radio-button-line-height-default: @text-line-height-base;
 // padding
 @radio-input-label-spacer: @spacer;
 @radio-button-padding-small: 0px 8px;
 @radio-button-padding-medium: 4px 16px;
 @radio-button-padding-large: 8px 24px;
-
+@radio-button-before-left: 0px;
+@radio-button-before-top: 50%;
 @radio-button-border: 1px solid;
+
 @radio-group-padding: 2px;
+@radio-group-filled-bg-block-left: 2px;
+@radio-group-filled-bg-block-top: 2px;
+
+// 动画&过度
+@radio-group-transition: all @anim-duration-base @anim-time-fn-easing;
+@radio-button-before-transition: translateY(-50%);
+@radio-button-transition: color @anim-duration-base @anim-time-fn-ease-out;
+@radio-input-transition: border @anim-duration-base @anim-time-fn-ease-out;
+// 透明度
+@radio-opacity-transparent: 0; // 全透明
+
+// 边框
+@radio-input-border: 1px solid @radio-border-color;

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

@@ -11,7 +11,7 @@
 
 .@{prefix}-select {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   width: 100%;
   box-sizing: border-box;
   vertical-align: middle;
@@ -21,6 +21,7 @@
   border-radius: @select-border-radius;
   padding: @select-padding;
   transition: border-color @anim-duration-base @anim-time-fn-easing;
+  flex-wrap: wrap;
 
   &:hover,
   :active {
@@ -39,6 +40,9 @@
 
   .@{prefix}-select-placeholder {
     margin-left: @select-placeholder-margin;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 
   &:not(.@{prefix}-is-disabled) .@{prefix}-select-placeholder {
@@ -88,7 +92,7 @@
 
   .@{prefix}-select-input {
     margin-left: @select-placeholder-margin;
-    width: auto;
+    flex: 1;
 
     .@{prefix}-input__inner {
       border: 0;

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

@@ -6,19 +6,7 @@
 
 @import "./_mixin.less";
 
-.@{prefix}-slider-contianer {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &.is-vertical {
-    height: 100%;
-    flex-direction: column;
-  }
-}
-
-.@{prefix}-slider-input-container {
+.@{prefix}-slider__input-container {
   display: flex;
   align-items: center;
   margin-left: @slider-input-margin-left;
@@ -28,30 +16,42 @@
     margin-left: @slider-input-vertical-margin-left;
   }
 
-  .center-line {
+  .@{prefix}-slider__center-line {
     width: @slider-center-line-width;
     height: @slider-center-line-height;
     background: @slider-center-line-background;
     margin: @slider-center-line-margin;
   }
 
-  .t-input-number {
+  .@{prefix}-input-number {
     width: @slider-input-width;
   }
 }
 
-.@{prefix}-slider-input {
-  &.is-range {
-    margin-left: @slider-input-range-margin-left;
-  }
-}
-
 .@{prefix}-slider {
   height: @slider-height;
   width: 100%;
   position: relative;
   padding: @slider-padding;
 
+  &__input {
+    &.is-range {
+      margin-left: @slider-input-range-margin-left;
+    }
+  }
+
+  &__container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.is-vertical {
+      height: 100%;
+      flex-direction: column;
+    }
+  }
+
   &__rail {
     position: absolute;
     width: 100%;
@@ -81,10 +81,10 @@
   }
 
   &__button {
-    width: @slider-controlbar-size;
-    height: @slider-controlbar-size;
-    border: 2px solid @slider-controlbar-border;
-    background-color: @slider-controlbar-background;
+    width: @slider-control-bar-size;
+    height: @slider-control-bar-size;
+    border: 2px solid @slider-control-bar-border;
+    background-color: @slider-control-bar-background;
     border-radius: 50%;
     transition: .2s;
     user-select: none;
@@ -94,7 +94,7 @@
     }
 
     &:hover {
-      background-color: @slider-controlbar-background-hover;
+      background-color: @slider-control-bar-background-hover;
     }
   }
 
@@ -143,7 +143,7 @@
   }
 }
 
-.@{prefix}-slider-vertical {
+.@{prefix}-slider--vertical {
   height: @slider-vertical-height;
   padding: @slider-vertical-padding;
   display: flex;
@@ -193,7 +193,7 @@
 
   .@{prefix}-slider__button-wrapper {
     top: auto;
-    left: @slider-vertical-controlbar-left;
+    left: @slider-vertical-control-bar-left;
     transform: translate(50%, 50%);
   }
 }
@@ -214,7 +214,7 @@
   }
 
   .@{prefix}-slider__button {
-    border-color: @slider-controlbar-border-disabled;
+    border-color: @slider-control-bar-border-disabled;
     outline: none;
   }
 

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

@@ -1,15 +1,15 @@
 @slider-background: @bg-color-component;
 @slider-background-current: @brand-color;
 @slider-text: @text-color-primary;
-@slider-controlbar-background: #fff; // 滑块背景色不随默认/暗色模式切换改变，固定为白色，故不使用背景色 token
-@slider-controlbar-border: @brand-color;
+@slider-control-bar-background: #fff; // 滑块背景色不随默认/暗色模式切换改变，固定为白色，故不使用背景色 token
+@slider-control-bar-border: @brand-color;
 
 @slider-background-hover: @bg-color-component-hover;
-@slider-controlbar-background-hover: @gray-color-1; // 滑块背景色不随默认/暗色模式切换改变，hover 后颜色固定为 @gray-color-1
+@slider-control-bar-background-hover: @gray-color-1; // 滑块背景色不随默认/暗色模式切换改变，hover 后颜色固定为 @gray-color-1
 
 @slider-background-disabled: @bg-color-component-disabled;
 @slider-background-current-disabled: @brand-color-disabled;
-@slider-controlbar-border-disabled: @brand-color-disabled;
+@slider-control-bar-border-disabled: @brand-color-disabled;
 @slider-text-disabled: @text-color-disabled;
 @slider-input-shadow: 0 0 0px 2px @brand-color-focus;
 @slider-center-line-background: rgba(0, 0, 0, 90%);
@@ -18,7 +18,7 @@
 @slider-input-width: 80px;
 @slider-height: 18px;
 @slider-rail-track-step-size: 4px;
-@slider-controlbar-size: 16px;
+@slider-control-bar-size: 16px;
 @slider-vertical-height: 100%;
 @slider-vertical-mark-width: 18px;
 @slider-stop-width: 1px;
@@ -32,8 +32,6 @@
 @slider-input-vertical-margin-left: 0px;
 @slider-input-range-margin-left: 12px;
 @slider-padding: 7px 0;
-@slider-handle-margin-top: -5px;
-@slider-text-margin-top: 4px;
 @slider-vertical-padding: 0;
 @slider-vertical-handle-margin-top: -6px;
 @slider-vertical-handle-margin-left: -5px;
@@ -52,4 +50,4 @@
 
 // 定位
 @slider-text-top: 13px;
-@slider-vertical-controlbar-left: -14px;
+@slider-vertical-control-bar-left: -14px;