From f30d6ae601294239c5918b46f4c42caf54fe87e3 Mon Sep 17 00:00:00 2001
From: Joshua Flowers <joshuatf@gmail.com>
Date: Tue, 11 Aug 2020 17:24:50 -0400
Subject: [PATCH 1/5] Migrate styles to css-in-js

---
 packages/components/src/navigation/index.js   |  9 +++--
 .../components/src/navigation/menu-item.js    |  5 +--
 packages/components/src/navigation/menu.js    |  7 +++-
 packages/components/src/navigation/style.scss | 26 --------------
 .../navigation/styles/navigation-styles.js    | 36 +++++++++++++++++++
 packages/components/src/style.scss            |  1 -
 6 files changed, 52 insertions(+), 32 deletions(-)
 delete mode 100644 packages/components/src/navigation/style.scss
 create mode 100644 packages/components/src/navigation/styles/navigation-styles.js

diff --git a/packages/components/src/navigation/index.js b/packages/components/src/navigation/index.js
index c33850d51f451..62406951546e0 100644
--- a/packages/components/src/navigation/index.js
+++ b/packages/components/src/navigation/index.js
@@ -3,6 +3,11 @@
  */
 import { useEffect, useState } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { Root } from './styles/navigation-styles';
+
 const Navigation = ( { activeItemId, children, data, rootTitle } ) => {
 	const [ activeLevel, setActiveLevel ] = useState( 'root' );
 
@@ -35,14 +40,14 @@ const Navigation = ( { activeItemId, children, data, rootTitle } ) => {
 	}, [] );
 
 	return (
-		<div className="components-navigation">
+		<Root className="components-navigation">
 			{ children( {
 				level,
 				levelItems,
 				parentLevel,
 				setActiveLevel,
 			} ) }
-		</div>
+		</Root>
 	);
 };
 
diff --git a/packages/components/src/navigation/menu-item.js b/packages/components/src/navigation/menu-item.js
index d665b778d5258..c40990f2dff22 100644
--- a/packages/components/src/navigation/menu-item.js
+++ b/packages/components/src/navigation/menu-item.js
@@ -12,6 +12,7 @@ import { Icon, chevronRight } from '@wordpress/icons';
  * Internal dependencies
  */
 import Button from '../button';
+import { MenuItem } from './styles/navigation-styles';
 import Text from '../text';
 
 const NavigationMenuItem = ( props ) => {
@@ -37,14 +38,14 @@ const NavigationMenuItem = ( props ) => {
 	};
 
 	return (
-		<li className={ classes }>
+		<MenuItem className={ classes }>
 			<Button className={ classes } onClick={ handleClick }>
 				<Text variant="body.small">
 					<span>{ title }</span>
 				</Text>
 				{ hasChildren ? <Icon icon={ chevronRight } /> : null }
 			</Button>
-		</li>
+		</MenuItem>
 	);
 };
 
diff --git a/packages/components/src/navigation/menu.js b/packages/components/src/navigation/menu.js
index d5a62018f9a5f..de6385442c409 100644
--- a/packages/components/src/navigation/menu.js
+++ b/packages/components/src/navigation/menu.js
@@ -1,5 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import { Menu } from './styles/navigation-styles';
+
 const NavigationMenu = ( { children } ) => {
-	return <ul className="components-navigation__menu">{ children }</ul>;
+	return <Menu className="components-navigation__menu">{ children }</Menu>;
 };
 
 export default NavigationMenu;
diff --git a/packages/components/src/navigation/style.scss b/packages/components/src/navigation/style.scss
deleted file mode 100644
index df9ff20ed4f74..0000000000000
--- a/packages/components/src/navigation/style.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.components-navigation {
-	width: 272px;
-	padding: 35px 30px;
-}
-
-.components-navigation__back {
-	margin-bottom: 64px;
-}
-
-.components-navigation__title {
-	margin-bottom: 40px;
-}
-
-.components-navigation__menu {
-	display: flex;
-	flex-direction: column;
-}
-
-.components-navigation__menu-item {
-	display: flex;
-	justify-content: space-between;
-
-	&.is-active span {
-		border-bottom: 2px solid var(--wp-admin-theme-color);
-	}
-}
diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js
new file mode 100644
index 0000000000000..3258671a0c125
--- /dev/null
+++ b/packages/components/src/navigation/styles/navigation-styles.js
@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+
+const horizontalPadding = css`
+	padding-left: 30px;
+	padding-right: 30px;
+`;
+
+export const Root = styled.div`
+	width: 272px;
+	padding: 35px 0px;
+`;
+
+export const Menu = styled.ul`
+	padding: 0;
+	margin: 0 0 32px 0;
+	display: flex;
+	flex-direction: column;
+`;
+
+export const MenuItem = styled.li`
+	display: flex;
+	justify-content: space-between;
+	button {
+		width: 100%;
+		padding-top: 8px;
+		padding-bottom: 8px;
+		${ horizontalPadding }
+	}
+	&.is-active span {
+		border-bottom: 2px solid var( --wp-admin-theme-color );
+	}
+`;
diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index 3066b604428cc..36c406c3c7a41 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -29,7 +29,6 @@
 @import "./menu-item/style.scss";
 @import "./menu-items-choice/style.scss";
 @import "./modal/style.scss";
