[Feature Request]: Extend Link component to accept as prop

[sjbeatle]

The problem

Users might want to integrate with an internal routing package (react-router-dom).

Full Slack discussion

The solution

Extend the base Link component to accept an as property, similar to how it is currently done by the UI Shell's Link component; Or, expose the UI Shell Link for external use.

Examples

No response

Application/PAL

No response

Business priority

High Priority = pressing release

Available extra resources

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[tay1orjones]

Related: #14252

I don't have the full context as to why this hasn't been supported so far. I suppose what could've led to this is Carbon initially had just Link, and then later added the different implementation in UIShell Link that supports as like you mention.

It may not have ever been reconsidered if the base Link should also have as.

I'm not opposed to as on Link but I'm not sure how/if we could handle href. It's only valid on an anchor tag, so it would be a bit of a footgun being able to do as='div' with an href, for instance. The component can internally guard against placing an href on a non-anchor tag element but we might want to extend the proptypes and typescript interface to be conditional. If the element is not an anchor tag, the href should not be specified.

[sjbeatle]

I have worked on a Polymorphic Component before and this is what I landed on:

import React from 'react';

type TextOwnProps<E extends React.ElementType> = {
  as?: E;
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
};

export type TextProps<E extends React.ElementType> = React.PropsWithChildren<TextOwnProps<E>> &
  Omit<React.ComponentPropsWithoutRef<E>, keyof TextOwnProps<E>>;

export const Text = <E extends React.ElementType = 'div'>({
  as = undefined,
  size,
  children,
}: TextProps<E>) => {
  const Component = as || 'div';

  return <Component className={size}>{children}</Component>;
};

I don't know how translatable or helpful that might be to the effort, but with the above, I get the correct prop types and intellisense:

React Router Link

Anchor tag

---

I'm not sure if that helps at all 😅

[Yaren-IT]

Thank you for your work on Carbon Project! It's great to see the project evolving.

Perhaps this consideration could prove pertinent during your component's redevelopment.
Next.js uses a specific Url type for the href property, defined as string | UrlObject, and imported like this:

import { UrlObject } from 'url';
type Url = string | UrlObject;

For reference, you can find the specific line in Next.js that defines the Url type here: Next.js Url Type.

I noticed that in the current implementation of Carbon's Link.tsx Component, the href type is defined as string | undefined. To make Carbon more compatible with Next.js, it would be helpful to update this to use the Url type.

It's worth noting that unlike Next.js's Link, the one from router-dom has a different type for its to property, which is string | Partial<Path>. You can find this type definition in the router-dom package here: router-dom Link Type.

Please consider this suggestion for improved compatibility and a smoother experience for both Next.js and router-dom users.