From 4690c00826f61d172f6049bddc4ebd610579be43 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 14 Jul 2025 14:18:35 +0200 Subject: [PATCH] First pass at moving Link to React Aria Signed-off-by: Charles de Dreuille --- .../src/components/Link/Link.stories.tsx | 156 ++++++++++++++---- packages/canon/src/components/Link/Link.tsx | 28 ++-- packages/canon/src/components/Link/styles.css | 30 +++- packages/canon/src/components/Link/types.ts | 35 ++-- 4 files changed, 180 insertions(+), 69 deletions(-) diff --git a/packages/canon/src/components/Link/Link.stories.tsx b/packages/canon/src/components/Link/Link.stories.tsx index 3db236a272..3e72d0a414 100644 --- a/packages/canon/src/components/Link/Link.stories.tsx +++ b/packages/canon/src/components/Link/Link.stories.tsx @@ -18,7 +18,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Link } from './Link'; import { Flex } from '../Flex'; import { Text } from '../Text'; -import { Link as RouterLink, MemoryRouter } from 'react-router-dom'; const meta = { title: 'Components/Link', @@ -33,7 +32,7 @@ type Story = StoryObj; export const Default: Story = { args: { - to: 'https://ui.backstage.io', + href: 'https://ui.backstage.io', children: 'Sign up for Backstage', }, }; @@ -44,10 +43,14 @@ export const AllVariants: Story = { }, render: args => ( - - - - + + + + + + + + ), }; @@ -58,8 +61,102 @@ export const AllWeights: Story = { }, render: args => ( - - + + + + + + + + + + + + + + + + ), }; @@ -68,43 +165,32 @@ export const Responsive: Story = { args: { ...Default.args, variant: { - xs: 'label', - md: 'body', + xs: 'title-x-small', + md: 'body-x-small', }, }, }; -export const CustomRender: Story = { - render: () => { - return ( - - }>Go to Catalog - - ); - }, - decorators: [ - Story => ( - - - - ), - ], -}; - export const Playground: Story = { args: { ...Default.args, }, render: args => ( - Subtitle - - Body - - Caption - - Label - + Title X Small + + Body X Small + + Body Small + + Body Medium + + Body Large + + Title Small + + Title Medium + ), }; diff --git a/packages/canon/src/components/Link/Link.tsx b/packages/canon/src/components/Link/Link.tsx index 869134d8a7..cf13634cde 100644 --- a/packages/canon/src/components/Link/Link.tsx +++ b/packages/canon/src/components/Link/Link.tsx @@ -14,37 +14,31 @@ * limitations under the License. */ -import { useRef, forwardRef } from 'react'; -import { useRender } from '@base-ui-components/react/use-render'; +import { forwardRef } from 'react'; +import { Link as AriaLink } from 'react-aria-components'; import clsx from 'clsx'; import { useStyles } from '../../hooks/useStyles'; - import type { LinkProps } from './types'; /** @public */ -export const Link = forwardRef((props, ref) => { +export const Link = forwardRef((props, ref) => { const { className, variant = 'body', weight = 'regular', - render = , ...restProps } = props; const { classNames, dataAttributes } = useStyles('Link', { variant, weight }); - const internalRef = useRef(null); - const { renderElement } = useRender({ - render, - props: { - className: clsx(classNames.root, className), - ...dataAttributes, - ...restProps, - }, - refs: [ref, internalRef], - }); - - return renderElement(); + return ( + + ); }); Link.displayName = 'Link'; diff --git a/packages/canon/src/components/Link/styles.css b/packages/canon/src/components/Link/styles.css index a529dcdc14..72dfb1de3b 100644 --- a/packages/canon/src/components/Link/styles.css +++ b/packages/canon/src/components/Link/styles.css @@ -36,22 +36,42 @@ } } -.bui-Link[data-variant='body'] { - font-size: var(--bui-font-size-3); +.bui-Link[data-variant='title-large'] { + font-size: var(--bui-font-size-8); line-height: 140%; } -.bui-Link[data-variant='subtitle'] { +.bui-Link[data-variant='title-medium'] { + font-size: var(--bui-font-size-7); + line-height: 140%; +} + +.bui-Link[data-variant='title-small'] { + font-size: var(--bui-font-size-6); + line-height: 140%; +} + +.bui-Link[data-variant='title-x-small'] { + font-size: var(--bui-font-size-5); + line-height: 140%; +} + +.bui-Link[data-variant='body-large'] { font-size: var(--bui-font-size-4); line-height: 140%; } -.bui-Link[data-variant='caption'] { +.bui-Link[data-variant='body-medium'] { + font-size: var(--bui-font-size-3); + line-height: 140%; +} + +.bui-Link[data-variant='body-small'] { font-size: var(--bui-font-size-2); line-height: 140%; } -.bui-Link[data-variant='label'] { +.bui-Link[data-variant='body-x-small'] { font-size: var(--bui-font-size-1); line-height: 140%; } diff --git a/packages/canon/src/components/Link/types.ts b/packages/canon/src/components/Link/types.ts index 20fa4a2f31..ce7dcfaf63 100644 --- a/packages/canon/src/components/Link/types.ts +++ b/packages/canon/src/components/Link/types.ts @@ -14,21 +14,32 @@ * limitations under the License. */ -import type { CSSProperties, ReactNode } from 'react'; import type { Breakpoint } from '../../types'; -import type { useRender } from '@base-ui-components/react/use-render'; +import type { LinkProps as AriaLinkProps } from 'react-aria-components'; /** @public */ -export interface LinkProps extends useRender.ComponentProps<'a'> { - children: ReactNode; - to?: string; +export interface LinkProps extends AriaLinkProps { variant?: - | 'subtitle' - | 'body' - | 'caption' - | 'label' - | Partial>; + | 'title-large' + | 'title-medium' + | 'title-small' + | 'title-x-small' + | 'body-large' + | 'body-medium' + | 'body-small' + | 'body-x-small' + | Partial< + Record< + Breakpoint, + | 'title-large' + | 'title-medium' + | 'title-small' + | 'title-x-small' + | 'body-large' + | 'body-medium' + | 'body-small' + | 'body-x-small' + > + >; weight?: 'regular' | 'bold' | Partial>; - className?: string; - style?: CSSProperties; }