-@import "./navigation/style.scss";
 @import "./notice/style.scss";
 @import "./panel/style.scss";
 @import "./placeholder/style.scss";

From a4e718482703c2a1bd085c967ba3cab9fc9208c8 Mon Sep 17 00:00:00 2001
From: Joshua Flowers <joshuatf@gmail.com>
Date: Tue, 11 Aug 2020 17:31:20 -0400
Subject: [PATCH 2/5] Add spacing to navigation child items

---
 .../src/navigation/styles/navigation-styles.js      | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js
index 3258671a0c125..3e9d801a99ce8 100644
--- a/packages/components/src/navigation/styles/navigation-styles.js
+++ b/packages/components/src/navigation/styles/navigation-styles.js
@@ -1,17 +1,17 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 
-const horizontalPadding = css`
-	padding-left: 30px;
-	padding-right: 30px;
-`;
+const horizontalPadding = '30px';
 
 export const Root = styled.div`
 	width: 272px;
 	padding: 35px 0px;
+	> *:not( .components-navigation__menu ) {
+		margin-left: ${ horizontalPadding };
+		margin-right: ${ horizontalPadding };
+	}
 `;
 
 export const Menu = styled.ul`
@@ -28,7 +28,8 @@ export const MenuItem = styled.li`
 		width: 100%;
 		padding-top: 8px;
 		padding-bottom: 8px;
