fix(timeline): has style conflict when vertical & horizontal `n-timel…

…ine` are nested, closes tusen-ai#2549
jaulz · Mar 11, 2022 · 3d01243 · 3d01243
1 parent 423092f
commit 3d01243
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 22 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -6,6 +6,7 @@
 
 - Fix `n-time` throws error caused by `getTimezoneOffset`, closes [#2545](https://github.com/TuSimple/naive-ui/issues/2545).
 - Fix `n-modal`'s mask doesn't have enter & leave transition.
+- Fix `n-timeline` has style conflict when vertical & horizontal `n-timeline` are nested, closes [#2549](https://github.com/TuSimple/naive-ui/issues/2549).
 
 ### Feats
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -6,6 +6,7 @@
 
 - 修复 `n-time` 由于无法导入 `getTimezoneOffset` 报错的问题，关闭 [#2545](https://github.com/TuSimple/naive-ui/issues/2545)
 - 修复 `n-modal` 遮罩出现没有动画
+- 修复 `n-timeline` 在水平和非水平嵌套时的样式冲突，关闭 [#2549](https://github.com/TuSimple/naive-ui/issues/2549)
 
 ### Feats
 

diff --git a/src/timeline/demos/zhCN/index.demo-entry.md b/src/timeline/demos/zhCN/index.demo-entry.md
@@ -10,6 +10,7 @@ size.vue
 item-placement.vue
 horizontal.vue
 customize-icon.vue
+nested-debug.vue
 ```
 
 ## API

diff --git a/src/timeline/demos/zhCN/nested-debug.demo.vue b/src/timeline/demos/zhCN/nested-debug.demo.vue
@@ -0,0 +1,55 @@
+<markdown>
+# Nested debug
+</markdown>
+
+<template>
+  <n-timeline horizontal>
+    <n-timeline-item content="啊" />
+    <n-timeline-item
+      type="success"
+      title="成功"
+      content="哪里成功"
+      time="2018-04-03 20:46"
+    >
+      <n-timeline>
+        <n-timeline-item content="啊" />
+        <n-timeline-item
+          type="success"
+          title="成功"
+          content="哪里成功"
+          time="2018-04-03 20:46"
+        />
+        <n-timeline-item
+          type="error"
+          content="哪里错误"
+          time="2018-04-03 20:46"
+        />
+        <n-timeline-item
+          type="warning"
+          title="警告"
+          content="哪里警告"
+          time="2018-04-03 20:46"
+        />
+        <n-timeline-item
+          type="info"
+          title="信息"
+          content="是的"
+          time="2018-04-03 20:46"
+        />
+      </n-timeline>
+    </n-timeline-item>
+    <n-timeline-item type="error" content="哪里错误" time="2018-04-03 20:46" />
+    <n-timeline-item
+      type="warning"
+      title="警告"
+      content="哪里警告"
+      time="2018-04-03 20:46"
+    />
+    <n-timeline-item
+      type="info"
+      title="信息"
+      content="是的"
+      time="2018-04-03 20:46"
+    />
+  </n-timeline>
+</template>
diff --git a/src/timeline/src/styles/index.cssr.ts b/src/timeline/src/styles/index.cssr.ts
@@ -24,29 +24,33 @@ export default cB('timeline', `
   cM('horizontal', `
     flex-direction: row;
   `, [
-    cB('timeline-item', `
-      flex-shrink: 0;
-      padding-right: 40px;
-    `, [
-      cB('timeline-item-content', `
-        margin-top: calc(var(--n-icon-size) + 12px);
+    c('>', [
+      cB('timeline-item', `
+        flex-shrink: 0;
+        padding-right: 40px;
       `, [
-        cE('meta', `
-          margin-top: 6px;
-          margin-bottom: unset;
-        `)
-      ]),
-      cB('timeline-item-timeline', `
-        width: 100%;
-        height: calc(var(--n-icon-size) + 12px);
-      `, [
-        cE('line', `
-          left: var(--n-icon-size);
-          top: calc(var(--n-icon-size) / 2 - 1px);
-          right: 0px;
-          width: unset;
-          height: 2px;
-        `)
+        c('>', [
+          cB('timeline-item-content', `
+          margin-top: calc(var(--n-icon-size) + 12px);
+          `, [
+            cE('meta', `
+              margin-top: 6px;
+              margin-bottom: unset;
+            `)
+          ]),
+          cB('timeline-item-timeline', `
+            width: 100%;
+            height: calc(var(--n-icon-size) + 12px);
+          `, [
+            cE('line', `
+              left: var(--n-icon-size);
+              top: calc(var(--n-icon-size) / 2 - 1px);
+              right: 0px;
+              width: unset;
+              height: 2px;
+            `)
+          ])
+        ])
       ])
     ])
   ]),