feat(SideNavLink): wrap the component with forwardRef (#7193)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: skateman

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -6986,6 +6986,7 @@ Map {
     },
   },
   "SideNavLink" => Object {
+    "$$typeof": Symbol(react.forward_ref),
     "defaultProps": Object {
       "element": "a",
       "large": false,
@@ -7021,6 +7022,7 @@ Map {
         "type": "oneOfType",
       },
     },
+    "render": [Function],
   },
   "SideNavLinkText" => Object {
     "propTypes": Object {

packages/react/src/components/UIShell/SideNavLink.js

@@ -16,16 +16,19 @@ import SideNavLinkText from './SideNavLinkText';
 
 const { prefix } = settings;
 
-const SideNavLink = ({
-  className: customClassName,
-  children,
-  renderIcon: IconElement,
-  isActive,
-  large,
-  // eslint-disable-next-line no-unused-vars
-  isSideNavExpanded,
-  ...rest
-}) => {
+const SideNavLink = React.forwardRef(function SideNavLink(
+  {
+    className: customClassName,
+    children,
+    renderIcon: IconElement,
+    isActive,
+    large,
+    // eslint-disable-next-line no-unused-vars
+    isSideNavExpanded,
+    ...rest
+  },
+  ref
+) {
   const className = cx({
     [`${prefix}--side-nav__link`]: true,
     [`${prefix}--side-nav__link--current`]: isActive,
@@ -34,7 +37,7 @@ const SideNavLink = ({
 
   return (
     <SideNavItem large={large}>
-      <Link {...rest} className={className}>
+      <Link {...rest} className={className} ref={ref}>
         {IconElement && (
           <SideNavIcon small>
             <IconElement />
@@ -44,7 +47,7 @@ const SideNavLink = ({
       </Link>
     </SideNavItem>
   );
-};
+});
 
 SideNavLink.propTypes = {
   ...LinkPropTypes,

packages/react/src/components/UIShell/__tests__/__snapshots__/SideNav-test.js.snap

@@ -20,7 +20,7 @@ exports[`SideNav should render 1`] = `
     onBlur={[Function]}
     onFocus={[Function]}
   >
-    <SideNavLink
+    <ForwardRef(SideNavLink)
       element="a"
       href="/"
       large={false}
@@ -51,7 +51,7 @@ exports[`SideNav should render 1`] = `
           </Link>
         </li>
       </SideNavItem>
-    </SideNavLink>
+    </ForwardRef(SideNavLink)>
   </nav>
 </ForwardRef(SideNav)>
 `;

packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavLink-test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SideNavLink should render 1`] = `
-<SideNavLink
+<ForwardRef(SideNavLink)
   className="custom-classname"
   element="a"
   icon={
@@ -46,11 +46,11 @@ exports[`SideNavLink should render 1`] = `
       </Link>
     </li>
   </SideNavItem>
-</SideNavLink>
+</ForwardRef(SideNavLink)>
 `;
 
 exports[`SideNavLink should render 2`] = `
-<SideNavLink
+<ForwardRef(SideNavLink)
   className="custom-classname"
   element="a"
   icon={
@@ -95,5 +95,5 @@ exports[`SideNavLink should render 2`] = `
       </Link>
     </li>
   </SideNavItem>
-</SideNavLink>
+</ForwardRef(SideNavLink)>
 `;