@fluentui/react-link 9.0.0-rc.9 → 9.0.0

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.
Files changed (47) hide show
  1. package/CHANGELOG.json +255 -1
  2. package/CHANGELOG.md +82 -2
  3. package/MIGRATION.md +12 -16
  4. package/README.md +19 -12
  5. package/SPEC.md +2 -67
  6. package/dist/index.d.ts +4 -10
  7. package/{lib → dist}/tsdoc-metadata.json +0 -0
  8. package/lib/components/Link/Link.js.map +1 -1
  9. package/lib/components/Link/Link.types.js.map +1 -1
  10. package/lib/components/Link/renderLink.js.map +1 -1
  11. package/lib/components/Link/useLink.js +4 -4
  12. package/lib/components/Link/useLink.js.map +1 -1
  13. package/lib/components/Link/useLinkState.js +2 -1
  14. package/lib/components/Link/useLinkState.js.map +1 -1
  15. package/lib/components/Link/useLinkStyles.js +9 -8
  16. package/lib/components/Link/useLinkStyles.js.map +1 -1
  17. package/lib/index.js +1 -2
  18. package/lib/index.js.map +1 -1
  19. package/lib-commonjs/components/Link/Link.js.map +1 -1
  20. package/lib-commonjs/components/Link/renderLink.js.map +1 -1
  21. package/lib-commonjs/components/Link/useLink.js +4 -4
  22. package/lib-commonjs/components/Link/useLink.js.map +1 -1
  23. package/lib-commonjs/components/Link/useLinkState.js +2 -1
  24. package/lib-commonjs/components/Link/useLinkState.js.map +1 -1
  25. package/lib-commonjs/components/Link/useLinkStyles.js +10 -9
  26. package/lib-commonjs/components/Link/useLinkStyles.js.map +1 -1
  27. package/lib-commonjs/index.js +1 -8
  28. package/lib-commonjs/index.js.map +1 -1
  29. package/package.json +9 -11
  30. package/lib/Link.d.ts +0 -1
  31. package/lib/components/Link/Link.d.ts +0 -6
  32. package/lib/components/Link/Link.types.d.ts +0 -33
  33. package/lib/components/Link/index.d.ts +0 -6
  34. package/lib/components/Link/renderLink.d.ts +0 -5
  35. package/lib/components/Link/useLink.d.ts +0 -8
  36. package/lib/components/Link/useLinkState.d.ts +0 -6
  37. package/lib/components/Link/useLinkStyles.d.ts +0 -8
  38. package/lib/index.d.ts +0 -2
  39. package/lib-commonjs/Link.d.ts +0 -1
  40. package/lib-commonjs/components/Link/Link.d.ts +0 -6
  41. package/lib-commonjs/components/Link/Link.types.d.ts +0 -33
  42. package/lib-commonjs/components/Link/index.d.ts +0 -6
  43. package/lib-commonjs/components/Link/renderLink.d.ts +0 -5
  44. package/lib-commonjs/components/Link/useLink.d.ts +0 -8
  45. package/lib-commonjs/components/Link/useLinkState.d.ts +0 -6
  46. package/lib-commonjs/components/Link/useLinkStyles.d.ts +0 -8
  47. package/lib-commonjs/index.d.ts +0 -2
package/CHANGELOG.json CHANGED
@@ -2,7 +2,261 @@
2
2
  "name": "@fluentui/react-link",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 05 May 2022 18:24:37 GMT",
