fix: forwardRef from SideNavigationLink component

[aaryanporwal]

Done

• Fixes forwardRef error #1122
• WD-14675

Percy steps

• No visual changes expected

[webteam-app]

Demo

Jenkins

demos.haus

[huwshimi]

It looks like most of the changes need to be reverted from the previous PR: https://github.com/canonical/react-components/pull/1118/files as removing the generic types has broken then ability to handle props when passing component.

For example when using this with a Link from React Router it would give an error for the to prop here as it can't infer the props of the Link component:

<SideNavigationLink label="docs" component={Link} to="/docs" />

Unfortunately forwardRef does not support components with generic types, so instead you have to manually pass a ref. We do that in a few places e.g.

react-components/src/components/Panel/Panel.tsx

Line 136 in f60d6bc

forwardRef?: React.Ref<HTMLDivElement> | null;

This issue could be caught in the future if we change this test:

react-components/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.test.tsx

Line 34 in f60d6bc

it("can use a custom link component", () => {

To:

it("can use a custom link component", () => {
  const Link = ({ to }: { to: () => void }) => (
    <button onClick={to}>link</button>
  );
  const label = "Test content";
  render(<SideNavigationLink label={label} component={Link} to={jest.fn()} />);
  expect(screen.getByRole("button", { name: label })).toHaveClass(
    "p-side-navigation__link",
  );
});

[aaryanporwal]

Unfortunately forwardRef does not support components with generic types, so instead you have to manually pass a ref. We do that in a few places e.g.

...

Thank you Huw for pointing that out! I've updated the code and the test like you suggested. Can you please take a look again?

[huwshimi]

This change also needs to be reverted https://github.com/canonical/react-components/pull/1118/files#diff-011b080bc51b47c868f250b3a34619b5f41e4c16c8e39a6636ccc719b6da8bd6L40

[huwshimi]

Thanks for this fix!

[github-actions]

🎉 This PR is included in version 1.2.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