Make Dialog header and footer sticky

packages/ui/src/dialog/footer.tsx

@@ -1,6 +1,7 @@
 import { mergeProps, useRender } from '@base-ui/react';
 import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
+import { useDialogScrollChrome } from './scroll-chrome-context';
 import styles from './style.module.css';
 import type { FooterProps } from './types';
 
@@ -9,14 +10,23 @@ import type { FooterProps } from './types';
  * action buttons.
  */
 const Footer = forwardRef< HTMLDivElement, FooterProps >( function DialogFooter(
-	{ className, render, ...props },
+	{ className, render, sticky = true, ...props },
 	ref
 ) {
+	const scrollChrome = useDialogScrollChrome();
+
 	const element = useRender( {
 		render,
 		ref,
 		props: mergeProps< 'div' >( props, {
-			className: clsx( styles.footer, className ),
+			className: clsx(
+				styles.footer,
+				sticky && styles.footerSticky,
+				sticky &&
+					scrollChrome?.footerHasContentBelow &&
+					styles.footerHasContentBelow,
+				className
+			),
 		} ),
 	} );
 

packages/ui/src/dialog/header.tsx

@@ -1,6 +1,7 @@
 import { mergeProps, useRender } from '@base-ui/react';
 import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
+import { useDialogScrollChrome } from './scroll-chrome-context';
 import styles from './style.module.css';
 import type { HeaderProps } from './types';
 
@@ -12,11 +13,18 @@ const Header = forwardRef< HTMLDivElement, HeaderProps >( function DialogHeader(
 	{ className, render, ...props },
 	ref
 ) {
+	const scrollChrome = useDialogScrollChrome();
+
 	const element = useRender( {
 		render,
 		ref,
 		props: mergeProps< 'div' >( props, {
-			className: clsx( styles.header, className ),
+			className: clsx(
+				styles.header,
+				scrollChrome?.headerScrolledFromTop &&
+					styles.headerHasScrolledContent,
+				className
+			),
 		} ),
 	} );
 

packages/ui/src/dialog/popup.tsx

@@ -1,6 +1,12 @@
 import { Dialog as _Dialog } from '@base-ui/react/dialog';
 import clsx from 'clsx';
-import { forwardRef } from '@wordpress/element';
+import type { UIEvent } from 'react';
+import {
+	forwardRef,
+	useCallback,
+	useLayoutEffect,
+	useState,
+} from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 import {
 	type ThemeProvider as ThemeProviderType,
@@ -69,10 +75,13 @@
 					initialFocus={ resolvedInitialFocus }
 					finalFocus={ finalFocus }
 					{ ...props }
+					onScroll={ handleScroll }
 				>
-					<DialogValidationProvider>
-						{ children }
-					</DialogValidationProvider>
+					<DialogScrollChromeContext.Provider value={ scrollChrome }>
+						<DialogValidationProvider>
+							{ children }
+						</DialogValidationProvider>
+					</DialogScrollChromeContext.Provider>
 				</_Dialog.Popup>
 			</ThemeProvider>
 		</>

packages/ui/src/dialog/scroll-chrome-context.tsx

@@ -0,0 +1,23 @@
+import { createContext, useContext } from '@wordpress/element';
+
+export type DialogScrollChromeContextValue = {
+	/**
+	 * True when the popup is scrolled away from the top (content sits under the header).
+	 */
+	headerScrolledFromTop: boolean;
+	/**
+	 * True when more content exists below the visible area (content can scroll under the footer).
+	 */
+	footerHasContentBelow: boolean;
+};
+
+export const DialogScrollChromeContext =
+	createContext< DialogScrollChromeContextValue | null >( null );
+
+/**
+ * Scroll chrome for sticky `Dialog.Header` / `Dialog.Footer` borders. Returns `null`
+ * when used outside `Dialog.Popup`.
+ */
+export function useDialogScrollChrome(): DialogScrollChromeContextValue | null {
+	return useContext( DialogScrollChromeContext );
+}

packages/ui/src/dialog/style.module.css

@@ -105,10 +105,21 @@
 	}
 
 	.header {
+		position: sticky;
+		top: 0;
+		z-index: 1;
+		isolation: isolate;
 		display: flex;
 		align-items: center;
 		gap: var(--wpds-dimension-gap-sm);
 		margin-bottom: var(--wpds-dimension-gap-lg);
+		box-sizing: border-box;
+		border-block-end: 1px solid transparent;
+		background-color: var(--wpds-color-bg-surface-neutral-strong);
+	}
+
+	.headerHasScrolledContent {
+		border-block-end-color: var(--wpds-color-stroke-surface-neutral);
 	}
 
 	.title {
@@ -134,6 +145,20 @@
 		align-items: center;
 		gap: var(--wpds-dimension-gap-sm);
 		margin-top: var(--wpds-dimension-gap-lg);
-		padding-top: var(--wpds-dimension-padding-lg);
+		padding-block: var(--wpds-dimension-padding-lg);
+		box-sizing: border-box;
+		border-block-start: 1px solid transparent;
+		background-color: var(--wpds-color-bg-surface-neutral-strong);
+	}
+
+	.footerSticky {
+		position: sticky;
+		bottom: 0;
+		z-index: 1;
+		isolation: isolate;
+	}
+
+	.footerHasContentBelow {
+		border-block-start-color: var(--wpds-color-stroke-surface-neutral);
 	}
 }

packages/ui/src/dialog/types.ts

@@ -81,6 +81,14 @@ export interface FooterProps extends ComponentProps< 'div' > {
 	 * The content to be rendered inside the component.
 	 */
 	children?: ReactNode;
+
+	/**
+	 * When `true`, the footer stays pinned to the bottom of the dialog while
+	 * the body scrolls. When `false`, the footer scrolls with the content.
+	 *
+	 * @default true
+	 */
+	sticky?: boolean;
 }
 
 export interface HeaderProps extends ComponentProps< 'div' > {