From 096dfdf86eeedf9ebdc1fcffeaabfa49958433ee Mon Sep 17 00:00:00 2001 From: Johan Persson Date: Tue, 24 Feb 2026 14:56:57 +0100 Subject: [PATCH] Migrate Link component from useStyles to useDefinition Fix pre-existing variant default from 'body' to 'body-medium' to match actual CSS selectors. Add missing 'info' color to docs-ui props definition. Signed-off-by: Johan Persson --- .../app/components/link/props-definition.tsx | 4 +- packages/ui/src/components/Link/Link.tsx | 45 +++---------------- packages/ui/src/components/Link/definition.ts | 31 +++++++------ packages/ui/src/components/Link/index.ts | 2 +- packages/ui/src/components/Link/types.ts | 14 +++--- 5 files changed, 33 insertions(+), 63 deletions(-) diff --git a/docs-ui/src/app/components/link/props-definition.tsx b/docs-ui/src/app/components/link/props-definition.tsx index f0aa95114e..be805d4540 100644 --- a/docs-ui/src/app/components/link/props-definition.tsx +++ b/docs-ui/src/app/components/link/props-definition.tsx @@ -38,7 +38,7 @@ export const linkPropDefs: Record = { 'body-small', 'body-x-small', ], - default: 'body', + default: 'body-medium', responsive: true, description: 'Typography style. Title variants for headings, body for paragraph text.', @@ -56,7 +56,7 @@ export const linkPropDefs: Record = { }, color: { type: 'enum', - values: ['primary', 'secondary', 'danger', 'warning', 'success'], + values: ['primary', 'secondary', 'danger', 'warning', 'success', 'info'], default: 'primary', responsive: true, description: diff --git a/packages/ui/src/components/Link/Link.tsx b/packages/ui/src/components/Link/Link.tsx index efdca26750..500bbc4f59 100644 --- a/packages/ui/src/components/Link/Link.tsx +++ b/packages/ui/src/components/Link/Link.tsx @@ -16,52 +16,22 @@ import { forwardRef, useRef } from 'react'; import { useLink } from 'react-aria'; -import clsx from 'clsx'; -import { useStyles } from '../../hooks/useStyles'; -import { LinkDefinition } from './definition'; import type { LinkProps } from './types'; +import { useDefinition } from '../../hooks/useDefinition'; +import { LinkDefinition } from './definition'; import { InternalLinkProvider } from '../InternalLinkProvider'; -import styles from './Link.module.css'; const LinkInternal = forwardRef((props, ref) => { - const { classNames, dataAttributes, cleanedProps } = useStyles( + const { ownProps, restProps, dataAttributes } = useDefinition( LinkDefinition, - { - variant: 'body', - weight: 'regular', - color: 'primary', - ...props, - }, + props, ); - - const { - className, - href, - title, - children, - onPress, - variant, - weight, - color, - truncate, - standalone, - slot, - ...restProps - } = cleanedProps; + const { classes, title, children } = ownProps; const internalRef = useRef(null); const linkRef = (ref || internalRef) as React.RefObject; - // Use useLink hook to get link props - // For internal links, this will use the RouterProvider's navigate function - const { linkProps } = useLink( - { - href, - onPress, - ...restProps, - }, - linkRef, - ); + const { linkProps } = useLink(restProps, linkRef); return ( ((props, ref) => { {...dataAttributes} {...(restProps as React.AnchorHTMLAttributes)} ref={linkRef} - href={href} title={title} - className={clsx(classNames.root, styles[classNames.root], className)} + className={classes.root} > {children} diff --git a/packages/ui/src/components/Link/definition.ts b/packages/ui/src/components/Link/definition.ts index 58b780c812..c0814c8a9a 100644 --- a/packages/ui/src/components/Link/definition.ts +++ b/packages/ui/src/components/Link/definition.ts @@ -14,28 +14,27 @@ * limitations under the License. */ -import type { ComponentDefinition } from '../../types'; +import { defineComponent } from '../../hooks/useDefinition'; +import type { LinkOwnProps } from './types'; +import styles from './Link.module.css'; /** * Component definition for Link * @public */ -export const LinkDefinition = { +export const LinkDefinition = defineComponent()({ + styles, classNames: { root: 'bui-Link', }, - dataAttributes: { - variant: ['subtitle', 'body', 'caption', 'label'] as const, - weight: ['regular', 'bold'] as const, - color: [ - 'primary', - 'secondary', - 'danger', - 'warning', - 'success', - 'info', - ] as const, - truncate: [true, false] as const, - standalone: [true, false] as const, + propDefs: { + variant: { dataAttribute: true, default: 'body-medium' }, + weight: { dataAttribute: true, default: 'regular' }, + color: { dataAttribute: true, default: 'primary' }, + truncate: { dataAttribute: true }, + standalone: { dataAttribute: true }, + title: {}, + children: {}, + className: {}, }, -} as const satisfies ComponentDefinition; +}); diff --git a/packages/ui/src/components/Link/index.ts b/packages/ui/src/components/Link/index.ts index 7c17668029..f7d335bd52 100644 --- a/packages/ui/src/components/Link/index.ts +++ b/packages/ui/src/components/Link/index.ts @@ -16,4 +16,4 @@ export { Link } from './Link'; export { LinkDefinition } from './definition'; -export type { LinkProps } from './types'; +export type { LinkOwnProps, LinkProps } from './types'; diff --git a/packages/ui/src/components/Link/types.ts b/packages/ui/src/components/Link/types.ts index 9259a8a1d7..a2f8163e79 100644 --- a/packages/ui/src/components/Link/types.ts +++ b/packages/ui/src/components/Link/types.ts @@ -25,7 +25,7 @@ import type { LinkProps as AriaLinkProps } from 'react-aria-components'; import type { ReactNode } from 'react'; /** @public */ -export interface LinkProps extends AriaLinkProps { +export type LinkOwnProps = { variant?: TextVariants | Partial>; weight?: TextWeights | Partial>; color?: @@ -34,10 +34,12 @@ export interface LinkProps extends AriaLinkProps { | Partial>; truncate?: boolean; standalone?: boolean; - - // This is used to set the title attribute on the link title?: string; - - // This is used to set the children of the link children?: ReactNode; -} + className?: string; +}; + +/** @public */ +export interface LinkProps + extends Omit, + LinkOwnProps {}