From 85362fc35f9ff64a31b94beb433febd54f157b35 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 26 Nov 2021 10:53:51 +0800
Subject: [PATCH 1/7] Add icons to navigation sidebar items

---
 packages/components/src/navigation/item/base-content.js  | 9 ++++++++-
 packages/components/src/navigation/item/index.js         | 6 ++++--
 .../navigation-sidebar/navigation-panel/index.js         | 8 ++++++++
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/navigation/item/base-content.js b/packages/components/src/navigation/item/base-content.js
index f4b6fc5b41a8..645aca416bdc 100644
--- a/packages/components/src/navigation/item/base-content.js
+++ b/packages/components/src/navigation/item/base-content.js
@@ -1,13 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { Icon } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
 import { ItemBadgeUI, ItemTitleUI } from '../styles/navigation-styles';
 
 export default function NavigationItemBaseContent( props ) {
-	const { badge, title } = props;
+	const { badge, title, icon } = props;
 
 	return (
 		<>
+			{ icon && <Icon icon={ icon } /> }
+
 			{ title && (
 				<ItemTitleUI
 					className="components-navigation__item-title"
diff --git a/packages/components/src/navigation/item/index.js b/packages/components/src/navigation/item/index.js
index 6996cb6fce27..b2ea712c5846 100644
--- a/packages/components/src/navigation/item/index.js
+++ b/packages/components/src/navigation/item/index.js
@@ -29,6 +29,7 @@ export default function NavigationItem( props ) {
 		navigateToMenu,
 		onClick = noop,
 		title,
+		icon,
 		hideIfTargetMenuEmpty,
 		isText,
 		...restProps
@@ -62,7 +63,7 @@ export default function NavigationItem( props ) {
 
 		onClick( event );
 	};
-	const icon = isRTL() ? chevronLeft : chevronRight;
+	const navigationIcon = isRTL() ? chevronLeft : chevronRight;
 	const baseProps = children ? props : { ...props, onClick: undefined };
 	const itemProps = isText
 		? restProps
@@ -75,9 +76,10 @@ export default function NavigationItem( props ) {
 					<NavigationItemBaseContent
 						title={ title }
 						badge={ badge }
+						icon={ icon }
 					/>
 
-					{ navigateToMenu && <Icon icon={ icon } /> }
+					{ navigateToMenu && <Icon icon={ navigationIcon } /> }
 				</ItemUI>
 			) }
 		</NavigationItemBase>
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
index e047ec070801..e082077e1010 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
@@ -20,6 +20,11 @@ import { __ } from '@wordpress/i18n';
 import { ESCAPE } from '@wordpress/keycodes';
 import { decodeEntities } from '@wordpress/html-entities';
 import { addQueryArgs } from '@wordpress/url';
+import {
+	home as siteIcon,
+	layout as templateIcon,
+	header as templatePartIcon,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -87,6 +92,7 @@ const NavigationPanel = ( {
 						<NavigationMenu>
 							<NavigationGroup title={ __( 'Editor' ) }>
 								<NavigationItem
+									icon={ siteIcon }
 									title={ __( 'Site' ) }
 									item={ SITE_EDITOR_KEY }
 									href={ addQueryArgs( window.location.href, {
@@ -95,6 +101,7 @@ const NavigationPanel = ( {
 									} ) }
 								/>
 								<NavigationItem
+									icon={ templateIcon }
 									title={ __( 'Templates' ) }
 									item="wp_template"
 									href={ addQueryArgs( window.location.href, {
@@ -103,6 +110,7 @@ const NavigationPanel = ( {
 									} ) }
 								/>
 								<NavigationItem
+									icon={ templatePartIcon }
 									title={ __( 'Template Parts' ) }
 									item="wp_template_part"
 									href={ addQueryArgs( window.location.href, {

From a1bd14e1f4b25bf6a35a007e4cd4abfa0c143229 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 26 Nov 2021 11:03:45 +0800
Subject: [PATCH 2/7] Add storybook example

---
 packages/components/src/navigation/stories/more-examples.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/navigation/stories/more-examples.js b/packages/components/src/navigation/stories/more-examples.js
index 8795e8f0284f..ee0646424553 100644
--- a/packages/components/src/navigation/stories/more-examples.js
+++ b/packages/components/src/navigation/stories/more-examples.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useEffect, useState } from '@wordpress/element';
-import { Icon, wordpress } from '@wordpress/icons';
+import { Icon, wordpress, home } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -33,6 +33,7 @@ export function MoreExamplesStory() {
 				</NavigationGroup>
 				<NavigationGroup title="Items with Unusual Features">
 					<NavigationItem
+						icon={ home }
 						item="item-sub-menu"
 						navigateToMenu="sub-menu"
 						title="Sub-Menu with Custom Back Label"

From ca055a8ffa1e32698db1ef1ed7121e0ce99a3df2 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 26 Nov 2021 11:24:20 +0800
Subject: [PATCH 3/7] Move icon into main item file and add margin

---
 packages/components/src/navigation/item/base-content.js  | 9 +--------
 packages/components/src/navigation/item/index.js         | 3 ++-
 .../src/navigation/styles/navigation-styles.js           | 4 ++++
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/navigation/item/base-content.js b/packages/components/src/navigation/item/base-content.js
index 645aca416bdc..f4b6fc5b41a8 100644
--- a/packages/components/src/navigation/item/base-content.js
+++ b/packages/components/src/navigation/item/base-content.js
@@ -1,20 +1,13 @@
-/**
- * WordPress dependencies
- */
-import { Icon } from '@wordpress/icons';
-
 /**
  * Internal dependencies
  */
 import { ItemBadgeUI, ItemTitleUI } from '../styles/navigation-styles';
 
 export default function NavigationItemBaseContent( props ) {
-	const { badge, title, icon } = props;
+	const { badge, title } = props;
 
 	return (
 		<>
-			{ icon && <Icon icon={ icon } /> }
-
 			{ title && (
 				<ItemTitleUI
 					className="components-navigation__item-title"
diff --git a/packages/components/src/navigation/item/index.js b/packages/components/src/navigation/item/index.js
index b2ea712c5846..066d9272cdcd 100644
--- a/packages/components/src/navigation/item/index.js
+++ b/packages/components/src/navigation/item/index.js
@@ -73,10 +73,11 @@ export default function NavigationItem( props ) {
 		<NavigationItemBase { ...baseProps } className={ classes }>
 			{ children || (
 				<ItemUI { ...itemProps }>
+					{ icon && <Icon icon={ icon } /> }
+
 					<NavigationItemBaseContent
 						title={ title }
 						badge={ badge }
-						icon={ icon }
 					/>
 
 					{ navigateToMenu && <Icon icon={ navigationIcon } /> }
diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js
index ba32ff5d2757..1113ff23ec51 100644
--- a/packages/components/src/navigation/styles/navigation-styles.js
+++ b/packages/components/src/navigation/styles/navigation-styles.js
@@ -182,6 +182,10 @@ export const ItemUI = styled.div`
 	width: 100%;
 	color: inherit;
 	opacity: 0.7;
+
+	> svg {
+		margin-right: ${ space( 2 ) };
+	}
 `;
 
 export const ItemBadgeUI = styled.span`

From 41b26f64d291cd27e0624d8dc3dd74b6ac0ee2ca Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 26 Nov 2021 11:31:27 +0800
Subject: [PATCH 4/7] Target first child

---
 packages/components/src/navigation/styles/navigation-styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js
index 1113ff23ec51..ab3ac0d60171 100644
--- a/packages/components/src/navigation/styles/navigation-styles.js
+++ b/packages/components/src/navigation/styles/navigation-styles.js
@@ -183,7 +183,7 @@ export const ItemUI = styled.div`
 	color: inherit;
 	opacity: 0.7;
 
-	> svg {
+	> svg:first-child {
 		margin-right: ${ space( 2 ) };
 	}
 `;

From fc92d106f7c92010334ecf8f2835ed29a087acb9 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 26 Nov 2021 11:46:54 +0800
Subject: [PATCH 5/7] Use first-of-type

---
 packages/components/src/navigation/styles/navigation-styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js
index ab3ac0d60171..deb9353baed9 100644
--- a/packages/components/src/navigation/styles/navigation-styles.js
+++ b/packages/components/src/navigation/styles/navigation-styles.js
@@ -183,7 +183,7 @@ export const ItemUI = styled.div`
 	color: inherit;
 	opacity: 0.7;
 
-	> svg:first-child {
+	> svg:first-of-type {
 		margin-right: ${ space( 2 ) };
 	}
 `;

From 6cc99fa037b7fe68aec19d03ffa1b9709a4b78e2 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 26 Nov 2021 11:50:58 +0800
Subject: [PATCH 6/7] Switch to using the sybmolFilled icon for template parts

---
 .../src/components/navigation-sidebar/navigation-panel/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
index e082077e1010..83c8cf1945e6 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
@@ -23,7 +23,7 @@ import { addQueryArgs } from '@wordpress/url';
 import {
 	home as siteIcon,
 	layout as templateIcon,
-	header as templatePartIcon,
+	symbolFilled as templatePartIcon,
 } from '@wordpress/icons';
 
 /**

From f6a45c57294f5d08966eb2b2daf2650bd1f7bb34 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 26 Nov 2021 12:28:57 +0800
Subject: [PATCH 7/7] Add another wrapper to replace fragile class

---
 packages/components/src/navigation/item/index.js          | 8 ++++++--
 .../components/src/navigation/styles/navigation-styles.js | 7 ++++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/navigation/item/index.js b/packages/components/src/navigation/item/index.js
index 066d9272cdcd..a2ac076ea2ee 100644
--- a/packages/components/src/navigation/item/index.js
+++ b/packages/components/src/navigation/item/index.js
@@ -15,7 +15,7 @@ import { isRTL } from '@wordpress/i18n';
  */
 import Button from '../../button';
 import { useNavigationContext } from '../context';
-import { ItemUI } from '../styles/navigation-styles';
+import { ItemUI, ItemIconUI } from '../styles/navigation-styles';
 import NavigationItemBaseContent from './base-content';
 import NavigationItemBase from './base';
 
@@ -73,7 +73,11 @@ export default function NavigationItem( props ) {
 		<NavigationItemBase { ...baseProps } className={ classes }>
 			{ children || (
 				<ItemUI { ...itemProps }>
-					{ icon && <Icon icon={ icon } /> }
+					{ icon && (
+						<ItemIconUI>
+							<Icon icon={ icon } />
+						</ItemIconUI>
+					) }
 
 					<NavigationItemBaseContent
 						title={ title }
diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js
index deb9353baed9..8da0751f9840 100644
--- a/packages/components/src/navigation/styles/navigation-styles.js
+++ b/packages/components/src/navigation/styles/navigation-styles.js
@@ -182,10 +182,11 @@ export const ItemUI = styled.div`
 	width: 100%;
 	color: inherit;
 	opacity: 0.7;
+`;
 
-	> svg:first-of-type {
-		margin-right: ${ space( 2 ) };
-	}
+export const ItemIconUI = styled.span`
+	display: flex;
+	margin-right: ${ space( 2 ) };
 `;
 
 export const ItemBadgeUI = styled.span`