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.

Sign up for GitHub

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 accented Links #4662

Merged
merged 3 commits into from
Feb 17, 2025
Merged

Add accented Links #4662

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4388e25
Add accented Links
joshwooding Feb 6, 2025
1accab6
Deprecate tokens
joshwooding Feb 14, 2025
75ac323
Fix example overrides
joshwooding Feb 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions .changeset/angry-beans-relate.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
"@salt-ds/core": minor
---

Added accent colored Links.

```tsx
<Link href="#" color="accent">
Link text
</Link>
```
5 changes: 5 additions & 0 deletions .changeset/beige-horses-poke.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@salt-ds/theme": minor
---

Deprecated `--salt-palette-navigate-foreground-hover` and `--salt-palette-navigate-foreground-active` and replaced them with `--salt-palette-accent-foreground-informative`.
6 changes: 6 additions & 0 deletions .changeset/happy-ties-float.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@salt-ds/core": patch
---

When Link is set to `color="inherit"` its hover, active and focus colors will now also be inherited.
Fixed status colors being included in Link's `color` type. This was accidentally added when status color support was added to Text. If you need to achieve this behaviour you can use `color="inherit"`.
5 changes: 5 additions & 0 deletions .changeset/tiny-snails-guess.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@salt-ds/theme": minor
---

Added `--salt-content-accent-foreground` to theme and theme-next.
48 changes: 34 additions & 14 deletions packages/core/src/link/Link.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,52 @@
.saltLink {
--link-color-hover: var(--saltLink-color-hover, var(--salt-content-foreground-hover));
--link-color-active: var(--saltLink-color-active, var(--salt-content-foreground-active));
--link-color-visited: var(--saltLink-color-visited, var(--salt-content-foreground-visited));
/* When focused, we also want hover style */
--link-color-focus: var(--saltLink-color-focus, var(--link-color-hover));
--link-color: "inherit";
--link-color-hover: "inherit";
--link-color-active: "inherit";
--link-color-visited: var(--salt-content-foreground-visited);
--link-color-focus: "inherit";
--link-focus-outlineColor: currentColor;

--link-textDecoration: var(--salt-navigable-textDecoration);
--link-textDecoration-hover: var(--salt-navigable-textDecoration-hover);

--link-fontFamily: var(--salt-text-fontFamily);
--link-focus-outline: var(--salt-focused-outline);
}

