Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Link component #507

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add Link component #507

wants to merge 3 commits into from

Conversation

mkernohanbc
Copy link
Contributor

@mkernohanbc mkernohanbc commented Dec 9, 2024

WIP/draft PR for discussion and feedback. @Supriya-Arora: this is carved out from a bigger piece of work around menus/navbars. Also cc'ing @ty2k for input — we've discussed this a little bit, would appreciate your take.

This PR adds a new Link component, based on RAC Link. Docs and examples are included in Storybook.

As the name suggests, Link is a utility component for creating accessible and extensible hyperlinks. In the design system context, its primary usage is in navigation (eg. populating menus within the Header and Footer components), but it can also be used inline.

Text links

Link text is populated using the children slot. Link behaviour is configured using the href (renders a standard <a> element) or onPress (renders a <span> with the ARIA "link" role) props. See the RAC docs for information about events and routing.

A Link renders with the .bcds-react-aria-Link class. The size and danger props are used to append additional classes (toggling between S/M/L text sizes and a red colourway for destructive or dangerous links.)

The user can override link styling entirely by either:

  • Passing their own CSS class using className
  • Using the isUnstyled prop, which removes all styling and allows a link to inherit its styles from its parents

A Link can be disabled using isDisabled.

Link buttons

Using the isButton prop, Link can also be styled to look and behave like the Button component. When isButton is set, Link will render with the .bcds-react-aria-Button class instead of .bcds-react-aria-Link. The buttonVariant prop replicates the functionality of variant on the Button component. Link imports Button.css directly to avoid duplicating styles.

The reasoning for this functionality is to better align with how RAC Button works:

The Button component always represents a button semantically. To create a link that visually looks like a button, use the Link component instead.

Unlike our Button component, Link supports the href prop natively.

@mkernohanbc mkernohanbc added the enhancement New feature or request label Dec 9, 2024
@mkernohanbc mkernohanbc self-assigned this Dec 9, 2024
@mkernohanbc mkernohanbc added this to the Components v0.5.0 milestone Dec 9, 2024
@mkernohanbc mkernohanbc marked this pull request as ready for review January 22, 2025 17:27
Copy link
Contributor

@Supriya-Arora Supriya-Arora left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants