Skip to content

feat(ui-link): add variants to <Link> #1937

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

Merged
HerrTopi merged 1 commit into from
Apr 11, 2025
Merged

feat(ui-link): add variants to <Link> #1937

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
29 changes: 29 additions & 0 deletions packages/shared-types/src/BaseTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,35 @@ type Spacing = {
large: string | 0
xLarge: string | 0
xxLarge: string | 0

space0: string | 0
space2: string | 0
space4: string | 0
space8: string | 0
space12: string | 0
space16: string | 0
space24: string | 0
space36: string | 0
space48: string | 0
space60: string | 0
sections: string | 0
sectionElements: string | 0
trayElements: string | 0
modalElements: string | 0
moduleElements: string | 0
paddingCardLarge: string | 0
paddingCardMedium: string | 0
paddingCardSmall: string | 0
selects: string | 0
textareas: string | 0
inputFields: string | 0
checkboxes: string | 0
radios: string | 0
toggles: string | 0
buttons: string | 0
tags: string | 0
statusIndicators: string | 0
dataPoints: string | 0
}

type Stacking = {
Expand Down
6 changes: 5 additions & 1 deletion packages/shared-types/src/ComponentThemeVariables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -670,6 +670,9 @@ export type ImgTheme = {
export type LinkTheme = {
fontFamily: Typography['fontFamily']
fontWeight: Typography['fontWeightNormal']
fontSize: string | 0
fontSizeSmall: string | 0
lineHeight: number
color: Colors['contrasts']['blue4570']
textDecorationWithinText: string
hoverTextDecorationWithinText: string
Expand All @@ -684,7 +687,8 @@ export type LinkTheme = {
focusInverseOutlineColor: Colors['contrasts']['white1010']
focusInverseIconOutlineColor: Colors['contrasts']['white1010']
iconSize: string
iconPlusTextMargin: Spacing['xxSmall']
iconPlusTextMargin: string | 0
iconPlusTextMarginSmall: string | 0
textUnderlineOffset: string
}

Expand Down
33 changes: 33 additions & 0 deletions packages/ui-link/src/Link/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,37 @@ type: example
</View>
```

### Variant

In order to make it easy to get the most commonly used links, we have the variant prop. It will set all the necessary styles (fontSize, lineHeight, and textDecoration).

```js
---
type: example
---
<div>
<div>
In a line of text you should use the <Link variant="inline" renderIcon={<IconUserLine />} href="https://instructure.github.io/instructure-ui/">inline</Link> link variant.
</div>

<br></br>
<div>
<Text variant="contentSmall">In a line of text, where the text is smaller, use the <Link variant="inline-small" renderIcon={<IconUserLine />} href="https://instructure.github.io/instructure-ui/">inline-small</Link> link variant
</Text>
</div>

<br></br>
<div>
If the link is standalone (not in a text), use the <code>standalone</code> <Link display="block" variant="standalone" renderIcon={<IconUserLine />} href="https://instructure.github.io/instructure-ui/">standalone</Link>
</div>

<br></br>
<div>
If the link is standalone (not in a text), but smaller, use the <code>standalone-small</code> <Link display="block" variant="standalone-small" renderIcon={<IconUserLine />} href="https://instructure.github.io/instructure-ui/">standalone-small</Link>
</div>
</div>
```

### Adding margin

Use the `margin` prop to add space to the left or right of the Link. Because
Expand Down Expand Up @@ -76,6 +107,8 @@ Use the `renderIcon` property to put an [icon](#icons) inside a Link. To positio
icon _after_ the link text, change the `iconPlacement` property to `end`. You can also
render a Link with just an icon. Don't forget to add text for screen readers, though.

NOTE: if you want the icon to have the same `font-size` as the link, do not specify its `size`!

```js
---
type: example
Expand Down
4 changes: 2 additions & 2 deletions packages/ui-link/src/Link/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,9 +252,9 @@ class Link extends Component<LinkProps, LinkState> {
tabIndex={tabIndex}
css={this.props.styles?.link}
>
{renderIcon && iconPlacement === 'start' && this.renderIcon()}
{renderIcon && iconPlacement === 'start' ? this.renderIcon() : null}
{children}
{renderIcon && iconPlacement === 'end' && this.renderIcon()}
{renderIcon && iconPlacement === 'end' ? this.renderIcon() : null}
</View>
)
}
Expand Down
16 changes: 14 additions & 2 deletions packages/ui-link/src/Link/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,11 @@ type LinkOwnProps = {
* Fires when the Link is hovered
*/
onMouseEnter?: (event: React.MouseEvent<ViewOwnProps>) => void

/**
* Sets pre-defined values for the component to achieve specific roles for the component
*/
variant?: 'inline' | 'inline-small' | 'standalone' | 'standalone-small'
}

export type LinkStyleProps = {
Expand Down Expand Up @@ -174,7 +179,13 @@ const propTypes: PropValidators<PropKeys> = {
onBlur: PropTypes.func,
onClick: PropTypes.func,
onFocus: PropTypes.func,
onMouseEnter: PropTypes.func
onMouseEnter: PropTypes.func,
variant: PropTypes.oneOf([
'inline',
'inline-small',
'standalone',
'standalone-small'
])
}

const allowedProps: AllowedPropKeys = [
Expand All @@ -194,7 +205,8 @@ const allowedProps: AllowedPropKeys = [
'onBlur',
'onClick',
'onFocus',
'onMouseEnter'
'onMouseEnter',
'variant'
]

export type { LinkProps, LinkState, LinkStyle }
Expand Down
84 changes: 72 additions & 12 deletions packages/ui-link/src/Link/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,33 @@ const generateStyle = (
props: LinkProps,
state: LinkStyleProps
): LinkStyle => {
const { isWithinText, renderIcon, iconPlacement, color } = props
const { isWithinText, renderIcon, iconPlacement, color, variant } = props
const { containsTruncateText, hasVisibleChildren } = state
const inverseStyle = color === 'link-inverse'

const variantStyles = {
Copy link
Copy Markdown
Contributor Author

@HerrTopi HerrTopi Apr 10, 2025

Choose a reason for hiding this comment

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

These are indeed in the styles file. I don't know what you mean

inline: {
fontSize: componentTheme.fontSize,
lineHeight: componentTheme.lineHeight,
textDecoration: 'underline'
},
'inline-small': {
fontSize: componentTheme.fontSizeSmall,
lineHeight: '1.3125rem',
textDecoration: 'underline'
},
standalone: {
fontSize: componentTheme.fontSize,
lineHeight: componentTheme.lineHeight,
textDecoration: 'none'
},
'standalone-small': {
fontSize: componentTheme.fontSizeSmall,
lineHeight: componentTheme.lineHeight,
textDecoration: 'none'
}
}

const baseStyles = {
boxSizing: 'border-box',
fontFamily: componentTheme.fontFamily,
Expand Down Expand Up @@ -84,9 +107,6 @@ const generateStyle = (
...baseStyles,
cursor: 'pointer',
color: componentTheme.color,
textDecoration: isWithinText
? componentTheme.textDecorationWithinText
: componentTheme.textDecorationOutsideText,
'&:focus': {
color: componentTheme.color,
outlineColor: componentTheme.focusOutlineColor
Expand All @@ -96,7 +116,14 @@ const generateStyle = (
textDecoration: isWithinText
? componentTheme.hoverTextDecorationWithinText
: componentTheme.hoverTextDecorationOutsideText
}
},
...(variant
? variantStyles[variant]
: {
textDecoration: isWithinText
? componentTheme.textDecorationWithinText
: componentTheme.textDecorationOutsideText
})
}

const buttonStyle = {
Expand All @@ -105,10 +132,10 @@ const generateStyle = (
background: 'none',
border: 'none',
cursor: 'pointer',
fontSize: '1em',
margin: 0,
padding: 0,
textAlign: 'inherit'
textAlign: 'inherit',
...(variant ? variantStyles[variant] : { fontSize: '1em' })
}

const inverseStyles = {
Expand All @@ -120,7 +147,32 @@ const generateStyle = (
color: componentTheme.colorInverse
}
}

const variantIconStyles = {
inline: {
paddingInlineStart:
iconPlacement === 'start' ? 0 : componentTheme.iconPlusTextMargin,
paddingInlineEnd:
iconPlacement === 'start' ? componentTheme.iconPlusTextMargin : 0
},
'inline-small': {
paddingInlineStart:
iconPlacement === 'start' ? 0 : componentTheme.iconPlusTextMarginSmall,
paddingInlineEnd:
iconPlacement === 'start' ? componentTheme.iconPlusTextMarginSmall : 0
},
standalone: {
paddingInlineStart:
iconPlacement === 'start' ? 0 : componentTheme.iconPlusTextMargin,
paddingInlineEnd:
iconPlacement === 'start' ? componentTheme.iconPlusTextMargin : 0
},
'standalone-small': {
paddingInlineStart:
iconPlacement === 'start' ? 0 : componentTheme.iconPlusTextMarginSmall,
paddingInlineEnd:
iconPlacement === 'start' ? componentTheme.iconPlusTextMarginSmall : 0
}
}
return {
link: {
label: 'link',
Expand All @@ -145,10 +197,18 @@ const generateStyle = (
...(renderIcon && {
fontSize: componentTheme.iconSize,
boxSizing: 'border-box',
paddingInlineStart:
iconPlacement === 'start' ? 0 : componentTheme.iconPlusTextMargin,
paddingInlineEnd:
iconPlacement === 'start' ? componentTheme.iconPlusTextMargin : 0
...(variant
? variantIconStyles[variant]
: {
paddingInlineStart:
iconPlacement === 'start'
? 0
: componentTheme.iconPlusTextMargin,
paddingInlineEnd:
iconPlacement === 'start'
? componentTheme.iconPlusTextMargin
: 0
})
})
}
}
Expand Down
6 changes: 5 additions & 1 deletion packages/ui-link/src/Link/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,9 @@ const generateComponentTheme = (theme: Theme): LinkTheme => {
const componentVariables: LinkTheme = {
fontFamily: typography?.fontFamily,
fontWeight: typography?.fontWeightNormal,
fontSize: typography?.content,
lineHeight: typography?.lineHeight150,
fontSizeSmall: typography?.contentSmall,
color: colors?.contrasts?.blue5782,

textDecorationWithinText: 'underline',
Expand All @@ -71,7 +74,8 @@ const generateComponentTheme = (theme: Theme): LinkTheme => {
focusInverseIconOutlineColor: colors?.contrasts?.white1010,

iconSize: '1.125em', // make icon slightly larger than inherited font-size,
iconPlusTextMargin: spacing?.xxSmall,
iconPlusTextMargin: spacing.space4,
iconPlusTextMarginSmall: spacing.space2,
textUnderlineOffset: 'auto'
}

Expand Down
5 changes: 1 addition & 4 deletions packages/ui-text/src/Text/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,11 +54,8 @@ class Text extends Component<TextProps> {
} as const

checkProps() {
const { variant, size, lineHeight, weight, fontStyle } = this.props
const { variant, lineHeight, weight, fontStyle } = this.props
if (variant) {
if (size) {
console.warn("[Text]: Don't use 'size' with 'variant' ")
}
if (lineHeight) {
console.warn("[Text]: Don't use 'lineHeight' with 'variant' ")
}
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-themes/src/sharedThemeTokens/borders.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import { Border } from '@instructure/shared-types'

// use for consistency between buttons, text inputs, etc.

const borders: Border = Object.freeze({
const borders: Border = Object.freeze<Border>({
radiusSmall: '0.125rem', // 2px
radiusMedium: '0.25rem', // 4px
radiusLarge: '0.5rem', // 8px
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-themes/src/sharedThemeTokens/breakpoints.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const values = {
xLarge: 75 // 1200px
}

const breakpoints: Breakpoints = Object.freeze({
const breakpoints: Breakpoints = Object.freeze<Breakpoints>({
xxSmall: `${values.xxSmall}em`,
xSmall: `${values.xSmall}em`,
small: `${values.small}em`,
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-themes/src/sharedThemeTokens/forms.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

import { Forms } from '@instructure/shared-types'

const forms: Forms = Object.freeze({
const forms: Forms = Object.freeze<Forms>({
inputHeightSmall: '1.75rem',
inputHeightMedium: '2.375rem',
inputHeightLarge: '3rem'
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-themes/src/sharedThemeTokens/media.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
import { breakpoints } from './breakpoints'
import { Media } from '@instructure/shared-types'

const media: Media = Object.freeze({
const media: Media = Object.freeze<Media>({
mediumMin: `min-width: ${breakpoints.medium}`,
largeMin: `min-width: ${breakpoints.large}`,
xLargeMin: `min-width: ${breakpoints.xLarge}`
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-themes/src/sharedThemeTokens/shadows.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const values = [
'0 0.375rem 0.4375rem rgba(0, 0, 0, 0.1), 0 0.625rem 1.75rem rgba(0, 0, 0, 0.25)'
]

const shadows: Shadows = Object.freeze({
const shadows: Shadows = Object.freeze<Shadows>({
depth1: values[0],
depth2: values[1],
depth3: values[2],
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-themes/src/sharedThemeTokens/spacing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

import { Spacing } from '@instructure/shared-types'

const spacing: Spacing = Object.freeze({
const spacing: Spacing = Object.freeze<Spacing>({
// legacy spacing tokens:
xxxSmall: '0.125rem', // 2px
xxSmall: '0.375rem', // 6px
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-themes/src/sharedThemeTokens/stacking.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

import { Stacking } from '@instructure/shared-types'

const stacking: Stacking = Object.freeze({
const stacking: Stacking = Object.freeze<Stacking>({
topmost: 9999,
above: 1,
below: -1,
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-themes/src/sharedThemeTokens/transitions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

import { Transitions } from '@instructure/shared-types'

const transitions: Transitions = Object.freeze({
const transitions: Transitions = Object.freeze<Transitions>({
duration: '300ms',
timing: 'ease-in-out'
} as const)
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-themes/src/sharedThemeTokens/typography.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

import { Typography } from '@instructure/shared-types'

const typography: Typography = Object.freeze({
const typography: Typography = Object.freeze<Typography>({
fontFamily: 'LatoWeb, Lato, "Helvetica Neue", Helvetica, Arial, sans-serif',
fontFamilyMonospace: 'Menlo, Consolas, Monaco, "Andale Mono", monospace',

Expand Down
Loading