Revert "Remove headerBefore and ariaLabel"

jperals · jperals · commit 572eac2a1ee1 · 2025-08-11T19:23:10.000+02:00
This reverts commit fca330f.
diff --git a/pages/app-layout/split-panel-with-custom-header.page.tsx b/pages/app-layout/split-panel-with-custom-header.page.tsx
@@ -1,8 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 
 import AppLayout, { AppLayoutProps } from '~components/app-layout';
+import Badge from '~components/badge';
+import Box from '~components/box';
 import Button from '~components/button';
 import FormField from '~components/form-field';
 import Header from '~components/header';
@@ -22,22 +24,68 @@ import * as toolsContent from './utils/tools-content';
 type SplitPanelDemoContext = React.Context<
   AppContextType<{
     actionsAsLinks: boolean;
+    ariaLabel?: string;
     description?: string;
+    editableHeader: boolean;
     headerText?: string;
     renderActions: boolean;
+    renderBadge: boolean;
     renderInfoLink: boolean;
     splitPanelOpen: boolean;
     splitPanelPosition: AppLayoutProps.SplitPanelPreferences['position'];
   }>
 >;
 
+function EditableHeader({ onChange, value }: { onChange: (text: string) => void; value: string }) {
+  const [internalValue, setInternalValue] = useState(value);
+  const [editing, setEditing] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    if (editing) {
+      inputRef.current?.focus();
+    }
+  }, [editing]);
+
+  return (
+    <Box display="inline-block">
+      <SpaceBetween direction="horizontal" size="xxs" alignItems="center">
+        {editing ? (
+          <>
+            <Input value={internalValue} onChange={({ detail }) => setInternalValue(detail.value)} ref={inputRef} />
+            <Button
+              variant="icon"
+              iconName="check"
+              onClick={() => {
+                onChange(internalValue);
+                setEditing(false);
+              }}
+            />
+            <Button variant="icon" iconName="close" onClick={() => setEditing(false)} />
+          </>
+        ) : (
+          <>
+            <Box variant="h3" tagOverride="h2" display="inline" margin={{ vertical: 'n' }} padding={{ vertical: 'n' }}>
+              {value}
+            </Box>
+            <Button variant="inline-icon" iconName="edit" onClick={() => setEditing(true)}></Button>
+          </>
+        )}
+      </SpaceBetween>
+    </Box>
+  );
+}
+
 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' }), []);
