chore: add link component #16156
chore: add link component #16156
Conversation
site/src/components/Link/Link.tsx
Outdated
| ({ className, text, size, ...props }, ref) => { | ||
| return ( | ||
| <a className={cn(linkVariants({ size }), className)} ref={ref} {...props}> | ||
| {text} |
There was a problem hiding this comment.
Do we need a non-breaking space here?
There was a problem hiding this comment.
cc.: @jaaydenh
There was a problem hiding this comment.
I'm guessing that we're adding spacing between the text and icon, but I feel like flexbox would give better control over that and have fewer edge cases around work wrapping at smaller screen sizes
There was a problem hiding this comment.
There needs to be some way to put a space between the text and the icon. It there a better alternative to add a space?
site/src/components/Link/Link.tsx
Outdated
| { | ||
| variants: { | ||
| size: { | ||
| lg: "text-sm mb-px", |
There was a problem hiding this comment.
Do we want a link to exert margins on nearby elements?
There was a problem hiding this comment.
cc.: @jaaydenh
There was a problem hiding this comment.
the margin bottom was leftover from some experimentation and cane be removed
|
@Parkreiner @jaaydenh I made some minor refactors and style tweaks. Additionally, I added a story to test the link within inline text. |
|
Hey folks, since the tests and stories are all good, I'll go ahead and merge this to unblock my work on another feature. If there's any improvement we absolutely need, please let me know, and I'll address it in my next PR. |
| variants: { | ||
| size: { | ||
| lg: "text-sm gap-[2px] [&_svg]:size-icon-sm [&_svg]:p-[2px] leading-6", | ||
| sm: "text-xs gap-1 [&_svg]:size-icon-xs [&_svg]:p-[1px] leading-[18px]", |
There was a problem hiding this comment.
why use p-[1px] instead of p-px?
There was a problem hiding this comment.
I didn't know p-px was a thing.
Component based on Link design