@fluentui/react-link 9.0.8 → 9.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +85 -1
- package/CHANGELOG.md +29 -2
- package/package.json +10 -10
- package/MIGRATION.md +0 -29
- package/SPEC.md +0 -145
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,91 @@
|
|
|
2
2
|
"name": "@fluentui/react-link",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 02 Nov 2022 11:54:55 GMT",
|
|
6
|
+
"tag": "@fluentui/react-link_v9.0.10",
|
|
7
|
+
"version": "9.0.10",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "olfedias@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-link",
|
|
13
|
+
"commit": "c619ba066f11a8654e95375314824ba6b81b003e",
|
|
14
|
+
"comment": "chore: Update Griffel to latest version"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "tristan.watanabe@gmail.com",
|
|
18
|
+
"package": "@fluentui/react-link",
|
|
19
|
+
"commit": "a64b05e228ababb5784de41cb7045cd4dbb0d6f8",
|
|
20
|
+
"comment": "chore: Migrate to new package structure."
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-link",
|
|
25
|
+
"comment": "Bump @fluentui/react-tabster to v9.2.1",
|
|
26
|
+
"commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-link",
|
|
31
|
+
"comment": "Bump @fluentui/react-utilities to v9.2.0",
|
|
32
|
+
"commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-link",
|
|
37
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.17",
|
|
38
|
+
"commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
|
|
39
|
+
}
|
|
40
|
+
]
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"date": "Thu, 20 Oct 2022 08:39:36 GMT",
|
|
45
|
+
"tag": "@fluentui/react-link_v9.0.9",
|
|
46
|
+
"version": "9.0.9",
|
|
47
|
+
"comments": {
|
|
48
|
+
"patch": [
|
|
49
|
+
{
|
|
50
|
+
"author": "mgodbolt@microsoft.com",
|
|
51
|
+
"package": "@fluentui/react-link",
|
|
52
|
+
"commit": "17096b3137d9d3e7c7443ddc3ce0738b2910a334",
|
|
53
|
+
"comment": "chore: Bump peer deps to support React 18"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"author": "olfedias@microsoft.com",
|
|
57
|
+
"package": "@fluentui/react-link",
|
|
58
|
+
"commit": "06865dada128321804646582f564ee86d835d174",
|
|
59
|
+
"comment": "chore: Update Griffel to latest version"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "beachball",
|
|
63
|
+
"package": "@fluentui/react-link",
|
|
64
|
+
"comment": "Bump @fluentui/react-tabster to v9.2.0",
|
|
65
|
+
"commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "beachball",
|
|
69
|
+
"package": "@fluentui/react-link",
|
|
70
|
+
"comment": "Bump @fluentui/react-theme to v9.1.1",
|
|
71
|
+
"commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "beachball",
|
|
75
|
+
"package": "@fluentui/react-link",
|
|
76
|
+
"comment": "Bump @fluentui/react-utilities to v9.1.2",
|
|
77
|
+
"commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "beachball",
|
|
81
|
+
"package": "@fluentui/react-link",
|
|
82
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16",
|
|
83
|
+
"commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
|
|
84
|
+
}
|
|
85
|
+
]
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"date": "Thu, 13 Oct 2022 11:02:52 GMT",
|
|
6
90
|
"tag": "@fluentui/react-link_v9.0.8",
|
|
7
91
|
"version": "9.0.8",
|
|
8
92
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,39 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-link
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 02 Nov 2022 11:54:55 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.0.10)
|
|
8
|
+
|
|
9
|
+
Wed, 02 Nov 2022 11:54:55 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.0.9..@fluentui/react-link_v9.0.10)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: Update Griffel to latest version ([PR #25412](https://github.com/microsoft/fluentui/pull/25412) by olfedias@microsoft.com)
|
|
15
|
+
- chore: Migrate to new package structure. ([PR #25471](https://github.com/microsoft/fluentui/pull/25471) by tristan.watanabe@gmail.com)
|
|
16
|
+
- Bump @fluentui/react-tabster to v9.2.1 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
|
|
17
|
+
- Bump @fluentui/react-utilities to v9.2.0 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
|
|
18
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.17 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
|
|
19
|
+
|
|
20
|
+
## [9.0.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.0.9)
|
|
21
|
+
|
|
22
|
+
Thu, 20 Oct 2022 08:39:36 GMT
|
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.0.8..@fluentui/react-link_v9.0.9)
|
|
24
|
+
|
|
25
|
+
### Patches
|
|
26
|
+
|
|
27
|
+
- chore: Bump peer deps to support React 18 ([PR #24972](https://github.com/microsoft/fluentui/pull/24972) by mgodbolt@microsoft.com)
|
|
28
|
+
- chore: Update Griffel to latest version ([PR #25212](https://github.com/microsoft/fluentui/pull/25212) by olfedias@microsoft.com)
|
|
29
|
+
- Bump @fluentui/react-tabster to v9.2.0 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
|
|
30
|
+
- Bump @fluentui/react-theme to v9.1.1 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
|
|
31
|
+
- Bump @fluentui/react-utilities to v9.1.2 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
|
|
32
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
|
|
33
|
+
|
|
7
34
|
## [9.0.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.0.8)
|
|
8
35
|
|
|
9
|
-
Thu, 13 Oct 2022
|
|
36
|
+
Thu, 13 Oct 2022 11:02:52 GMT
|
|
10
37
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.0.7..@fluentui/react-link_v9.0.8)
|
|
11
38
|
|
|
12
39
|
### Patches
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-link",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.10",
|
|
4
4
|
"description": "Fluent UI React Link component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -29,22 +29,22 @@
|
|
|
29
29
|
"@fluentui/a11y-testing": "^0.1.0",
|
|
30
30
|
"@fluentui/eslint-plugin": "*",
|
|
31
31
|
"@fluentui/react-conformance": "*",
|
|
32
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
32
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.17",
|
|
33
33
|
"@fluentui/scripts": "^1.0.0"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@fluentui/keyboard-keys": "^9.0.0",
|
|
37
|
-
"@fluentui/react-tabster": "^9.1
|
|
38
|
-
"@fluentui/react-theme": "^9.1.
|
|
39
|
-
"@fluentui/react-utilities": "^9.
|
|
40
|
-
"@griffel/react": "^1.4.
|
|
37
|
+
"@fluentui/react-tabster": "^9.2.1",
|
|
38
|
+
"@fluentui/react-theme": "^9.1.1",
|
|
39
|
+
"@fluentui/react-utilities": "^9.2.0",
|
|
40
|
+
"@griffel/react": "^1.4.2",
|
|
41
41
|
"tslib": "^2.1.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
|
-
"@types/react": ">=16.8.0 <
|
|
45
|
-
"@types/react-dom": ">=16.8.0 <
|
|
46
|
-
"react": ">=16.8.0 <
|
|
47
|
-
"react-dom": ">=16.8.0 <
|
|
44
|
+
"@types/react": ">=16.8.0 <19.0.0",
|
|
45
|
+
"@types/react-dom": ">=16.8.0 <19.0.0",
|
|
46
|
+
"react": ">=16.8.0 <19.0.0",
|
|
47
|
+
"react-dom": ">=16.8.0 <19.0.0"
|
|
48
48
|
},
|
|
49
49
|
"beachball": {
|
|
50
50
|
"disallowedChangeTypes": [
|
package/MIGRATION.md
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
# Link Migration
|
|
2
|
-
|
|
3
|
-
## Migration from v8
|
|
4
|
-
|
|
5
|
-
The existing `Link` control supports a very similar set of props to the one being proposed with a few differences that are outlined below:
|
|
6
|
-
|
|
7
|
-
- `componentRef` => NOT SUPPORTED - use regular `ref` instead.
|
|
8
|
-
- `styles` => NOT SUPPORTED - use new styling system via `tokens` instead.
|
|
9
|
-
- `theme` => NOT SUPPORTED
|
|
10
|
-
- `underline` => `inline`
|
|
11
|
-
|
|
12
|
-
## Migration from v0
|
|
13
|
-
|
|
14
|
-
v0 does not currently export a `Link` component.
|
|
15
|
-
|
|
16
|
-
## Property mapping
|
|
17
|
-
|
|
18
|
-
| v8 `Link` | v9 `Link` |
|
|
19
|
-
| -------------- | ---------- |
|
|
20
|
-
| `componentRef` | - |
|
|
21
|
-
| `disabled` | `disabled` |
|
|
22
|
-
| `href` | `href` |
|
|
23
|
-
| `onClick` | `onClick` |
|
|
24
|
-
| `rel` | `rel` |
|
|
25
|
-
| `styles` | - |
|
|
26
|
-
| `target` | `target` |
|
|
27
|
-
| `theme` | - |
|
|
28
|
-
| `type` | `type` |
|
|
29
|
-
| `underline` | `inline` |
|
package/SPEC.md
DELETED
|
@@ -1,145 +0,0 @@
|
|
|
1
|
-
# Link
|
|
2
|
-
|
|
3
|
-
**GitHub Epic issue** - [Link Convergence #16572](https://github.com/microsoft/fluentui/issues/16572)
|
|
4
|
-
|
|
5
|
-
## Background
|
|
6
|
-
|
|
7
|
-
The `Link` component references data that a user can follow by clicking or tapping it.
|
|
8
|
-
|
|
9
|
-
## Prior Art
|
|
10
|
-
|
|
11
|
-
### Open UI
|
|
12
|
-
|
|
13
|
-
The Open UI [Link Research](https://open-ui.org/components/link.research) page (currently in PR: https://github.com/WICG/open-ui/pull/253), shows how the `Link` component is used in UI platforms across the web. The consensus across libraries seems to center around a simple interface with few variants that mostly attempt to support the functionality of the `<a>` HTML tag.
|
|
14
|
-
|
|
15
|
-
### Comparison of v8 and v0
|
|
16
|
-
|
|
17
|
-
The existing components are:
|
|
18
|
-
|
|
19
|
-
- v8 - [Link](https://developer.microsoft.com/en-us/fluentui#/controls/web/link)
|
|
20
|
-
- v0 - v0 does not currently export a `Link` component
|
|
21
|
-
|
|
22
|
-
## Sample Code
|
|
23
|
-
|
|
24
|
-
Basic examples:
|
|
25
|
-
|
|
26
|
-
```jsx
|
|
27
|
-
<Link>This is a link</Link>
|
|
28
|
-
<Link href="https://www.bing.com">This is a link</Link>
|
|
29
|
-
<Link href="https://www.bing.com" disabled>This is a link</Link>
|
|
30
|
-
<Link href="https://www.bing.com" target="_blank">This is a link</Link>
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
## Variants
|
|
34
|
-
|
|
35
|
-
### Default vs inline
|
|
36
|
-
|
|
37
|
-
A `Link` has two decoration variants depending on where it's used.
|
|
38
|
-
|
|
39
|
-
By `default`, the `Link` should be limited to homogeneous surface areas where everything is clickable in the space and should appear as lacking an underline.
|
|
40
|
-
|
|
41
|
-
A second `inline` variant is provided for scenarios where body text is going to be used alongside a `Link`. This variant adds an underline to add a separate visual distinction in addition to color for contrast purposes.
|
|
42
|
-
|
|
43
|
-
### Anchor vs button
|
|
44
|
-
|
|
45
|
-
A `Link` renders as different HTML tags depending on the whether a value has been passed for the `href` property or not. If a value has been passed to the `href` property, then the `Link` renders as an `<a>` HTML tag. Conversely, if the `href` property is left `undefined` the `Link` renders as a `<button>` HTML tag.
|
|
46
|
-
|
|
47
|
-
The `Link` can also be custom rendered as something entirely different by replacing the `root` slot with the preferred element to be rendered via the `as` prop.
|
|
48
|
-
|
|
49
|
-
## API
|
|
50
|
-
|
|
51
|
-
### Slots
|
|
52
|
-
|
|
53
|
-
- `root` - The outer container representing the `Link` itself that wraps everything passed via the `children` prop.
|
|
54
|
-
|
|
55
|
-
### Props
|
|
56
|
-
|
|
57
|
-
See API at [Link.types.ts](./src/components/Link/Link.types.ts).
|
|
58
|
-
|
|
59
|
-
## Structure
|
|
60
|
-
|
|
61
|
-
For `Links` rendering as `<a>`:
|
|
62
|
-
|
|
63
|
-
```tsx
|
|
64
|
-
<a class="root" href={href}>
|
|
65
|
-
{children}
|
|
66
|
-
</a>
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
For `Links` rendering as anything other than `<a>` (the example below uses `<button>`):
|
|
70
|
-
|
|
71
|
-
```tsx
|
|
72
|
-
<button class="root" role="link">
|
|
73
|
-
{children}
|
|
74
|
-
</button>
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
## Migration
|
|
78
|
-
|
|
79
|
-
See [MIGRATION.md](./MIGRATION.md).
|
|
80
|
-
|
|
81
|
-
## Behaviors
|
|
82
|
-
|
|
83
|
-
### States
|
|
84
|
-
|
|
85
|
-
The following section describes the different states in which a `Link` can be throughout the course of interaction with it.
|
|
86
|
-
|
|
87
|
-
#### Enabled state
|
|
88
|
-
|
|
89
|
-
An enabled `Link` communicates interaction by having styling that invites the user to click/tap on it to navigate through content.
|
|
90
|
-
|
|
91
|
-
#### Disabled state
|
|
92
|
-
|
|
93
|
-
A disabled `Link` is non-interactive, disallowing the user to click/tap on it to navigate through content.
|
|
94
|
-
|
|
95
|
-
#### Hovered state
|
|
96
|
-
|
|
97
|
-
A hovered `Link` changes styling to communicate that the user has placed a cursor above it.
|
|
98
|
-
|
|
99
|
-
#### Focused state
|
|
100
|
-
|
|
101
|
-
A focused `Link` changes styling to communicate that the user has placed keyboard focus on it. This styling is usually the same to the one in the hovered state plus extra styling on the outline to indicate keyboard focus has been placed on the component.
|
|
102
|
-
|
|
103
|
-
#### Pressed state
|
|
104
|
-
|
|
105
|
-
A pressed `Link` changes styling to communicate that the user is currently pressing it.
|
|
106
|
-
|
|
107
|
-
#### Visited state
|
|
108
|
-
|
|
109
|
-
A visited `Link` changes styling to communicate that the user has already interacted with it so its referenced content has already been accessed in the past.
|
|
110
|
-
|
|
111
|
-
### Interaction
|
|
112
|
-
|
|
113
|
-
#### Keyboard interaction
|
|
114
|
-
|
|
115
|
-
The following is a set of keys that interact with the `Link` component:
|
|
116
|
-
|
|
117
|
-
| Key | Description |
|
|
118
|
-
| ------------------------ | -------------------------------------------------- |
|
|
119
|
-
| `Enter` | Executes the `Link` and moves focus to its target. |
|
|
120
|
-
| `Shift + F10` (Optional) | Opens a context menu for the `Link`. |
|
|
121
|
-
|
|
122
|
-
#### Cursor interaction
|
|
123
|
-
|
|
124
|
-
- `mouseenter`: Should immediately change the styling of the `Link` so that it appears to be hovered.
|
|
125
|
-
- `mouseleave`: Should immediately remove the hovered styling of the `Link`.
|
|
126
|
-
- `mouseup`: If triggered while cursor is still inside of the `Link's` boundaries, then it should execute the `Link` and move focus to its target.
|
|
127
|
-
|
|
128
|
-
#### Touch interaction
|
|
129
|
-
|
|
130
|
-
The same behavior as above translated for touch events. This means that there is no equivalent for `mouseenter` and `mouseleave`, which makes it so that the hovered state cannot be accessed.
|
|
131
|
-
|
|
132
|
-
## Accessibility
|
|
133
|
-
|
|
134
|
-
### Relevant documents
|
|
135
|
-
|
|
136
|
-
- [WAI-ARIA 1.1 Spec](https://www.w3.org/TR/wai-aria-1.1/#link)
|
|
137
|
-
- [WAI-ARIA 1.1 Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#link)
|
|
138
|
-
- [WAI-ARIA 1.2 Spec](https://www.w3.org/TR/wai-aria-1.2/#link)
|
|
139
|
-
- [WAI-ARIA 1.2 Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/#link)
|
|
140
|
-
|
|
141
|
-
### Expected behavior
|
|
142
|
-
|
|
143
|
-
- Should default to render a native `a` element unless something else has been specified for the `root` slot, in which case `role="link"` should be added to it.
|
|
144
|
-
- Should mix in the native props expected for the `a` native element.
|
|
145
|
-
- Should be keyboard tabbable and focusable.
|