tdesign-react 0.19.0 → 0.20.2

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

@@ -9,20 +9,16 @@
 .@{prefix}-date-picker {
   padding: 0;
 
-  .@{prefix}-date-picker-popup-reference {
+  .@{prefix}-date-picker__popup-reference {
     width: 100%;
   }
 
-  &--container {
+  &__container {
     border-radius: @datepicker-panel-border-radius;
     background-color: @datepicker-dropdown-background;
     overflow: auto;
   }
 
-  &--multiple .@{prefix}-form-controls {
-    min-width: 640px;
-  }
-
   .@{prefix}-is-active {
     input {
       border-color: @datepicker-input-border-color-active;
@@ -31,7 +27,7 @@
   }
 }
 
-.@{prefix}-date-picker--panels {
+.@{prefix}-date-picker__panels {
   display: flex;
   min-width: 320px;
   max-width: 100%;
@@ -63,20 +59,20 @@
   }
 }
 
-.@{prefix}-date-picker-header {
+.@{prefix}-date-picker__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px;
   border-bottom: 1px solid @border-level-1-color;
 
-  .@{prefix}-date-picker-header-title,
-  .@{prefix}-date-header__btn {
+  .@{prefix}-date-picker__header-title,
+  .@{prefix}-date-picker__header-btn {
     font-size: @datepicker-font-size-l;
     font-weight: @datepicker-font-weight-medium;
   }
 
-  .@{prefix}-date-picker-header-controller {
+  .@{prefix}-date-picker__header-controller {
     &__btn {
       color: @datepicker-button-text-color;
       padding: 4px;
@@ -97,12 +93,8 @@
   }
 }
 
-.@{prefix}-picker-datetime-range {
-  min-width: 408px;
-}
-
-.@{prefix}-date-cell {
-  &__wrapper {
+.@{prefix}-date-picker__cell {
+  &-wrapper {
     height: @datepicker-cell-width-default;
     margin-top: 4px;
     width: 100%;
@@ -132,7 +124,7 @@
 
   &--now {
 
-    .@{prefix}-date-cell__wrapper {
+    .@{prefix}-date-picker__cell-wrapper {
       position: absolute;
       top: 0;
       color: @datepicker-now-color;
@@ -153,7 +145,7 @@
 
   &--highlight {
 
-    .@{prefix}-date-cell__wrapper {
+    .@{prefix}-date-picker__cell-wrapper {
       background-color: @datepicker-highlight-color;
       border-color: @datepicker-highlight-color;
       transition: background @anim-duration-base, border @anim-duration-base;
@@ -166,7 +158,7 @@
 
   &--additional {
 
-    .@{prefix}-date-cell__wrapper {
+    .@{prefix}-date-picker__cell-wrapper {
       color: @datepicker-disabled-color;
       background: @bg-color-container;
 
@@ -182,7 +174,7 @@
 
   &--active {
 
-    .@{prefix}-date-cell__wrapper {
+    .@{prefix}-date-picker__cell-wrapper {
       & > span {
         color: @text-color-anti;
         background-color: @brand-color;
@@ -195,7 +187,7 @@
 
     &-start {
 
-      .@{prefix}-date-cell__wrapper {
+      .@{prefix}-date-picker__cell-wrapper {
         border-top-left-radius: 50%;
         border-bottom-left-radius: 50%;
       }
@@ -203,7 +195,7 @@
 
     &-end {
 
-      .@{prefix}-date-cell__wrapper {
+      .@{prefix}-date-picker__cell-wrapper {
         border-top-right-radius: 50%;
         border-bottom-right-radius: 50%;
       }
@@ -212,7 +204,7 @@
 
   &--last-day-of-month {
 
-    .@{prefix}-date-cell__wrapper {
+    .@{prefix}-date-picker__cell-wrapper {
       border-top-right-radius: 50%;
       border-bottom-right-radius: 50%;
     }
@@ -220,7 +212,7 @@
 
   &--first-day-of-month {
 
-    .@{prefix}-date-cell__wrapper {
+    .@{prefix}-date-picker__cell-wrapper {
       border-top-left-radius: 50%;
       border-bottom-left-radius: 50%;
     }
@@ -228,7 +220,7 @@
 
   &--disabled {
 
-    .@{prefix}-date-cell__wrapper {
+    .@{prefix}-date-picker__cell-wrapper {
       cursor: not-allowed;
       border-radius: 50%;
       background-color: @datepicker-disabled-background;
@@ -247,7 +239,7 @@
   // disable 相邻需要半圆连接
   &--disabled + &--disabled {
 
-    .@{prefix}-date-cell__wrapper {
+    .@{prefix}-date-picker__cell-wrapper {
       &::before {
         content: "";
         width: 100%;
@@ -262,17 +254,17 @@
   }
 }
 
-.@{prefix}-date-picker-year {
+.@{prefix}-date-picker--year {
   padding-bottom: @datepicker-panel-padding;
 
   tbody {
     tr {
 
-      .@{prefix}-date-cell__wrapper {
+      .@{prefix}-date-picker__cell-wrapper {
         margin-top: 8px;
         height: @datepicker-cell-width-year;
 
-        .@{prefix}-date-cell__text {
+        .@{prefix}-date-picker__cell-text {
           height: @datepicker-cell-width-year;
           width: @datepicker-cell-width-year;
           line-height: @datepicker-cell-width-year;
@@ -286,13 +278,13 @@
 
       &:first-child {
 
-        .@{prefix}-date-cell__wrapper {
+        .@{prefix}-date-picker__cell-wrapper {
           margin-top: 16px;
         }
       }
 
       &:last-child {
-        .t-date-cell {
+        .@{prefix}-date-picker__cell {
           text-align: left;
         }
       }
@@ -300,11 +292,11 @@
   }
 }
 
-.@{prefix}-date-picker-month {
+.@{prefix}-date-picker--month {
   tbody {
     tr {
 
-      .@{prefix}-date-cell__wrapper {
+      .@{prefix}-date-picker__cell-wrapper {
         margin-top: 8px;
 
         &::after {
@@ -314,14 +306,14 @@
 
       &:first-child {
 
-        .@{prefix}-date-cell__wrapper {
+        .@{prefix}-date-picker__cell-wrapper {
           margin-top: 20px;
         }
       }
 
       &:last-child {
 
-        .@{prefix}-date-cell__wrapper {
+        .@{prefix}-date-picker__cell-wrapper {
           margin-bottom: 12px;
         }
       }
@@ -329,17 +321,18 @@
   }
 }
 
-.@{prefix}-date-picker-date {
+.@{prefix}-date-picker--date {
   padding: 0 16px 16px;
 }
 
-.@{prefix}-date {
+.@{prefix}-date-picker__panel {
   width: 320px;
 
   table {
     width: 100%;
     border-collapse: collapse;
     user-select: none;
+    padding: 0 16px 16px;
   }
 
   tbody {
@@ -362,14 +355,14 @@
 
     // 每列开头和结尾均为圆形边框
     &:first-child {
-      .t-date-cell__wrapper {
+      .@{prefix}-date-picker__cell-wrapper {
         border-top-left-radius: 50%;
         border-bottom-left-radius: 50%;
       }
     }
 
     &:last-child {
-      .t-date-cell__wrapper {
+      .@{prefix}-date-picker__cell-wrapper {
         border-top-right-radius: 50%;
         border-bottom-right-radius: 50%;
       }
@@ -383,7 +376,7 @@
   }
 }
 
-.@{prefix}-date-range {
+.@{prefix}-date-picker__panels {
   overflow: hidden;
   display: flex;
 }
@@ -394,14 +387,14 @@
   align-items: flex-start;
 }
 
-.@{prefix}-date-picker--ranges-show {
+.@{prefix}-date-picker--range {
 
   .@{prefix}-date-picker__footer {
     width: 640px;
   }
 }
 
-.@{prefix}-date-picker-presets {
+.@{prefix}-date-picker__presets {
   margin: @datepicker-btn-margin;
   min-width: 100px;
   justify-content: space-between;

package/esm/_common/style/web/components/dialog/_animate.less

@@ -82,7 +82,7 @@
         .animation-enter;
       }
 
-      .@{prefix}-dialog-mask {
+      .@{prefix}-dialog__mask {
         animation-name: tDialogMaskIn;
         .animation-active;
       }
@@ -95,7 +95,7 @@
         .animation-exit;
       }
 
-      .@{prefix}-dialog-mask {
+      .@{prefix}-dialog__mask {
         animation-name: tDialogMaskOut;
         .animation-active;
       }

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

@@ -40,8 +40,6 @@
     font-weight: @dialog-header-font-weight;
     display: flex;
     align-items: center;
-    // remove space between inline-block elements.
-    word-spacing: @dialog-word-spacing;
     word-break: break-word;
 
     >h5 {
@@ -126,11 +124,11 @@
 }
 
 // t-dialog 组件本身
-.@{prefix}-dialog-ctx {
+.@{prefix}-dialog__ctx {
   pointer-events: none;
   outline: none;
 
-  &.@{prefix}-dialog-ctx--fixed {
+  &.@{prefix}-dialog__ctx--fixed {
     position: fixed;
     top: 0;
     left: 0;
@@ -143,7 +141,7 @@
     visibility: visible;
   }
 
-  &.t-not-visable {
+  &.t-is-hidden {
     visibility: hidden;
   }
 
@@ -155,7 +153,7 @@
     display: none;
   }
 
-  .@{prefix}-dialog-mask {
+  .@{prefix}-dialog__mask {
     position: absolute;
     top: 0;
     left: 0;
@@ -164,10 +162,10 @@
     z-index: 1;
     background: @dialog-mask-bg-color;
     pointer-events: auto;
+  }
 
-    &--hidden {
-      background: none;
-    }
+  .t-is-hidden {
+    background: none;
   }
 
   .@{prefix}-dialog {

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

@@ -36,7 +36,7 @@
     border-top: 0;
     white-space: nowrap;
 
-    .@{prefix}-divider-inner-text {
+    .@{prefix}-divider__inner-text {
       padding: @divider-inner-text-padding;
       display: inline-block;
     }

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

@@ -14,33 +14,33 @@
   height: 100%;
   pointer-events: none;
 
-  &-attach {
+  &--attach {
     position: absolute;
   }
 
-  &-left,
-  &-right {
+  &--left,
+  &--right {
     top: 0;
   }
 
-  &-left {
+  &--left {
     left: 0;
   }
 
-  &-right {
+  &--right {
     right: 0;
   }
 
-  &-top,
-  &-bottom {
+  &--top,
+  &--bottom {
     left: 0;
   }
 
-  &-top {
+  &--top {
     top: 0;
   }
 
-  &-bottom {
+  &--bottom {
     bottom: 0;
   }
 
@@ -68,7 +68,8 @@
     box-shadow: @dialog-box-shadow;
     overflow: hidden;
     pointer-events: auto;
-    transition: transform @drawer-slow-duration @drawer-default-timing-function, visibility @drawer-slow-duration @drawer-default-timing-function;
+    transition: transform @drawer-slow-duration @drawer-default-timing-function,
+      visibility @drawer-slow-duration @drawer-default-timing-function;
     position: relative;
   }
 
@@ -78,23 +79,23 @@
     height: 100%;
     visibility: hidden;
 
-    &-left,
-    &-right {
+    &--left,
+    &--right {
       top: 0;
     }
 
-    &-left {
+    &--left {
       left: 0;
       transform: translateX(-100%);
     }
 
-    &-right {
+    &--right {
       right: 0;
       transform: translateX(100%);
     }
 
-    &-top,
-    &-bottom {
+    &--top,
+    &--bottom {
       left: 0;
     }
 
@@ -103,7 +104,7 @@
       transform: translateY(-100%);
     }
 
-    &-bottom {
+    &--bottom {
       bottom: 0;
       transform: translateY(100%);
     }
@@ -172,7 +173,7 @@
   }
 }
 
-.@{prefix}-@{componentName}-open {
+.@{prefix}-@{componentName}--open {
   width: 100%;
   height: 100%;
   pointer-events: auto;
@@ -188,11 +189,11 @@
   }
 }
 
-// 需要在 t-drawer-open 后面，优先级才比 open 高
-.@{prefix}-@{componentName}-no-mask {
+// 需要在 t-drawer--open 后面，优先级才比 open 高
+.@{prefix}-@{componentName}--without-mask {
   pointer-events: none;
 }
 
 [tabindex="-1"]:focus {
-  outline: none !important;/* stylelint-disable-line */
+  outline: none !important; /* stylelint-disable-line */
 }

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

@@ -16,7 +16,7 @@
     display: flex;
     justify-content: flex-start;
 
-    &__column {
+    &-column {
       font-size: @dropdown-text-font-size;
       color: @dropdown-text-color;
       text-align: left;
@@ -62,40 +62,32 @@
       cursor: not-allowed;
     }
 
-    &__content {
+    &-content {
       display: flex;
       flex: 1;
       align-items: center;
       max-width: 100%;
+    }
 
-      &__text {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
+    &-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
-    &.has-suffix {
-      .children-suffix {
+    &.@{prefix}-dropdown--suffix {
+      .@{prefix}-dropdown__item-content {
+        max-width: calc(
+          100% - @dropdown-text-icon-size - @dropdown-item-icon-margin-left
+        );
+      }
+      .@{prefix}-dropdown__item-icon {
         color: currentColor;
         font-size: @dropdown-text-icon-size;
         margin-left: @dropdown-item-icon-margin-left;
       }
-
-      .@{prefix}-dropdown__item__content {
-        max-width:
-          calc(
-            100% - @dropdown-text-icon-size - @dropdown-item-icon-margin-left
-          );
-      }
     }
 
     --ripple-color: @bg-color-container-active;
   }
-
-  &__split {
-    width: 100%;
-    height: 1px;
-    background-color: @dropdown-split-color;
-  }
 }

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

@@ -71,7 +71,7 @@
   &__controls {
     min-height: @form-item-height;
 
-    &--content {
+    &-content {
       display: flex;
       align-items: center;
       min-height: @form-item-height;

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

@@ -13,42 +13,42 @@
 }
 
 // x轴原点
-.@{prefix}-row-start {
+.@{prefix}-row--start {
   justify-content: flex-start;
 }
 
 // x轴居中
-.@{prefix}-row-center {
+.@{prefix}-row--center {
   justify-content: center;
 }
 
 // x轴反方向
-.@{prefix}-row-end {
+.@{prefix}-row--end {
   justify-content: flex-end;
 }
 
 // x轴平分
-.@{prefix}-row-space-between {
+.@{prefix}-row--space-between {
   justify-content: space-between;
 }
 
 // x轴有间隔地平分
-.@{prefix}-row-space-around {
+.@{prefix}-row--space-around {
   justify-content: space-around;
 }
 
 // 顶部对齐
-.@{prefix}-row-top {
+.@{prefix}-row--top {
   align-items: flex-start;
 }
 
 // 居中对齐
-.@{prefix}-row-middle {
+.@{prefix}-row--middle {
   align-items: center;
 }
 
 // 底部对齐
-.@{prefix}-row-bottom {
+.@{prefix}-row--bottom {
   align-items: flex-end;
 }
 

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

@@ -1,11 +1,10 @@
 .@{d-prefix}-demo-item--layout {
-
-  .@{prefix}-layout--header {
+  .@{prefix}-layout__header {
     text-align: center;
     color: rgba(255, 255, 255, 90%);
   }
 
-  .@{prefix}-layout--content {
+  .@{prefix}-layout__content {
     height: 600px;
     text-align: center;
     padding: 24px 24px 0;
@@ -21,21 +20,20 @@
     }
   }
 
-  .@{prefix}-layout--footer {
+  .@{prefix}-layout__footer {
     min-height: 46px;
     text-align: center;
     color: @text-color-placeholder;
   }
 
-  .@{prefix}-layout--sider {
+  .@{prefix}-layout__sider {
     text-align: center;
   }
 
-  --bg-color-demo: var(--bg-color-demo-secondary);
+  --bg-color-demo: var(--bg-color-page);
 }
 
 [class*="@{d-prefix}-demo-item--layout-base"] {
-
   .@{d-prefix}-demo-item--base > div:not(:first-child) {
     margin-top: 24px;
   }
@@ -46,19 +44,19 @@
     background: @bg-color-secondarycontainer;
   }
 
-  .@{prefix}-layout--header {
+  .@{prefix}-layout__header {
     text-align: center;
     color: #fff;
     background-color: @brand-color-4;
     font-size: @font-size-l;
 
-    .t-layout--header {
+    .t-layout__header {
       color: #fff;
       background: #266fe8;
     }
   }
 
-  .@{prefix}-layout--sider {
+  .@{prefix}-layout__sider {
     background-color: @brand-color-6;
     color: #fff;
     font-size: @font-size-l;
@@ -67,7 +65,7 @@
     justify-content: center;
   }
 
-  .@{prefix}-layout--content {
+  .@{prefix}-layout__content {
     text-align: center;
     color: #fff;
     background: @brand-color-5;
@@ -79,7 +77,7 @@
     justify-content: center;
   }
 
-  .@{prefix}-layout--footer {
+  .@{prefix}-layout__footer {
     min-height: 46px;
     text-align: center;
     color: #fff;
@@ -87,7 +85,7 @@
     font-size: @font-size-l;
   }
 
-  .@{prefix}-layout--sider {
+  .@{prefix}-layout__sider {
     text-align: center;
     font-size: @font-size-l;
   }