+  useEffect(() => {
+    if (!urlParams.editableHeader) {
+      setUrlParams({ ...urlParams, headerText: urlParams.headerText || 'Header text' });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <ScreenshotArea gutters={false}>
@@ -59,7 +107,7 @@ export default function () {
         onToolsChange={({ detail }) => setToolsOpen(detail.open)}
         splitPanel={
           <SplitPanel
-            header={urlParams.headerText || ''}
+            header={(!urlParams.editableHeader && urlParams.headerText) || ''}
             i18nStrings={splitPaneli18nStrings}
             headerActions={
               urlParams.renderActions &&
@@ -72,6 +120,21 @@ export default function () {
                 </SpaceBetween>
               ))
             }
+            headerBefore={
+              (urlParams.renderBadge || urlParams.editableHeader) && (
+                <>
+                  {urlParams.renderBadge && <Badge>Badge</Badge>}
+                  {urlParams.editableHeader && (
+                    <Box display="inline-block" margin={{ left: urlParams.renderBadge ? 'xs' : 'n' }}>
+                      <EditableHeader
+                        value={urlParams.headerText || ''}
+                        onChange={value => setUrlParams({ ...urlParams, headerText: value })}
+                      />
+                    </Box>
+                  )}
+                </>
+              )
+            }
             headerDescription={urlParams.description}
             headerInfo={
               urlParams.renderInfoLink && (
@@ -80,6 +143,7 @@ export default function () {
                 </Link>
               )
             }
+            ariaLabel={urlParams.ariaLabel}
           >
             <ScrollableDrawerContent />
           </SplitPanel>
@@ -92,13 +156,25 @@ export default function () {
               </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.renderBadge}
+                  onChange={({ detail }) => setUrlParams({ ...urlParams, renderBadge: detail.checked })}
+                >
+                  With badge
+                </Toggle>
+                <Toggle
+                  checked={urlParams.editableHeader}
+                  onChange={({ detail }) => setUrlParams({ ...urlParams, editableHeader: detail.checked })}
+                >
+                  Editable header text
+                </Toggle>
+                <Toggle
+                  checked={urlParams.renderInfoLink}
+                  onChange={({ detail }) => setUrlParams({ ...urlParams, renderInfoLink: detail.checked })}
+                >
+                  With info link
+                </Toggle>
                 <Toggle
                   checked={urlParams.renderActions}
                   onChange={({ detail }) => setUrlParams({ ...urlParams, renderActions: detail.checked })}
@@ -126,6 +202,12 @@ export default function () {
                   onChange={({ detail }) => setUrlParams({ ...urlParams, description: detail.value })}
                 />
               </FormField>
+              <FormField label="ARIA label">
+                <Input
+                  value={urlParams.ariaLabel || ''}
+                  onChange={({ detail }) => setUrlParams({ ...urlParams, ariaLabel: detail.value })}
+                />
+              </FormField>
               <Containers />
             </SpaceBetween>
           </>
diff --git a/src/split-panel/__tests__/header.test.tsx b/src/split-panel/__tests__/header.test.tsx
@@ -15,6 +15,14 @@ describe('Split panel: Header slots', () => {
       expect(wrapper!.findHeaderActions()!.getElement()).toHaveTextContent('Action');
     });
 
+    test('renders headerBefore', () => {
+      const { wrapper } = renderSplitPanel({
+        props: { headerBefore: <span>Before</span> },
+      });
+      expect(wrapper!.findHeaderBefore()).not.toBeNull();
+      expect(wrapper!.findHeaderBefore()!.getElement()).toHaveTextContent('Before');
+    });
+
     test('renders headerDescription', () => {
       const { wrapper } = renderSplitPanel({
         props: { headerDescription: 'Header description' },
@@ -34,6 +42,7 @@ describe('Split panel: Header slots', () => {
     test('does not render header properties when not provided', () => {
       const { wrapper } = renderSplitPanel();
       expect(wrapper!.findHeaderActions()).toBeNull();
+      expect(wrapper!.findHeaderBefore()).toBeNull();
       expect(wrapper!.findHeaderDescription()).toBeNull();
       expect(wrapper!.findHeaderInfo()).toBeNull();
     });
diff --git a/src/split-panel/bottom.tsx b/src/split-panel/bottom.tsx
@@ -33,6 +33,7 @@ export function SplitPanelContentBottom({
   children,
   appLayoutMaxWidth,
   panelHeaderId,
+  ariaLabel,
   onToggle,
   hasCustomElements,
 }: SplitPanelContentBottomProps) {
@@ -101,7 +102,12 @@ export function SplitPanelContentBottom({
       {closeBehavior === 'hide' && !isOpen ? null : (
         <>
           {isOpen && <div className={styles['slider-wrapper-bottom']}>{resizeHandle}</div>}
-          <div className={styles['drawer-content-bottom']} aria-labelledby={panelHeaderId} role="region">
+          <div
+            className={styles['drawer-content-bottom']}
+            aria-labelledby={panelHeaderId}
+            aria-label={ariaLabel}
+            role="region"
+          >
             <div className={clsx(styles['pane-header-wrapper-bottom'], centeredMaxWidthClasses)} ref={headerRef}>
               {header}
             </div>
diff --git a/src/split-panel/implementation.tsx b/src/split-panel/implementation.tsx
@@ -36,7 +36,9 @@ export function SplitPanelImplementation({
   hidePreferencesButton,
   closeBehavior,
   i18nStrings = {},
+  ariaLabel,
   headerActions,
+  headerBefore,
   headerDescription,
   headerInfo,
   ...restProps
@@ -91,26 +93,27 @@ export function SplitPanelImplementation({
     [globalVars.stickyVerticalBottomOffset]: bottomOffset,
   };
 
-  const panelHeaderId = useUniqueId('split-panel-header');
+  const panelHeaderUniqueId = useUniqueId('split-panel-header');
+  const panelHeaderId = ariaLabel ? undefined : panelHeaderUniqueId;
 
-  const hasCustomElements = !!headerActions || !!headerInfo;
+  const hasCustomElements = !!headerActions || !!headerBefore || !!headerInfo;
 
   const showDescription = headerDescription && isOpen;
 
   const wrappedHeader = (
     <div className={clsx(styles.header, isToolbar && styles['with-toolbar'])} style={appLayoutMaxWidth}>
       <div className={styles['header-main-row']}>
         <div className={styles['header-main-content']}>
-          <div className={styles['header-text-and-info']}>
-            <h2
-              className={clsx(
-                styles['header-text'],
-                testUtilStyles['header-text'],
-                !!headerInfo && styles['with-info']
+          <div className={styles['header-tag-and-info']}>
+            <h2 className={clsx(styles['header-tag'], !!headerInfo && styles['with-info'])} id={panelHeaderId}>
+              {headerBefore && (
+                <span className={clsx(styles['header-before'], testUtilStyles['header-before'])}>{headerBefore}</span>
               )}
-              id={panelHeaderId}
-            >
-              {header}
+              {header && (
+                <div className={clsx(styles['header-text'], testUtilStyles['header-text'])} id={panelHeaderId}>
+                  {header}
+                </div>
+              )}{' '}
             </h2>
             {headerInfo && (
               <span className={clsx(styles['header-info'], testUtilStyles['header-info'])}>{headerInfo}</span>
@@ -246,6 +249,7 @@ export function SplitPanelImplementation({
           toggleRef={refs.toggle}
           header={wrappedHeader}
           panelHeaderId={panelHeaderId}
+          ariaLabel={ariaLabel}
           closeBehavior={closeBehavior}
         >
           {children}
@@ -264,6 +268,7 @@ export function SplitPanelImplementation({
           header={wrappedHeader}
           panelHeaderId={panelHeaderId}
           appLayoutMaxWidth={appLayoutMaxWidth}
+          ariaLabel={ariaLabel}
           closeBehavior={closeBehavior}
           hasCustomElements={hasCustomElements}
         >
diff --git a/src/split-panel/interfaces.ts b/src/split-panel/interfaces.ts
@@ -34,6 +34,11 @@ export interface SplitPanelProps extends BaseComponentProps {
    */
   i18nStrings?: SplitPanelProps.I18nStrings;
 
+  /**
+   * ARIA label for the panel. Use this if the value passed in the `header` property is not descriptive as a label for the panel.
+   */
+  ariaLabel?: string;
+
   /**
    * Actions for the header. Available only if you specify the `header` property.
    */
@@ -48,6 +53,11 @@ export interface SplitPanelProps extends BaseComponentProps {
    * The area next to the heading, used to display an Info link.
    */
   headerInfo?: React.ReactNode;
+
+  /**
+   * Content displayed before the header text.
+   */
+  headerBefore?: React.ReactNode;
 }
 
 export namespace SplitPanelProps {
@@ -73,7 +83,8 @@ export interface SplitPanelContentProps {
   isOpen?: boolean;
   splitPanelRef?: React.Ref<any>;
   cappedSize: number;
-  panelHeaderId: string;
+  panelHeaderId?: string;
+  ariaLabel?: string;
   resizeHandle: React.ReactNode;
   header: React.ReactNode;
   children: React.ReactNode;
diff --git a/src/split-panel/side.tsx b/src/split-panel/side.tsx
@@ -32,6 +32,7 @@ export function SplitPanelContentSide({
   cappedSize,
   openButtonAriaLabel,
   panelHeaderId,
+  ariaLabel,
   onToggle,
   closeBehavior,
 }: SplitPanelContentSideProps) {
@@ -64,6 +65,7 @@ export function SplitPanelContentSide({
         }}
         onClick={() => !isOpen && onToggle()}
         aria-labelledby={panelHeaderId}
+        aria-label={ariaLabel}
         role="region"
       >
         {isOpen ? (
diff --git a/src/split-panel/styles.scss b/src/split-panel/styles.scss
@@ -254,7 +254,7 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
     justify-content: space-between;
   }
 
-  &-text-and-info {
+  &-tag-and-info {
     $vertical-margin: calc(#{awsui.$space-scaled-xxs} + 1px);
     margin-block-start: $vertical-margin;
     min-block-size: calc(#{awsui.$font-panel-header-line-height} + #{$vertical-margin});
@@ -263,14 +263,16 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
     line-height: awsui.$line-height-body-s;
   }
 
+  &-tag,
+  &-before,
   &-text,
   &-info {
     display: inline;
   }
 
-  &-text {
+  &-tag {
+    $vertical-margin: calc(#{awsui.$space-scaled-xxs} + 1px);
     @include styles.font-panel-header;
-    flex-grow: 1;
     padding-block: 0;
     padding-inline: 0;
     margin-inline: 0;
@@ -280,6 +282,10 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
     }
   }
 
+  &-before + &-text {
+    margin-inline-start: awsui.$space-scaled-xs;
+  }
+
   &-description {
     color: awsui.$color-text-heading-secondary;
     @include styles.font-body-m;
diff --git a/src/split-panel/test-classes/styles.scss b/src/split-panel/test-classes/styles.scss
@@ -5,6 +5,7 @@
 
 .root,
 .header-actions,
+.header-before,
 .header-description,
 .header-info,
 .header-text,
diff --git a/src/test-utils/dom/split-panel/index.ts b/src/test-utils/dom/split-panel/index.ts
@@ -34,6 +34,10 @@ export default class SplitPanelWrapper extends ComponentWrapper {
     return this.findByClassName(testUtilStyles['header-actions']);
   }
 
+  findHeaderBefore() {
+    return this.findByClassName(testUtilStyles['header-before']);
+  }
+
   findHeaderDescription() {
     return this.findByClassName(testUtilStyles['header-description']);
   }

Original file line number	Diff line number	Diff line change
`@@ -34,6 +34,10 @@ export default class SplitPanelWrapper extends ComponentWrapper {`
`34`	`34`	`return this.findByClassName(testUtilStyles['header-actions']);`
`35`	`35`	`}`
`36`	`36`
	`37`	`+ findHeaderBefore() {`
	`38`	`+ return this.findByClassName(testUtilStyles['header-before']);`
	`39`	`+ }`
	`40`	`+`
`37`	`41`	`findHeaderDescription() {`
`38`	`42`	`return this.findByClassName(testUtilStyles['header-description']);`
`39`	`43`	`}`