-		${ horizontalPadding }
+		padding-left: ${ horizontalPadding };
+		padding-right: ${ horizontalPadding };
 	}
 	&.is-active span {
 		border-bottom: 2px solid var( --wp-admin-theme-color );

From 9c1f426274d552d79e7299b0a8c5c43d82d8b46f Mon Sep 17 00:00:00 2001
From: Joshua Flowers <joshuatf@gmail.com>
Date: Wed, 12 Aug 2020 18:08:13 -0400
Subject: [PATCH 3/5] Add badge property and styles to navigation items

---
 .../components/src/navigation/menu-item.js    | 11 +++++----
 .../src/navigation/stories/index.js           |  2 ++
 .../navigation/styles/navigation-styles.js    | 23 ++++++++++++++++++-
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/navigation/menu-item.js b/packages/components/src/navigation/menu-item.js
index c40990f2dff22..5e718cd6dd335 100644
--- a/packages/components/src/navigation/menu-item.js
+++ b/packages/components/src/navigation/menu-item.js
@@ -12,11 +12,11 @@ import { Icon, chevronRight } from '@wordpress/icons';
  * Internal dependencies
  */
 import Button from '../button';
-import { MenuItem } from './styles/navigation-styles';
-import Text from '../text';
+import { Badge, MenuItem, MenuItemText } from './styles/navigation-styles';
 
 const NavigationMenuItem = ( props ) => {
 	const {
+		badge,
 		children,
 		hasChildren,
 		id,
@@ -40,9 +40,10 @@ const NavigationMenuItem = ( props ) => {
 	return (
 		<MenuItem className={ classes }>
 			<Button className={ classes } onClick={ handleClick }>
-				<Text variant="body.small">
-					<span>{ title }</span>
-				</Text>
+				<MenuItemText variant="body.small" as="span">
+					{ title }
+				</MenuItemText>
+				{ badge && <Badge>{ badge }</Badge> }
 				{ hasChildren ? <Icon icon={ chevronRight } /> : null }
 			</Button>
 		</MenuItem>
diff --git a/packages/components/src/navigation/stories/index.js b/packages/components/src/navigation/stories/index.js
index c18d0a6e7e2e7..afdd8ce43cc13 100644
--- a/packages/components/src/navigation/stories/index.js
+++ b/packages/components/src/navigation/stories/index.js
@@ -28,11 +28,13 @@ const data = [
 	{
 		title: 'Category',
 		id: 'item-3',
+		badge: '2',
 	},
 	{
 		title: 'Child 1',
 		id: 'child-1',
 		parent: 'item-3',
+		badge: '1',
 	},
 	{
 		title: 'Child 2',
diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js
index 3e9d801a99ce8..41b84eb31f78f 100644
--- a/packages/components/src/navigation/styles/navigation-styles.js
+++ b/packages/components/src/navigation/styles/navigation-styles.js
@@ -3,6 +3,12 @@
  */
 import styled from '@emotion/styled';
 
+/**
+ * Internal dependencies
+ */
+import { LIGHT_GRAY } from '../../utils/colors-values';
+import Text from '../../text';
+
 const horizontalPadding = '30px';
 
 export const Root = styled.div`
@@ -21,6 +27,10 @@ export const Menu = styled.ul`
 	flex-direction: column;
 `;
 
+export const MenuItemText = styled( Text )`
+	margin-right: auto;
+`;
+
 export const MenuItem = styled.li`
 	display: flex;
 	justify-content: space-between;
@@ -31,7 +41,18 @@ export const MenuItem = styled.li`
 		padding-left: ${ horizontalPadding };
 		padding-right: ${ horizontalPadding };
 	}
-	&.is-active span {
+	svg {
+		margin-left: 8px;
+	}
+	&.is-active ${ MenuItemText } {
 		border-bottom: 2px solid var( --wp-admin-theme-color );
 	}
 `;
+
+export const Badge = styled.span`
+	margin-left: 8px;
+	display: inline-flex;
+	padding: 4px 12px;
+	border-radius: 2px;
+	background-color: ${ LIGHT_GRAY[ 300 ] };
+`;

From e29fd51558c4bb0125d8092749ffb50ae79a2ccf Mon Sep 17 00:00:00 2001
From: Joshua Flowers <joshuatf@gmail.com>
Date: Mon, 17 Aug 2020 16:12:38 -0400
Subject: [PATCH 4/5] Update UI component naming

---
 packages/components/src/navigation/menu-item.js               | 4 ++--
 .../components/src/navigation/styles/navigation-styles.js     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/navigation/menu-item.js b/packages/components/src/navigation/menu-item.js
index 5e718cd6dd335..a620741b2a3ac 100644
--- a/packages/components/src/navigation/menu-item.js
+++ b/packages/components/src/navigation/menu-item.js
@@ -12,7 +12,7 @@ import { Icon, chevronRight } from '@wordpress/icons';
  * Internal dependencies
  */
 import Button from '../button';
-import { Badge, MenuItem, MenuItemText } from './styles/navigation-styles';
+import { BadgeUI, MenuItem, MenuItemText } from './styles/navigation-styles';
 
 const NavigationMenuItem = ( props ) => {
 	const {
@@ -43,7 +43,7 @@ const NavigationMenuItem = ( props ) => {
 				<MenuItemText variant="body.small" as="span">
 					{ title }
 				</MenuItemText>
-				{ badge && <Badge>{ badge }</Badge> }
+				{ badge && <BadgeUI>{ badge }</BadgeUI> }
 				{ hasChildren ? <Icon icon={ chevronRight } /> : null }
 			</Button>
 		</MenuItem>
diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js
index 41b84eb31f78f..6ff0df0b14189 100644
--- a/packages/components/src/navigation/styles/navigation-styles.js
+++ b/packages/components/src/navigation/styles/navigation-styles.js
@@ -49,7 +49,7 @@ export const MenuItem = styled.li`
 	}
 `;
 
-export const Badge = styled.span`
+export const BadgeUI = styled.span`
 	margin-left: 8px;
 	display: inline-flex;
 	padding: 4px 12px;

From fa1c1717d5bcc0cb4e89308d3fd22e94b75de746 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Tue, 18 Aug 2020 15:28:33 +1200
Subject: [PATCH 5/5] newLine

---
 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 e93f1f9d5b7df..12b8520cef26f 100644
--- a/packages/components/src/navigation/styles/navigation-styles.js
+++ b/packages/components/src/navigation/styles/navigation-styles.js
@@ -34,4 +34,4 @@ export const BadgeUI = styled.span`
 	padding: 4px 12px;
 	border-radius: 2px;
 	background-color: ${ LIGHT_GRAY[ 300 ] };
-`;
\ No newline at end of file
+`;