feat(@clayui/core): LPD-40160 Add floating menubar action button

Author: pat270

packages/clay-core/src/nav/Link.tsx

@@ -52,44 +52,6 @@ export const Link = React.forwardRef<
 		},
 		ref
 	) => {
-		if (showIcon) {
-			return (
-				<div
-					{...(otherProps as Omit<
-						IProps,
-						keyof React.AnchorHTMLAttributes<HTMLAnchorElement>
-					> &
-						React.HTMLAttributes<HTMLDivElement>)}
-					className={classNames('nav-link', className, {
-						active,
-						['collapse-icon']: showIcon,
-						collapsed,
-						disabled,
-					})}
-					ref={ref as React.Ref<HTMLDivElement>}
-				>
-					{children}
-					<span className="collapse-icon-closed">
-						<Icon
-							focusable="false"
-							role="presentation"
-							spritemap={spritemap}
-							symbol="angle-right-small"
-						/>
-					</span>
-
-					<span className="collapse-icon-open">
-						<Icon
-							focusable="false"
-							role="presentation"
-							spritemap={spritemap}
-							symbol="angle-down-small"
-						/>
-					</span>
-				</div>
-			);
-		}
-
 		return (
 			<LinkOrButton
 				{...otherProps}
@@ -104,6 +66,28 @@ export const Link = React.forwardRef<
 				ref={ref}
 			>
 				{children}
+
+				{showIcon && (
+					<>
+						<span className="collapse-icon-closed">
+							<Icon
+								focusable="false"
+								role="presentation"
+								spritemap={spritemap}
+								symbol="angle-right-small"
+							/>
+						</span>
+
+						<span className="collapse-icon-open">
+							<Icon
+								focusable="false"
+								role="presentation"
+								spritemap={spritemap}
+								symbol="angle-down-small"
+							/>
+						</span>
+					</>
+				)}
 			</LinkOrButton>
 		);
 	}

packages/clay-core/src/vertical-nav/Item.tsx

@@ -8,6 +8,8 @@ import {Keys, setElementFullHeight, useId} from '@clayui/shared';
 import React, {useContext, useMemo, useRef, useState} from 'react';
 import {CSSTransition} from 'react-transition-group';
 
+import classNames from 'classnames';
+import {ClayButtonWithIcon} from '@clayui/button';
 import {Collection} from '../collection';
 import {Nav} from '../nav';
 import {useVertical} from './context';
@@ -41,6 +43,14 @@ interface IProps<T> extends React.HTMLAttributes<HTMLLIElement> {
 	 */
 	keyValue?: React.Key;
 
+	/**
+	 * Properties to pass to the menubar action
+	 */
+	menubarAction?: {
+		ariaLabel: string;
+		title: string;
+	};
+
 	/**
 	 * Internal property.
 	 * @ignore
@@ -89,6 +99,7 @@ export function Item<T extends Record<string, any>>({
 	initialExpanded,
 	items,
 	keyValue,
+	menubarAction,
 	onClick,
 	textValue: _textValue,
 	...otherProps
@@ -137,6 +148,7 @@ export function Item<T extends Record<string, any>>({
 				aria-controls={items ? ariaControlsId : undefined}
 				aria-current={active ? ariaCurrent ?? undefined : undefined}
 				aria-expanded={items ? isExpanded : undefined}
+				className={menubarAction ? 'menubar-action-1' : ''}
 				collapsed={!isExpanded}
 				href={href}
 				onClick={(event) => {
@@ -204,6 +216,18 @@ export function Item<T extends Record<string, any>>({
 				{children}
 			</Nav.Link>
 
+			{menubarAction && (
+				<ClayButtonWithIcon
+					aria-label={menubarAction.ariaLabel}
+					className="menubar-action"
+					displayType="secondary"
+					monospaced
+					size="xs"
+					symbol="plus"
+					title={menubarAction.title}
+				/>
+			)}
+
 			{items && (
 				<CSSTransition
 					className={isExpanded ? undefined : 'collapse'}