From 0a2fb1817f565cc79443e0bf03e893f815cab018 Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjycui@users.noreply.github.com>
Date: Sat, 22 Apr 2017 09:43:32 +0800
Subject: [PATCH] fix: vertical tab bar height should follow tabs height
 (#5809)

* fix: vertical tab bar height should follow tabs height

* docs: update demo for Tabs
---
 .../__tests__/__snapshots__/demo.test.js.snap | 307 ++++++++++--------
 components/tabs/demo/slide.md                 |  55 +++-
 components/tabs/style/index.less              |   6 +
 3 files changed, 223 insertions(+), 145 deletions(-)

diff --git a/components/tabs/__tests__/__snapshots__/demo.test.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
index 1633da9ec..256eab6ff 100644
--- a/components/tabs/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
@@ -853,157 +853,202 @@ exports[`renders ./components/tabs/demo/size.md correctly 1`] = `
 `;
 
 exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
-<div
-  class="ant-tabs ant-tabs-top ant-tabs-line"
->
+<div>
   <div
-    class="ant-tabs-bar"
-    role="tablist"
-    tabindex="0"
+    class="ant-radio-group"
+    style="margin-bottom:8px;"
+  >
+    <label
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+    >
+      <span
+        class="ant-radio-button ant-radio-button-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-button-input"
+          type="radio"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        Horizontal
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        Vertical
+      </span>
+    </label>
+  </div>
+  <div
+    class="ant-tabs ant-tabs-top ant-tabs-line"
+    style="height:220px;"
   >
     <div
-      class="ant-tabs-nav-container"
+      class="ant-tabs-bar"
+      role="tablist"
+      tabindex="0"
     >
       <div
-        class="ant-tabs-nav-wrap"
+        class="ant-tabs-nav-container"
       >
         <div
-          class="ant-tabs-nav-scroll"
+          class="ant-tabs-nav-wrap"
         >
           <div
-            class="ant-tabs-nav ant-tabs-nav-animated"
+            class="ant-tabs-nav-scroll"
           >
             <div
-              class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
-            />
-            <div
-              aria-disabled="false"
-              aria-selected="true"
-              class="ant-tabs-tab-active ant-tabs-tab"
-              role="tab"
+              class="ant-tabs-nav ant-tabs-nav-animated"
             >
-              Tab 1
-            </div>
-            <div
-              aria-disabled="false"
-              aria-selected="false"
-              class=" ant-tabs-tab"
-              role="tab"
-            >
-              Tab 2
-            </div>
-            <div
-              aria-disabled="false"
-              aria-selected="false"
-              class=" ant-tabs-tab"
-              role="tab"
-            >
-              Tab 3
-            </div>
-            <div
-              aria-disabled="false"
-              aria-selected="false"
-              class=" ant-tabs-tab"
-              role="tab"
-            >
-              Tab 4
-            </div>
-            <div
-              aria-disabled="false"
-              aria-selected="false"
-              class=" ant-tabs-tab"
-              role="tab"
-            >
-              Tab 5
-            </div>
-            <div
-              aria-disabled="false"
-              aria-selected="false"
-              class=" ant-tabs-tab"
-              role="tab"
-            >
-              Tab 6
-            </div>
-            <div
-              aria-disabled="false"
-              aria-selected="false"
-              class=" ant-tabs-tab"
-              role="tab"
-            >
-              Tab 7
-            </div>
-            <div
-              aria-disabled="false"
-              aria-selected="false"
-              class=" ant-tabs-tab"
-              role="tab"
-            >
-              Tab 8
-            </div>
-            <div
-              aria-disabled="false"
-              aria-selected="false"
-              class=" ant-tabs-tab"
-              role="tab"
-            >
-              Tab 9
+              <div
+                class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+              />
+              <div
+                aria-disabled="false"
+                aria-selected="true"
+                class="ant-tabs-tab-active ant-tabs-tab"
+                role="tab"
+              >
+                Tab 1
+              </div>
+              <div
+                aria-disabled="false"
+                aria-selected="false"
+                class=" ant-tabs-tab"
+                role="tab"
+              >
+                Tab 2
+              </div>
+              <div
+                aria-disabled="false"
+                aria-selected="false"
+                class=" ant-tabs-tab"
+                role="tab"
+              >
+                Tab 3
+              </div>
+              <div
+                aria-disabled="false"
+                aria-selected="false"
+                class=" ant-tabs-tab"
+                role="tab"
+              >
+                Tab 4
+              </div>
+              <div
+                aria-disabled="false"
+                aria-selected="false"
+                class=" ant-tabs-tab"
+                role="tab"
+              >
+                Tab 5
+              </div>
+              <div
+                aria-disabled="false"
+                aria-selected="false"
+                class=" ant-tabs-tab"
+                role="tab"
+              >
+                Tab 6
+              </div>
+              <div
+                aria-disabled="false"
+                aria-selected="false"
+                class=" ant-tabs-tab"
+                role="tab"
+              >
+                Tab 7
+              </div>
+              <div
+                aria-disabled="false"
+                aria-selected="false"
+                class=" ant-tabs-tab"
+                role="tab"
+              >
+                Tab 8
+              </div>
+              <div
+                aria-disabled="false"
+                aria-selected="false"
+                class=" ant-tabs-tab"
+                role="tab"
+              >
+                Tab 9
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-tabs-content ant-tabs-content-animated"
-    style="margin-left:0%;"
-  >
     <div
-      aria-hidden="false"
-      class="ant-tabs-tabpane ant-tabs-tabpane-active"
-      role="tabpanel"
+      class="ant-tabs-content ant-tabs-content-animated"
+      style="margin-left:0%;"
     >
-      Content of tab 1
+      <div
+        aria-hidden="false"
+        class="ant-tabs-tabpane ant-tabs-tabpane-active"
+        role="tabpanel"
+      >
+        Content of tab 1
+      </div>
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
     </div>
-    <div
-      aria-hidden="true"
-      class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-      role="tabpanel"
-    />
-    <div
-      aria-hidden="true"
-      class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-      role="tabpanel"
-    />
-    <div
-      aria-hidden="true"
-      class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-      role="tabpanel"
-    />
-    <div
-      aria-hidden="true"
-      class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-      role="tabpanel"
-    />
-    <div
-      aria-hidden="true"
-      class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-      role="tabpanel"
-    />
-    <div
-      aria-hidden="true"
-      class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-      role="tabpanel"
-    />
-    <div
-      aria-hidden="true"
-      class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-      role="tabpanel"
-    />
-    <div
-      aria-hidden="true"
-      class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-      role="tabpanel"
-    />
   </div>
 </div>
 `;
diff --git a/components/tabs/demo/slide.md b/components/tabs/demo/slide.md
index 8a6491345..22523b385 100644
--- a/components/tabs/demo/slide.md
+++ b/components/tabs/demo/slide.md
@@ -14,20 +14,47 @@ title:
 Tab can be slide to left or right, which is used for a lot of tabs.
 
 ````jsx
-import { Tabs } from 'antd';
+import { Tabs, Radio } from 'antd';
 const TabPane = Tabs.TabPane;
 
-ReactDOM.render(
-  <Tabs defaultActiveKey="1">
-    <TabPane tab="Tab 1" key="1">Content of tab 1</TabPane>
-    <TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
-    <TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
-    <TabPane tab="Tab 4" key="4">Content of tab 4</TabPane>
-    <TabPane tab="Tab 5" key="5">Content of tab 5</TabPane>
-    <TabPane tab="Tab 6" key="6">Content of tab 6</TabPane>
-    <TabPane tab="Tab 7" key="7">Content of tab 7</TabPane>
-    <TabPane tab="Tab 8" key="8">Content of tab 8</TabPane>
-    <TabPane tab="Tab 9" key="9">Content of tab 9</TabPane>
-  </Tabs>
-, mountNode);
+class SlidingTabsDemo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      mode: 'top',
+    };
+  }
+  handleModeChange = (e) => {
+    const mode = e.target.value;
+    this.setState({ mode });
+  }
+  render() {
+    const { mode } = this.state;
+    return (
+      <div>
+        <Radio.Group onChange={this.handleModeChange} value={mode} style={{ marginBottom: 8 }}>
+          <Radio.Button value="top">Horizontal</Radio.Button>
+          <Radio.Button value="left">Vertical</Radio.Button>
+        </Radio.Group>
+        <Tabs
+          defaultActiveKey="1"
+          tabPosition={mode}
+          style={{ height: 220 }}
+        >
+          <TabPane tab="Tab 1" key="1">Content of tab 1</TabPane>
+          <TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
+          <TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
+          <TabPane tab="Tab 4" key="4">Content of tab 4</TabPane>
+          <TabPane tab="Tab 5" key="5">Content of tab 5</TabPane>
+          <TabPane tab="Tab 6" key="6">Content of tab 6</TabPane>
+          <TabPane tab="Tab 7" key="7">Content of tab 7</TabPane>
+          <TabPane tab="Tab 8" key="8">Content of tab 8</TabPane>
+          <TabPane tab="Tab 9" key="9">Content of tab 9</TabPane>
+        </Tabs>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<SlidingTabsDemo />, mountNode);
 ````
diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less
index c94b88a43..cdf5a4053 100644
--- a/components/tabs/style/index.less
+++ b/components/tabs/style/index.less
@@ -216,6 +216,7 @@
   &-vertical {
     > .@{tab-prefix-cls}-bar {
       border-bottom: 0;
+      height: 100%;
 
       .@{tab-prefix-cls}-tab {
         float: none;
@@ -233,6 +234,11 @@
         width: auto;
       }
 
+      .@{tab-prefix-cls}-nav-container,
+      .@{tab-prefix-cls}-nav-wrap {
+        height: 100%;
+      }
+
       .@{tab-prefix-cls}-nav-container {
         margin-bottom: 0;
         padding: 32px 0;