/* Main css class */
.saltLink {
.saltLink.saltText {
color: var(--link-color);
letter-spacing: var(--salt-text-letterSpacing);
text-decoration: var(--link-textDecoration);
font-family: var(--link-fontFamily);
}

/* Primary variant */
.saltText-primary {
.saltLink-primary {
--link-color: var(--salt-content-primary-foreground);
--link-color-hover: var(--salt-content-primary-foreground);
--link-color-active: var(--salt-content-primary-foreground);
--link-color-focus: var(--salt-content-primary-foreground);
--link-focus-outlineColor: var(--salt-focused-outlineColor);
--link-color-visited: var(--salt-content-foreground-visited);
}

/* Secondary variant */
.saltText-secondary {
.saltLink-secondary {
--link-color: var(--salt-content-secondary-foreground);
--link-color-hover: var(--salt-content-secondary-foreground);
--link-color-active: var(--salt-content-secondary-foreground);
--link-color-focus: var(--salt-content-secondary-foreground);
--link-focus-outlineColor: var(--salt-focused-outlineColor);
--link-color-visited: var(--salt-content-foreground-visited);
}

.saltLink-accent {
--link-color: var(--salt-content-accent-foreground);
--link-color-hover: var(--salt-content-accent-foreground);
--link-color-active: var(--salt-content-accent-foreground);
--link-color-focus: var(--salt-content-accent-foreground);
--link-focus-outlineColor: var(--salt-focused-outlineColor);
--link-color-visited: var(--salt-content-foreground-visited);
}

/* External link's icon */
Expand All @@ -38,24 +57,25 @@

/* Set color for visited link */
.saltLink:visited {
color: var(--link-color-visited);
color: var(--saltLink-color-visited, var(--link-color-visited));
}

/* Set color for hovered link */
.saltLink:hover {
color: var(--link-color-hover);
color: var(--saltLink-color-hover, var(--link-color-hover));
text-decoration: var(--link-textDecoration-hover);
}

/* Set color for active link */
.saltLink:active {
color: var(--link-color-active);
color: var(--saltLink-color-active, var(--link-color-active));
}

/* Set color for focused link */
.saltLink:focus {
outline: var(--link-focus-outline);
color: var(--link-color-focus);
color: var(--saltLink-color-focus, var(--link-color-focus));
outline: var(--salt-focused-outline);
outline-color: var(--link-focus-outlineColor);
text-decoration: var(--link-textDecoration-hover);
}

Expand Down
16 changes: 13 additions & 3 deletions packages/core/src/link/Link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,16 @@ const withBaseName = makePrefixer("saltLink");
*/
export interface LinkProps
extends Omit<ComponentPropsWithoutRef<"a">, "color">,
Pick<TextProps<"a">, "maxRows" | "styleAs" | "color" | "variant"> {
Pick<TextProps<"a">, "maxRows" | "styleAs" | "variant"> {
IconComponent?: ComponentType<IconProps> | null;
/**
* Render prop to enable customisation of anchor element.
*/
render?: RenderPropsType["render"];
/*
* The color of the text. Defaults to "primary".
*/
color?: "inherit" | "primary" | "secondary" | "accent";
}

export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
Expand Down Expand Up @@ -60,11 +64,17 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
return (
<Text
as={LinkAction}
className={clsx(withBaseName(), className)}
className={clsx(
withBaseName(),
{
[withBaseName(color)]: color !== "inherit",
},
className,
)}
href={href}
ref={ref}
target={target}
color={color}
color="inherit"
{...rest}
>
{children}
Expand Down
32 changes: 19 additions & 13 deletions packages/core/stories/link/link.qa.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Link } from "@salt-ds/core";
import { Link, Text } from "@salt-ds/core";
import { UserIcon } from "@salt-ds/icons";
import type { Meta, StoryFn } from "@storybook/react";
import {
Expand Down Expand Up @@ -27,14 +27,14 @@ export const AllVariantsGrid: StoryFn<QAContainerProps> = (props) => (
<Link href="https://www.google.com" color="secondary">
Secondary Link
</Link>
<Link href="https://www.google.com" color="secondary" target="_blank">
Secondary Link target blank
<Link href="https://www.google.com" color="accent">
Accent Link
</Link>
<div style={{ width: 150 }}>
<Link href="https://www.google.com" maxRows={1} color="secondary">
<strong>Strong</strong> and <small>small</small> truncation example
<Text color="error">
<Link href="https://www.google.com" color="inherit">
Inherit Link
</Link>
</div>
</Text>
<Link
href="https://www.google.com"
style={{ color: "var(--salt-content-foreground-visited)" }}
Expand Down Expand Up @@ -87,14 +87,20 @@ export const NoStyleInjectionGrid: StoryFn<QAContainerNoStyleInjectionProps> = (
<Link href="https://www.google.com" color="secondary">
Secondary Link
</Link>
<Link href="https://www.google.com" color="secondary" target="_blank">
Secondary Link target blank
<Link href="https://www.google.com" color="accent">
Accent Link
</Link>
<div style={{ width: 150 }}>
<Link href="https://www.google.com" maxRows={1} color="secondary">
<strong>Strong</strong> and <small>small</small> truncation example
<Text color="error">
<Link href="https://www.google.com" color="inherit">
Inherit Link
</Link>
</div>
</Text>
<Link
href="https://www.google.com"
style={{ color: "var(--salt-content-foreground-visited)" }}
>
Forced visited
</Link>
<Link
href="https://www.google.com"
target="_blank"
Expand Down
Loading
Loading