TASK: Added 'tabs__panel' class to TabsTheme (#2434)

Require to fix stuff like psmb/Psmb.FlatNav#2
neos · Mar 28, 2019 · 475cf50 · 475cf50
1 parent ca64a47
commit 475cf50
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git a/packages/react-ui-components/src/Tabs/__snapshots__/tabs.spec.tsx.snap b/packages/react-ui-components/src/Tabs/__snapshots__/tabs.spec.tsx.snap
@@ -24,7 +24,8 @@ exports[`<Tabs/> should render correctly. 1`] = `
           "tabNavigation__itemBtnIcon": "baseTabsNavigationItemBtnIconClassName",
           "tabNavigation__itemBtnIcon--hasLabel": "baseTabsNavigationItemBtnIconWithLabelClassName",
           "tabs": "baseTabsClassName",
-          "tabs__content": "basTabsContentsClassName",
+          "tabs__content": "baseTabsContentsClassName",
+          "tabs__panel": "baseTabsPanelsClassName",
         }
       }
       title="foo 1"
@@ -45,7 +46,8 @@ exports[`<Tabs/> should render correctly. 1`] = `
           "tabNavigation__itemBtnIcon": "baseTabsNavigationItemBtnIconClassName",
           "tabNavigation__itemBtnIcon--hasLabel": "baseTabsNavigationItemBtnIconWithLabelClassName",
           "tabs": "baseTabsClassName",
-          "tabs__content": "basTabsContentsClassName",
+          "tabs__content": "baseTabsContentsClassName",
+          "tabs__panel": "baseTabsPanelsClassName",
         }
       }
       title="foo 2"
@@ -66,17 +68,19 @@ exports[`<Tabs/> should render correctly. 1`] = `
           "tabNavigation__itemBtnIcon": "baseTabsNavigationItemBtnIconClassName",
           "tabNavigation__itemBtnIcon--hasLabel": "baseTabsNavigationItemBtnIconWithLabelClassName",
           "tabs": "baseTabsClassName",
-          "tabs__content": "basTabsContentsClassName",
+          "tabs__content": "baseTabsContentsClassName",
+          "tabs__panel": "baseTabsPanelsClassName",
         }
       }
       title="foo 3"
     />
   </ul>
   <div
-    className="basTabsContentsClassName"
+    className="baseTabsContentsClassName"
   >
     <div
       aria-hidden="false"
+      className="baseTabsPanelsClassName"
       key="0"
       role="tabpanel"
       style={
@@ -101,6 +105,7 @@ exports[`<Tabs/> should render correctly. 1`] = `
     </div>
     <div
       aria-hidden="true"
+      className="baseTabsPanelsClassName"
       key="1"
       role="tabpanel"
       style={
@@ -111,6 +116,7 @@ exports[`<Tabs/> should render correctly. 1`] = `
     />
     <div
       aria-hidden="true"
+      className="baseTabsPanelsClassName"
       key="2"
       role="tabpanel"
       style={

diff --git a/packages/react-ui-components/src/Tabs/tabs.spec.tsx b/packages/react-ui-components/src/Tabs/tabs.spec.tsx
@@ -16,7 +16,8 @@ describe('<Tabs/>', () => {
         ...tabsDefaultProps,
         theme: {
             'tabs': 'baseTabsClassName',
-            'tabs__content': 'basTabsContentsClassName',
+            'tabs__content': 'baseTabsContentsClassName',
+            'tabs__panel': 'baseTabsPanelsClassName',
             'tabNavigation': 'baseTabsNavigationClassName',
             'tabNavigation__item': 'baseTabsNavigationItemClassName',
             'tabNavigation__item--isActive': 'activeTabsNavigationItemClassName',

diff --git a/packages/react-ui-components/src/Tabs/tabs.tsx b/packages/react-ui-components/src/Tabs/tabs.tsx
@@ -22,14 +22,15 @@ export interface TabsProps {
     readonly children: ReadonlyArray<React.ReactElement<any>>;
 
     /**
-     * An optional css theme to be injected.
+     * A css theme to be injected.
      */
-    readonly theme?: TabsTheme;
+    readonly theme: TabsTheme;
 }
 
 interface TabsTheme extends TabMenuItemTheme {
     readonly 'tabs': string;
     readonly 'tabs__content': string;
+    readonly 'tabs__panel': string;
     readonly 'tabNavigation': string;
 }
 
@@ -88,15 +89,15 @@ export default class Tabs extends PureComponent<TabsProps> {
                 ref={`tab-${index}`}
                 onClick={this.handleTabNavItemClick}
                 isActive={activeTab === (isNaN(activeTab as number) ? panel.props.id : index)}
-                theme={theme!}
+                theme={theme}
                 title={panel.props.title}
                 icon={panel.props.icon}
                 tooltip={panel.props.tooltip}
             />
         ));
 
         return (
-            <ul className={theme!.tabNavigation}>
+            <ul className={theme.tabNavigation}>
                 {menuItems}
             </ul>
         );
@@ -111,7 +112,7 @@ export default class Tabs extends PureComponent<TabsProps> {
         const activeTab = this.getActiveTab();
 
         return (
-            <div className={theme!.tabs__content}>
+            <div className={theme.tabs__content}>
                 {children.map((panel, index) => {
                     const isActive = activeTab === (isNaN(activeTab as number) ? panel.props.id : index);
                     const style = {
@@ -120,6 +121,7 @@ export default class Tabs extends PureComponent<TabsProps> {
 
                     return (
                         <div
+                            className={theme.tabs__panel}
                             key={index}
                             style={style}
                             role="tabpanel"
@@ -135,7 +137,7 @@ export default class Tabs extends PureComponent<TabsProps> {
 
     public render(): JSX.Element {
         const {theme, className} = this.props;
-        const finalClassName = mergeClassNames(theme!.tabs, className);
+        const finalClassName = mergeClassNames(theme.tabs, className);
 
         return (
             <div className={finalClassName} role="tablist">