feat(Tabs): Tabs accept actions prop

- Improves consistency with css Tabs component [#106770388] Signed-off-by: Elena Sharma <esharma@pivotal.io>
pivotal-cf · Mar 11, 2016 · bd15b4a · bd15b4a
1 parent 500c321
commit bd15b4a
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 19 deletions.
diff --git a/library/spec/pivotal-ui-react/tabs/tabs_spec.js b/library/spec/pivotal-ui-react/tabs/tabs_spec.js
@@ -14,7 +14,7 @@ describe('Tabs', function() {
 
   const triggerResize = function() {
     const evt = document.createEvent('HTMLEvents');
-    evt.initEvent('resize', true, true );
+    evt.initEvent('resize', true, true);
     window.dispatchEvent(evt);
   };
 
@@ -111,36 +111,46 @@ describe('Tabs', function() {
       });
     });
 
-    xdescribe('actions', () => {
+    describe('actions', () => {
       beforeEach(() => {
+        const actions = (
+          <div>
+            <button>=)</button>
+            <button>=|</button>
+            <button>=(</button>
+          </div>
+        );
         ReactDOM.render(
-          <Tabs>
-            tabType={tabType}
-            actions={
-              <div>
-                <button>=)</button>
-                <button>=|</button>
-                <button>=(</button>
-              </div>}
+          <Tabs tabType={tabType} actions={actions}>
+            <Tab eventKey={1} title="Tab1">Content1</Tab>
+            <Tab eventKey={2} title="Tab2">Content2</Tab>
           </Tabs>,
           root
         );
       });
 
-      it('renders the actions', () => {
-        expect($('.nav-tabs .actions')).toContain('=)');
-        expect($('.nav-tabs .actions')).toContain('=|');
-        expect($('.nav-tabs .actions')).toContain('=(');
+      it('renders the actions for large screens', () => {
+        expect('.tab-simple .tabs-action').toContainText('=)');
+        expect('.tab-simple .tabs-action').toContainText('=|');
+        expect('.tab-simple .tabs-action').toContainText('=(');
+      });
+
+      it('renders the actions for small screens', () => {
+        MediaSize.matches.and.returnValue(false);
+        triggerResize();
+        expect('.tab-simple-small-screen .tabs-action').toContainText('=)');
+        expect('.tab-simple-small-screen .tabs-action').toContainText('=|');
+        expect('.tab-simple-small-screen .tabs-action').toContainText('=(');
       });
     });
 
     describe('passthroughs', function() {
       beforeEach(function() {
         ReactDOM.render(
           <Tabs defaultActiveKey={2}
-                    tabType={tabType}
-                    className="test-class"
-                    style={{opacity: 0.5}}/>,
+                tabType={tabType}
+                className="test-class"
+                style={{opacity: 0.5}}/>,
           root
         );
 

diff --git a/library/src/pivotal-ui-react/tabs/tabs.js b/library/src/pivotal-ui-react/tabs/tabs.js
@@ -41,6 +41,7 @@ class SmallTab extends React.Component {
 
 class SmallTabs extends React.Component {
   static propTypes = {
+    actions: types.node,
     activeKey: types.number,
     id: types.string,
     handleClick: types.func,
@@ -53,6 +54,7 @@ class SmallTabs extends React.Component {
 
   render() {
     const {
+      actions,
       activeKey,
       children,
       className,
@@ -82,8 +84,13 @@ class SmallTabs extends React.Component {
       return <SmallTab {...myProps}>{isActive && children}</SmallTab>;
     });
 
+    const actionsNode = actions ? <div className="tabs-action">{actions}</div> : null;
+
     return (
-      <div className={smallScreenClasses}>{childrenAsPanels}</div>
+      <div className={smallScreenClasses}>
+        {actionsNode}
+        {childrenAsPanels}
+      </div>
     );
   }
 }
@@ -104,6 +111,7 @@ class Tabs extends mixin(React.Component).with(Animation) {
   }
 
   static propTypes = {
+    actions: types.node,
     activeKey: types.number,
     defaultActiveKey: types.any,
     id: types.string,
@@ -166,6 +174,7 @@ class Tabs extends mixin(React.Component).with(Animation) {
 
   render() {
     const {
+      actions,
       children,
       className,
       defaultActiveKey,
@@ -226,8 +235,11 @@ class Tabs extends mixin(React.Component).with(Animation) {
       );
     });
 
+    const actionsNode = actions ? <div className="tabs-action">{actions}</div> : null;
+
     return (
       <div className={classnames(largeScreenClasses, {'tab-left clearfix': isLeft})} {...props}>
+        {actionsNode}
         <ul role='tablist'
             className={classnames('nav', {'nav-tabs': !isLeft}, {[leftTabClasses]: isLeft})}>
           {listChildren}

diff --git a/styleguide/docs/react/tabs.js b/styleguide/docs/react/tabs.js
@@ -35,6 +35,7 @@ Property   | Required? | Type             | Description
 `largeScreenClassName` | no  | css class | Will be applied to large screen tabs only
 `onSelect` | no | function | Will override default behavior when clicking on a tab. If you want to retain the default behavior as well as add new functionality, change default active key in the function you provide
 `tabType` | no | one of: `"simple"`, `"simple-alt"` | Change the styling of your tabs, mostly whether the selected tab is transparent
+`actions` | no | node | an element or text that will display in the upper right
 
 */
 
@@ -46,7 +47,7 @@ parent: tabs_react
 ---
 
 ```react_example
-<Tabs defaultActiveKey={1}>
+<Tabs defaultActiveKey={1} actions={<a>Action!</a>}>
   <Tab eventKey={1} title="Tab 1">Wow!</Tab>
   <Tab eventKey={2} title="Tab 2">
     <h2>Neat!</h2>