Updates

.changeset/silent-dots-run.md

@@ -2,4 +2,4 @@
 "@salt-ds/core": minor
 ---
 
-Added `render` prop to `Link`.
+Added `render` prop to `Link`. The `render` prop enables the substitution of the default anchor tag with an alternate link, such as React Router, facilitating integration with routing libraries.

packages/core/src/link/Link.tsx

@@ -2,11 +2,15 @@ import type { IconProps } from "@salt-ds/icons";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { clsx } from "clsx";
-import { type ComponentType, type ReactElement, forwardRef } from "react";
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentType,
+  type ReactElement,
+  forwardRef,
+} from "react";
 import { useIcon } from "../semantic-icon-provider";
-import type { TextProps } from "../text";
-import { makePrefixer } from "../utils";
-import type { RenderPropsType } from "../utils";
+import { Text, type TextProps } from "../text";
+import { type RenderPropsType, makePrefixer } from "../utils";
 import linkCss from "./Link.css";
 import { LinkAction } from "./LinkAction";
 
@@ -18,10 +22,12 @@ const withBaseName = makePrefixer("saltLink");
  * @example
  * <LinkExample to="#link">Action</LinkExample>
  */
-export interface LinkProps extends Omit<TextProps<"a">, "as" | "disabled"> {
+export interface LinkProps
+  extends Omit<ComponentPropsWithoutRef<"a">, "color">,
+    Pick<TextProps<"a">, "maxRows" | "styleAs" | "color" | "variant"> {
   IconComponent?: ComponentType<IconProps> | null;
   /**
-   * Render prop to enable customisation of link element.
+   * Render prop to enable customisation of anchor element.
    */
   render?: RenderPropsType["render"];
 }
@@ -36,6 +42,8 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
     variant,
     target = "_self",
     render,
+    styleAs,
+    maxRows,
     ...rest
   },
   ref,
@@ -54,16 +62,16 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
 
   return (
     <LinkAction
-      as="a"
       className={clsx(withBaseName(), className)}
       href={href}
       ref={ref}
       target={target}
-      color={color}
       render={render}
       {...rest}
     >
-      {children}
+      <Text as="span" color={color} styleAs={styleAs} maxRows={maxRows}>
+        {children}
+      </Text>
       {target === "_blank" && (
         <>
           {LinkIconComponent && (

packages/core/src/link/LinkAction.tsx

@@ -1,15 +1,8 @@
 import type { ComponentPropsWithoutRef } from "react";
-import { Text } from "../text";
 import { renderProps } from "../utils";
 
 interface LinkActionProps extends ComponentPropsWithoutRef<any> {}
 
 export function LinkAction(props: LinkActionProps) {
-  const { render, ...rest } = props;
-
-  if (render) {
-    return renderProps("a", props);
-  }
-
-  return <Text {...rest} />;
+  return renderProps("a", props);
 }