Use css-in-js for styling in navigation component (#24522)

* Migrate styles to css-in-js

* Add spacing to navigation child items

* Remove opinionated styling

* Rename styling components

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>
 	);
 };
 

packages/components/src/navigation/menu-item.js

@@ -12,6 +12,7 @@ import { Icon, chevronRight } from '@wordpress/icons';
  * Internal dependencies
  */
 import Button from '../button';
+import { MenuItemUI } from './styles/navigation-styles';
 import Text from '../text';
 
 const NavigationMenuItem = ( props ) => {
@@ -37,14 +38,14 @@ const NavigationMenuItem = ( props ) => {
 	};
 
 	return (
-		<li className={ classes }>
+		<MenuItemUI className={ classes }>
 			<Button className={ classes } onClick={ handleClick }>
 				<Text variant="body.small">
 					<span>{ title }</span>
 				</Text>
 				{ hasChildren ? <Icon icon={ chevronRight } /> : null }
 			</Button>
-		</li>
+		</MenuItemUI>
 	);
 };
 

packages/components/src/navigation/menu.js

@@ -1,5 +1,12 @@
+/**
+ * Internal dependencies
+ */
+import { MenuUI } from './styles/navigation-styles';
+
 const NavigationMenu = ( { children } ) => {
-	return <ul className="components-navigation__menu">{ children }</ul>;
+	return (
+		<MenuUI className="components-navigation__menu">{ children }</MenuUI>
+	);
 };
 
 export default NavigationMenu;

packages/components/src/navigation/styles/navigation-styles.js

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+export const Root = styled.div`
+	width: 100%;
+`;
+
+export const MenuUI = styled.ul`
+	padding: 0;
+	margin: 0 0 32px 0;
+	display: flex;
+	flex-direction: column;
+`;
+
+export const MenuItemUI = styled.li`
+	button {
+		width: 100%;
+	}
+	&.is-active span {
+		border-bottom: 2px solid var( --wp-admin-theme-color );
+	}
+`;

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";