Skip to content

[Tabs] add panelClassName prop #3351

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 19, 2019
Merged

[Tabs] add panelClassName prop #3351

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
119a479
[Tabs] add panelClassName prop
n1313 Feb 12, 2019
3ee4c56
fix failing test
n1313 Feb 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/core/src/components/tabs/tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/tabs/tabs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/components/tabs/tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
24 changes: 24 additions & 0 deletions packages/core/test/tabs/tabsTests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
2 changes: 1 addition & 1 deletion packages/docs-app/src/examples/core-examples/tabsExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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..." />
Expand Down