chore: Refactor split panel header into separate file

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

@@ -563,12 +563,12 @@ exports[`test-utils selectors 1`] = `
     "awsui_root_1612d",
   ],
   "split-panel": [
-    "awsui_close-button_rjqu5",
-    "awsui_header-text_rjqu5",
+    "awsui_close-button_htbjz",
+    "awsui_header-text_htbjz",
     "awsui_open-button_rjqu5",
     "awsui_open-position-bottom_rjqu5",
     "awsui_open-position-side_rjqu5",
-    "awsui_preferences-button_rjqu5",
+    "awsui_preferences-button_htbjz",
     "awsui_root_rjqu5",
     "awsui_slider_rjqu5",
   ],

src/split-panel/header/index.tsx

@@ -0,0 +1,95 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import clsx from 'clsx';
+
+import { Focusable } from '../../app-layout/utils/use-focus-control';
+import InternalButton from '../../button/internal';
+import { SplitPanelProps } from '../interfaces';
+
+import panelTestUtilStyles from '../test-classes/styles.css.js';
+import styles from './styles.css.js';
+import testUtilStyles from './test-classes/styles.css.js';
+
+interface SplitPanelHeaderProps extends Pick<SplitPanelProps, 'closeBehavior'> {
+  text: string;
+  position: 'side' | 'bottom';
+  isOpen?: boolean;
+  onToggle: () => void;
+  setPreferencesOpen: (open: boolean) => void;
+  panelHeaderId: string;
+  hidePreferencesButton: boolean;
+  i18nStrings: Pick<SplitPanelProps.I18nStrings, 'preferencesTitle' | 'closeButtonAriaLabel' | 'openButtonAriaLabel'>;
+  isRefresh: boolean;
+  isToolbar?: boolean;
+  appLayoutMaxWidth?: React.CSSProperties;
+  refs: {
+    preferences: React.RefObject<Focusable>;
+    toggle: React.RefObject<Focusable>;
+  };
+}
+
+export default function SplitPanelHeader({
+  text,
+  position,
+  isOpen,
+  onToggle,
+  setPreferencesOpen,
+  closeBehavior,
+  panelHeaderId,
+  hidePreferencesButton,
+  i18nStrings,
+  isRefresh,
+  isToolbar,
+  appLayoutMaxWidth,
+  refs,
+}: SplitPanelHeaderProps) {
+  return (
+    <div className={clsx(styles.header, isToolbar && styles['with-toolbar'])} style={appLayoutMaxWidth}>
+      <h2 className={clsx(styles['header-text'], testUtilStyles['header-text'])} id={panelHeaderId}>
+        {text}
+      </h2>
+      <div className={styles['header-buttons']}>
+        {!hidePreferencesButton && isOpen && (
+          <>
+            <InternalButton
+              className={testUtilStyles['preferences-button']}
+              iconName="settings"
+              variant="icon"
+              onClick={() => setPreferencesOpen(true)}
+              formAction="none"
+              ariaLabel={i18nStrings.preferencesTitle}
+              ref={refs.preferences}
+            />
+            <span className={styles.divider} />
+          </>
+        )}
+
+        {isOpen ? (
+          <InternalButton
+            className={testUtilStyles['close-button']}
+            iconName={
+              isRefresh && closeBehavior === 'collapse' ? (position === 'side' ? 'angle-right' : 'angle-down') : 'close'
+            }
+            variant="icon"
+            onClick={onToggle}
+            formAction="none"
+            ariaLabel={i18nStrings.closeButtonAriaLabel}
+            ariaExpanded={isOpen}
+          />
+        ) : position === 'side' || closeBehavior === 'hide' ? null : (
+          <InternalButton
+            className={panelTestUtilStyles['open-button']}
+            iconName="angle-up"
+            variant="icon"
+            formAction="none"
+            ariaLabel={i18nStrings.openButtonAriaLabel}
+            ref={refs.toggle}
+            ariaExpanded={isOpen}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

src/split-panel/header/styles.scss

@@ -0,0 +1,45 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../../internal/styles' as styles;
+@use '../../internal/styles/tokens' as awsui;
+@use '../../app-layout/constants' as constants;
+
+.header {
+  display: flex;
+  flex: auto;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  inline-size: 100%;
+  margin-block: awsui.$size-vertical-panel-icon-offset;
+  margin-inline: 0;
+  &.with-toolbar {
+    margin-block: constants.$toolbar-vertical-panel-icon-offset;
+  }
+
+  &-text {
+    @include styles.font-panel-header;
+    padding-block: 0;
+    padding-inline: 0;
+    margin-block: 0;
+    margin-inline: 0;
+    margin-block-start: calc(#{awsui.$space-scaled-xxs} + 1px);
+  }
+
+  &-buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    flex: 0 0 auto;
+    margin-inline-start: awsui.$space-xs;
+  }
+}
+
+.divider {
+  border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  margin-block: awsui.$space-scaled-xxs;
+  margin-inline: awsui.$space-scaled-xs;
+}

src/split-panel/header/test-classes/styles.scss

@@ -0,0 +1,10 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.header-text,
+.close-button,
+.preferences-button {
+  /* used in test-utils */
+}

src/split-panel/implementation.tsx

@@ -1,15 +1,13 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import clsx from 'clsx';
 
 import { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 
 import { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';
 import { SizeControlProps } from '../app-layout/utils/interfaces';
 import { useKeyboardEvents } from '../app-layout/utils/use-keyboard-events';
 import { usePointerEvents } from '../app-layout/utils/use-pointer-events';
-import { InternalButton } from '../button/internal';
 import { getBaseProps } from '../internal/base-component';
 import PanelResizeHandle from '../internal/components/panel-resize-handle';
 import { useSplitPanelContext } from '../internal/context/split-panel-context';
@@ -19,11 +17,11 @@ import globalVars from '../internal/styles/global-vars';
 import { SomeRequired } from '../internal/types';
 import { createWidgetizedComponent } from '../internal/widgets';
 import { SplitPanelContentBottom } from './bottom';
+import SplitPanelHeader from './header';
 import { SplitPanelProps } from './interfaces';
 import PreferencesModal from './preferences-modal';
 import { SplitPanelContentSide } from './side';
 
-import styles from './styles.css.js';
 import testUtilStyles from './test-classes/styles.css.js';
 
 export type SplitPanelImplementationProps = SomeRequired<SplitPanelProps, 'hidePreferencesButton' | 'closeBehavior'> &
@@ -91,51 +89,21 @@ export function SplitPanelImplementation({
   const panelHeaderId = useUniqueId('split-panel-header');
 
   const wrappedHeader = (
-    <div className={clsx(styles.header, isToolbar && styles['with-toolbar'])} style={appLayoutMaxWidth}>
-      <h2 className={clsx(styles['header-text'], testUtilStyles['header-text'])} id={panelHeaderId}>
-        {header}
-      </h2>
-      <div className={styles['header-actions']}>
-        {!hidePreferencesButton && isOpen && (
-          <>
-            <InternalButton
-              className={testUtilStyles['preferences-button']}
-              iconName="settings"
-              variant="icon"
-              onClick={() => setPreferencesOpen(true)}
-              formAction="none"
-              ariaLabel={i18nStrings.preferencesTitle}
-              ref={refs.preferences}
-            />
-            <span className={styles.divider} />
-          </>
-        )}
-
-        {isOpen ? (
-          <InternalButton
-            className={testUtilStyles['close-button']}
-            iconName={
-              isRefresh && closeBehavior === 'collapse' ? (position === 'side' ? 'angle-right' : 'angle-down') : 'close'
-            }
-            variant="icon"
-            onClick={onToggle}
-            formAction="none"
-            ariaLabel={i18nStrings.closeButtonAriaLabel}
-            ariaExpanded={isOpen}
-          />
-        ) : position === 'side' || closeBehavior === 'hide' ? null : (
-          <InternalButton
-            className={testUtilStyles['open-button']}
-            iconName="angle-up"
-            variant="icon"
-            formAction="none"
-            ariaLabel={i18nStrings.openButtonAriaLabel}
-            ref={refs.toggle}
-            ariaExpanded={isOpen}
-          />
-        )}
-      </div>
-    </div>
+    <SplitPanelHeader
+      text={header}
+      position={position}
+      isOpen={isOpen}
+      onToggle={onToggle}
+      setPreferencesOpen={setPreferencesOpen}
+      closeBehavior={closeBehavior}
+      panelHeaderId={panelHeaderId}
+      hidePreferencesButton={hidePreferencesButton}
+      i18nStrings={i18nStrings}
+      isRefresh={isRefresh}
+      isToolbar={isToolbar}
+      appLayoutMaxWidth={appLayoutMaxWidth}
+      refs={refs}
+    />
   );
 
   const resizeHandle = (

src/split-panel/styles.scss

@@ -5,7 +5,6 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../app-layout/constants' as constants;
 
 $slider-width: 16px;
@@ -225,40 +224,3 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
     margin-block-start: 0px;
   }
 }
-
-.header {
-  display: flex;
-  flex: auto;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: space-between;
-  inline-size: 100%;
-  margin-block: awsui.$size-vertical-panel-icon-offset;
-  margin-inline: 0;
-  &.with-toolbar {
-    margin-block: constants.$toolbar-vertical-panel-icon-offset;
-  }
-
-  &-text {
-    @include styles.font-panel-header;
-    padding-block: 0;
-    padding-inline: 0;
-    margin-block: 0;
-    margin-inline: 0;
-    margin-block-start: calc(#{awsui.$space-scaled-xxs} + 1px);
-  }
-}
-
-.header-actions {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  flex: 0 0 auto;
-  margin-inline-start: awsui.$space-xs;
-}
-
-.divider {
-  border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
-  margin-block: awsui.$space-scaled-xxs;
-  margin-inline: awsui.$space-scaled-xs;
-}

src/split-panel/test-classes/styles.scss

@@ -4,10 +4,7 @@
 */
 
 .root,
-.header-text,
 .open-button,
-.close-button,
-.preferences-button,
 .slider,
 .open-position-bottom,
 .open-position-side {

src/test-utils/dom/split-panel/index.ts

@@ -4,21 +4,22 @@ import { ComponentWrapper, createWrapper, ElementWrapper } from '@cloudscape-des
 
 import ButtonWrapper from '../button';
 
+import headerTestUtilStyles from '../../../split-panel/header/test-classes/styles.selectors.js';
 import testUtilStyles from '../../../split-panel/test-classes/styles.selectors.js';
 
 export default class SplitPanelWrapper extends ComponentWrapper {
   static rootSelector: string = testUtilStyles.root;
 
   findHeader(): ElementWrapper {
-    return this.find(`.${testUtilStyles['header-text']}`)!;
+    return this.find(`.${headerTestUtilStyles['header-text']}`)!;
   }
 
   findPreferencesButton(): ButtonWrapper | null {
-    return this.findComponent(`.${testUtilStyles['preferences-button']}`, ButtonWrapper);
+    return this.findComponent(`.${headerTestUtilStyles['preferences-button']}`, ButtonWrapper);
   }
 
   findCloseButton(): ButtonWrapper | null {
-    return this.findComponent(`.${testUtilStyles['close-button']}`, ButtonWrapper);
+    return this.findComponent(`.${headerTestUtilStyles['close-button']}`, ButtonWrapper);
   }
 
   findOpenButton(): ButtonWrapper | null {