5
+ "date": "Tue, 28 Jun 2022 15:08:51 GMT",
6
+ "tag": "@fluentui/react-link_v9.0.0",
7
+ "version": "9.0.0",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "lingfangao@hotmail.com",
12
+ "package": "@fluentui/react-link",
13
+ "commit": "c7b1348bdad7aa883c29bfbc96ef2a32e6ebc7dd",
14
+ "comment": "feat: Initial 9.0.0 release"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-link",
19
+ "comment": "Bump @fluentui/keyboard-keys to v9.0.0",
20
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-link",
25
+ "comment": "Bump @fluentui/react-tabster to v9.0.0",
26
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-link",
31
+ "comment": "Bump @fluentui/react-theme to v9.0.0",
32
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-link",
37
+ "comment": "Bump @fluentui/react-utilities to v9.0.0",
38
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui/react-link",
43
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9",
44
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
45
+ }
46
+ ],
47
+ "prerelease": [
48
+ {
49
+ "author": "lingfangao@hotmail.com",
50
+ "package": "@fluentui/react-link",
51
+ "commit": "675acea49c97f10837ddee9b8c4350ca27750125",
52
+ "comment": "Bump Griffel dependencies"
53
+ },
54
+ {
55
+ "author": "Humberto.Morimoto@microsoft.com",
56
+ "package": "@fluentui/react-link",
57
+ "commit": "bd64779b7d68775260b587f10265d64b916f6140",
58
+ "comment": "Fixing mention of SpinButton in README."
59
+ },
60
+ {
61
+ "author": "Humberto.Morimoto@microsoft.com",
62
+ "package": "@fluentui/react-link",
63
+ "commit": "ce6fe7e35398b3ca4e11a26b777fd9ba46529c72",
64
+ "comment": "README and migration guide cleanup."
65
+ },
66
+ {
67
+ "author": "lingfangao@hotmail.com",
68
+ "package": "@fluentui/react-link",
69
+ "commit": "e0aabd850b15adf9c151ebd4e332f7c50ad6cfdf",
70
+ "comment": "Update 9.0.0-rc dependencies to use caret range"
71
+ }
72
+ ],
73
+ "none": [
74
+ {
75
+ "author": "tristan.watanabe@gmail.com",
76
+ "package": "@fluentui/react-link",
77
+ "commit": "c6d03231b254b58e8de042800129907a970bc6f8",
78
+ "comment": "chore: Move Link stories to folder with index entry."
79
+ }
80
+ ]
81
+ }
82
+ },
83
+ {
84
+ "date": "Thu, 23 Jun 2022 14:25:31 GMT",
85
+ "tag": "@fluentui/react-link_v9.0.0-rc.14",
86
+ "version": "9.0.0-rc.14",
87
+ "comments": {
88
+ "prerelease": [
89
+ {
90
+ "author": "beachball",
91
+ "package": "@fluentui/react-link",
92
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.14",
93
+ "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
94
+ },
95
+ {
96
+ "author": "beachball",
97
+ "package": "@fluentui/react-link",
98
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.10",
99
+ "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
100
+ }
101
+ ]
102
+ }
103
+ },
104
+ {
105
+ "date": "Tue, 31 May 2022 21:28:40 GMT",
106
+ "tag": "@fluentui/react-link_v9.0.0-rc.13",
107
+ "version": "9.0.0-rc.13",
108
+ "comments": {
109
+ "prerelease": [
110
+ {
111
+ "author": "olfedias@microsoft.com",
112
+ "package": "@fluentui/react-link",
113
+ "commit": "0a5e9fa77a72eecafdd07034ccdc0b95fd49877c",
114
+ "comment": "chore: Update Griffel to latest version"
115
+ },
116
+ {
117
+ "author": "beachball",
118
+ "package": "@fluentui/react-link",
119
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.13",
120
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
121
+ },
122
+ {
123
+ "author": "beachball",
124
+ "package": "@fluentui/react-link",
125
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.10",
126
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
127
+ },
128
+ {
129
+ "author": "beachball",
130
+ "package": "@fluentui/react-link",
131
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8",
132
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
133
+ }
134
+ ]
135
+ }
136
+ },
137
+ {
138
+ "date": "Thu, 26 May 2022 21:01:26 GMT",
139
+ "tag": "@fluentui/react-link_v9.0.0-rc.12",
140
+ "version": "9.0.0-rc.12",
141
+ "comments": {
142
+ "none": [
143
+ {
144
+ "author": "olfedias@microsoft.com",
145
+ "package": "@fluentui/react-link",
146
+ "commit": "e0417c44ab690bda8923df041a880b6085f48e2d",
147
+ "comment": "fix missing dot, create missing files"
148
+ }
149
+ ],
150
+ "prerelease": [
151
+ {
152
+ "author": "beachball",
153
+ "package": "@fluentui/react-link",
154
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.12",
155
+ "commit": "3cf55ce998048554bf6a550de44403843ea8ede0"
156
+ }
157
+ ]
158
+ }
159
+ },
160
+ {
161
+ "date": "Mon, 23 May 2022 18:56:45 GMT",
162
+ "tag": "@fluentui/react-link_v9.0.0-rc.11",
163
+ "version": "9.0.0-rc.11",
164
+ "comments": {
165
+ "prerelease": [
166
+ {
167
+ "author": "esteban.230@hotmail.com",
168
+ "package": "@fluentui/react-link",
169
+ "commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
170
+ "comment": "Removing <componentName>ClassName exports."
171
+ },
172
+ {
173
+ "author": "beachball",
174
+ "package": "@fluentui/react-link",
175
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.11",
176
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
177
+ },
178
+ {
179
+ "author": "beachball",
180
+ "package": "@fluentui/react-link",
181
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.9",
182
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
183
+ },
184
+ {
185
+ "author": "beachball",
186
+ "package": "@fluentui/react-link",
187
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7",
188
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
189
+ }
190
+ ]
191
+ }
192
+ },
193
+ {
194
+ "date": "Mon, 23 May 2022 12:14:21 GMT",
195
+ "tag": "@fluentui/react-link_v9.0.0-rc.10",
196
+ "version": "9.0.0-rc.10",
197
+ "comments": {
198
+ "prerelease": [
199
+ {
200
+ "author": "olfedias@microsoft.com",
201
+ "package": "@fluentui/react-link",
202
+ "commit": "f120fe9160ad7311a87af0cfacd8d2fb26275e34",
203
+ "comment": "chore: Update Griffel to latest version"
204
+ },
205
+ {
206
+ "author": "olfedias@microsoft.com",
207
+ "package": "@fluentui/react-link",
208
+ "commit": "60804cec07a495b8a5d1fc66338bf0443b212144",
209
+ "comment": "chore: Update Griffel to latest version"
210
+ },
211
+ {
212
+ "author": "martinhochel@microsoft.com",
213
+ "package": "@fluentui/react-link",
214
+ "commit": "692e6916819ee07a1dfb0d99ac2ffbdd0d75252f",
215
+ "comment": "feat: ship rolluped only dts"
216
+ },
217
+ {
218
+ "author": "Humberto.Morimoto@microsoft.com",
219
+ "package": "@fluentui/react-link",
220
+ "commit": "6462df4b4bf19411dd60e788c3316086aa685d8e",
221
+ "comment": "Removing LinkCommon type."
222
+ },
223
+ {
224
+ "author": "beachball",
225
+ "package": "@fluentui/react-link",
226
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.10",
227
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
228
+ },
229
+ {
230
+ "author": "beachball",
231
+ "package": "@fluentui/react-link",
232
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.8",
233
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
234
+ },
235
+ {
236
+ "author": "beachball",
237
+ "package": "@fluentui/react-link",
238
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.9",
239
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
240
+ },
241
+ {
242
+ "author": "beachball",
243
+ "package": "@fluentui/react-link",
244
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6",
245
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
246
+ }
247
+ ],
248
+ "none": [
249
+ {
250
+ "author": "Humberto.Morimoto@microsoft.com",
251
+ "package": "@fluentui/react-link",
252
+ "commit": "8639df27de59d5a48e0e46c07fe7ac9342cfc98a",
253
+ "comment": "Improving README and updating spec and migration guide."
254
+ }
255
+ ]
256
+ }
257
+ },
258
+ {
259
+ "date": "Thu, 05 May 2022 18:26:30 GMT",
6
260
  "tag": "@fluentui/react-link_v9.0.0-rc.9",
7
261
  "version": "9.0.0-rc.9",
8
262
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,92 @@
1
1
  # Change Log - @fluentui/react-link
2
2
 
3
- This log was last generated on Thu, 05 May 2022 18:24:37 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 28 Jun 2022 15:08:51 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.0.0)
8
+
9
+ Tue, 28 Jun 2022 15:08:51 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.0.0-rc.14..@fluentui/react-link_v9.0.0)
11
+
12
+ ### Patches
13
+
14
+ - feat: Initial 9.0.0 release ([PR #23733](https://github.com/microsoft/fluentui/pull/23733) by lingfangao@hotmail.com)
15
+ - Bump @fluentui/keyboard-keys to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
16
+ - Bump @fluentui/react-tabster to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
17
+ - Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
18
+ - Bump @fluentui/react-utilities to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
19
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
20
+
21
+ ### Changes
22
+
23
+ - Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
24
+ - Fixing mention of SpinButton in README. ([PR #23424](https://github.com/microsoft/fluentui/pull/23424) by Humberto.Morimoto@microsoft.com)
25
+ - README and migration guide cleanup. ([PR #23395](https://github.com/microsoft/fluentui/pull/23395) by Humberto.Morimoto@microsoft.com)
26
+ - Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
27
+
28
+ ## [9.0.0-rc.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.0.0-rc.14)
29
+
30
+ Thu, 23 Jun 2022 14:25:31 GMT
31
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.0.0-rc.13..@fluentui/react-link_v9.0.0-rc.14)
32
+
33
+ ### Changes
34
+
35
+ - Bump @fluentui/react-tabster to v9.0.0-rc.14 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
36
+ - Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
37
+
38
+ ## [9.0.0-rc.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.0.0-rc.13)
39
+
40
+ Tue, 31 May 2022 21:28:40 GMT
41
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.0.0-rc.12..@fluentui/react-link_v9.0.0-rc.13)
42
+
43
+ ### Changes
44
+
45
+ - chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
46
+ - Bump @fluentui/react-tabster to v9.0.0-rc.13 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
47
+ - Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
48
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
49
+
50
+ ## [9.0.0-rc.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.0.0-rc.12)
51
+
52
+ Thu, 26 May 2022 21:01:26 GMT
53
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.0.0-rc.11..@fluentui/react-link_v9.0.0-rc.12)
54
+
55
+ ### Changes
56
+
57
+ - Bump @fluentui/react-tabster to v9.0.0-rc.12 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
58
+
59
+ ## [9.0.0-rc.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.0.0-rc.11)
60
+
61
+ Mon, 23 May 2022 18:56:45 GMT
62
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.0.0-rc.10..@fluentui/react-link_v9.0.0-rc.11)
63
+
64
+ ### Changes
65
+
66
+ - Removing <componentName>ClassName exports. ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by esteban.230@hotmail.com)
67
+ - Bump @fluentui/react-tabster to v9.0.0-rc.11 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
68
+ - Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
69
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
70
+
71
+ ## [9.0.0-rc.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.0.0-rc.10)
72
+
73
+ Mon, 23 May 2022 12:14:21 GMT
74
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.0.0-rc.9..@fluentui/react-link_v9.0.0-rc.10)
75
+
76
+ ### Changes
77
+
78
+ - chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
79
+ - chore: Update Griffel to latest version ([PR #23029](https://github.com/microsoft/fluentui/pull/23029) by olfedias@microsoft.com)
80
+ - feat: ship rolluped only dts ([PR #22793](https://github.com/microsoft/fluentui/pull/22793) by martinhochel@microsoft.com)
81
+ - Removing LinkCommon type. ([PR #22942](https://github.com/microsoft/fluentui/pull/22942) by Humberto.Morimoto@microsoft.com)
82
+ - Bump @fluentui/react-tabster to v9.0.0-rc.10 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
83
+ - Bump @fluentui/react-theme to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
84
+ - Bump @fluentui/react-utilities to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
85
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
86
+
7
87
  ## [9.0.0-rc.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.0.0-rc.9)
8
88
 
9
- Thu, 05 May 2022 18:24:37 GMT
89
+ Thu, 05 May 2022 18:26:30 GMT
10
90
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.0.0-rc.8..@fluentui/react-link_v9.0.0-rc.9)
11
91
 
12
92
  ### Changes
package/MIGRATION.md CHANGED
@@ -1,9 +1,5 @@
1
1
  # Link Migration
2
2
 
3
- ## STATUS: WIP 🚧
4
-
5
- This Migration guide is a work in progress and is not yet ready for use.
6
-
7
3
  ## Migration from v8
8
4
 
9
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:
@@ -19,15 +15,15 @@ v0 does not currently export a `Link` component.
19
15
 
20
16
  ## Property mapping
21
17
 
22
- | v8 `Link` | Converged `Link` |
23
- | -------------- | ---------------- |
24
- | `componentRef` | - |
25
- | `disabled` | `disabled` |
26
- | `href` | `href` |
27
- | `onClick` | `onClick` |
28
- | `rel` | `rel` |
29
- | `styles` | - |
30
- | `target` | `target` |
31
- | `theme` | - |
32
- | `type` | `type` |
33
- | `underline` | `inline` |
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/README.md CHANGED
@@ -1,23 +1,13 @@
1
1
  # @fluentui/react-link
2
2
 
3
- **Link components for [Fluent UI](https://dev.microsoft.com/fluentui)**
3
+ **Link components for [Fluent UI](https://aka.ms/fluentui-storybook)**
4
4
 
5
- The Link component references data that a user can follow by clicking or tapping it.
6
-
7
- ## STATUS: WIP 🚧
8
-
9
- These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
5
+ Links reference data that a user can follow by clicking or tapping it.
10
6
 
11
7
  ## Usage
12
8
 
13
9
  To import Link:
14
10
 
15
- ```js
16
- import { Link } from '@fluentui/react-link';
17
- ```
18
-
19
- Once the Link component graduates to a production release, the component will be available at:
20
-
21
11
  ```js
22
12
  import { Link } from '@fluentui/react-components';
23
13
  ```
@@ -27,6 +17,23 @@ import { Link } from '@fluentui/react-components';
27
17
  ```jsx
28
18
  <Link>This is a link</Link>
29
19
  <Link href="https://www.bing.com">This is a link</Link>
20
+ <Link href="https://www.bing.com" appearance="subtle">This is a link</Link>
30
21
  <Link href="https://www.bing.com" disabled>This is a link</Link>
31
22
  <Link href="https://www.bing.com" target="_blank">This is a link</Link>
23
+ <Link as="button" appearance="subtle">This is a link</Link>
32
24
  ```
25
+
26
+ See [Fluent UI Storybook](https://aka.ms/fluentui-storybook) for more detailed usage examples.
27
+
28
+ Alternatively, run Storybook locally with:
29
+
30
+ 1. `yarn start`
31
+ 2. Select `react-link` from the list.
32
+
33
+ ### Specification
34
+
35
+ See [SPEC.md](./SPEC.md).
36
+
37
+ ### Migration Guide
38
+
39
+ If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest Link implementation.
package/SPEC.md CHANGED
@@ -54,72 +54,7 @@ The `Link` can also be custom rendered as something entirely different by replac
54
54
 
55
55
  ### Props
56
56
 
57
- ```ts
58
- export type LinkProps = ComponentProps &
59
- React.AnchorHTMLAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLElement> &
60
- Omit<React.ButtonHTMLAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLElement>, 'type'> & {
61
- /**
62
- * URL the link points to. If not provided, the link renders as a button (unless that behavior is
63
- * overridden using `as`).
64
- */
65
- href?: string;
66
-
67
- /**
68
- * Click handler for the link.
69
- */
70
- onClick?: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLElement>) => void;
71
-
72
- /**
73
- * Relationship to the linked URL (can be a space-separated list).
74
- * Most common values are `noreferrer` and/or `noopener`.
75
- * This prop is only applied if `href` is set.
76
- */
77
- rel?: string;
78
-
79
- /**
80
- * Where to open the linked URL. Common values are `_blank` (a new tab or window),
81
- * `_self` (the current window/context), `_parent`, and `_top`.
82
- * This prop is only applied if `href` is set.
83
- */
84
- target?: string;
85
-
86
- /**
87
- * Built-in HTML attribute with different behavior depending on how the link is rendered.
88
- * If rendered as `<a>`, hints at the MIME type.
89
- * If rendered as `<button>`, override the type of button (`button` is the default).
90
- */
91
- type?: string;
92
-
93
- /**
94
- * A link can appear either with its default style or subtle.
95
- * If not specified, the link appears with its default styling.
96
- */
97
- appearance?: 'subtle';
98
-
99
- /**
100
- * Whether the link is disabled.
101
- * @default false
102
- */
103
- disabled?: boolean;
104
-
105
- /**
106
- * When set, allows the link to be focusable even when it has been disabled. This is used in scenarios where it is
107
- * important to keep a consistent tab order for screen reader and keyboard users.
108
- * @default false
109
- */
110
- disabledFocusable?: boolean;
111
-
112
- /**
113
- * If true, changes styling when the link is being used alongside other text content.
114
- * @default false
115
- */
116
- inline?: boolean;
117
- };
118
- ```
119
-
120
- ### Styling Tokens
121
-
122
- TBD once we decide on component tokens work.
57
+ See API at [Link.types.ts](./src/components/Link/Link.types.ts).
123
58
 
124
59
  ## Structure
125
60
 
@@ -141,7 +76,7 @@ For `Links` rendering as anything other than `<a>` (the example below uses `<but
141
76
 
142
77
  ## Migration
143
78
 
144
- See [MIGRATION.md](https://github.com/microsoft/fluentui/blob/master/packages/react-link/MIGRATION.md).
79
+ See [MIGRATION.md](./MIGRATION.md).
145
80
 
146
81
  ## Behaviors
147
82
 
package/dist/index.d.ts CHANGED
@@ -10,19 +10,15 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
10
10
  */
11
11
  export declare const Link: ForwardRefComponent<LinkProps>;
12
12
 
13
- /**
14
- * @deprecated Use `linkClassNames.root` instead.
15
- */
16
- export declare const linkClassName = "fui-Link";
17
-
18
13
  export declare const linkClassNames: SlotClassNames<LinkSlots>;
19
14
 
20
- declare type LinkCommons = {
15
+ export declare type LinkProps = ComponentProps<LinkSlots> & {
21
16
  /**
22
17
  * A link can appear either with its default style or subtle.
23
18
  * If not specified, the link appears with its default styling.
19
+ * @default 'default'
24
20
  */
25
- appearance?: 'subtle';
21
+ appearance?: 'default' | 'subtle';
26
22
  /**
27
23
  * Whether the link is disabled.
28
24
  * @default false
@@ -41,8 +37,6 @@ declare type LinkCommons = {
41
37
  inline?: boolean;
42
38
  };
43
39
 
44
- export declare type LinkProps = ComponentProps<LinkSlots> & LinkCommons;
45
-
46
40
  export declare type LinkSlots = {
47
41
  /**
48
42
  * Root of the component that renders as either an <a> or a <button> tag.
@@ -50,7 +44,7 @@ export declare type LinkSlots = {
50
44
  root: Slot<'a', 'button'>;
51
45
  };
52
46
 
53
- export declare type LinkState = ComponentState<LinkSlots> & LinkCommons;
47
+ export declare type LinkState = ComponentState<LinkSlots> & Required<Pick<LinkProps, 'appearance' | 'disabled' | 'disabledFocusable' | 'inline'>>;
54
48
 
55
49
  /**
56
50
  * Renders a Link component by passing the state defined props to the appropriate slots.
File without changes
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,WAAjC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,mBAAT,QAAoC,cAApC;AAIA;;AAEG;;AACH,OAAO,MAAM,IAAI,gBAAmC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClF,QAAM,KAAK,GAAG,gBAAgB,CAAC,KAAD,EAAQ,GAAR,CAA9B;AAEA,EAAA,sBAAsB,CAAC,KAAD,CAAtB;AAEA,SAAO,mBAAmB,CAAC,KAAD,CAA1B,CALkF,CAMlF;AACD,CAPmD,CAA7C;AASP,IAAI,CAAC,WAAL,GAAmB,MAAnB","sourcesContent":["import * as React from 'react';\nimport { useLink_unstable } from './useLink';\nimport { useLinkStyles_unstable } from './useLinkStyles';\nimport { renderLink_unstable } from './renderLink';\nimport type { LinkProps } from './Link.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A Link is a reference to data that a user can follow by clicking or tapping it.\n */\nexport const Link: ForwardRefComponent<LinkProps> = React.forwardRef((props, ref) => {\n const state = useLink_unstable(props, ref);\n\n useLinkStyles_unstable(state);\n\n return renderLink_unstable(state);\n // Work around some small mismatches in inferred types which don't matter in practice\n}) as ForwardRefComponent<LinkProps>;\n\nLink.displayName = 'Link';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,WAAjC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,mBAAT,QAAoC,cAApC;AAIA;;AAEG;;AACH,OAAO,MAAM,IAAI,gBAAmC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAClF,MAAM,KAAK,GAAG,gBAAgB,CAAC,KAAD,EAAQ,GAAR,CAA9B;EAEA,sBAAsB,CAAC,KAAD,CAAtB;EAEA,OAAO,mBAAmB,CAAC,KAAD,CAA1B,CALkF,CAMlF;AACD,CAPmD,CAA7C;AASP,IAAI,CAAC,WAAL,GAAmB,MAAnB","sourcesContent":["import * as React from 'react';\nimport { useLink_unstable } from './useLink';\nimport { useLinkStyles_unstable } from './useLinkStyles';\nimport { renderLink_unstable } from './renderLink';\nimport type { LinkProps } from './Link.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A Link is a reference to data that a user can follow by clicking or tapping it.\n */\nexport const Link: ForwardRefComponent<LinkProps> = React.forwardRef((props, ref) => {\n const state = useLink_unstable(props, ref);\n\n useLinkStyles_unstable(state);\n\n return renderLink_unstable(state);\n // Work around some small mismatches in inferred types which don't matter in practice\n}) as ForwardRefComponent<LinkProps>;\n\nLink.displayName = 'Link';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"file":"Link.types.js","sourceRoot":"../src/","sources":["components/Link/Link.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type LinkSlots = {\n /**\n * Root of the component that renders as either an <a> or a <button> tag.\n */\n root: Slot<'a', 'button'>;\n};\n\ntype LinkCommons = {\n /**\n * A link can appear either with its default style or subtle.\n * If not specified, the link appears with its default styling.\n */\n appearance?: 'subtle';\n\n /**\n * Whether the link is disabled.\n * @default false\n */\n disabled?: boolean;\n\n /**\n * When set, allows the link to be focusable even when it has been disabled. This is used in scenarios where it is\n * important to keep a consistent tab order for screen reader and keyboard users.\n * @default false\n */\n disabledFocusable?: boolean;\n\n /**\n * If true, changes styling when the link is being used alongside other text content.\n * @default false\n */\n inline?: boolean;\n};\n\nexport type LinkProps = ComponentProps<LinkSlots> & LinkCommons;\n\nexport type LinkState = ComponentState<LinkSlots> & LinkCommons;\n"]}
1
+ {"version":3,"file":"Link.types.js","sourceRoot":"../src/","sources":["components/Link/Link.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type LinkSlots = {\n /**\n * Root of the component that renders as either an <a> or a <button> tag.\n */\n root: Slot<'a', 'button'>;\n};\n\nexport type LinkProps = ComponentProps<LinkSlots> & {\n /**\n * A link can appear either with its default style or subtle.\n * If not specified, the link appears with its default styling.\n * @default 'default'\n */\n appearance?: 'default' | 'subtle';\n\n /**\n * Whether the link is disabled.\n * @default false\n */\n disabled?: boolean;\n\n /**\n * When set, allows the link to be focusable even when it has been disabled. This is used in scenarios where it is\n * important to keep a consistent tab order for screen reader and keyboard users.\n * @default false\n */\n disabledFocusable?: boolean;\n\n /**\n * If true, changes styling when the link is being used alongside other text content.\n * @default false\n */\n inline?: boolean;\n};\n\nexport type LinkState = ComponentState<LinkSlots> &\n Required<Pick<LinkProps, 'appearance' | 'disabled' | 'disabledFocusable' | 'inline'>>;\n"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Link/renderLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAAqB;AACtD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAY,KAAZ,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { LinkSlots, LinkState } from './Link.types';\n\n/**\n * Renders a Link component by passing the state defined props to the appropriate slots.\n */\nexport const renderLink_unstable = (state: LinkState) => {\n const { slots, slotProps } = getSlots<LinkSlots>(state);\n\n return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Link/renderLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAAqB;EACtD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAY,KAAZ,CAArC;EAEA,oBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CAJM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { LinkSlots, LinkState } from './Link.types';\n\n/**\n * Renders a Link component by passing the state defined props to the appropriate slots.\n */\nexport const renderLink_unstable = (state: LinkState) => {\n const { slots, slotProps } = getSlots<LinkSlots>(state);\n\n return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}
@@ -8,10 +8,10 @@ import { useLinkState_unstable } from './useLinkState';
8
8
 
9
9
  export const useLink_unstable = (props, ref) => {
10
10
  const {
11
- appearance,
12
- disabled,
13
- disabledFocusable,
14
- inline
11
+ appearance = 'default',
12
+ disabled = false,
13
+ disabledFocusable = false,
14
+ inline = false
15
15
  } = props;
16
16
  const as = props.as || (props.href ? 'a' : 'button');
17
17
  const state = {
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Link/useLink.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AAGA;;;;AAIG;;AACH,OAAO,MAAM,gBAAgB,GAAG,CAC9B,KAD8B,EAE9B,GAF8B,KAGjB;AACb,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,QAAd;AAAwB,IAAA,iBAAxB;AAA2C,IAAA;AAA3C,MAAsD,KAA5D;AACA,QAAM,EAAE,GAAG,KAAK,CAAC,EAAN,KAAa,KAAK,CAAC,IAAN,GAAa,GAAb,GAAmB,QAAhC,CAAX;AAEA,QAAM,KAAK,GAAc;AACvB;AACA,IAAA,UAFuB;AAGvB,IAAA,QAHuB;AAIvB,IAAA,iBAJuB;AAKvB,IAAA,MALuB;AAOvB;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KARW;AAYvB,IAAA,IAAI,EAAE,qBAAqB,CAAC,EAAD,EAAK;AAC9B,MAAA,GAD8B;AAE9B,SAAG,KAF2B;AAG9B,MAAA;AAH8B,KAAL;AAZJ,GAAzB;AAmBA,EAAA,qBAAqB,CAAC,KAAD,CAArB;AAEA,SAAO,KAAP;AACD,CA7BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useLinkState_unstable } from './useLinkState';\nimport type { LinkProps, LinkState } from './Link.types';\n\n/**\n * Given user props, defines default props for the Link, calls useLinkState_unstable, and returns processed state.\n * @param props - User provided props to the Link component.\n * @param ref - User provided ref to be passed to the Link component.\n */\nexport const useLink_unstable = (\n props: LinkProps,\n ref: React.Ref<HTMLAnchorElement | HTMLButtonElement>,\n): LinkState => {\n const { appearance, disabled, disabledFocusable, inline } = props;\n const as = props.as || (props.href ? 'a' : 'button');\n\n const state: LinkState = {\n // Props passed at the top-level\n appearance,\n disabled,\n disabledFocusable,\n inline,\n\n // Slots definition\n components: {\n root: 'a',\n },\n\n root: getNativeElementProps(as, {\n ref,\n ...props,\n as,\n }),\n };\n\n useLinkState_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Link/useLink.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AAGA;;;;AAIG;;AACH,OAAO,MAAM,gBAAgB,GAAG,CAC9B,KAD8B,EAE9B,GAF8B,KAGjB;EACb,MAAM;IAAE,UAAU,GAAG,SAAf;IAA0B,QAAQ,GAAG,KAArC;IAA4C,iBAAiB,GAAG,KAAhE;IAAuE,MAAM,GAAG;EAAhF,IAA0F,KAAhG;EACA,MAAM,EAAE,GAAG,KAAK,CAAC,EAAN,KAAa,KAAK,CAAC,IAAN,GAAa,GAAb,GAAmB,QAAhC,CAAX;EAEA,MAAM,KAAK,GAAc;IACvB;IACA,UAFuB;IAGvB,QAHuB;IAIvB,iBAJuB;IAKvB,MALuB;IAOvB;IACA,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CARW;IAYvB,IAAI,EAAE,qBAAqB,CAAC,EAAD,EAAK;MAC9B,GAD8B;MAE9B,GAAG,KAF2B;MAG9B;IAH8B,CAAL;EAZJ,CAAzB;EAmBA,qBAAqB,CAAC,KAAD,CAArB;EAEA,OAAO,KAAP;AACD,CA7BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useLinkState_unstable } from './useLinkState';\nimport type { LinkProps, LinkState } from './Link.types';\n\n/**\n * Given user props, defines default props for the Link, calls useLinkState_unstable, and returns processed state.\n * @param props - User provided props to the Link component.\n * @param ref - User provided ref to be passed to the Link component.\n */\nexport const useLink_unstable = (\n props: LinkProps,\n ref: React.Ref<HTMLAnchorElement | HTMLButtonElement>,\n): LinkState => {\n const { appearance = 'default', disabled = false, disabledFocusable = false, inline = false } = props;\n const as = props.as || (props.href ? 'a' : 'button');\n\n const state: LinkState = {\n // Props passed at the top-level\n appearance,\n disabled,\n disabledFocusable,\n inline,\n\n // Slots definition\n components: {\n root: 'a',\n },\n\n root: getNativeElementProps(as, {\n ref,\n ...props,\n as,\n }),\n };\n\n useLinkState_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -48,7 +48,8 @@ export const useLinkState_unstable = state => {
48
48
  }; // Set the aria-disabled and disabled props correctly.
49
49
 
50
50
 
51
- state.root['aria-disabled'] = disabled || disabledFocusable;
51
+ state.disabled = disabled || disabledFocusable;
52
+ state.root['aria-disabled'] = disabled || disabledFocusable || undefined;
52
53
 
53
54
  if (state.root.as === 'button') {
54
55
  state.root.disabled = disabled && !disabledFocusable;