Add icons to navigation sidebar items (#36893)

* Add icons to navigation sidebar items * Add storybook example * Move icon into main item file and add margin * Target first child * Use first-of-type * Switch to using the sybmolFilled icon for template parts * Add another wrapper to replace fragile class
WordPress · Nov 26, 2021 · 14d2aa0 · 14d2aa0
1 parent 63bd2bf
commit 14d2aa0
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git 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';
 
@@ -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
@@ -72,12 +73,18 @@ export default function NavigationItem( props ) {
 		<NavigationItemBase { ...baseProps } className={ classes }>
 			{ children || (
 				<ItemUI { ...itemProps }>
+					{ icon && (
+						<ItemIconUI>
+							<Icon icon={ icon } />
+						</ItemIconUI>
+					) }
+
 					<NavigationItemBaseContent
 						title={ title }
 						badge={ badge }
 					/>
 
-					{ navigateToMenu && <Icon icon={ icon } /> }
+					{ navigateToMenu && <Icon icon={ navigationIcon } /> }
 				</ItemUI>
 			) }
 		</NavigationItemBase>

diff --git 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"

diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js
@@ -184,6 +184,11 @@ export const ItemUI = styled.div`
 	opacity: 0.7;
 `;
 
+export const ItemIconUI = styled.span`
+	display: flex;
+	margin-right: ${ space( 2 ) };
+`;
+
 export const ItemBadgeUI = styled.span`
 	margin-left: ${ () => ( isRTL() ? '0' : space( 2 ) ) };
 	margin-right: ${ () => ( isRTL() ? space( 2 ) : '0' ) };

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
@@ -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,
+	symbolFilled as templatePartIcon,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -88,6 +93,7 @@ const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
 						<NavigationMenu>
 							<NavigationGroup title={ __( 'Editor' ) }>
 								<NavigationItem
+									icon={ siteIcon }
 									title={ __( 'Site' ) }
 									item={ SITE_EDITOR_KEY }
 									href={ addQueryArgs( window.location.href, {
@@ -96,6 +102,7 @@ const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
 									} ) }
 								/>
 								<NavigationItem
+									icon={ templateIcon }
 									title={ __( 'Templates' ) }
 									item="wp_template"
 									href={ addQueryArgs( window.location.href, {
@@ -104,6 +111,7 @@ const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
 									} ) }
 								/>
 								<NavigationItem
+									icon={ templatePartIcon }
 									title={ __( 'Template Parts' ) }
 									item="wp_template_part"
 									href={ addQueryArgs( window.location.href, {