Add nav badges (#24528)

* Migrate styles to css-in-js * Add spacing to navigation child items * Add badge property and styles to navigation items * Update UI component naming * newLine Co-authored-by: Paul Sealock <psealock@gmail.com>
WordPress · Aug 31, 2020 · dbd96d6 · dbd96d6
1 parent 63736b4
commit dbd96d6
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git a/packages/components/src/navigation/menu-item.js b/packages/components/src/navigation/menu-item.js
@@ -12,11 +12,12 @@ import { Icon, chevronRight } from '@wordpress/icons';
  * Internal dependencies
  */
 import Button from '../button';
-import { MenuItemUI } from './styles/navigation-styles';
+import { MenuItemUI, BadgeUI } from './styles/navigation-styles';
 import Text from '../text';
 
 const NavigationMenuItem = ( props ) => {
 	const {
+		badge,
 		children,
 		hasChildren,
 		id,
@@ -43,6 +44,7 @@ const NavigationMenuItem = ( props ) => {
 				<Text variant="body.small">
 					<span>{ title }</span>
 				</Text>
+				{ badge && <BadgeUI>{ badge }</BadgeUI> }
 				{ hasChildren ? <Icon icon={ chevronRight } /> : null }
 			</Button>
 		</MenuItemUI>

diff --git 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
@@ -3,6 +3,11 @@
  */
 import styled from '@emotion/styled';
 
+/**
+ * Internal dependencies
+ */
+import { LIGHT_GRAY } from '../../utils/colors-values';
+
 export const Root = styled.div`
 	width: 100%;
 `;
@@ -22,3 +27,11 @@ export const MenuItemUI = styled.li`
 		border-bottom: 2px solid var( --wp-admin-theme-color );
 	}
 `;
+
+export const BadgeUI = styled.span`
+	margin-left: 8px;
+	display: inline-flex;
+	padding: 4px 12px;
+	border-radius: 2px;
+	background-color: ${ LIGHT_GRAY[ 300 ] };
+`;