fix(tabs): style glitches when different types tabs are nested, closes …

…tusen-ai#850
arijs · Aug 31, 2021 · 7725ac6 · 7725ac6
1 parent 6185133
commit 7725ac6
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 66 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -2,15 +2,16 @@
 
 ## Pending
 
-### Fixes
-
-- Fix `n-notification`'s exported `NotificationReactive` type is not writable, closes [#876](https://github.com/TuSimple/naive-ui/issues/876).
-
 ### Feats
 
 - `n-input-number` add `clearable` prop.
 - `n-form` add `show-label` prop, closes [#858](https://github.com/TuSimple/naive-ui/issues/858).
 
+### Fixes
+
+- Fix `n-notification`'s exported `NotificationReactive` type is not writable, closes [#876](https://github.com/TuSimple/naive-ui/issues/876).
+- Fix `n-tabs` style glitches when different types tabs are nested, closes [#850](https://github.com/TuSimple/naive-ui/issues/850).
+
 ## 2.16.4 (2021-08-16)
 
 ### Fixes

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -2,15 +2,16 @@
 
 ## Pending
 
-### Fixes
-
-- 修复 `n-notification` 导出的 `NotificationReactive` 类型不可变，关闭 [#876](https://github.com/TuSimple/naive-ui/issues/876)
-
 ### Feats
 
 - `n-input-number` 新增 `clearable` 属性
 - `n-form` 新增 `show-label` 属性，关闭 [#858](https://github.com/TuSimple/naive-ui/issues/858)
 
+### Fixes
+
+- 修复 `n-notification` 导出的 `NotificationReactive` 类型不可变，关闭 [#876](https://github.com/TuSimple/naive-ui/issues/876)
+- 修复 `n-tabs` 不同类型嵌套样式错乱，关闭 [#850](https://github.com/TuSimple/naive-ui/issues/850)
+
 ## 2.16.4 (2021-08-16)
 
 ### Fixes

diff --git a/src/tabs/demos/zhCN/index.demo-entry.md b/src/tabs/demos/zhCN/index.demo-entry.md
@@ -13,6 +13,7 @@ prefix
 display-directive
 addable
 line-debug
+style-inherit-debug
 ```
 
 ## Props

diff --git a/src/tabs/demos/zhCN/style-inherit-debug.demo.md b/src/tabs/demos/zhCN/style-inherit-debug.demo.md
@@ -0,0 +1,34 @@
+# Style Inherit Debug
+
+```html
+<div id="app">
+  <h2>one tab</h2>
+  <NTabs type="line">
+    <NTabPane name="One">1111</NTabPane>
+    <NTabPane name="Two">1111</NTabPane>
+  </NTabs>
+
+  <h2>one tabs Parent/Child</h2>
+  <NTabs type="card">
+    <NTabPane name="POne">
+      <NTabs type="line">
+        <NTabPane name="COne">1111</NTabPane>
+        <NTabPane name="CTwo">1111</NTabPane>
+      </NTabs>
+    </NTabPane>
+    <NTabPane name="PTwo">1111</NTabPane>
+  </NTabs>
+</div>
+```
+
+```js
+import { NTabs, NTabPane } from 'naive-ui'
+
+export default {
+  name: 'App',
+  components: {
+    NTabs,
+    NTabPane
+  }
+}
+```
diff --git a/src/tabs/src/Tabs.tsx b/src/tabs/src/Tabs.tsx
@@ -397,7 +397,16 @@ export default defineComponent({
         ]}
         style={this.cssVars as CSSProperties}
       >
-        <div class={`${mergedClsPrefix}-tabs-nav`}>
+        <div
+          class={[
+            // the class should be applied here since it's possible
+            // to make tabs nested in tabs, style may influence each
+            // other. adding a class will make it easy to write the
+            // style.
+            `${mergedClsPrefix}-tabs-nav--${type}-type`,
+            `${mergedClsPrefix}-tabs-nav`
+          ]}
+        >
           {prefix ? (
             <div class={`${mergedClsPrefix}-tabs-nav__prefix`}>{prefix}</div>
           ) : null}

diff --git a/src/tabs/src/styles/index.cssr.ts b/src/tabs/src/styles/index.cssr.ts
@@ -179,72 +179,70 @@ export default cB('tabs', `
       })
     ])
   ]),
