Replace NavigatorToParentButton with NavigatorBackButton (WordPress#6…

…4775) * 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>
bph · Aug 31, 2024 · 339b9f0 · 339b9f0
1 parent 500ddf7
commit 339b9f0
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 24 deletions.
diff --git 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,19 +260,19 @@ 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>
 				<NavigatorScreen path="/child2">
 					<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
@@ -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
@@ -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
@@ -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
@@ -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 };