Merge pull request #28 from ModusCreateOrg/tab-panel-3

TabPanel - updated based on review feedback

Author: mschwartz

19-tabpanel/a-tabpanel/src/Tab.css

@@ -6,26 +6,6 @@
 .tab:hover {
   background-color: #d8d8d8;
 }
-.tab-panel.top .tab,
-.tab-panel.bottom .tab {
-  padding: 12px 6px;
-}
-.tab-panel.left .tab,
-.tab-panel.right .tab {
-  padding: 6px 12px;
-}
-.tab-panel.top .tab.active {
-  border-bottom-color: #1e8bfb;
-}
-.tab-panel.left .tab.active {
-  border-right-color: #1e8bfb;
-}
-.tab-panel.bottom .tab.active {
-  border-top-color: #1e8bfb;
-}
-.tab-panel.right .tab.active {
-  border-left-color: #1e8bfb;
-}
 .tab.active:hover {
   background-color: transparent;
 }

19-tabpanel/a-tabpanel/src/Tab.js

@@ -5,10 +5,10 @@ import './Tab.css';
 
 const Tab = props => {
   const { tabtext, icon, activetab, cardindex, onClick } = props,
-        isActive = activetab === cardindex ? 'active' : '';
+        isActive = activetab === cardindex ? ' active' : '';
 
   return (
-    <div className={`tab ${isActive}`} onClick={onClick}>
+    <div className={`tab${isActive}`} onClick={onClick}>
       {icon ? <FontAwesome icon={Icons[`fa${icon}`]} /> : ''}
       {tabtext}
     </div>

19-tabpanel/a-tabpanel/src/TabPanel.css

@@ -30,6 +30,27 @@
 .tab-panel.right .tab-strip {
   flex-direction: column;
 }
+
+.tab-panel.top .tab,
+.tab-panel.bottom .tab {
+  padding: 12px 6px;
+}
+.tab-panel.left .tab,
+.tab-panel.right .tab {
+  padding: 6px 12px;
+}
+.tab-panel.top .tab.active {
+  border-bottom-color: #1e8bfb;
+}
+.tab-panel.left .tab.active {
+  border-right-color: #1e8bfb;
+}
+.tab-panel.bottom .tab.active {
+  border-top-color: #1e8bfb;
+}
+.tab-panel.right .tab.active {
+  border-left-color: #1e8bfb;
+}
 
 .card-ct {
   flex: 1;

19-tabpanel/a-tabpanel/src/TabPanel.js

@@ -35,15 +35,17 @@ class TabPanel extends Component {
         </div>
         <div className="card-ct">
           {React.Children.map(children, (child, i) => {
-            const { className } = child.props,
-              isActive = i === activetab ? 'active' : '',
-              cardProps = {
-                ...child.props,
-
-                className: `${className} card ${isActive}`,
-                cardindex: i,
-                activetab: activetab
-              };
+            let { className } = child.props;
+            className = className ? ` ${className}` : '';
+
+            const isActive = i === activetab ? ' active' : '';
+            const cardProps = {
+              ...child.props,
+
+              className: `card${className}${isActive}`,
+              cardindex: i,
+              activetab: activetab
+            };
 
             return React.cloneElement(child, cardProps);
           })}