Make split panel header text optional

Author: jperals

src/split-panel/__tests__/header.test.tsx

@@ -6,6 +6,18 @@ import { describeEachAppLayout } from '../../app-layout/__tests__/utils';
 import { renderSplitPanel } from './common';
 
 describe('Split panel: Header slots', () => {
+  test('warns when neither header nor headerBefore are provided', () => {
+    const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation();
+    try {
+      renderSplitPanel({ props: { header: undefined } });
+      expect(consoleWarnSpy).toHaveBeenCalledWith(
+        '[AwsUi] [SplitPanel] You must provide either `header` or `headerBefore`.'
+      );
+    } finally {
+      consoleWarnSpy.mockRestore();
+    }
+  });
+
   describeEachAppLayout({ sizes: ['desktop', 'mobile'] }, () => {
     test('renders headerActions', () => {
       const { wrapper } = renderSplitPanel({

src/split-panel/implementation.tsx

@@ -3,7 +3,7 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 
-import { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
+import { useMergeRefs, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
 import { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';
 import { SizeControlProps } from '../app-layout/utils/interfaces';
@@ -46,6 +46,10 @@ export function SplitPanelImplementation({
   const isRefresh = useVisualRefresh();
   const isToolbar = useAppLayoutToolbarDesignEnabled();
 
+  if (!header && !headerBefore) {
+    warnOnce('SplitPanel', 'You must provide either `header` or `headerBefore`.');
+  }
+
   const {
     position,
     topOffset,

src/split-panel/interfaces.ts

@@ -8,7 +8,7 @@ export interface SplitPanelProps extends BaseComponentProps {
   /**
    * Header text of the split panel.
    */
-  header: string;
+  header?: string;
   children: React.ReactNode;
   /**
    * Determines whether the split panel collapses or hides completely when closed.