feat: Add extra slots to Split Panel header

pages/app-layout/split-panel-with-custom-header.page.tsx

@@ -0,0 +1,136 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext, useEffect, useState } from 'react';
+
+import AppLayout, { AppLayoutProps } from '~components/app-layout';
+import Button from '~components/button';
+import FormField from '~components/form-field';
+import Header from '~components/header';
+import Input from '~components/input';
+import Link from '~components/link';
+import SpaceBetween from '~components/space-between';
+import SplitPanel from '~components/split-panel';
+import Toggle from '~components/toggle';
+
+import AppContext, { AppContextType } from '../app/app-context';
+import ScreenshotArea from '../utils/screenshot-area';
+import { Breadcrumbs, Containers, Navigation, ScrollableDrawerContent, Tools } from './utils/content-blocks';
+import labels from './utils/labels';
+import { splitPaneli18nStrings } from './utils/strings';
+import * as toolsContent from './utils/tools-content';
+
+type SplitPanelDemoContext = React.Context<
+  AppContextType<{
+    actionsAsLinks: boolean;
+    description?: string;
+    headerText?: string;
+    renderActions: boolean;
+    renderInfoLink: boolean;
+    splitPanelOpen: boolean;
+    splitPanelPosition: AppLayoutProps.SplitPanelPreferences['position'];
+  }>
+>;
+
+export default function () {
+  const { urlParams, setUrlParams } = useContext(AppContext as SplitPanelDemoContext);
+  const [toolsOpen, setToolsOpen] = useState(false);
+
+  // Initialize the header to a default value if not set.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => setUrlParams({ ...urlParams, headerText: urlParams.headerText || 'Header text' }), []);
+
+  return (
+    <ScreenshotArea gutters={false}>
+      <AppLayout
+        ariaLabels={labels}
+        breadcrumbs={<Breadcrumbs />}
+        navigation={<Navigation />}
+        tools={<Tools>{toolsContent.long}</Tools>}
+        toolsOpen={toolsOpen}
+        splitPanelOpen={urlParams.splitPanelOpen}
+        onSplitPanelToggle={({ detail }) => setUrlParams({ ...urlParams, splitPanelOpen: detail.open })}
+        splitPanelPreferences={{
+          position: urlParams.splitPanelPosition,
+        }}
+        onSplitPanelPreferencesChange={event => {
+          const { position } = event.detail;
+          setUrlParams({ splitPanelPosition: position === 'side' ? position : undefined });
+        }}
+        onToolsChange={({ detail }) => setToolsOpen(detail.open)}
+        splitPanel={
+          <SplitPanel
+            header={urlParams.headerText || ''}
+            i18nStrings={splitPaneli18nStrings}
+            headerActions={
+              urlParams.renderActions &&
+              (urlParams.actionsAsLinks ? (
+                <Link>Action</Link>
+              ) : (
+                <SpaceBetween direction="horizontal" size="xs">
+                  <Button>Button</Button>
+                  <Button>Button</Button>
+                </SpaceBetween>
+              ))
+            }
+            headerDescription={urlParams.description}
+            headerInfo={
+              urlParams.renderInfoLink && (
+                <Link variant="info" onFollow={() => setToolsOpen(true)}>
+                  Info
+                </Link>
+              )
+            }
+          >
+            <ScrollableDrawerContent />
+          </SplitPanel>
+        }
+        content={
+          <>
+            <div style={{ marginBottom: '1rem' }}>
+              <Header variant="h1" description="Basic demo with split panel">
+                Demo page
+              </Header>
+            </div>
+            <SpaceBetween size="l">
+              <Toggle
+                checked={urlParams.renderInfoLink}
+                onChange={({ detail }) => setUrlParams({ ...urlParams, renderInfoLink: detail.checked })}
+              >
+                With info link
+              </Toggle>
+              <SpaceBetween direction="horizontal" size="xl">
+                <Toggle
+                  checked={urlParams.renderActions}
+                  onChange={({ detail }) => setUrlParams({ ...urlParams, renderActions: detail.checked })}
+                >
+                  With action buttons
+                </Toggle>
+                {urlParams.renderActions && (
+                  <Toggle
+                    checked={urlParams.actionsAsLinks}
+                    onChange={({ detail }) => setUrlParams({ ...urlParams, actionsAsLinks: detail.checked })}
+                  >
+                    As links
+                  </Toggle>
+                )}
+              </SpaceBetween>
+              <FormField label="Header text">
+                <Input
+                  value={urlParams.headerText || ''}
+                  onChange={({ detail }) => setUrlParams({ ...urlParams, headerText: detail.value })}
+                />
+              </FormField>
+              <FormField label="Description">
+                <Input
+                  value={urlParams.description || ''}
+                  onChange={({ detail }) => setUrlParams({ ...urlParams, description: detail.value })}
+                />
+              </FormField>
+              <Containers />
+            </SpaceBetween>
+          </>
+        }
+      />
+    </ScreenshotArea>
+  );
+}

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -21583,6 +21583,21 @@ use the \`id\` attribute, consider setting it on a parent element instead.",
       "isDefault": true,
       "name": "children",
     },
+    {
+      "description": "Actions for the header. Available only if you specify the \`header\` property.",
+      "isDefault": false,
+      "name": "headerActions",
+    },
+    {
+      "description": "Supplementary text below the heading.",
+      "isDefault": false,
+      "name": "headerDescription",
+    },
+    {
+      "description": "The area next to the heading, used to display an Info link.",
+      "isDefault": false,
+      "name": "headerInfo",
+    },
   ],
   "releaseStatus": "stable",
 }
@@ -83176,6 +83191,30 @@ Component's wrapper class",
             "type": "reference",
           },
         },
+        {
+          "name": "findHeaderActions",
+          "parameters": [],
+          "returnType": {
+            "name": "null | ElementWrapper",
+            "type": "union",
+          },
+        },
+        {
+          "name": "findHeaderDescription",
+          "parameters": [],
+          "returnType": {
+            "name": "null | ElementWrapper",
+            "type": "union",
+          },
+        },
+        {
+          "name": "findHeaderInfo",
+          "parameters": [],
+          "returnType": {
+            "name": "null | ElementWrapper",
+            "type": "union",
+          },
+        },
         {
           "name": "findOpenButton",
           "parameters": [],
@@ -138429,6 +138468,33 @@ Component's wrapper class",
             "typeArguments": [],
           },
         },
+        {
+          "name": "findHeaderActions",
+          "parameters": [],
+          "returnType": {
+            "name": "ElementWrapper",
+            "type": "reference",
+            "typeArguments": [],
+          },
+        },
+        {
+          "name": "findHeaderDescription",
+          "parameters": [],
+          "returnType": {
+            "name": "ElementWrapper",
+            "type": "reference",
+            "typeArguments": [],
+          },
+        },
+        {
+          "name": "findHeaderInfo",
+          "parameters": [],
+          "returnType": {
+            "name": "ElementWrapper",
+            "type": "reference",
+            "typeArguments": [],
+          },
+        },
         {
           "name": "findOpenButton",
           "parameters": [],

src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap

@@ -564,6 +564,9 @@ exports[`test-utils selectors 1`] = `
   ],
   "split-panel": [
     "awsui_close-button_rjqu5",
+    "awsui_header-actions_rjqu5",
+    "awsui_header-description_rjqu5",
+    "awsui_header-info_rjqu5",
     "awsui_header-text_rjqu5",
     "awsui_open-button_rjqu5",
     "awsui_open-position-bottom_rjqu5",

src/app-layout/__integ__/app-layout-split-panel.test.ts

@@ -140,7 +140,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
   );
 
   test(
-    'switches to bottom position when when tools panel opens and available space is too small',
+    'switches to bottom position when tools panel opens and available space is too small',
     setupTest(async page => {
       await page.setWindowSize({ ...viewports.desktop, width: 1100 });
       await page.openPanel();

src/split-panel/__integ__/header.test.ts

@@ -0,0 +1,63 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+
+import createWrapper from '../../../lib/components/test-utils/selectors';
+import { viewports } from '../../app-layout/__integ__/constants';
+import { getUrlParams } from '../../app-layout/__integ__/utils';
+
+const wrapper = createWrapper().findAppLayout();
+const url = '#/light/app-layout/split-panel-with-custom-header';
+
+describe.each(['refresh', 'refresh-toolbar'] as const)('%s', theme => {
+  describe.each(['desktop', 'mobile'] as const)('%s', viewport => {
+    function setupTest(testFn: (page: BasePageObject) => Promise<void>, params = {}) {
+      return useBrowser(async browser => {
+        const page = new BasePageObject(browser);
+        await page.setWindowSize(viewports[viewport]);
+        await browser.url(`${url}?${getUrlParams(theme, params)}`);
+        await page.waitForVisible(wrapper.findContentRegion().toSelector());
+        await testFn(page);
+      });
+    }
+
+    describe('only the expand button is clickable in collapsed bottom split panel when certain header slots are populated', () => {
+      const cases = [
+        { slotName: 'headerActions', devPageParam: 'renderActions' },
+        { slotName: 'headerInfo', devPageParam: 'renderInfoLink' },
+      ];
+      test.each(cases)('$slotName', ({ devPageParam }) =>
+        setupTest(
+          async page => {
+            await page.click(wrapper.findSplitPanel().findHeader().toSelector()); // Click on the header text
+            await expect(
+              page.isDisplayedInViewport(wrapper.findSplitPanel().findOpenPanelBottom().toSelector())
+            ).resolves.toBe(false);
+            await page.click(wrapper.findSplitPanelOpenButton().toSelector());
+            await expect(
+              page.isDisplayedInViewport(wrapper.findSplitPanel().findOpenPanelBottom().toSelector())
+            ).resolves.toBe(true);
+          },
+          { [devPageParam]: true }
+        )()
+      );
+    });
+
+    test(
+      'the entire header is clickable in collapsed bottom split panel even if headerDescription slot is populated',
+      setupTest(
+        async page => {
+          await page.click(wrapper.findSplitPanel().findHeader().toSelector()); // Click on the header text
+          await expect(
+            page.isDisplayedInViewport(wrapper.findSplitPanel().findOpenPanelBottom().toSelector())
+          ).resolves.toBe(true);
+          await expect(
+            page.isDisplayedInViewport(wrapper.findSplitPanel().findOpenPanelBottom().toSelector())
+          ).resolves.toBe(true);
+        },
+        { headerDescription: true }
+      )
+    );
+  });
+});

src/split-panel/__tests__/common.tsx

@@ -0,0 +1,55 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import TestI18nProvider from '../../../lib/components/i18n/testing';
+import {
+  SplitPanelContextProps,
+  SplitPanelContextProvider,
+} from '../../../lib/components/internal/context/split-panel-context';
+import SplitPanel, { SplitPanelProps } from '../../../lib/components/split-panel';
+import createWrapper from '../../../lib/components/test-utils/dom';
+import { defaultSplitPanelContextProps } from './helpers';
+
+const i18nStrings = {
+  closeButtonAriaLabel: 'closeButtonAriaLabel',
+  openButtonAriaLabel: 'openButtonAriaLabel',
+  preferencesTitle: 'preferencesTitle',
+  preferencesPositionLabel: 'preferencesPositionLabel',
+  preferencesPositionDescription: 'preferencesPositionDescription',
+  preferencesPositionSide: 'preferencesPositionSide',
+  preferencesPositionBottom: 'preferencesPositionBottom',
+  preferencesConfirm: 'preferencesConfirm',
+  preferencesCancel: 'preferencesCancel',
+  resizeHandleAriaLabel: 'resizeHandleAriaLabel',
+};
+
+export const defaultProps: SplitPanelProps = {
+  header: 'Split panel header',
+  children: <p>Split panel content</p>,
+  hidePreferencesButton: undefined,
+  i18nStrings,
+};
+
+export function renderSplitPanel({
+  props,
+  contextProps,
+  messages = {},
+  modalMessages = {},
+}: {
+  props?: Partial<SplitPanelProps>;
+  contextProps?: Partial<SplitPanelContextProps>;
+  messages?: Record<string, string>;
+  modalMessages?: Record<string, string>;
+} = {}) {
+  const { container } = render(
+    <TestI18nProvider messages={{ 'split-panel': messages, modal: modalMessages }}>
+      <SplitPanelContextProvider value={{ ...defaultSplitPanelContextProps, ...contextProps }}>
+        <SplitPanel {...defaultProps} {...props} />
+      </SplitPanelContextProvider>
+    </TestI18nProvider>
+  );
+  const wrapper = createWrapper(container).findSplitPanel();
+  return { wrapper };
+}