Modal: add headerActions prop to render buttons in the header

packages/components/CHANGELOG.md

@@ -14,6 +14,7 @@
 -   `Theme`: Expose via private APIs ([#53262](https://github.com/WordPress/gutenberg/pull/53262)).
 -   `ProgressBar`: Use the theme system accent for indicator color ([#53347](https://github.com/WordPress/gutenberg/pull/53347)).
 -   `ProgressBar`: Use gray 300 for track color ([#53349](https://github.com/WordPress/gutenberg/pull/53349)).
+-   `Modal`: add `headerActions` prop to render buttons in the header. ([#53328](https://github.com/WordPress/gutenberg/pull/53328)).
 
 ### Bug Fix
 

packages/components/src/modal/README.md

@@ -194,6 +194,13 @@ If this property is true, it will focus the first tabbable element rendered in t
 -   Required: No
 -   Default: `true`
 
+#### headerActions
+
+An optional React node intended to contain additional actions or other elements related to the modal, for example, buttons. Content is rendered in the top right corner of the modal and to the left of the close button, if visible.
+
+-   Required: No
+-   Default: `null`
+
 #### `isDismissible`: `boolean`
 
 If this property is set to false, the modal will not display a close icon and cannot be dismissed.

packages/components/src/modal/index.tsx

@@ -66,6 +66,7 @@ function UnforwardedModal(
 		contentLabel,
 		onKeyDown,
 		isFullScreen = false,
+		headerActions = null,
 		__experimentalHideHeader = false,
 	} = props;
 
@@ -257,6 +258,7 @@ function UnforwardedModal(
 										</h1>
 									) }
 								</div>
+								{ headerActions }
 								{ isDismissible && (
 									<Button
 										onClick={ onRequestClose }

packages/components/src/modal/stories/index.tsx

@@ -7,11 +7,13 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react';
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
+import { help, starEmpty, starFilled } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import Button from '../../button';
+import Tooltip from '../../tooltip';
 import InputControl from '../../input-control';
 import Modal from '../';
 import type { ModalProps } from '../types';
@@ -87,6 +89,56 @@ const Template: ComponentStory< typeof Modal > = ( {
 	);
 };
 
+const TemplateWithHeaderActions: ComponentStory< typeof Modal > = ( {
+	onRequestClose,
+	...args
+} ) => {
+	const [ isLiked, setIsLiked ] = useState( false );
+	const [ isOpen, setOpen ] = useState( false );
+	const openModal = () => setOpen( true );
+	const closeModal: ModalProps[ 'onRequestClose' ] = ( event ) => {
+		setOpen( false );
+		onRequestClose( event );
+	};
+	const headerActions = (
+		<>
+			<Button
+				icon={ isLiked ? starFilled : starEmpty }
+				label="Like"
+				onClick={ () => setIsLiked( ! isLiked ) }
+			/>
+			<Tooltip text="We are here to help!">
+				<Button icon={ help } label="Help" />
+			</Tooltip>
+		</>
+	);
+
+	return (
+		<>
+			<Button variant="secondary" onClick={ openModal }>
+				Open Modal with Header Actions
+			</Button>
+			{ isOpen && (
+				<Modal
+					style={ { maxWidth: '600px' } }
+					isDismissible={ false }
+					onRequestClose={ closeModal }
+					headerActions={ headerActions }
+					{ ...args }
+				>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+						sed do eiusmod tempor incididunt ut labore et magna
+						aliqua.
+					</p>
+					<Button variant="secondary" onClick={ closeModal }>
+						Close Modal
+					</Button>
+				</Modal>
+			) }
+		</>
+	);
+};
 export const Default: ComponentStory< typeof Modal > = Template.bind( {} );
 Default.args = {
 	title: 'Title',
@@ -98,3 +150,17 @@ Default.parameters = {
 		},
 	},
 };
+
+export const WithHeaderActions: ComponentStory< typeof Modal > =
+	TemplateWithHeaderActions.bind( {} );
+WithHeaderActions.args = {
+	...Default.args,
+};
+WithHeaderActions.argTypes = {
+	isDismissible: {
+		control: { type: 'boolean' },
+	},
+};
+WithHeaderActions.parameters = {
+	...Default.parameters,
+};

packages/components/src/modal/test/index.tsx

@@ -115,4 +115,18 @@ describe( 'Modal', () => {
 		await user.click( modalFrame.parentElement! );
 		expect( opener ).toHaveFocus();
 	} );
+
+	it( 'should render `headerActions` React nodes', async () => {
+		render(
+			<Modal
+				headerActions={ <button>A sweet button</button> }
+				onRequestClose={ noop }
+			>
+				<p>Modal content</p>
+			</Modal>
+		);
+		expect(
+			screen.getByText( 'A sweet button', { selector: 'button' } )
+		).toBeInTheDocument();
+	} );
 } );

packages/components/src/modal/types.ts

@@ -69,6 +69,14 @@ export type ModalProps = {
 	 * @default true
 	 */
 	focusOnMount?: Parameters< typeof useFocusOnMount >[ 0 ];
+	/**
+	 * Elements that are injected into the modal header to the left of the close button (if rendered).
+	 * Hidden if `__experimentalHideHeader` is `true`.
+	 *
+	 * @default null
+	 */
+	headerActions?: ReactNode;
+
 	/**
 	 * If this property is added, an icon will be added before the title.
 	 */