Skip to content

Commit 15bc373

Browse files
git-nandorgit-nandor
committed
feat(ui-link,ui-breadcrumb): migrate to new theming system and deprecate old variants and add new size prop
1 parent 620b421 commit 15bc373

File tree

6 files changed

+430
-397
lines changed

6 files changed

+430
-397
lines changed

‎packages/ui-breadcrumb/src/Breadcrumb/BreadcrumbLink/props.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ import type {
2828
OtherHTMLAttributes,
2929
Renderable
3030
} from '@instructure/shared-types'
31-
import type { ViewOwnProps } from '@instructure/ui-view'
3231
import type { LinkProps } from '@instructure/ui-link'
3332

3433
type BreadcrumbLinkOwnProps = {
@@ -43,11 +42,11 @@ type BreadcrumbLinkOwnProps = {
4342
/**
4443
* If the Breadcrumb.Link has an onClick prop (and no href), it will render as a button
4544
*/
46-
onClick?: (event: React.MouseEvent<ViewOwnProps, MouseEvent>) => void
45+
onClick?: (event: React.MouseEvent) => void
4746
/**
4847
* Fires when the Link is hovered
4948
*/
50-
onMouseEnter?: (event: React.MouseEvent<ViewOwnProps, MouseEvent>) => void
49+
onMouseEnter?: (event: React.MouseEvent) => void
5150
/**
5251
* Sets the font-size of the breadcrumb text
5352
*/

‎packages/ui-link/src/Link/README.md‎

Lines changed: 73 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -41,37 +41,91 @@ type: example
4141
</Link>
4242
```
4343

44-
### Variant
45-
46-
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).
44+
If neither `href` nor `onClick` is provided, the Link will render as plain text (a `<span>` element) without interactive styling:
4745

4846
```js
4947
---
5048
type: example
5149
---
5250
<div>
53-
<div>
54-
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.
51+
<Text>This is a Link with no href or onClick: <Link>I look like plain text</Link></Text>
5552
</div>
53+
```
5654

57-
<br></br>
58-
<div>
59-
<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
60-
</Text>
61-
</div>
55+
### Size
6256

63-
<br></br>
57+
The `size` prop controls the font size, line height, and icon size, icon gap. Available sizes are `small`, `medium`, and `large`.
58+
59+
```js
60+
---
61+
type: example
62+
---
6463
<div>
65-
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>
64+
<div>
65+
<Link renderIcon={<DiamondInstUIIcon />} href="https://instructure.github.io/instructure-ui/" size="small">
66+
Link small
67+
</Link>
68+
</div>
69+
<br />
70+
<div>
71+
<Link renderIcon={<DiamondInstUIIcon />} href="https://instructure.github.io/instructure-ui/" size="medium">
72+
Link medium
73+
</Link>
74+
</div>
75+
<br />
76+
<div>
77+
<Link renderIcon={<DiamondInstUIIcon />} href="https://instructure.github.io/instructure-ui/" size="large">
78+
Link large
79+
</Link>
80+
</div>
81+
<br />
6682
</div>
83+
```
84+
85+
### Variant
86+
87+
The `variant` prop controls the text decoration and intended use case. Available variants are `inline` (underlined, for use within text) and `standalone` (no underline, for standalone links).
88+
89+
Use the `variant` prop in combination with the `size` prop to control both the appearance and size of the link.
6790

68-
<br></br>
91+
```js
92+
---
93+
type: example
94+
---
6995
<div>
70-
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>
71-
</div>
96+
<div>
97+
In a line of text you should use the <Link variant="inline" size="medium" renderIcon={<DiamondInstUIIcon />} href="https://instructure.github.io/instructure-ui/">inline</Link> link variant.
98+
</div>
99+
<br />
100+
<div>
101+
If the link is standalone (not in a text), use the <code>standalone</code> variant:
102+
<Link display="block" variant="standalone" size="medium" renderIcon={<DiamondInstUIIcon />} href="https://instructure.github.io/instructure-ui/">standalone</Link>
103+
</div>
72104
</div>
73105
```
74106

107+
#### Deprecated variant values
108+
109+
**The following variant values are deprecated and will be removed in a future version:**
110+
111+
- `inline-small`
112+
- `standalone-small`
113+
114+
These deprecated values are still supported for backward compatibility but will trigger console warnings. Please update your code to use the new `variant` + `size` prop combination.
115+
116+
```js
117+
---
118+
type: code
119+
---
120+
// Deprecated (still works but triggers warning)
121+
<Link variant="inline-small" href="#">Link</Link>
122+
<Link variant="standalone-small" href="#">Link</Link>
123+
124+
// Recommended
125+
<Link variant="inline" size="small" href="#">Link</Link>
126+
<Link variant="standalone" size="small" href="#">Link</Link>
127+
```
128+
75129
### Adding margin
76130

77131
Use the `margin` prop to add space to the left or right of the Link. Because
@@ -114,7 +168,7 @@ type: example
114168
<Link
115169
onClick={() => console.log('clicked')}
116170
isWithinText={false}
117-
renderIcon={<IconUserLine size="small" />}
171+
renderIcon={<DiamondInstUIIcon />}
118172
>
119173
<TruncateText>{lorem.paragraph()}</TruncateText>
120174
</Link>
@@ -126,28 +180,26 @@ Use the `renderIcon` property to put an [icon](icons) inside a Link. To position
126180
icon _after_ the link text, change the `iconPlacement` property to `end`. You can also
127181
render a Link with just an icon. Don't forget to add text for screen readers, though.
128182

129-
NOTE: if you want the icon to have the same `font-size` as the link, do not specify its `size`!
130-
131183
```js
132184
---
133185
type: example
134186
---
135187
<div>
136188
<View as="div" margin="0 0 small">
137-
<Link href="https://instructure.design" renderIcon={<IconUserLine size="small" />}>Icon before text</Link> with the quick brown fox
189+
<Link href="https://instructure.design" renderIcon={<DiamondInstUIIcon />}>Icon before text</Link> with the quick brown fox
138190
</View>
139191
<View as="div" margin="0 0 small">
140192
This Link has an icon and displays inline with text. <Link
141193
href="https://instructure.design"
142-
renderIcon={<IconUserLine />}
194+
renderIcon={<DiamondInstUIIcon />}
143195
iconPlacement="end"
144196
>
145197
Icon appears after Link text
146198
</Link>. This is more text after the link.
147199
</View>
148200
<View as="div">
149201
This Link consists of only an icon&nbsp;
150-
<Link onClick={() => console.log('clicked!')} renderIcon={IconUserLine}>
202+
<Link onClick={() => console.log('clicked!')} renderIcon={<DiamondInstUIIcon />}>
151203
<ScreenReaderContent>Descriptive text</ScreenReaderContent>
152204
</Link>.
153205
</View>

0 commit comments

Comments
 (0)