GovAlta
feat(#2956): update Link component for V2
Summary
Updates the Link component to support V2 design system styling with size variants and an expanded color system, while maintaining full backward compatibility with V1.
Note: This is a Token+CSS update WITHOUT a version prop - the size and color props handle all variations with sensible defaults.
Changes
New Props
-
size("xsmall" | "small" | "medium" | "large", default"medium"): Controls link typography and icon sizing -
color- Updated to include"dark"option:"interactive" | "dark" | "light"(default"interactive")
V2 Styling Updates
Size Variants
- XSmall: 14px/20px typography with 12px icons, 2px gap (for captions)
- Small: 16px/22px typography with 16px icons, 3px gap (for small text)
- Medium: 18px/24px typography with 18px icons, 4px gap (standard body text)
- Large: 24px/36px typography with 20px icons, 5px gap (for headings)
Color Variants
- Interactive (blue): Default link color, existing behavior maintained
- Dark (black): NEW - For subtle links on light backgrounds
- Light (white): Updated with proper hover/visited states for dark backgrounds
State Styling
- Default: Size-appropriate typography and color
- Hover: Color changes based on variant (darker blue, grey, or light grey)
- Visited: Purple for interactive/dark variants, light grey for light variant
- All states maintain underline decoration
Icon Integration
- Icons automatically size to match link typography
- Gap spacing scales with link size (2px to 5px)
- Leading and trailing icons supported
- Proper vertical alignment with inline text
Technical Implementation
No Version Prop Pattern
- Size and color props are additive with backward-compatible defaults
-
size="medium"matches V1 typography (18px/24px) -
color="interactive"maintains V1 blue link behavior - Token fallbacks ensure V1 environment works correctly
Gap Spacing with Fallbacks
- Base gap:
var(--goa-link-gap, 0.25rem)provides 4px default - Size-specific gaps:
var(--goa-link-gap-medium, 0.25rem)with fallback values - CSS specificity ensures size variants override base gap
Dynamic Icon Sizing
- Helper function maps link size to icon size prop
- XSmall → 2xsmall (12px), Small → xsmall (16px), etc.
- Maintains visual hierarchy across size variants
Related
- Parent issue: #2998
- Component issue: #2956
- Design tokens PR for Link
- V2 Figma component
@bdfranck I made your suggested changes and added component tokens to the related design tokens PR for the focus styling.
I also saw a couple other things I missed:
- Fixed color variants not applying to link text - The original implementation only colored icons, not the actual tag text. Added variant-specific slotted anchor rules with !important to override global anchor styles.
- Updated light color hover state - Changed from greyscale.100 to greyscale.150
- Custom light visited color - Used #9D8EBB (lighter purple) for better visibility on dark backgrounds, while interactive and dark variants use the standard {color.interactive.visited}
:tada: This PR is included in version 1.40.0-dev.8 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 4.10.0-dev.1 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 6.10.0-dev.3 :tada:
The release is available on:
Your semantic-release bot :package::rocket: