Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: added href property to sideNavMenuItem #16113

Merged
merged 4 commits into from Apr 4, 2024
Merged

fix: added href property to sideNavMenuItem #16113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
734c7eb
fix: added href property to sideNavMenuItem
riddhybansal Apr 2, 2024
7af99e0
fix: updated snapshots
riddhybansal Apr 3, 2024
fe09e76
Merge branch 'main' into Adding_href_property_to_sidenav
tay1orjones Apr 3, 2024
ef6197e
chore: update snapshots
andreancardona Apr 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Open in desktop
Expand Up @@ -7084,6 +7084,9 @@ Map {
"className": Object {
"type": "string",
},
"href": Object {
"type": "string",
},
"isActive": Object {
"type": "bool",
},
Expand Down
24 changes: 22 additions & 2 deletions packages/react/src/components/UIShell/SideNavMenuItem.tsx
View file
Open in desktop
Expand Up @@ -29,12 +29,23 @@ interface SideNavMenuItemProps extends HTMLAttributes<HTMLElement> {
* `aria-current="page"`, as well.
*/
isActive?: boolean;

/**
* Optionally provide an href for the underlying li`
*/
href?: string;
}

const SideNavMenuItem = React.forwardRef<HTMLElement, SideNavMenuItemProps>(
function SideNavMenuItem(props, ref: ForwardedRef<HTMLElement>) {
const prefix = usePrefix();
const { children, className: customClassName, isActive, ...rest } = props;
const {
children,
className: customClassName,
isActive,
href,
...rest
} = props;
const className = cx(`${prefix}--side-nav__menu-item`, customClassName);
const linkClassName = cx({
[`${prefix}--side-nav__link`]: true,
Expand All @@ -43,7 +54,11 @@ const SideNavMenuItem = React.forwardRef<HTMLElement, SideNavMenuItemProps>(

return (
<li className={className}>
<Link {...rest} className={linkClassName} ref={ref as Ref<ElementType>}>
<Link
href={href}
{...rest}
className={linkClassName}
ref={ref as Ref<ElementType>}>
<SideNavLinkText>{children}</SideNavLinkText>
</Link>
</li>
Expand All @@ -63,6 +78,11 @@ SideNavMenuItem.propTypes = {
*/
className: PropTypes.string,

/**
* Optionally provide an href for the underlying li`
*/
href: PropTypes.string,

/**
* Optionally specify whether the link is "active". An active link is one that
* has an href that is the same as the current page. Can also pass in
Expand Down