Fix tabs extra content (#7090)

* Fix tabBarExtraContent style in vertical tabs

close #6578

* update snap

* fix rc-tabs

components/tabs/__tests__/__snapshots__/demo.test.js.snap

@@ -12,6 +12,22 @@ exports[`renders ./components/tabs/demo/basic.md correctly 1`] = `
     <div
       class="ant-tabs-nav-container"
     >
+      <span
+        class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
+        unselectable="unselectable"
+      >
+        <span
+          class="ant-tabs-tab-prev-icon"
+        />
+      </span>
+      <span
+        class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
+        unselectable="unselectable"
+      >
+        <span
+          class="ant-tabs-tab-next-icon"
+        />
+      </span>
       <div
         class="ant-tabs-nav-wrap"
       >
@@ -90,6 +106,22 @@ exports[`renders ./components/tabs/demo/card.md correctly 1`] = `
     <div
       class="ant-tabs-nav-container"
     >
+      <span
+        class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
+        unselectable="unselectable"
+      >
+        <span
+          class="ant-tabs-tab-prev-icon"
+        />
+      </span>
+      <span
+        class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
+        unselectable="unselectable"
+      >
+        <span
+          class="ant-tabs-tab-next-icon"
+        />
+      </span>
       <div
         class="ant-tabs-nav-wrap"
       >
@@ -170,6 +202,22 @@ exports[`renders ./components/tabs/demo/card-top.md correctly 1`] = `
       <div
         class="ant-tabs-nav-container"
       >
+        <span
+          class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
+          unselectable="unselectable"
+        >
+          <span
+            class="ant-tabs-tab-prev-icon"
+          />
+        </span>
+        <span
+          class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
+          unselectable="unselectable"
+        >
+          <span
+            class="ant-tabs-tab-next-icon"
+          />
+        </span>
         <div
           class="ant-tabs-nav-wrap"
         >
@@ -269,6 +317,22 @@ exports[`renders ./components/tabs/demo/custom-add-trigger.md correctly 1`] = `
       <div
         class="ant-tabs-nav-container"
       >
+        <span
+          class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
+          unselectable="unselectable"
+        >
+          <span
+            class="ant-tabs-tab-prev-icon"
+          />
+        </span>
+        <span
+          class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
+          unselectable="unselectable"
+        >
+          <span
+            class="ant-tabs-tab-next-icon"
+          />
+        </span>
         <div
           class="ant-tabs-nav-wrap"
         >
@@ -344,6 +408,22 @@ exports[`renders ./components/tabs/demo/disabled.md correctly 1`] = `
     <div
       class="ant-tabs-nav-container"
     >
+      <span
+        class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
+        unselectable="unselectable"
+      >
+        <span
+          class="ant-tabs-tab-prev-icon"
+        />
+      </span>
+      <span
+        class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
+        unselectable="unselectable"
+      >
+        <span
+          class="ant-tabs-tab-next-icon"
+        />
+      </span>
       <div
         class="ant-tabs-nav-wrap"
       >
@@ -418,12 +498,10 @@ exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = `
     class="ant-tabs-bar"
     role="tablist"
     tabindex="0"
-  >
-    <div
-      style="float:right;"
   >
     <div
       class="ant-tabs-extra-content"
+      style="float:right;"
     >
       <span>
         <i
@@ -431,10 +509,25 @@ exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = `
         />
       </span>
     </div>
-    </div>
     <div
       class="ant-tabs-nav-container"
     >
+      <span
+        class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
+        unselectable="unselectable"
+      >
+        <span
+          class="ant-tabs-tab-prev-icon"
+        />
+      </span>
+      <span
+        class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
+        unselectable="unselectable"
+      >
+        <span
+          class="ant-tabs-tab-next-icon"
+        />
+      </span>
       <div
         class="ant-tabs-nav-wrap"
       >
@@ -504,12 +597,10 @@ exports[`renders ./components/tabs/demo/extra.md correctly 1`] = `
     class="ant-tabs-bar"
     role="tablist"
     tabindex="0"
-  >
-    <div
-      style="float:right;"
   >
     <div
       class="ant-tabs-extra-content"
+      style="float:right;"
     >
       <button
         class="ant-btn"
@@ -520,10 +611,25 @@ exports[`renders ./components/tabs/demo/extra.md correctly 1`] = `
         </span>
       </button>
     </div>
-    </div>
     <div
       class="ant-tabs-nav-container"
     >
+      <span
+        class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
+        unselectable="unselectable"
+      >
+        <span
+          class="ant-tabs-tab-prev-icon"
+        />
+      </span>
+      <span
+        class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
+        unselectable="unselectable"
+      >
+        <span
+          class="ant-tabs-tab-next-icon"
+        />
+      </span>
       <div
         class="ant-tabs-nav-wrap"
       >
@@ -602,6 +708,22 @@ exports[`renders ./components/tabs/demo/icon.md correctly 1`] = `
     <div
       class="ant-tabs-nav-container"
     >
+      <span
+        class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
+        unselectable="unselectable"
+      >
+        <span
+          class="ant-tabs-tab-prev-icon"
+        />
+      </span>
+      <span
+        class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
+        unselectable="unselectable"
+      >
+        <span
+          class="ant-tabs-tab-next-icon"
+        />
+      </span>
       <div
         class="ant-tabs-nav-wrap"
       >
@@ -715,6 +837,22 @@ exports[`renders ./components/tabs/demo/position.md correctly 1`] = `
       <div
         class="ant-tabs-nav-container"
       >
+        <span
+          class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
+          unselectable="unselectable"
+        >
+          <span
+            class="ant-tabs-tab-prev-icon"
+          />
+        </span>
+        <span
+          class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
+          unselectable="unselectable"
+        >
+          <span
+            class="ant-tabs-tab-next-icon"
+          />
+        </span>
         <div
           class="ant-tabs-nav-wrap"
         >
@@ -794,6 +932,22 @@ exports[`renders ./components/tabs/demo/size.md correctly 1`] = `
     <div
       class="ant-tabs-nav-container"
     >
+      <span
+        class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
+        unselectable="unselectable"
+      >
+        <span
+          class="ant-tabs-tab-prev-icon"
+        />
+      </span>
+      <span
+        class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
+        unselectable="unselectable"
+      >
+        <span
+          class="ant-tabs-tab-next-icon"
+        />
+      </span>
       <div
         class="ant-tabs-nav-wrap"
       >
@@ -916,6 +1070,22 @@ exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
       <div
         class="ant-tabs-nav-container"
       >
+        <span
+          class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
+          unselectable="unselectable"
+        >
+          <span
+            class="ant-tabs-tab-prev-icon"
+          />
+        </span>
+        <span
+          class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
+          unselectable="unselectable"
+        >
+          <span
+            class="ant-tabs-tab-next-icon"
+          />
+        </span>
         <div
           class="ant-tabs-nav-wrap"
         >

components/tabs/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,152 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tabs tabPosition remove card 1`] = `
+<Tabs
+  hideAdd={false}
+  prefixCls="ant-tabs"
+  tabBarExtraContent="xxx"
+  tabPosition="left"
+>
+  <Tabs
+    className="ant-tabs-vertical ant-tabs-line"
+    destroyInactiveTabPane={false}
+    hideAdd={false}
+    onChange={[Function]}
+    prefixCls="ant-tabs"
+    renderTabBar={[Function]}
+    renderTabContent={[Function]}
+    style={Object {}}
+    tabBarExtraContent="xxx"
+    tabBarPosition="left"
+    tabPosition="left"
+  >
+    <div
+      className="ant-tabs ant-tabs-left ant-tabs-vertical ant-tabs-line"
+      style={Object {}}
+    >
+      <ScrollableInkTabBar
+        activeKey="1"
+        extraContent={
+          <div
+            className="ant-tabs-extra-content"
+          >
+            xxx
+          </div>
+        }
+        inkBarAnimated={true}
+        onKeyDown={[Function]}
+        onNextClick={[Function]}
+        onPrevClick={[Function]}
+        onTabClick={[Function]}
+        panels={
+          <TabPane
+            placeholder={null}
+            tab="foo"
+          >
+            foo
+          </TabPane>
+        }
+        prefixCls="ant-tabs"
+        scrollAnimated={true}
+        styles={Object {}}
+        tabBarPosition="left"
+      >
+        <div
+          className="ant-tabs-bar"
+          onKeyDown={[Function]}
+          role="tablist"
+          tabIndex="0"
+        >
+          <div
+            className="ant-tabs-nav-container"
+            onTransitionEnd={[Function]}
+          >
+            <span
+              className="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
+              onClick={null}
+              unselectable="unselectable"
+            >
+              <span
+                className="ant-tabs-tab-prev-icon"
+              />
+            </span>
+            <span
+              className="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
+              onClick={null}
+              unselectable="unselectable"
+            >
+              <span
+                className="ant-tabs-tab-next-icon"
+              />
+            </span>
+            <div
+              className="ant-tabs-nav-wrap"
+            >
+              <div
+                className="ant-tabs-nav-scroll"
+              >
+                <div
+                  className="ant-tabs-nav ant-tabs-nav-animated"
+                >
+                  <div
+                    className="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+                  />
+                  <div
+                    aria-disabled="false"
+                    aria-selected="true"
+                    className="ant-tabs-tab-active ant-tabs-tab"
+                    onClick={[Function]}
+                    role="tab"
+                  >
+                    foo
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            className="ant-tabs-extra-content"
+            style={Object {}}
+          >
+            xxx
+          </div>
+        </div>
+      </ScrollableInkTabBar>
+      <TabContent
+        activeKey="1"
+        animated={true}
+        animatedWithMargin={true}
+        destroyInactiveTabPane={false}
+        onChange={[Function]}
+        prefixCls="ant-tabs"
+        tabBarPosition="left"
+      >
+        <div
+          className="ant-tabs-content ant-tabs-content-animated"
+          style={
+            Object {
+              "marginTop": "0%",
+            }
+          }
+        >
+          <TabPane
+            active={true}
+            destroyInactiveTabPane={false}
+            placeholder={null}
+            rootPrefixCls="ant-tabs"
+            tab="foo"
+          >
+            <div
+              aria-hidden="false"
+              className="ant-tabs-tabpane ant-tabs-tabpane-active"
+              role="tabpanel"
+            >
+              foo
+            </div>
+          </TabPane>
+        </div>
+      </TabContent>
+    </div>
+  </Tabs>
+</Tabs>
+`;

components/tabs/__tests__/index.test.js

@@ -28,4 +28,15 @@ describe('Tabs', () => {
       expect(handleEdit).toBeCalledWith('1', 'remove');
     });
   });
+
+  describe('tabPosition', () => {
+    it('remove card', () => {
+      const wrapper = mount(
+        <Tabs tabPosition="left" tabBarExtraContent="xxx">
+          <TabPane tab="foo" key="1">foo</TabPane>
+        </Tabs>
+      );
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
 });

components/tabs/demo/editable-card.md

@@ -19,7 +19,6 @@ Only card type Tabs support adding & closable.
 import { Tabs } from 'antd';
 const TabPane = Tabs.TabPane;
 
-
 class Demo extends React.Component {
   constructor(props) {
     super(props);

components/tabs/style/card-style.less

@@ -69,7 +69,6 @@
   }
 
   &-extra-content {
-    float: right;
     line-height: 32px;
 
     .@{tab-prefix-cls}-new-tab {
@@ -83,9 +82,10 @@
       font-size: @font-size-base;
       .iconfont-size-under-12px(10px);
       color: @text-color-secondary;
-      transition: color 0.3s ease;
+      transition: all .3s;
       &:hover {
-        color: #404040;
+        color: @primary-color;
+        border-color: @primary-color;
       }
     }
   }
@@ -105,6 +105,9 @@
         margin-bottom: 8px;
       }
     }
+    .@{tab-prefix-cls}-new-tab {
+      width: 90%;
+    }
   }
 
   &-vertical&-card&-left > .@{tab-prefix-cls}-bar {

components/tabs/style/index.less

@@ -26,6 +26,7 @@
     border-bottom: @border-width-base @border-style-base @border-color-base;
     margin-bottom: 16px;
     outline: none;
+    transition: padding .45s;
   }
 
   &-nav-container {
@@ -36,6 +37,7 @@
     position: relative;
     white-space: nowrap;
     margin-bottom: -1px;
+    transition: padding .45s;
     .clearfix;
 
     &-scrolling {
@@ -48,8 +50,8 @@
   &-tab-next {
     user-select: none;
     z-index: 2;
-    width: 32px;
-    height: 100%;
+    width: 0;
+    height: 0;
     line-height: 32px;
     cursor: pointer;
     border: 0;
@@ -57,7 +59,16 @@
     position: absolute;
     text-align: center;
     color: @text-color-secondary;
-    transition: color 0.3s ease;
+    transition: width .3s, height .3s, opacity .3s, color .3s;
+    opacity: 0;
+    pointer-events: none;
+
+    &.@{tab-prefix-cls}-tab-arrow-show {
+      opacity: 1;
+      width: 32px;
+      height: 100%;
+      pointer-events: auto;
+    }
 
     &:hover {
       color: @text-color;
@@ -220,6 +231,12 @@
       border-bottom: 0;
       height: 100%;
 
+      &-tab-prev.@{tab-prefix-cls}-tab-arrow-show,
+      &-tab-next.@{tab-prefix-cls}-tab-arrow-show {
+        width: 100%;
+        height: 32px;
+      }
+
       .@{tab-prefix-cls}-tab {
         float: none;
         margin-right: 0;
@@ -232,6 +249,10 @@
         }
       }
 
+      .@{tab-prefix-cls}-extra-content {
+        text-align: center;
+      }
+
       .@{tab-prefix-cls}-nav-scroll {
         width: auto;
       }
@@ -253,6 +274,10 @@
         margin-bottom: 0;
       }
 
+      .@{tab-prefix-cls}-nav {
+        width: 100%;
+      }
+
       .@{tab-prefix-cls}-ink-bar {
         width: 2px;
         left: auto;

package.json

@@ -65,7 +65,7 @@
     "rc-steps": "~2.5.1",
     "rc-switch": "~1.5.1",
     "rc-table": "~5.4.0",
-    "rc-tabs": "~8.0.0",
+    "rc-tabs": "~9.0.2",
     "rc-time-picker": "~2.4.1",
     "rc-tooltip": "~3.4.6",
     "rc-tree": "~1.7.0",