[core] Allow hiding panel stack header

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<IPanelStackProps, IPanelStac
     }
 
     private renderCurrentPanel() {
+        const { showPanelHeader = true } = this.props;
         const { stack } = this.state;
         if (stack.length === 0) {
             return null;
@@ -84,6 +91,7 @@ export class PanelStack extends React.PureComponent<IPanelStackProps, IPanelStac
                     onOpen={this.handlePanelOpen}
                     panel={activePanel}
                     previousPanel={previousPanel}
+                    showHeader={showPanelHeader}
                 />
             </CSSTransition>
         );

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<IPanelViewProps> {
@@ -48,18 +51,27 @@ export class PanelView extends React.PureComponent<IPanelViewProps> {
         // possible, due to `flex: 1` magic.
         return (
             <div className={Classes.PANEL_STACK_VIEW}>
-                <div className={Classes.PANEL_STACK_HEADER}>
-                    <span>{this.maybeRenderBack()}</span>
-                    <Text className={Classes.HEADING} ellipsize={true}>
-                        {panel.title}
-                    </Text>
-                    <span />
-                </div>
+                {this.maybeRenderHeader()}
                 <panel.component openPanel={onOpen} closePanel={this.handleClose} {...panel.props} />
             </div>
         );
     }
 
+    private maybeRenderHeader() {
+        if (!this.props.showHeader) {
+            return null;
+        }
+        return (
+            <div className={Classes.PANEL_STACK_HEADER}>
+                <span>{this.maybeRenderBack()}</span>
+                <Text className={Classes.HEADING} ellipsize={true}>
+                    {this.props.panel.title}
+                </Text>
+                <span />
+            </div>
+        );
+    }
+
     private maybeRenderBack() {
         if (this.props.previousPanel === undefined) {
             return null;

packages/core/test/panel-stack/panelStackTests.tsx

@@ -84,6 +84,28 @@ describe("<PanelStack>", () => {
         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 });

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<IExampleProps, IPanelStackExampleState> {
@@ -34,11 +35,15 @@ export class PanelStackExample extends React.PureComponent<IExampleProps, IPanel
 
     public state = {
         currentPanelStack: [this.initialPanel],
+        showHeader: true,
     };
 
+    private handleHeaderChange = handleBooleanChange((showHeader: boolean) => this.setState({ showHeader }));
+
     public render() {
         const stackList = (
             <>
+                <Switch checked={this.state.showHeader} label="Show panel header" onChange={this.handleHeaderChange} />
                 <H5>Current stack</H5>
                 <UL>
                     {this.state.currentPanelStack.map((p, i) => (
@@ -54,6 +59,7 @@ export class PanelStackExample extends React.PureComponent<IExampleProps, IPanel
                     initialPanel={this.state.currentPanelStack[0]}
                     onOpen={this.addToPanelStack}
                     onClose={this.removeFromPanelStack}
+                    showPanelHeader={this.state.showHeader}
                 />
             </Example>
         );