[Tabs] add panelClassName prop (#3351)

palantir · Feb 19, 2019 · 3dcbb01 · 3dcbb01 · blueprint-bot · Feb 19, 2019
1 parent 2b8300b
commit 3dcbb01
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 4 deletions.
diff --git a/packages/core/src/components/tabs/tab.tsx b/packages/core/src/components/tabs/tab.tsx
@@ -37,6 +37,11 @@ export interface ITabProps extends IProps {
      */
     panel?: JSX.Element;
 
+    /**
+     * Space-delimited string of class names applied to tab panel container.
+     */
+    panelClassName?: string;
+
     /**
      * Content of tab title element, rendered in a list above the active panel.
      * Can also be set via React `children`.

diff --git a/packages/core/src/components/tabs/tabs.md b/packages/core/src/components/tabs/tabs.md
@@ -17,7 +17,7 @@ import { Tab, Tabs } from "@blueprintjs/core";
 
 <Tabs id="TabsExample" onChange={this.handleTabChange} selectedTabId="rx">
     <Tab id="ng" title="Angular" panel={<AngularPanel />} />
-    <Tab id="mb" title="Ember" panel={<EmberPanel />} />
+    <Tab id="mb" title="Ember" panel={<EmberPanel />} panelClassName="ember-panel" />
     <Tab id="rx" title="React" panel={<ReactPanel />} />
     <Tab id="bb" disabled title="Backbone" panel={<BackbonePanel />} />
     <Tabs.Expander />

diff --git a/packages/core/src/components/tabs/tabs.tsx b/packages/core/src/components/tabs/tabs.tsx
@@ -274,15 +274,15 @@ export class Tabs extends AbstractPureComponent<ITabsProps, ITabsState> {
     }
 
     private renderTabPanel = (tab: TabElement) => {
-        const { className, panel, id } = tab.props;
+        const { className, panel, id, panelClassName } = tab.props;
         if (panel === undefined) {
             return undefined;
         }
         return (
             <div
                 aria-labelledby={generateTabTitleId(this.props.id, id)}
                 aria-hidden={id !== this.state.selectedTabId}
-                className={classNames(Classes.TAB_PANEL, className)}
+                className={classNames(Classes.TAB_PANEL, className, panelClassName)}
                 id={generateTabPanelId(this.props.id, id)}
                 key={id}
                 role="tabpanel"

diff --git a/packages/core/test/tabs/tabsTests.tsx b/packages/core/test/tabs/tabsTests.tsx
@@ -92,6 +92,30 @@ describe("<Tabs>", () => {
         assert.lengthOf(wrapper.find(`.${Classes.TAB_LIST}.${Classes.LARGE}`), 1);
     });
 
+    it("attaches className to both tab and panel container if set", () => {
+        const tabClassName = "tabClassName";
+        const wrapper = mount(
+            <Tabs id={ID}>
+                <Tab id="first" title="First" className={tabClassName} panel={<Panel title="first" />} />,
+                <Tab id="second" title="Second" className={tabClassName} panel={<Panel title="second" />} />,
+                <Tab id="third" title="Third" className={tabClassName} panel={<Panel title="third" />} />,
+            </Tabs>,
+        );
+        assert.lengthOf(wrapper.find(`.${tabClassName}`), 9);
+    });
+
+    it("attaches panelClassName to panel container if set", () => {
+        const panelClassName = "secondPanelClassName";
+        const wrapper = mount(
+            <Tabs id={ID}>
+                <Tab id="first" title="First" panel={<Panel title="first" />} />,
+                <Tab id="second" title="Second" panelClassName={panelClassName} panel={<Panel title="second" />} />,
+                <Tab id="third" title="Third" panel={<Panel title="third" />} />,
+            </Tabs>,
+        );
+        assert.lengthOf(wrapper.find(`.${panelClassName}`), 1);
+    });
+
     it("renderActiveTabPanelOnly only renders active tab panel", () => {
         const wrapper = mount(
             <Tabs id={ID} renderActiveTabPanelOnly={true}>

diff --git a/packages/docs-app/src/examples/core-examples/tabsExample.tsx b/packages/docs-app/src/examples/core-examples/tabsExample.tsx
@@ -75,7 +75,7 @@ export class TabsExample extends React.PureComponent<IExampleProps, ITabsExample
                 >
                     <Tab id="rx" title="React" panel={<ReactPanel />} />
                     <Tab id="ng" title="Angular" panel={<AngularPanel />} />
-                    <Tab id="mb" title="Ember" panel={<EmberPanel />} />
+                    <Tab id="mb" title="Ember" panel={<EmberPanel />} panelClassName="ember-panel" />
                     <Tab id="bb" disabled={true} title="Backbone" panel={<BackbonePanel />} />
                     <Tabs.Expander />
                     <InputGroup className={Classes.FILL} type="text" placeholder="Search..." />