Renaming auxiliaryActions to headerActions

WordPress · Aug 9, 2023 · a29a81a · a29a81a
1 parent 513f1ca
commit a29a81a
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 29 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -14,7 +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 auxiliary actions prop to render buttons in the header. ([#53328](https://github.com/WordPress/gutenberg/pull/53328)).
+-   `Modal`: add `headerActions` prop to render buttons in the header. ([#53328](https://github.com/WordPress/gutenberg/pull/53328)).
 
 ### Bug Fix
 

diff --git a/packages/components/src/modal/README.md b/packages/components/src/modal/README.md
@@ -166,14 +166,6 @@ Titles are required for accessibility reasons, see `contentLabel` and `title` fo
 -   Required: No
 -   Default: if the `title` prop is provided, this will default to the id of the element that renders `title`
 
-
-#### auxiliaryActions
-
-An optional React node intended to contain auxiliary actions of 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`
-
 #### `bodyOpenClassName`: `string`
 
 Class name added to the body element when the modal is open.
@@ -202,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 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.

diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
@@ -66,7 +66,7 @@ function UnforwardedModal(
 		contentLabel,
 		onKeyDown,
 		isFullScreen = false,
-		auxiliaryActions = null,
+		headerActions = null,
 		__experimentalHideHeader = false,
 	} = props;
 
@@ -258,7 +258,7 @@ function UnforwardedModal(
 										</h1>
 									) }
 								</div>
-								{ auxiliaryActions }
+								{ headerActions }
 								{ isDismissible && (
 									<Button
 										onClick={ onRequestClose }

diff --git a/packages/components/src/modal/stories/index.tsx b/packages/components/src/modal/stories/index.tsx
@@ -89,7 +89,7 @@ const Template: ComponentStory< typeof Modal > = ( {
 	);
 };
 
-const TemplateWithAuxiliaryAction: ComponentStory< typeof Modal > = ( {
+const TemplateWithHeaderActions: ComponentStory< typeof Modal > = ( {
 	onRequestClose,
 	...args
 } ) => {
@@ -100,7 +100,7 @@ const TemplateWithAuxiliaryAction: ComponentStory< typeof Modal > = ( {
 		setOpen( false );
 		onRequestClose( event );
 	};
-	const auxiliaryActions = (
+	const headerActions = (
 		<>
 			<Button
 				icon={ isLiked ? starFilled : starEmpty }
@@ -116,14 +116,14 @@ const TemplateWithAuxiliaryAction: ComponentStory< typeof Modal > = ( {
 	return (
 		<>
 			<Button variant="secondary" onClick={ openModal }>
-				Open Modal with Auxiliary Actions
+				Open Modal with Header Actions
 			</Button>
 			{ isOpen && (
 				<Modal
 					style={ { maxWidth: '600px' } }
 					isDismissible={ false }
 					onRequestClose={ closeModal }
-					auxiliaryActions={ auxiliaryActions }
+					headerActions={ headerActions }
 					{ ...args }
 				>
 					<p>
@@ -151,16 +151,16 @@ Default.parameters = {
 	},
 };
 
-export const WithAuxiliaryActions: ComponentStory< typeof Modal > =
-	TemplateWithAuxiliaryAction.bind( {} );
-WithAuxiliaryActions.args = {
+export const WithHeaderActions: ComponentStory< typeof Modal > =
+	TemplateWithHeaderActions.bind( {} );
+WithHeaderActions.args = {
 	...Default.args,
 };
-WithAuxiliaryActions.argTypes = {
+WithHeaderActions.argTypes = {
 	isDismissible: {
 		control: { type: 'boolean' },
 	},
 };
-WithAuxiliaryActions.parameters = {
+WithHeaderActions.parameters = {
 	...Default.parameters,
 };
diff --git a/packages/components/src/modal/test/index.tsx b/packages/components/src/modal/test/index.tsx
@@ -116,10 +116,10 @@ describe( 'Modal', () => {
 		expect( opener ).toHaveFocus();
 	} );
 
-	it( 'should render `auxiliaryActions` React nodes', async () => {
+	it( 'should render `headerActions` React nodes', async () => {
 		render(
 			<Modal
-				auxiliaryActions={ <button>A sweet button</button> }
+				headerActions={ <button>A sweet button</button> }
 				onRequestClose={ noop }
 			>
 				<p>Modal content</p>

diff --git a/packages/components/src/modal/types.ts b/packages/components/src/modal/types.ts
@@ -33,13 +33,6 @@ export type ModalProps = {
 		 */
 		labelledby?: string;
 	};
-	/**
-	 * Elements that are injected into the modal header to the left of the close button (if rendered).
-	 * Hidden if `__experimentalHideHeader` is `true`.
-	 *
-	 * @default null
-	 */
-	auxiliaryActions?: ReactNode;
 	/**
 	 * Class name added to the body element when the modal is open.
 	 *
@@ -76,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.
 	 */