From 339b9f02749a92b8c24d4e0c0948a6bb202f8b0b Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Sun, 25 Aug 2024 18:28:29 +0900
Subject: [PATCH] Replace NavigatorToParentButton with NavigatorBackButton
 (#64775)

* Navigator: Replace deprecated NavigatorToParentButton with NavigatorBackButton

* Update storybook

---

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
---
 .../src/navigator/stories/index.story.tsx       | 17 ++++++++---------
 .../font-library-modal/font-collection.js       |  4 ++--
 .../font-library-modal/installed-fonts.js       |  4 ++--
 .../src/components/global-styles/header.js      |  9 ++-------
 .../global-styles/navigation-button.js          |  6 ++----
 5 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx
index 218580a4cc3ba2..633d5897678cbf 100644
--- a/packages/components/src/navigator/stories/index.story.tsx
+++ b/packages/components/src/navigator/stories/index.story.tsx
@@ -15,7 +15,6 @@ import {
 	NavigatorScreen,
 	NavigatorButton,
 	NavigatorBackButton,
-	NavigatorToParentButton,
 	useNavigator,
 } from '..';
 
@@ -261,9 +260,9 @@ export const NestedNavigator: StoryObj< typeof NavigatorProvider > = {
 					<Card>
 						<CardBody>
 							This is the first child
-							<NavigatorToParentButton variant="secondary">
+							<NavigatorBackButton variant="secondary">
 								Go back to parent
-							</NavigatorToParentButton>
+							</NavigatorBackButton>
 						</CardBody>
 					</Card>
 				</NavigatorScreen>
@@ -271,9 +270,9 @@ export const NestedNavigator: StoryObj< typeof NavigatorProvider > = {
 					<Card>
 						<CardBody>
 							This is the second child
-							<NavigatorToParentButton variant="secondary">
+							<NavigatorBackButton variant="secondary">
 								Go back to parent
-							</NavigatorToParentButton>
+							</NavigatorBackButton>
 							<NavigatorButton
 								variant="secondary"
 								path="/child2/grandchild"
@@ -287,9 +286,9 @@ export const NestedNavigator: StoryObj< typeof NavigatorProvider > = {
 					<Card>
 						<CardBody>
 							This is the grand child
-							<NavigatorToParentButton variant="secondary">
+							<NavigatorBackButton variant="secondary">
 								Go back to parent
-							</NavigatorToParentButton>
+							</NavigatorBackButton>
 						</CardBody>
 					</Card>
 				</NavigatorScreen>
@@ -345,9 +344,9 @@ export const SkipFocus: StoryObj< typeof NavigatorProvider > = {
 						} }
 					>
 						<h2>Child screen</h2>
-						<NavigatorToParentButton variant="secondary">
+						<NavigatorBackButton variant="secondary">
 							Go to parent screen.
-						</NavigatorToParentButton>
+						</NavigatorBackButton>
 					</NavigatorScreen>
 				</div>
 
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index 357bcba1d93137..5c8263c0df1024 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -15,7 +15,7 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
 	__experimentalHeading as Heading,
 	Notice,
 	SelectControl,
@@ -382,7 +382,7 @@ function FontCollection( { slug } ) {
 
 						<NavigatorScreen path="/fontFamily">
 							<Flex justify="flex-start">
-								<NavigatorToParentButton
+								<NavigatorBackButton
 									icon={ chevronLeft }
 									size="small"
 									onClick={ () => {
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
index 9896a9a525d446..281ec0b30f7627 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -8,7 +8,7 @@ import {
 	__experimentalHeading as Heading,
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
 	__experimentalUseNavigator as useNavigator,
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
@@ -353,7 +353,7 @@ function InstalledFonts() {
 							/>
 
 							<Flex justify="flex-start">
-								<NavigatorToParentButton
+								<NavigatorBackButton
 									icon={ chevronLeft }
 									size="small"
 									onClick={ () => {
diff --git a/packages/edit-site/src/components/global-styles/header.js b/packages/edit-site/src/components/global-styles/header.js
index fdddc54a07ad71..1d9de84183aef7 100644
--- a/packages/edit-site/src/components/global-styles/header.js
+++ b/packages/edit-site/src/components/global-styles/header.js
@@ -7,7 +7,7 @@ import {
 	__experimentalSpacer as Spacer,
 	__experimentalHeading as Heading,
 	__experimentalView as View,
-	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
@@ -18,12 +18,7 @@ function ScreenHeader( { title, description, onBack } ) {
 			<View>
 				<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
 					<HStack spacing={ 2 }>
-						<NavigatorToParentButton
-							style={
-								// TODO: This style override is also used in ToolsPanelHeader.
-								// It should be supported out-of-the-box by Button.
-								{ minWidth: 24, padding: 0 }
-							}
+						<NavigatorBackButton
 							icon={ isRTL() ? chevronRight : chevronLeft }
 							size="small"
 							label={ __( 'Back' ) }
diff --git a/packages/edit-site/src/components/global-styles/navigation-button.js b/packages/edit-site/src/components/global-styles/navigation-button.js
index 2053ba8a36fe6e..5bc8a50e0e2f45 100644
--- a/packages/edit-site/src/components/global-styles/navigation-button.js
+++ b/packages/edit-site/src/components/global-styles/navigation-button.js
@@ -3,7 +3,7 @@
  */
 import {
 	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
 	__experimentalItem as Item,
 	FlexItem,
 	__experimentalHStack as HStack,
@@ -33,9 +33,7 @@ function NavigationButtonAsItem( props ) {
 }
 
 function NavigationBackButtonAsItem( props ) {
-	return (
-		<NavigatorToParentButton as={ GenericNavigationButton } { ...props } />
-	);
+	return <NavigatorBackButton as={ GenericNavigationButton } { ...props } />;
 }
 
 export { NavigationButtonAsItem, NavigationBackButtonAsItem };