-  cM('line-type', [
-    cB('tabs-nav', [
+  cB('tabs-nav', [
+    cM('line-type', [
       cE('prefix, suffix', `
         transition: border-color .3s var(--bezier);
         border-bottom: 1px solid var(--tab-border-color);
+      `),
+      cB('tabs-nav-scroll-content', `
+        transition: border-color .3s var(--bezier);
+        border-bottom: 1px solid var(--tab-border-color);
+      `),
+      cB('tabs-bar', `
+        border-radius: 0;
+        bottom: -1px;
       `)
     ]),
-    cB('tabs-nav-scroll-content', `
-      transition: border-color .3s var(--bezier);
-      border-bottom: 1px solid var(--tab-border-color);
-    `),
-    cB('tabs-bar', `
-      border-radius: 0;
-      bottom: -1px;
-    `)
-  ]),
-  cM('card-type', [
-    cB('tabs-nav', [
+    cM('card-type', [
       cE('prefix, suffix', `
         transition: border-color .3s var(--bezier);
         border-bottom: 1px solid var(--tab-border-color);
-      `)
-    ]),
-    cB('tabs-pad', `
-      flex-grow: 1;
-      transition: border-color .3s var(--bezier);
-      border-bottom: 1px solid var(--tab-border-color);
-    `),
-    cB('tabs-tab-pad', `
-      transition: border-color .3s var(--bezier);
-      border-bottom: 1px solid var(--tab-border-color);
-    `),
-    cB('tabs-tab', `
-      font-weight: var(--tab-font-weight);
-      border: 1px solid var(--tab-border-color);
-      border-top-left-radius: var(--tab-border-radius);
-      border-top-right-radius: var(--tab-border-radius);
-      background-color: var(--tab-color);
-      box-sizing: border-box;
-      position: relative;
-      vertical-align: bottom;
-      display: flex;
-      justify-content: space-between;
-      font-size: var(--tab-font-size);
-      color: var(--tab-text-color);
-    `, [
-      cM('addable', `
-        padding-left: 8px;
-        padding-right: 8px;
-        font-size: 16px;
+      `),
+      cB('tabs-pad', `
+        flex-grow: 1;
+        transition: border-color .3s var(--bezier);
+        border-bottom: 1px solid var(--tab-border-color);
+      `),
+      cB('tabs-tab-pad', `
+        transition: border-color .3s var(--bezier);
+        border-bottom: 1px solid var(--tab-border-color);
+      `),
+      cB('tabs-tab', `
+        font-weight: var(--tab-font-weight);
+        border: 1px solid var(--tab-border-color);
+        border-top-left-radius: var(--tab-border-radius);
+        border-top-right-radius: var(--tab-border-radius);
+        background-color: var(--tab-color);
+        box-sizing: border-box;
+        position: relative;
+        vertical-align: bottom;
+        display: flex;
+        justify-content: space-between;
+        font-size: var(--tab-font-size);
+        color: var(--tab-text-color);
       `, [
-        cNotM('disabled', [
-          c('&:hover', `
-            color: var(--tab-text-color-active);
-          `)
-        ])
+        cM('addable', `
+          padding-left: 8px;
+          padding-right: 8px;
+          font-size: 16px;
+        `, [
+          cNotM('disabled', [
+            c('&:hover', `
+              color: var(--tab-text-color-active);
+            `)
+          ])
+        ]),
+        cM('closable', 'padding-right: 6px;'),
+        cM('active', `
+          border-bottom: 1px solid #0000;
+          background-color: #0000;
+          font-weight: var(--tab-font-weight-active);
+          color: var(--tab-text-color-active);
+        `),
+        cM('disabled', 'color: var(--tab-text-color-disabled);')
       ]),
-      cM('closable', 'padding-right: 6px;'),
-      cM('active', `
-        border-bottom: 1px solid #0000;
-        background-color: #0000;
-        font-weight: var(--tab-font-weight-active);
-        color: var(--tab-text-color-active);
-      `),
-      cM('disabled', 'color: var(--tab-text-color-disabled);')
-    ]),
-    cB('tabs-scroll-padding', 'border-bottom: 1px solid var(--tab-border-color);')
+      cB('tabs-scroll-padding', 'border-bottom: 1px solid var(--tab-border-color);')
+    ])
   ])
 ])