Navigation Component: Add isText prop to NavigationItem (#27003)

WordPress · Nov 19, 2020 · ec3da35 · ec3da35
1 parent 5040f3d
commit ec3da35
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 48 deletions.
diff --git a/packages/components/src/navigation/README.md b/packages/components/src/navigation/README.md
@@ -222,6 +222,14 @@ Indicates whether this item should be hidden if the menu specified in `navigateT
 
 A callback to handle clicking on a menu item.
 
+### `isText`
+
+-   Type: `boolean`
+-   Required: No
+-   Default: false
+
+If set to true then the menu item will only act as a text-only item rather than a button.
+
 ### `title`
 
 -   Type: `string`

diff --git a/packages/components/src/navigation/item/base-content.js b/packages/components/src/navigation/item/base-content.js
@@ -0,0 +1,34 @@
+/**
+ * Internal dependencies
+ */
+import { useRTL } from '../../utils';
+import { ItemBadgeUI, ItemTitleUI } from '../styles/navigation-styles';
+
+export default function NavigationItemBaseContent( props ) {
+	const { badge, title } = props;
+	const isRTL = useRTL();
+
+	return (
+		<>
+			{ title && (
+				<ItemTitleUI
+					className="components-navigation__item-title"
+					variant="body.small"
+					isRTL={ isRTL }
+					as="span"
+				>
+					{ title }
+				</ItemTitleUI>
+			) }
+
+			{ badge && (
+				<ItemBadgeUI
+					className="components-navigation__item-badge"
+					isRTL={ isRTL }
+				>
+					{ badge }
+				</ItemBadgeUI>
+			) }
+		</>
+	);
+}
diff --git a/packages/components/src/navigation/item/base.js b/packages/components/src/navigation/item/base.js
@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { uniqueId } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useNavigationContext } from '../context';
+import { useNavigationTreeItem } from './use-navigation-tree-item';
+import { ItemBaseUI } from '../styles/navigation-styles';
+
+export default function NavigationItemBase( props ) {
+	const { children, className, ...restProps } = props;
+
+	const [ itemId ] = useState( uniqueId( 'item-' ) );
+
+	useNavigationTreeItem( itemId, props );
+	const { navigationTree } = useNavigationContext();
+
+	if ( ! navigationTree.getItem( itemId )?._isVisible ) {
+		return null;
+	}
+
+	const classes = classnames( 'components-navigation__item', className );
+
+	return (
+		<ItemBaseUI className={ classes } { ...restProps }>
+			{ children }
+		</ItemBaseUI>
+	);
+}
diff --git a/packages/components/src/navigation/item/index.js b/packages/components/src/navigation/item/index.js
@@ -2,22 +2,22 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop, uniqueId } from 'lodash';
+import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
 import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import Button from '../../button';
 import { useNavigationContext } from '../context';
-import { useNavigationTreeItem } from './use-navigation-tree-item';
-import { ItemBadgeUI, ItemTitleUI, ItemUI } from '../styles/navigation-styles';
+import { ItemUI } from '../styles/navigation-styles';
 import { useRTL } from '../../utils/rtl';
+import NavigationItemBaseContent from './base-content';
+import NavigationItemBase from './base';
 
 export default function NavigationItem( props ) {
 	const {
@@ -30,35 +30,29 @@ export default function NavigationItem( props ) {
 		onClick = noop,
 		title,
 		hideIfTargetMenuEmpty,
+		isText,
 		...restProps
 	} = props;
 
-	const [ itemId ] = useState( uniqueId( 'item-' ) );
-
-	useNavigationTreeItem( itemId, props );
 	const {
 		activeItem,
-		navigationTree,
 		setActiveMenu,
+		navigationTree: { isMenuEmpty },
 	} = useNavigationContext();
 	const isRTL = useRTL();
 
-	if ( ! navigationTree.getItem( itemId )?._isVisible ) {
-		return null;
-	}
-
 	// If hideIfTargetMenuEmpty prop is true
 	// And the menu we are supposed to navigate to
 	// Is marked as empty, then we skip rendering the item
 	if (
 		hideIfTargetMenuEmpty &&
 		navigateToMenu &&
-		navigationTree.isMenuEmpty( navigateToMenu )
+		isMenuEmpty( navigateToMenu )
 	) {
 		return null;
 	}
 
-	const classes = classnames( 'components-navigation__item', className, {
+	const classes = classnames( className, {
 		'is-active': item && activeItem === item,
 	} );
 
@@ -70,34 +64,22 @@ export default function NavigationItem( props ) {
 		onClick( event );
 	};
 	const icon = isRTL ? chevronLeft : chevronRight;
+	const baseProps = isText
+		? restProps
+		: { as: Button, href, onClick: onItemClick, ...restProps };
 
 	return (
-		<ItemUI className={ classes }>
+		<NavigationItemBase { ...props } className={ classes }>
 			{ children || (
-				<Button href={ href } onClick={ onItemClick } { ...restProps }>
-					{ title && (
-						<ItemTitleUI
-							className="components-navigation__item-title"
-							variant="body.small"
-							isRTL={ isRTL }
-							as="span"
-						>
-							{ title }
-						</ItemTitleUI>
-					) }
-
-					{ badge && (
-						<ItemBadgeUI
-							className="components-navigation__item-badge"
-							isRTL={ isRTL }
-						>
-							{ badge }
-						</ItemBadgeUI>
-					) }
+				<ItemUI { ...baseProps }>
+					<NavigationItemBaseContent
+						title={ title }
+						badge={ badge }
+					/>
 
 					{ navigateToMenu && <Icon icon={ icon } /> }
-				</Button>
+				</ItemUI>
 			) }
-		</ItemUI>
+		</NavigationItemBase>
 	);
 }
diff --git a/packages/components/src/navigation/stories/more-examples.js b/packages/components/src/navigation/stories/more-examples.js
@@ -79,6 +79,19 @@ export function MoreExamplesStory() {
 						</a>
 					</NavigationItem>
 				</NavigationGroup>
+				<NavigationGroup title="Text only items">
+					<NavigationItem
+						item="item-text-only"
+						title="This is just text, doesn't have any functionality"
+						isText
+					/>
+					<NavigationItem
+						item="item-text-only-with-badge"
+						title="Text with badge"
+						badge="2"
+						isText
+					/>
+				</NavigationGroup>
 			</NavigationMenu>
 
 			<NavigationMenu

diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js
@@ -147,23 +147,13 @@ export const GroupTitleUI = styled( Text )`
 	color: ${ G2.gray[ 100 ] };
 `;
 
-export const ItemUI = styled.li`
+export const ItemBaseUI = styled.li`
 	border-radius: 2px;
 	color: ${ G2.lightGray.ui };
 	margin-bottom: 0;
 
 	button,
 	a {
-		height: auto;
-		min-height: 32px;
-		margin: 0;
-		font-weight: 400;
-		line-height: 20px;
-		padding-left: ${ space( 2 ) };
-		padding-right: ${ space( 2 ) };
-		width: 100%;
-		color: ${ G2.lightGray.ui };
-
 		&:hover,
 		&:focus:not( [aria-disabled='true'] ):active,
 		&:active:not( [aria-disabled='true'] ):active {
@@ -186,6 +176,19 @@ export const ItemUI = styled.li`
 	}
 `;
 
+export const ItemUI = styled.div`
+	display: flex;
+	align-items: center;
+	height: auto;
+	min-height: 32px;
+	margin: 0;
+	padding: ${ space( 0.75 ) } ${ space( 2 ) };
+	font-weight: 400;
+	line-height: 20px;
+	width: 100%;
+	color: ${ G2.lightGray.ui };
+`;
+
 export const ItemBadgeUI = styled.span`
 	margin-left: ${ ( props ) => ( props.isRTL ? '0' : space( 1 ) ) };
 	margin-right: ${ ( props ) => ( props.isRTL ? space( 1 ) : '0' ) };