diff --git a/packages/core/src/components/panel-stack/panelStack.tsx b/packages/core/src/components/panel-stack/panelStack.tsx index a8a7bb72da4..85a9d989434 100644 --- a/packages/core/src/components/panel-stack/panelStack.tsx +++ b/packages/core/src/components/panel-stack/panelStack.tsx @@ -42,6 +42,12 @@ export interface IPanelStackProps extends IProps { * prop method. */ onOpen?: (addedPanel: IPanel) => void; + + /** + * Whether to show the header with the "back" button in each panel. + * @default true + */ + showPanelHeader?: boolean; } export interface IPanelStackState { @@ -72,6 +78,7 @@ export class PanelStack extends React.PureComponent ); diff --git a/packages/core/src/components/panel-stack/panelView.tsx b/packages/core/src/components/panel-stack/panelView.tsx index a5aa2ea3f7d..fbc93324142 100644 --- a/packages/core/src/components/panel-stack/panelView.tsx +++ b/packages/core/src/components/panel-stack/panelView.tsx @@ -39,6 +39,9 @@ export interface IPanelViewProps { /** The previous panel in the stack, for rendering the "back" button. */ previousPanel?: IPanel; + + /** Whether to show the header with the "back" button. */ + showHeader: boolean; } export class PanelView extends React.PureComponent { @@ -48,18 +51,27 @@ export class PanelView extends React.PureComponent { // possible, due to `flex: 1` magic. return ( - - {this.maybeRenderBack()} - - {panel.title} - - - + {this.maybeRenderHeader()} ); } + private maybeRenderHeader() { + if (!this.props.showHeader) { + return null; + } + return ( + + {this.maybeRenderBack()} + + {this.props.panel.title} + + + + ); + } + private maybeRenderBack() { if (this.props.previousPanel === undefined) { return null; diff --git a/packages/core/test/panel-stack/panelStackTests.tsx b/packages/core/test/panel-stack/panelStackTests.tsx index 8322b1d75c4..c32bf5b590d 100644 --- a/packages/core/test/panel-stack/panelStackTests.tsx +++ b/packages/core/test/panel-stack/panelStackTests.tsx @@ -84,6 +84,28 @@ describe("", () => { assert.equal(oldPanelHeader.at(1).text(), "Test Title"); }); + it("renders a panel stack without header and allows opening and closing", () => { + panelStackWrapper = renderPanelStack({ initialPanel, showPanelHeader: false }); + assert.exists(panelStackWrapper); + + const newPanelButton = panelStackWrapper.find("#new-panel-button"); + assert.exists(newPanelButton); + newPanelButton.simulate("click"); + + const newPanelHeader = panelStackWrapper.findClass(Classes.HEADING); + assert.lengthOf(newPanelHeader, 0); + + const backButton = panelStackWrapper.findClass(Classes.PANEL_STACK_HEADER_BACK); + assert.lengthOf(backButton, 0); + + const closePanel = panelStackWrapper.find("#close-panel-button"); + assert.exists(closePanel); + closePanel.last().simulate("click"); + + const oldPanelHeader = panelStackWrapper.findClass(Classes.HEADING); + assert.lengthOf(oldPanelHeader, 0); + }); + it("does not call the callback handler onClose when there is only a single panel on the stack", () => { const onClose = spy(); panelStackWrapper = renderPanelStack({ initialPanel, onClose }); diff --git a/packages/docs-app/src/examples/core-examples/panelStackExample.tsx b/packages/docs-app/src/examples/core-examples/panelStackExample.tsx index 1312501230f..08ed71eb194 100644 --- a/packages/docs-app/src/examples/core-examples/panelStackExample.tsx +++ b/packages/docs-app/src/examples/core-examples/panelStackExample.tsx @@ -16,11 +16,12 @@ import * as React from "react"; -import { Button, H5, Intent, IPanel, IPanelProps, PanelStack, UL } from "@blueprintjs/core"; -import { Example, IExampleProps } from "@blueprintjs/docs-theme"; +import { Button, H5, Intent, IPanel, IPanelProps, PanelStack, Switch, UL } from "@blueprintjs/core"; +import { Example, handleBooleanChange, IExampleProps } from "@blueprintjs/docs-theme"; export interface IPanelStackExampleState { currentPanelStack: IPanel[]; + showHeader: boolean; } export class PanelStackExample extends React.PureComponent { @@ -34,11 +35,15 @@ export class PanelStackExample extends React.PureComponent this.setState({ showHeader })); + public render() { const stackList = ( <> + Current stack {this.state.currentPanelStack.map((p, i) => ( @@ -54,6 +59,7 @@ export class PanelStackExample extends React.PureComponent );