tdesign-react 0.36.5-alpha.3 → 0.37.0

package/CHANGELOG.md

@@ -5,6 +5,40 @@ toc: false
 spline: explain
 ---
 
+## 🌈 0.37.0 `2022-07-18` 
+
+### ❗ Breaking Changes
+- `DatePicker`: 调整组件dom 节点 class 命名 @HQ-Lin ([#1101](https://github.com/Tencent/tdesign-react/pull/1101))
+
+### 🚀 Features
+- `Icon`: 新增`mirror`和`rotation`图标 @uyarn ([#1075](https://github.com/Tencent/tdesign-react/pull/1075))
+- `DatePicker`: 支持面板年月动态响应 value 变化 @HQ-Lin ([#1077](https://github.com/Tencent/tdesign-react/pull/1077))
+- `Form`: form 支持同步获取最新数据 @HQ-Lin ([#1081](https://github.com/Tencent/tdesign-react/pull/1081))
+- `table`: 树形结构，支持同时添加多个根节点 @chaishi ([#1099](https://github.com/Tencent/tdesign-react/pull/1099))
+- `table`: 可编辑单元格/可编辑行，新增 `showEditIcon`，用于控制是否显示编辑图标 @chaishi ([#1108](https://github.com/Tencent/tdesign-react/pull/1108))
+- `table`: 新增可编辑行的表格 @chaishi ([#1108](https://github.com/Tencent/tdesign-react/pull/1108))
+- `table`: 可调整列宽，无边框表格，悬浮到表头时显示边框，方便用户寻找调整列宽的位置 @chaishi ([#1108](https://github.com/Tencent/tdesign-react/pull/1108))
+- `Button`: 支持 href、tag、suffix API @HQ-Lin ([#1120](https://github.com/Tencent/tdesign-react/pull/1120))
+
+### 🐞 Bug Fixes
+- `Icon`: 修复iconfont高级用法由于t-icon的干扰导致渲染异常的情况 @uyarn ([#1075](https://github.com/Tencent/tdesign-react/pull/1075))
+- `table`: 修复可选中行table组件，data为空数据时，默认全选按钮会选中的问题 @qdzhaoxiaodao ([#1061](https://github.com/Tencent/tdesign-react/pull/1061))
+- `table`: 列宽拖拽调整到边界时无法重新调整 @chaishi ([#1086](https://github.com/Tencent/tdesign-react/pull/1086))
+- `table`: 多级表头场景下的列配置，无法全选 @chaishi ([#1086](https://github.com/Tencent/tdesign-react/pull/1086))
+- `Pagination`: 修复左右切换禁用失效问题 @HQ-Lin ([#1089](https://github.com/Tencent/tdesign-react/pull/1089))
+- `table`: 修复树形结构，懒加载顺序问题 @chaishi ([#1097](https://github.com/Tencent/tdesign-react/pull/1097))
+- `TagInput`: 修复hover时组件换行的样式异常 @uyarn ([#1118](https://github.com/Tencent/tdesign-react/pull/1118))
+- `drawer`: 修复开启 destroyOnClose 时多次打开关闭时动效丢失问题 @LittlehorseXie ([#1119](https://github.com/Tencent/tdesign-react/pull/1119))
+- `table`: 可编辑单元格，修复无法透传 ReactNode 属性到组件 @chaishi ([#1108](https://github.com/Tencent/tdesign-react/pull/1108))
+- `table`: 可编辑单元格，修复 `onEnter` 无法触发 `onEdited` 问题，[issue#1084](https://github.com/Tencent/tdesign-react/issues/1084) @chaishi ([#1108](https://github.com/Tencent/tdesign-react/pull/1108))
+- `table`: 可编辑单元格，一旦校验不通过，后续编辑无法退出编辑态问题，[issue#1106](https://github.com/Tencent/tdesign-react/issues/1106) @chaishi ([#1108](https://github.com/Tencent/tdesign-react/pull/1108))
+- `card`: card component header render issues @weikee94 ([#1125](https://github.com/Tencent/tdesign-react/pull/1125))
+- `Select`:  修复手动控制 popupVisble 展示空白内容 @samhou1988 ([#1105](https://github.com/Tencent/tdesign-react/pull/1105))
+-  `ColorPicker`: 修复切换渐变节点 hue 饱和度未更新的问题 @insekkei ([#1121](https://github.com/Tencent/tdesign-react/pull/1121))
+- `Form`: 修复 React 18 useEffect 触发两次导致表单自动校验问题 @HQ-Lin ([#1076](https://github.com/Tencent/tdesign-react/pull/1076))
+- `Form`: 修复 rule min max 不支持数组校验 @HQ-Lin ([#1127](https://github.com/Tencent/tdesign-react/pull/1127))
+
+
 ## 🌈 0.36.4 `2022-07-11` 
 ### 🚀 Features
 - `Table`: 树形结构，支持懒加载 @chaishi ([#1046](https://github.com/Tencent/tdesign-react/pull/1046))

package/dist/tdesign.css

@@ -2837,6 +2837,7 @@
   transition: all 0.2s linear;
   -ms-touch-action: manipulation;
       touch-action: manipulation;
+  text-decoration: none;
 }
 .t-button .t-button__text,
 .t-button .t-icon {
@@ -2849,10 +2850,13 @@
 .t-button .t-loading {
   font-size: 16px;
 }
-.t-button .t-icon + .t-button__text {
+.t-button .t-icon + .t-button__text:not(:empty) {
+  margin-left: 8px;
+}
+.t-button .t-loading + .t-button__text:not(:empty) {
   margin-left: 8px;
 }
-.t-button .t-loading + .t-button__text {
+.t-button .t-button__suffix:not(:empty) {
   margin-left: 8px;
 }
 .t-button--variant-base {
@@ -2959,8 +2963,18 @@
   background-color: transparent;
 }
 .t-button--variant-base.t-button--ghost.t-button--theme-primary {
+  color: var(--td-brand-color);
   border-color: var(--td-brand-color);
 }
+.t-button--variant-base.t-button--ghost.t-button--theme-primary:hover {
+  color: var(--td-brand-color-hover);
+}
+.t-button--variant-base.t-button--ghost.t-button--theme-primary:active {
+  color: var(--td-brand-color-active);
+}
+.t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-disabled {
+  color: var(--td-brand-color-disabled);
+}
 .t-button--variant-base.t-button--ghost.t-button--theme-primary:hover {
   border-color: var(--td-brand-color-hover);
 }
@@ -5709,6 +5723,10 @@
   border-radius: 50%;
   margin-bottom: 4px;
   position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
 }
 .t-steps--horizontal.t-steps--dot-anchor .t-steps-item__content {
   text-align: center;
@@ -5924,6 +5942,10 @@
   border-radius: 50%;
   margin-bottom: 4px;
   position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
   top: 5px;
 }
 .t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::before {
@@ -7409,13 +7431,6 @@ ul.t-select-option-group__header,
 .t-table .t-table__cell--selectable + th {
   padding-left: 0;
 }
-.t-table td > .t-radio,
-.t-table td > .t-checkbox {
-  line-height: 1;
-  font-size: 0;
-  vertical-align: middle;
-  display: inline-block;
-}
 .t-table--bordered td,
 .t-table--bordered th {
   border-left: 1px solid var(--td-component-border);
@@ -7770,7 +7785,7 @@ ul.t-select-option-group__header,
 .t-table__sort-icon.t-is-focus,
 .t-table__sort-icon:hover {
   color: var(--td-brand-color);
-  background-color: var(--td-gray-color-2);
+  background-color: var(--td-bg-color-secondarycontainer-hover);
   border-radius: 50%;
 }
 .t-table__filter-icon .t-is-focus,
@@ -8131,7 +8146,6 @@ ul.t-select-option-group__header,
   border: 1px solid var(--td-component-border);
   border-bottom: 0;
   border-right: 0;
-  left: 1px;
 }
 .t-table--bordered .t-table__affixed-footer-elm {
   border-left: 1px solid var(--td-component-border);
@@ -8186,11 +8200,48 @@ ul.t-select-option-group__header,
 }
 /** 吸底的分页器，需要背景色，避免表格文本内容显示穿透 */
 .t-affix .t-table__pagination {
-  background-color: white;
+  background-color: var(--td-bg-color-container);
 }
 .t-table--bordered .t-affix .t-table__pagination {
   border-top: 1px solid var(--td-component-border);
 }
+.t-table--column-resizable:not(.t-table--bordered) th {
+  border-top: 1px solid transparent;
+}
+.t-table--column-resizable:not(.t-table--bordered) thead.t-table__header:hover th:not(:last-child) {
+  border-right: 1px solid var(--td-component-border);
+}
+.t-table--column-resizable:not(.t-table--bordered) thead.t-table__header:hover th {
+  border-top: 1px solid var(--td-component-border);
+}
+/** 可选中行的场景下，将 Checkbox 和 Radio 铺满整个单元格，增大点击范围，方便用户选中 */
+.t-table td.t-table__cell-check,
+.t-table th.t-table__cell-check {
+  padding: 0;
+  /** HTML 特性: th/td 必须设置为 0，他们的子元素才能设置为 100% */
+  height: 0;
+}
+.t-table td.t-table__cell-check .t-radio__label,
+.t-table th.t-table__cell-check .t-radio__label,
+.t-table td.t-table__cell-check .t-checkbox__label,
+.t-table th.t-table__cell-check .t-checkbox__label {
+  display: none;
+}
+.t-table .t-table__cell-check .t-radio,
+.t-table .t-table__cell-check .t-checkbox,
+.t-table .t-table__cell-check .t-table__th-cell-inner {
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
 
 .t-list {
   font-family: PingFang SC, Microsoft YaHei, Arial Regular;
@@ -12569,11 +12620,13 @@ a.t-menu__item:active {
   margin: 0;
   padding: 0;
   list-style: none;
-  border-radius: 3px;
+  min-width: 160px;
+  border-radius: 6px;
 }
 .t-popconfirm__content {
   position: relative;
-  padding: 12px 8px;
+  padding: 16px;
+  border-radius: 6px;
 }
 .t-popconfirm__body {
   display: -webkit-box;
@@ -13519,14 +13572,14 @@ a.t-menu__item:active {
 .t-date-range-picker__panel .t-time-picker__panel-body {
   margin: 0;
 }
-.t-date-picker__panel--content,
-.t-date-range-picker__panel--content,
-.t-date-range-picker__panel--content-wrapper {
+.t-date-picker__panel-content,
+.t-date-range-picker__panel-content,
+.t-date-range-picker__panel-content-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
-.t-date-range-picker__panel--content-wrapper {
+.t-date-range-picker__panel-content-wrapper {
   gap: 6px;
 }
 .t-date-picker__header {
@@ -13548,10 +13601,10 @@ a.t-menu__item:active {
   display: inline-flex;
   gap: 8px;
 }
-.t-date-picker__header-controller .t-date-picker__header-controller--month {
+.t-date-picker__header-controller .t-date-picker__header-controller-month {
   width: 80px;
 }
-.t-date-picker__header-controller .t-date-picker__header-controller--year {
+.t-date-picker__header-controller .t-date-picker__header-controller-year {
   width: 78px;
 }
 .t-date-picker__table table {
@@ -13629,8 +13682,8 @@ a.t-menu__item:active {
 .t-date-picker__presets a:hover {
   color: var(--td-brand-color-hover);
 }
-.t-date-picker__panel--time,
-.t-date-range-picker__panel--time {
+.t-date-picker__panel-time,
+.t-date-range-picker__panel-time {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -13642,8 +13695,8 @@ a.t-menu__item:active {
   padding: 12px;
   border-left: 1px solid var(--td-component-stroke);
 }
-.t-date-picker__panel--time-viewer,
-.t-date-range-picker__panel--time-viewer {
+.t-date-picker__panel-time-viewer,
+.t-date-range-picker__panel-time-viewer {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -13657,13 +13710,13 @@ a.t-menu__item:active {
           justify-content: center;
   color: var(--td-text-color-primary);
 }
-.t-date-picker__panel--time .t-time-picker__panel-body,
-.t-date-range-picker__panel--time .t-time-picker__panel-body {
+.t-date-picker__panel-time .t-time-picker__panel-body,
+.t-date-range-picker__panel-time .t-time-picker__panel-body {
   margin: 0;
 }
-.t-date-picker__panel--year,
-.t-date-picker__panel--month,
-.t-date-picker__panel--date {
+.t-date-picker__panel-year,
+.t-date-picker__panel-month,
+.t-date-picker__panel-date {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -13676,12 +13729,12 @@ a.t-menu__item:active {
   gap: 12px;
   max-width: 280px;
 }
-.t-date-picker__panel--year .t-date-picker__header-controller--year,
-.t-date-picker__panel--month .t-date-picker__header-controller--year {
+.t-date-picker__panel-year .t-date-picker__header-controller-year,
+.t-date-picker__panel-month .t-date-picker__header-controller-year {
   width: 130px;
 }
-.t-date-picker__panel--year .t-date-picker__table table tbody,
-.t-date-picker__panel--month .t-date-picker__table table tbody {
+.t-date-picker__panel-year .t-date-picker__table table tbody,
+.t-date-picker__panel-month .t-date-picker__table table tbody {
   width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -13692,8 +13745,8 @@ a.t-menu__item:active {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.t-date-picker__panel--year .t-date-picker__table table tbody tr,
-.t-date-picker__panel--month .t-date-picker__table table tbody tr {
+.t-date-picker__panel-year .t-date-picker__table table tbody tr,
+.t-date-picker__panel-month .t-date-picker__table table tbody tr {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -13701,20 +13754,20 @@ a.t-menu__item:active {
       -ms-flex-pack: justify;
           justify-content: space-between;
 }
-.t-date-picker__panel--year .t-date-picker__cell--disabled + .t-date-picker__cell--disabled:before,
-.t-date-picker__panel--month .t-date-picker__cell--disabled + .t-date-picker__cell--disabled:before {
+.t-date-picker__panel-year .t-date-picker__cell--disabled + .t-date-picker__cell--disabled:before,
+.t-date-picker__panel-month .t-date-picker__cell--disabled + .t-date-picker__cell--disabled:before {
   left: -56px;
 }
-.t-date-picker__panel--year .t-date-picker__cell:nth-child(1),
-.t-date-picker__panel--month .t-date-picker__cell:nth-child(1) {
+.t-date-picker__panel-year .t-date-picker__cell:nth-child(1),
+.t-date-picker__panel-month .t-date-picker__cell:nth-child(1) {
   text-align: left;
 }
-.t-date-picker__panel--year .t-date-picker__cell:nth-child(3),
-.t-date-picker__panel--month .t-date-picker__cell:nth-child(3) {
+.t-date-picker__panel-year .t-date-picker__cell:nth-child(3),
+.t-date-picker__panel-month .t-date-picker__cell:nth-child(3) {
   text-align: right;
 }
-.t-date-picker__panel--year .t-date-picker__cell-inner,
-.t-date-picker__panel--month .t-date-picker__cell-inner {
+.t-date-picker__panel-year .t-date-picker__cell-inner,
+.t-date-picker__panel-month .t-date-picker__cell-inner {
   width: 48px;
 }
 .t-date-picker__cell {