feat(descriptions): support nest usage (#1730)

* feat: support nest * feat: use mixin * chore: fix lint --------- Co-authored-by: wū yāng <uyarnchen@gmail.com>
Tencent · Feb 26, 2024 · 16750ec · 16750ec
1 parent 0be283e
commit 16750ec
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 21 deletions.
diff --git a/docs/web/api/descriptions.en-US.md b/docs/web/api/descriptions.en-US.md
@@ -28,4 +28,8 @@ spline: layout
 
 ### Custom Style
 
-{{ custom-style }}
+{{ custom-style }}
+
+### nest
+
+{{ nest }}
diff --git a/docs/web/api/descriptions.md b/docs/web/api/descriptions.md
@@ -28,4 +28,8 @@ spline: layout
 
 ### 自定义样式
 
-{{ custom-style }}
+{{ custom-style }}
+
+### 嵌套使用
+
+{{ nest }}
diff --git a/style/web/components/descriptions/_index.less b/style/web/components/descriptions/_index.less
@@ -22,31 +22,21 @@
     border-collapse: collapse;
     font: @font-body-medium;
 
-    &.@{prefix}-size-l {
-      td {
-        padding: @descriptions-padding-l;
-      }
-    }
-
-    &.@{prefix}-size-m {
-      td {
-        padding: @descriptions-padding-m;
-      }
-    }
-
-    &.@{prefix}-size-s {
-      td {
-        padding: @descriptions-padding-s;
-      }
-    }
+    .generate-padding(l, @descriptions-padding-l);
+    .generate-padding(m, @descriptions-padding-m);
+    .generate-padding(s, @descriptions-padding-s);
 
     & .@{prefix}-@{componentName}__label {
       color: @text-color-placeholder;
     }
 
     &--border {
-      td {
-        border: @descriptions-td-border;
+      > tbody {
+        > tr {
+          > td {
+            border: @descriptions-td-border;
+          }
+        }
       }
 
       .@{prefix}-@{componentName}__label {

diff --git a/style/web/components/descriptions/_mixin.less b/style/web/components/descriptions/_mixin.less
@@ -0,0 +1,11 @@
+.generate-padding(@size, @padding) {
+  &.@{prefix}-size-@{size} {
+    > tbody {
+      > tr {
+        > td {
+          padding: @padding;
+        }
+      }
+    }
+  }
+}