@fluentui/react-image 9.0.0-alpha.90 → 9.0.0-beta.4
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 +226 -1
- package/CHANGELOG.md +60 -2
- package/MIGRATION.md +235 -0
- package/README.md +4 -0
- package/dist/react-image.d.ts +2 -0
- package/lib/components/Image/Image.js +2 -2
- package/lib/components/Image/Image.js.map +1 -1
- package/lib/components/Image/renderImage.js +6 -7
- package/lib/components/Image/renderImage.js.map +1 -1
- package/lib/components/Image/useImage.js +19 -18
- package/lib/components/Image/useImage.js.map +1 -1
- package/lib/components/Image/useImageStyles.d.ts +1 -0
- package/lib/components/Image/useImageStyles.js +7 -6
- package/lib/components/Image/useImageStyles.js.map +1 -1
- package/lib-commonjs/Image.js +1 -1
- package/lib-commonjs/components/Image/Image.js +6 -6
- package/lib-commonjs/components/Image/Image.js.map +1 -1
- package/lib-commonjs/components/Image/index.js +1 -1
- package/lib-commonjs/components/Image/renderImage.js +9 -11
- package/lib-commonjs/components/Image/renderImage.js.map +1 -1
- package/lib-commonjs/components/Image/useImage.js +19 -19
- package/lib-commonjs/components/Image/useImage.js.map +1 -1
- package/lib-commonjs/components/Image/useImageStyles.d.ts +1 -0
- package/lib-commonjs/components/Image/useImageStyles.js +10 -8
- package/lib-commonjs/components/Image/useImageStyles.js.map +1 -1
- package/lib-commonjs/index.js +1 -1
- package/package.json +9 -9
- package/lib/common/isConformant.d.ts +0 -4
- package/lib/common/isConformant.js +0 -13
- package/lib/common/isConformant.js.map +0 -1
- package/lib-commonjs/common/isConformant.d.ts +0 -4
- package/lib-commonjs/common/isConformant.js +0 -24
- package/lib-commonjs/common/isConformant.js.map +0 -1
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,232 @@
|
|
|
2
2
|
"name": "@fluentui/react-image",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Thu, 25 Nov 2021 08:31:32 GMT",
|
|
6
|
+
"tag": "@fluentui/react-image_v9.0.0-beta.4",
|
|
7
|
+
"version": "9.0.0-beta.4",
|
|
8
|
+
"comments": {
|
|
9
|
+
"none": [
|
|
10
|
+
{
|
|
11
|
+
"author": "tkrasniqi@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-image",
|
|
13
|
+
"commit": "01111bb9f10ad2bbe10902a48d15dce2e9cc4264",
|
|
14
|
+
"comment": {
|
|
15
|
+
"title": "",
|
|
16
|
+
"value": ""
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
],
|
|
20
|
+
"prerelease": [
|
|
21
|
+
{
|
|
22
|
+
"author": "beachball",
|
|
23
|
+
"package": "@fluentui/react-image",
|
|
24
|
+
"comment": "Bump @fluentui/react-make-styles to v9.0.0-beta.4",
|
|
25
|
+
"commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"author": "beachball",
|
|
29
|
+
"package": "@fluentui/react-image",
|
|
30
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-beta.4",
|
|
31
|
+
"commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"author": "beachball",
|
|
35
|
+
"package": "@fluentui/react-image",
|
|
36
|
+
"comment": "Bump @fluentui/babel-make-styles to v9.0.0-beta.4",
|
|
37
|
+
"commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"author": "beachball",
|
|
41
|
+
"package": "@fluentui/react-image",
|
|
42
|
+
"comment": "Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.4",
|
|
43
|
+
"commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"author": "beachball",
|
|
47
|
+
"package": "@fluentui/react-image",
|
|
48
|
+
"comment": "Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.4",
|
|
49
|
+
"commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
|
|
50
|
+
}
|
|
51
|
+
]
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"date": "Fri, 12 Nov 2021 13:25:24 GMT",
|
|
56
|
+
"tag": "@fluentui/react-image_v9.0.0-beta.3",
|
|
57
|
+
"version": "9.0.0-beta.3",
|
|
58
|
+
"comments": {
|
|
59
|
+
"prerelease": [
|
|
60
|
+
{
|
|
61
|
+
"author": "olfedias@microsoft.com",
|
|
62
|
+
"package": "@fluentui/react-image",
|
|
63
|
+
"commit": "22460e1421c0f3b2bdf9c76d80a2cb202fa30079",
|
|
64
|
+
"comment": "export static classes for components"
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"author": "gcox@microsoft.com",
|
|
68
|
+
"package": "@fluentui/react-image",
|
|
69
|
+
"commit": "8555daca54fa0ab490b5400b8d67a9430be9e8e5",
|
|
70
|
+
"comment": "Updated Image stories with codesandbox export comments"
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"author": "gcox@microsoft.com",
|
|
74
|
+
"package": "@fluentui/react-image",
|
|
75
|
+
"commit": "c9bd5b5a02ae94a8239ce1b56cac2f0d0dbd3586",
|
|
76
|
+
"comment": "Updated beta and RC components to ES2019"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"author": "beachball",
|
|
80
|
+
"package": "@fluentui/react-image",
|
|
81
|
+
"comment": "Bump @fluentui/react-make-styles to v9.0.0-beta.3",
|
|
82
|
+
"commit": "742342e52c65066f779232e4e1302fedf0dd460d"
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"author": "beachball",
|
|
86
|
+
"package": "@fluentui/react-image",
|
|
87
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-beta.3",
|
|
88
|
+
"commit": "742342e52c65066f779232e4e1302fedf0dd460d"
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"author": "beachball",
|
|
92
|
+
"package": "@fluentui/react-image",
|
|
93
|
+
"comment": "Bump @fluentui/babel-make-styles to v9.0.0-beta.3",
|
|
94
|
+
"commit": "742342e52c65066f779232e4e1302fedf0dd460d"
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"author": "beachball",
|
|
98
|
+
"package": "@fluentui/react-image",
|
|
99
|
+
"comment": "Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.3",
|
|
100
|
+
"commit": "742342e52c65066f779232e4e1302fedf0dd460d"
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"author": "beachball",
|
|
104
|
+
"package": "@fluentui/react-image",
|
|
105
|
+
"comment": "Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.3",
|
|
106
|
+
"commit": "742342e52c65066f779232e4e1302fedf0dd460d"
|
|
107
|
+
}
|
|
108
|
+
],
|
|
109
|
+
"none": [
|
|
110
|
+
{
|
|
111
|
+
"author": "mgodbolt@microsoft.com",
|
|
112
|
+
"package": "@fluentui/react-image",
|
|
113
|
+
"commit": "7fafe76eb2c09f9d17a03c11ba73729d91ef411e",
|
|
114
|
+
"comment": "update docs descriptions"
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"author": "lingfangao@hotmail.com",
|
|
118
|
+
"package": "@fluentui/react-image",
|
|
119
|
+
"commit": "00f70581480b536e723fb69edf0ae617beac4807",
|
|
120
|
+
"comment": "Remove beta release tag"
|
|
121
|
+
}
|
|
122
|
+
]
|
|
123
|
+
}
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
"date": "Wed, 27 Oct 2021 12:14:18 GMT",
|
|
127
|
+
"tag": "@fluentui/react-image_v9.0.0-beta.2",
|
|
128
|
+
"version": "9.0.0-beta.2",
|
|
129
|
+
"comments": {
|
|
130
|
+
"none": [
|
|
131
|
+
{
|
|
132
|
+
"author": "tkrasniqi@microsoft.com",
|
|
133
|
+
"package": "@fluentui/react-image",
|
|
134
|
+
"commit": "138ac075ebfc80d8ed588e23177d14b70ca03593",
|
|
135
|
+
"comment": "Updated migration guide"
|
|
136
|
+
}
|
|
137
|
+
],
|
|
138
|
+
"prerelease": [
|
|
139
|
+
{
|
|
140
|
+
"author": "gcox@microsoft.com",
|
|
141
|
+
"package": "@fluentui/react-image",
|
|
142
|
+
"commit": "e71393ebda85c52094c46d42d93af1e642f21293",
|
|
143
|
+
"comment": "Removed duplicate 'Image' from story names"
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
"author": "peter@draxler.ml",
|
|
147
|
+
"package": "@fluentui/react-image",
|
|
148
|
+
"commit": "f6db7c8d6b7db0902775e7857b62b745be35b59a",
|
|
149
|
+
"comment": "added styling of documentation"
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
"author": "beachball",
|
|
153
|
+
"package": "@fluentui/react-image",
|
|
154
|
+
"comment": "Bump @fluentui/react-make-styles to v9.0.0-beta.2",
|
|
155
|
+
"commit": "0f8f1ae7c2d908e51e29dd342d79e041f86fac08"
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
"author": "beachball",
|
|
159
|
+
"package": "@fluentui/react-image",
|
|
160
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-beta.2",
|
|
161
|
+
"commit": "0f8f1ae7c2d908e51e29dd342d79e041f86fac08"
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
"author": "beachball",
|
|
165
|
+
"package": "@fluentui/react-image",
|
|
166
|
+
"comment": "Bump @fluentui/babel-make-styles to v9.0.0-beta.2",
|
|
167
|
+
"commit": "0f8f1ae7c2d908e51e29dd342d79e041f86fac08"
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
"author": "beachball",
|
|
171
|
+
"package": "@fluentui/react-image",
|
|
172
|
+
"comment": "Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.2",
|
|
173
|
+
"commit": "0f8f1ae7c2d908e51e29dd342d79e041f86fac08"
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
"author": "beachball",
|
|
177
|
+
"package": "@fluentui/react-image",
|
|
178
|
+
"comment": "Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.2",
|
|
179
|
+
"commit": "0f8f1ae7c2d908e51e29dd342d79e041f86fac08"
|
|
180
|
+
}
|
|
181
|
+
]
|
|
182
|
+
}
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
"date": "Wed, 06 Oct 2021 10:37:22 GMT",
|
|
186
|
+
"tag": "@fluentui/react-image_v9.0.0-beta.1",
|
|
187
|
+
"version": "9.0.0-beta.1",
|
|
188
|
+
"comments": {
|
|
189
|
+
"prerelease": [
|
|
190
|
+
{
|
|
191
|
+
"author": "lingfangao@hotmail.com",
|
|
192
|
+
"package": "@fluentui/react-image",
|
|
193
|
+
"comment": "Bump all v9 components to beta prerelease tag",
|
|
194
|
+
"commit": "5553164c190a4beb4780745d0e6403109e057913"
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
"author": "beachball",
|
|
198
|
+
"package": "@fluentui/react-image",
|
|
199
|
+
"comment": "Bump @fluentui/react-make-styles to v9.0.0-beta.1",
|
|
200
|
+
"commit": "5553164c190a4beb4780745d0e6403109e057913"
|
|
201
|
+
},
|
|
202
|
+
{
|
|
203
|
+
"author": "beachball",
|
|
204
|
+
"package": "@fluentui/react-image",
|
|
205
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-beta.1",
|
|
206
|
+
"commit": "5553164c190a4beb4780745d0e6403109e057913"
|
|
207
|
+
},
|
|
208
|
+
{
|
|
209
|
+
"author": "beachball",
|
|
210
|
+
"package": "@fluentui/react-image",
|
|
211
|
+
"comment": "Bump @fluentui/babel-make-styles to v9.0.0-beta.1",
|
|
212
|
+
"commit": "5553164c190a4beb4780745d0e6403109e057913"
|
|
213
|
+
},
|
|
214
|
+
{
|
|
215
|
+
"author": "beachball",
|
|
216
|
+
"package": "@fluentui/react-image",
|
|
217
|
+
"comment": "Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.1",
|
|
218
|
+
"commit": "5553164c190a4beb4780745d0e6403109e057913"
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
"author": "beachball",
|
|
222
|
+
"package": "@fluentui/react-image",
|
|
223
|
+
"comment": "Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.1",
|
|
224
|
+
"commit": "5553164c190a4beb4780745d0e6403109e057913"
|
|
225
|
+
}
|
|
226
|
+
]
|
|
227
|
+
}
|
|
228
|
+
},
|
|
229
|
+
{
|
|
230
|
+
"date": "Tue, 05 Oct 2021 12:47:58 GMT",
|
|
6
231
|
"tag": "@fluentui/react-image_v9.0.0-alpha.90",
|
|
7
232
|
"version": "9.0.0-alpha.90",
|
|
8
233
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,70 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-image
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 25 Nov 2021 08:31:32 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.0-beta.4)
|
|
8
|
+
|
|
9
|
+
Thu, 25 Nov 2021 08:31:32 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.0-beta.3..@fluentui/react-image_v9.0.0-beta.4)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-make-styles to v9.0.0-beta.4 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
|
|
15
|
+
- Bump @fluentui/react-utilities to v9.0.0-beta.4 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
|
|
16
|
+
- Bump @fluentui/babel-make-styles to v9.0.0-beta.4 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
|
|
17
|
+
- Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.4 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
|
|
18
|
+
- Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.4 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
|
|
19
|
+
|
|
20
|
+
## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.0-beta.3)
|
|
21
|
+
|
|
22
|
+
Fri, 12 Nov 2021 13:25:24 GMT
|
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.0-beta.2..@fluentui/react-image_v9.0.0-beta.3)
|
|
24
|
+
|
|
25
|
+
### Changes
|
|
26
|
+
|
|
27
|
+
- export static classes for components ([PR #20447](https://github.com/microsoft/fluentui/pull/20447) by olfedias@microsoft.com)
|
|
28
|
+
- Updated Image stories with codesandbox export comments ([PR #20369](https://github.com/microsoft/fluentui/pull/20369) by gcox@microsoft.com)
|
|
29
|
+
- Updated beta and RC components to ES2019 ([PR #20405](https://github.com/microsoft/fluentui/pull/20405) by gcox@microsoft.com)
|
|
30
|
+
- Bump @fluentui/react-make-styles to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
|
|
31
|
+
- Bump @fluentui/react-utilities to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
|
|
32
|
+
- Bump @fluentui/babel-make-styles to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
|
|
33
|
+
- Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
|
|
34
|
+
- Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
|
|
35
|
+
|
|
36
|
+
## [9.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.0-beta.2)
|
|
37
|
+
|
|
38
|
+
Wed, 27 Oct 2021 12:14:18 GMT
|
|
39
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.0-beta.1..@fluentui/react-image_v9.0.0-beta.2)
|
|
40
|
+
|
|
41
|
+
### Changes
|
|
42
|
+
|
|
43
|
+
- Removed duplicate 'Image' from story names ([PR #20268](https://github.com/microsoft/fluentui/pull/20268) by gcox@microsoft.com)
|
|
44
|
+
- added styling of documentation ([PR #20193](https://github.com/microsoft/fluentui/pull/20193) by peter@draxler.ml)
|
|
45
|
+
- Bump @fluentui/react-make-styles to v9.0.0-beta.2 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
|
|
46
|
+
- Bump @fluentui/react-utilities to v9.0.0-beta.2 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
|
|
47
|
+
- Bump @fluentui/babel-make-styles to v9.0.0-beta.2 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
|
|
48
|
+
- Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.2 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
|
|
49
|
+
- Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.2 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
|
|
50
|
+
|
|
51
|
+
## [9.0.0-beta.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.0-beta.1)
|
|
52
|
+
|
|
53
|
+
Wed, 06 Oct 2021 10:37:22 GMT
|
|
54
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.0-alpha.90..@fluentui/react-image_v9.0.0-beta.1)
|
|
55
|
+
|
|
56
|
+
### Changes
|
|
57
|
+
|
|
58
|
+
- Bump all v9 components to beta prerelease tag ([PR #20106](https://github.com/microsoft/fluentui/pull/20106) by lingfangao@hotmail.com)
|
|
59
|
+
- Bump @fluentui/react-make-styles to v9.0.0-beta.1 ([PR #20106](https://github.com/microsoft/fluentui/pull/20106) by beachball)
|
|
60
|
+
- Bump @fluentui/react-utilities to v9.0.0-beta.1 ([PR #20106](https://github.com/microsoft/fluentui/pull/20106) by beachball)
|
|
61
|
+
- Bump @fluentui/babel-make-styles to v9.0.0-beta.1 ([PR #20106](https://github.com/microsoft/fluentui/pull/20106) by beachball)
|
|
62
|
+
- Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.1 ([PR #20106](https://github.com/microsoft/fluentui/pull/20106) by beachball)
|
|
63
|
+
- Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.1 ([PR #20106](https://github.com/microsoft/fluentui/pull/20106) by beachball)
|
|
64
|
+
|
|
7
65
|
## [9.0.0-alpha.90](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.0-alpha.90)
|
|
8
66
|
|
|
9
|
-
Tue, 05 Oct 2021 12:47:
|
|
67
|
+
Tue, 05 Oct 2021 12:47:58 GMT
|
|
10
68
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.0-alpha.89..@fluentui/react-image_v9.0.0-alpha.90)
|
|
11
69
|
|
|
12
70
|
### Changes
|
package/MIGRATION.md
ADDED
|
@@ -0,0 +1,235 @@
|
|
|
1
|
+
# Image Migration
|
|
2
|
+
|
|
3
|
+
## Introduction
|
|
4
|
+
|
|
5
|
+
This guide is a reference for upgrading the Image component from v8 (Fabric) or v0 (Northstar) to v9 (FluentUI vNext).
|
|
6
|
+
|
|
7
|
+
## Migration from v8 (Fabric)
|
|
8
|
+
|
|
9
|
+
### Property mapping
|
|
10
|
+
|
|
11
|
+
The table below presents a mapping of props between the v8 (FabricUI) and v9 (Fluent UI vNext) in order to clarify which properties require changes to achieve the same result.
|
|
12
|
+
|
|
13
|
+
> ⚠️ Note - Properties not in this table are considered deprecated.
|
|
14
|
+
|
|
15
|
+
| v7 / v8 | v9 | Good to go? |
|
|
16
|
+
| ----------------------- | ------- | ----------- |
|
|
17
|
+
| `className` | - | ✔️ |
|
|
18
|
+
| `coverStyle` | `fit` | ⚠️ |
|
|
19
|
+
| `imageFit` | `fit` | ✔️ |
|
|
20
|
+
| `maximizeFrame` | `block` | ✔️ |
|
|
21
|
+
| `loading` | - | ✔️ |
|
|
22
|
+
| `onLoadingStateChanged` | - | ❌ |
|
|
23
|
+
| `shouldFadeIn` | - | ❌ |
|
|
24
|
+
| `shouldStartVisible` | - | ❌ |
|
|
25
|
+
| `styles` | - | ❌ |
|
|
26
|
+
| `theme` | - | ❓ |
|
|
27
|
+
|
|
28
|
+
### className
|
|
29
|
+
|
|
30
|
+
_This property has not changed and can be left as is._
|
|
31
|
+
|
|
32
|
+
### coverStyle
|
|
33
|
+
|
|
34
|
+
The behaviour of this prop can be achieved using the `fit` prop with the value of `cover`.
|
|
35
|
+
|
|
36
|
+
```jsx
|
|
37
|
+
<Image src="example.jpg" fit="cover" />
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### imageFit
|
|
41
|
+
|
|
42
|
+
This can be achieved using the `fit` prop by asigning the value of `contain`.
|
|
43
|
+
|
|
44
|
+
```jsx
|
|
45
|
+
<Image src="example.jpg" fit="contain" />
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### maximizeFrame
|
|
49
|
+
|
|
50
|
+
This prop has been renamed to `block` which will result in the same behaviour as before.
|
|
51
|
+
|
|
52
|
+
```jsx
|
|
53
|
+
<Image src="example.jpg" block />
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### loading
|
|
57
|
+
|
|
58
|
+
_This property has not changed and can be used as is._
|
|
59
|
+
|
|
60
|
+
### onLoadingStateChanged
|
|
61
|
+
|
|
62
|
+
For v9, this feature is no longer supported. The alternative would be to use the global events such as: `onLoad`, `onError` to detect the image loading state.
|
|
63
|
+
|
|
64
|
+
### shouldFadeIn
|
|
65
|
+
|
|
66
|
+
For v9, this feature is no longer supported. The alternative is to apply the animation through `make-styles` and using the global event `onLoad`. Below is an example of a migration:
|
|
67
|
+
|
|
68
|
+
```jsx
|
|
69
|
+
import { useState } from 'react';
|
|
70
|
+
import { Image } from '@fluentui/react-image';
|
|
71
|
+
import { makeStyles } from '@fluentui/react-make-styles';
|
|
72
|
+
|
|
73
|
+
const useStyles = makeStyles(theme => ({
|
|
74
|
+
fadeIn400: {
|
|
75
|
+
animationName: {
|
|
76
|
+
from : {
|
|
77
|
+
opacity: 0,
|
|
78
|
+
},
|
|
79
|
+
to: {
|
|
80
|
+
opacity: 1,
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
animationIterationCount: 'infinite',
|
|
84
|
+
animationDuration: '0.367s',
|
|
85
|
+
},
|
|
86
|
+
})
|
|
87
|
+
|
|
88
|
+
const MyComponent = () => {
|
|
89
|
+
const [isLoaded, setLoaded] = useState(false);
|
|
90
|
+
const styles = useStyles()
|
|
91
|
+
|
|
92
|
+
return <Image src="example.jpg" onLoad={()=> setLoaded(true)} className={!isLoaded? styles.fadeIn400 : ''} />
|
|
93
|
+
}
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### shouldStartVisible
|
|
97
|
+
|
|
98
|
+
For v9, this feature is no longer supported. The alternative would be to use the global events such as: `onLoad` and `onError` to achieve the same behaviour. Below is an example showcasing this:
|
|
99
|
+
|
|
100
|
+
```jsx
|
|
101
|
+
import { useState } from 'react';
|
|
102
|
+
import { makeStyles } from '@fluentui/react-make-styles';
|
|
103
|
+
import { Image } from '@fluentui/react-image';
|
|
104
|
+
|
|
105
|
+
const useStyles = makeStyles({
|
|
106
|
+
root: {
|
|
107
|
+
display: 'none',
|
|
108
|
+
},
|
|
109
|
+
});
|
|
110
|
+
|
|
111
|
+
export default function App() {
|
|
112
|
+
const [isLoaded, setLoaded] = useState(null);
|
|
113
|
+
|
|
114
|
+
const styles = useStyles();
|
|
115
|
+
|
|
116
|
+
return (
|
|
117
|
+
<Image
|
|
118
|
+
src="https://via.placeholder.com/300x300"
|
|
119
|
+
alt="Example image"
|
|
120
|
+
onLoad={() => setLoaded(true)}
|
|
121
|
+
onError={() => setLoaded(false)}
|
|
122
|
+
className={isLoaded === false ? styles.root : ''}
|
|
123
|
+
/>
|
|
124
|
+
);
|
|
125
|
+
}
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### styles
|
|
129
|
+
|
|
130
|
+
_This property has not changed and can be used as is. However, we highly recommend that you migrate to a `make-styles` styling solution for performance reasons._
|
|
131
|
+
|
|
132
|
+
### theme
|
|
133
|
+
|
|
134
|
+
_This property has not changed and can be used as is. However, we highly recommend that you migrate to a `make-styles` styling solution for performance reasons._
|
|
135
|
+
|
|
136
|
+
## Migration from v0 (Northstar)
|
|
137
|
+
|
|
138
|
+
### Property mapping
|
|
139
|
+
|
|
140
|
+
The table below presents a mapping of props between the v0 and v9 versions in order to make it clear which properties require changes to achieve the same result.
|
|
141
|
+
|
|
142
|
+
| v0 | v9 | Good to go? |
|
|
143
|
+
| --------------- | ------------------ | ----------- |
|
|
144
|
+
| `accessibility` | - | ❌ |
|
|
145
|
+
| `alt` | - | ✔️ |
|
|
146
|
+
| `aria-label` | - | ✔️ |
|
|
147
|
+
| `as` | - | ❌ |
|
|
148
|
+
| `avatar` | `shape="circular"` | ✔️ |
|
|
149
|
+
| `circular` | `shape="circular"` | ✔️ |
|
|
150
|
+
| `className` | - | ✔️ |
|
|
151
|
+
| `fluid` | `block` | ✔️ |
|
|
152
|
+
| `styles` | - | ❌ |
|
|
153
|
+
| `variables` | - | ❌ |
|
|
154
|
+
|
|
155
|
+
### accessibility
|
|
156
|
+
|
|
157
|
+
For v9, this property is no longer supported. It is recommended to follow the best practices of a11y in order for Image to be accessible to assistive tools. Thus:
|
|
158
|
+
|
|
159
|
+
- It is important for Image to have the `alt` description.
|
|
160
|
+
- In case the Image is decorative only, have either `role="presentation"` or `aria-hidden`. Ensure the correct usage of these two attributes, based on your objectives.
|
|
161
|
+
|
|
162
|
+
### alt
|
|
163
|
+
|
|
164
|
+
_This property has not changed and can be left as is._
|
|
165
|
+
|
|
166
|
+
### aria-label
|
|
167
|
+
|
|
168
|
+
_This property has not changed and can be left as is._
|
|
169
|
+
|
|
170
|
+
### as
|
|
171
|
+
|
|
172
|
+
For v9, this property is no longer supported. The Image prop will always be an `<img/>` element, it is not possible to show an image as any other element.
|
|
173
|
+
|
|
174
|
+
### avatar
|
|
175
|
+
|
|
176
|
+
This can be achieved using the `shape` prop with the value of `circular`.
|
|
177
|
+
|
|
178
|
+
```jsx
|
|
179
|
+
<Image src="example.jpg" shape="circular" />
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
### circular
|
|
183
|
+
|
|
184
|
+
This can be achieved using the `shape` prop with the value of `circular`.
|
|
185
|
+
|
|
186
|
+
```jsx
|
|
187
|
+
<Image src="example.jpg" shape="circular" />
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
### className
|
|
191
|
+
|
|
192
|
+
_This property has not changed and can be left as is._
|
|
193
|
+
|
|
194
|
+
### fluid
|
|
195
|
+
|
|
196
|
+
This prop has been renamed to `block` which will result into the same behaviour as before.
|
|
197
|
+
|
|
198
|
+
```jsx
|
|
199
|
+
<Image src="example.jpg" block />
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
### styles
|
|
203
|
+
|
|
204
|
+
_This property has not changed and can be used as is. However, we highly recommend that you migrate to a `make-styles` styling solution for performance reasons._
|
|
205
|
+
|
|
206
|
+
### variables
|
|
207
|
+
|
|
208
|
+
For v9, this feature is no longer supported. The alternative is to apply styles through `make-styles`. Below is an example of a migration:
|
|
209
|
+
|
|
210
|
+
#### v0 (Northstar) implementation
|
|
211
|
+
|
|
212
|
+
```jsx
|
|
213
|
+
const MyComponent = () => {
|
|
214
|
+
return <Image src="example.jpg" variables={{ width: '100px' }} />;
|
|
215
|
+
};
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
#### v9 (Fluent UI vNext) implementation
|
|
219
|
+
|
|
220
|
+
```jsx
|
|
221
|
+
import { Image } from '@fluentui/react-image';
|
|
222
|
+
import { makeStyles } from '@fluentui/react-make-styles';
|
|
223
|
+
|
|
224
|
+
const useStyles = makeStyles(theme => ({
|
|
225
|
+
width100: {
|
|
226
|
+
width: '100px'
|
|
227
|
+
},
|
|
228
|
+
})
|
|
229
|
+
|
|
230
|
+
const MyComponent = () => {
|
|
231
|
+
const styles = useStyles()
|
|
232
|
+
|
|
233
|
+
return <Image src="example.jpg" className={styles.width100} />
|
|
234
|
+
}
|
|
235
|
+
```
|
package/README.md
CHANGED
|
@@ -51,3 +51,7 @@ The DOM structure will result into:
|
|
|
51
51
|
Image component is build upon the `<img/>` tag, which does support all the native attributes. Additionaly, the following properties are available: `bordered`, `fit`, `block`, `shape` and `shadow`.
|
|
52
52
|
|
|
53
53
|
For more information on the component, please refer to the [API documentation](https://aka.ms/fluentui-storybook).
|
|
54
|
+
|
|
55
|
+
## Migration
|
|
56
|
+
|
|
57
|
+
For migrating from older versions of FluentUI, please check out the [migration guide](./MIGRATION.md)
|
package/dist/react-image.d.ts
CHANGED
|
@@ -10,6 +10,8 @@ import * as React_2 from 'react';
|
|
|
10
10
|
declare const Image_2: ForwardRefComponent<ImageProps>;
|
|
11
11
|
export { Image_2 as Image }
|
|
12
12
|
|
|
13
|
+
export declare const imageClassName = "fui-Image";
|
|
14
|
+
|
|
13
15
|
export declare type ImageCommons = {
|
|
14
16
|
/**
|
|
15
17
|
* An image can appear with rectangular border.
|
|
@@ -6,8 +6,8 @@ import { useImageStyles } from './useImageStyles';
|
|
|
6
6
|
* The Image component ensures the consistent styling of images.
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
export
|
|
10
|
-
|
|
9
|
+
export const Image = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
10
|
+
const state = useImage(props, ref);
|
|
11
11
|
useImageStyles(state);
|
|
12
12
|
return renderImage(state);
|
|
13
13
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,WAAT,QAA4B,eAA5B;AACA,SAAS,QAAT,QAAyB,YAAzB;AACA,SAAS,cAAT,QAA+B,kBAA/B;AAIA;;AAEG;;AACH,OAAO,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,WAAT,QAA4B,eAA5B;AACA,SAAS,QAAT,QAAyB,YAAzB;AACA,SAAS,cAAT,QAA+B,kBAA/B;AAIA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,QAAQ,CAAC,KAAD,EAAQ,GAAR,CAAtB;AACA,EAAA,cAAc,CAAC,KAAD,CAAd;AAEA,SAAO,WAAW,CAAC,KAAD,CAAlB;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourceRoot":""}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { __assign } from "tslib";
|
|
2
1
|
import * as React from 'react';
|
|
3
2
|
import { getSlots } from '@fluentui/react-utilities';
|
|
4
3
|
import { imageShorthandProps } from './useImage';
|
|
@@ -7,11 +6,11 @@ import { imageShorthandProps } from './useImage';
|
|
|
7
6
|
* Given the state of an image, renders it.
|
|
8
7
|
*/
|
|
9
8
|
|
|
10
|
-
export
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
return /*#__PURE__*/React.createElement(slots.root,
|
|
9
|
+
export const renderImage = state => {
|
|
10
|
+
const {
|
|
11
|
+
slots,
|
|
12
|
+
slotProps
|
|
13
|
+
} = getSlots(state, imageShorthandProps);
|
|
14
|
+
return /*#__PURE__*/React.createElement(slots.root, Object.assign({}, slotProps.root));
|
|
16
15
|
};
|
|
17
16
|
//# sourceMappingURL=renderImage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Image/renderImage.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/renderImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,mBAAT,QAAoC,YAApC;AAEA;;;AAGG;;AACH,OAAO,MAAM,WAAW,GAAI,KAAD,IAAsB;AAC/C,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAa,KAAb,EAAoB,mBAApB,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAAP;AACD,CAJM","sourceRoot":""}
|
|
@@ -1,29 +1,30 @@
|
|
|
1
|
-
import { __assign } from "tslib";
|
|
2
1
|
import { getNativeElementProps } from '@fluentui/react-utilities';
|
|
3
|
-
export
|
|
2
|
+
export const imageShorthandProps = ['root'];
|
|
4
3
|
/**
|
|
5
4
|
* Given user props, returns state and render function for an Image.
|
|
6
5
|
*/
|
|
7
6
|
|
|
8
|
-
export
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
7
|
+
export const useImage = (props, ref) => {
|
|
8
|
+
const {
|
|
9
|
+
bordered,
|
|
10
|
+
fit,
|
|
11
|
+
block,
|
|
12
|
+
shape = 'square',
|
|
13
|
+
shadow
|
|
14
|
+
} = props;
|
|
15
|
+
const state = {
|
|
16
|
+
bordered,
|
|
17
|
+
fit,
|
|
18
|
+
block,
|
|
19
|
+
shape,
|
|
20
|
+
shadow,
|
|
21
21
|
components: {
|
|
22
22
|
root: 'img'
|
|
23
23
|
},
|
|
24
|
-
root: getNativeElementProps('img',
|
|
25
|
-
ref
|
|
26
|
-
|
|
24
|
+
root: getNativeElementProps('img', {
|
|
25
|
+
ref,
|
|
26
|
+
...props
|
|
27
|
+
})
|
|
27
28
|
};
|
|
28
29
|
return state;
|
|
29
30
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Image/useImage.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/useImage.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA,OAAO,MAAM,mBAAmB,GAA4B,CAAC,MAAD,CAArD;AAEP;;AAEG;;AACH,OAAO,MAAM,QAAQ,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;AAC1F,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,GAAZ;AAAiB,IAAA,KAAjB;AAAwB,IAAA,KAAK,GAAG,QAAhC;AAA0C,IAAA;AAA1C,MAAqD,KAA3D;AAEA,QAAM,KAAK,GAAe;AACxB,IAAA,QADwB;AAExB,IAAA,GAFwB;AAGxB,IAAA,KAHwB;AAIxB,IAAA,KAJwB;AAKxB,IAAA,MALwB;AAMxB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KANY;AASxB,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAAR;AATH,GAA1B;AAeA,SAAO,KAAP;AACD,CAnBM","sourceRoot":""}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { mergeClasses, __styles } from '@fluentui/react-make-styles';
|
|
2
|
+
export const imageClassName = 'fui-Image';
|
|
2
3
|
|
|
3
|
-
|
|
4
|
+
const useStyles = /*#__PURE__*/__styles({
|
|
4
5
|
"root": {
|
|
5
6
|
"g2u3we": "fj3muxo",
|
|
6
7
|
"h3c5rm": ["f1akhkt", "f1lxtadh"],
|
|
@@ -27,7 +28,7 @@ var useStyles = /*#__PURE__*/__styles({
|
|
|
27
28
|
"Dimara": "ft85np5"
|
|
28
29
|
},
|
|
29
30
|
"rootShadow": {
|
|
30
|
-
"E5pizo":
|
|
31
|
+
"E5pizo": "f1whvlc6"
|
|
31
32
|
},
|
|
32
33
|
"rootFitNone": {
|
|
33
34
|
"st4lth": "f1plgu50",
|
|
@@ -57,11 +58,11 @@ var useStyles = /*#__PURE__*/__styles({
|
|
|
57
58
|
"a9b677": "fly5x3f"
|
|
58
59
|
}
|
|
59
60
|
}, {
|
|
60
|
-
"d": [".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f1fabniw{border-radius:var(--borderRadiusNone);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f44lkw9{border-radius:var(--borderRadiusCircular);}", ".ft85np5{border-radius:var(--borderRadiusMedium);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".
|
|
61
|
+
"d": [".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f1fabniw{border-radius:var(--borderRadiusNone);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f44lkw9{border-radius:var(--borderRadiusCircular);}", ".ft85np5{border-radius:var(--borderRadiusMedium);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f1plgu50{object-fit:none;}", ".f13uwng7{object-position:left top;}", ".fjmyj0p{object-position:right top;}", ".f1l02sjl{height:100%;}", ".fly5x3f{width:100%;}", ".f14xojzb{object-position:center;}", ".f1ps3kmd{object-fit:cover;}", ".f1kle4es{object-fit:contain;}"]
|
|
61
62
|
});
|
|
62
63
|
|
|
63
|
-
export
|
|
64
|
-
|
|
65
|
-
state.root.className = mergeClasses(styles.root, state.bordered && styles.rootBordered, state.shape === 'circular' && styles.rootCircular, state.shape === 'rounded' && styles.rootRounded, state.shadow && styles.rootShadow, state.fit === 'none' && styles.rootFitNone, state.fit === 'center' && styles.rootFitCenter, state.fit === 'cover' && styles.rootFitCover, state.fit === 'contain' && styles.rootFitContain, state.block && styles.rootBlock, state.root.className);
|
|
64
|
+
export const useImageStyles = state => {
|
|
65
|
+
const styles = useStyles();
|
|
66
|
+
state.root.className = mergeClasses(imageClassName, styles.root, state.bordered && styles.rootBordered, state.shape === 'circular' && styles.rootCircular, state.shape === 'rounded' && styles.rootRounded, state.shadow && styles.rootShadow, state.fit === 'none' && styles.rootFitNone, state.fit === 'center' && styles.rootFitCenter, state.fit === 'cover' && styles.rootFitCover, state.fit === 'contain' && styles.rootFitContain, state.block && styles.rootBlock, state.root.className);
|
|
66
67
|
};
|
|
67
68
|
//# sourceMappingURL=useImageStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Image/useImageStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/useImageStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;AAGA,OAAO,MAAM,cAAc,GAAG,WAAvB;;AAEP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAkDA,OAAO,MAAM,cAAc,GAAI,KAAD,IAAsB;AAClD,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,cADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,YAHQ,EAIjC,KAAK,CAAC,KAAN,KAAgB,UAAhB,IAA8B,MAAM,CAAC,YAJJ,EAKjC,KAAK,CAAC,KAAN,KAAgB,SAAhB,IAA6B,MAAM,CAAC,WALH,EAMjC,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,UANU,EAOjC,KAAK,CAAC,GAAN,KAAc,MAAd,IAAwB,MAAM,CAAC,WAPE,EAQjC,KAAK,CAAC,GAAN,KAAc,QAAd,IAA0B,MAAM,CAAC,aARA,EASjC,KAAK,CAAC,GAAN,KAAc,OAAd,IAAyB,MAAM,CAAC,YATC,EAUjC,KAAK,CAAC,GAAN,KAAc,SAAd,IAA2B,MAAM,CAAC,cAVD,EAWjC,KAAK,CAAC,KAAN,IAAe,MAAM,CAAC,SAXW,EAYjC,KAAK,CAAC,IAAN,CAAW,SAZsB,CAAnC;AAcD,CAhBM","sourceRoot":""}
|
package/lib-commonjs/Image.js
CHANGED
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
8
8
|
|
|
9
9
|
tslib_1.__exportStar(require("./components/Image/index"), exports);
|
|
10
10
|
//# sourceMappingURL=Image.js.map
|
|
@@ -5,20 +5,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.Image = void 0;
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
const React = /*#__PURE__*/require("react");
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
const renderImage_1 = /*#__PURE__*/require("./renderImage");
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
const useImage_1 = /*#__PURE__*/require("./useImage");
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
const useImageStyles_1 = /*#__PURE__*/require("./useImageStyles");
|
|
15
15
|
/**
|
|
16
16
|
* The Image component ensures the consistent styling of images.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
19
|
|
|
20
|
-
exports.Image = /*#__PURE__*/React.forwardRef(
|
|
21
|
-
|
|
20
|
+
exports.Image = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
21
|
+
const state = useImage_1.useImage(props, ref);
|
|
22
22
|
useImageStyles_1.useImageStyles(state);
|
|
23
23
|
return renderImage_1.renderImage(state);
|
|
24
24
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":";;;;;;;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,UAAA,CAAA,QAAA,CAAS,KAAT,EAAgB,GAAhB,CAAd;AACA,EAAA,gBAAA,CAAA,cAAA,CAAe,KAAf;AAEA,SAAO,aAAA,CAAA,WAAA,CAAY,KAAZ,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourceRoot":""}
|
|
@@ -5,25 +5,23 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.renderImage = void 0;
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
const React = /*#__PURE__*/require("react");
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
var useImage_1 = /*#__PURE__*/require("./useImage");
|
|
12
|
+
const useImage_1 = /*#__PURE__*/require("./useImage");
|
|
15
13
|
/**
|
|
16
14
|
* Define the render function.
|
|
17
15
|
* Given the state of an image, renders it.
|
|
18
16
|
*/
|
|
19
17
|
|
|
20
18
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
return React.createElement(slots.root,
|
|
19
|
+
const renderImage = state => {
|
|
20
|
+
const {
|
|
21
|
+
slots,
|
|
22
|
+
slotProps
|
|
23
|
+
} = react_utilities_1.getSlots(state, useImage_1.imageShorthandProps);
|
|
24
|
+
return React.createElement(slots.root, Object.assign({}, slotProps.root));
|
|
27
25
|
};
|
|
28
26
|
|
|
29
27
|
exports.renderImage = renderImage;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Image/renderImage.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/renderImage.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;AAEA;;;AAGG;;;AACI,MAAM,WAAW,GAAI,KAAD,IAAsB;AAC/C,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,EAA4B,UAAA,CAAA,mBAA5B,CAA7B;AAEA,SAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,WAAA,GAAW,WAAX","sourceRoot":""}
|
|
@@ -5,34 +5,34 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useImage = exports.imageShorthandProps = void 0;
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
8
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
9
|
|
|
12
10
|
exports.imageShorthandProps = ['root'];
|
|
13
11
|
/**
|
|
14
12
|
* Given user props, returns state and render function for an Image.
|
|
15
13
|
*/
|
|
16
14
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
15
|
+
const useImage = (props, ref) => {
|
|
16
|
+
const {
|
|
17
|
+
bordered,
|
|
18
|
+
fit,
|
|
19
|
+
block,
|
|
20
|
+
shape = 'square',
|
|
21
|
+
shadow
|
|
22
|
+
} = props;
|
|
23
|
+
const state = {
|
|
24
|
+
bordered,
|
|
25
|
+
fit,
|
|
26
|
+
block,
|
|
27
|
+
shape,
|
|
28
|
+
shadow,
|
|
30
29
|
components: {
|
|
31
30
|
root: 'img'
|
|
32
31
|
},
|
|
33
|
-
root: react_utilities_1.getNativeElementProps('img',
|
|
34
|
-
ref
|
|
35
|
-
|
|
32
|
+
root: react_utilities_1.getNativeElementProps('img', {
|
|
33
|
+
ref,
|
|
34
|
+
...props
|
|
35
|
+
})
|
|
36
36
|
};
|
|
37
37
|
return state;
|
|
38
38
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Image/useImage.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/useImage.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGa,OAAA,CAAA,mBAAA,GAA+C,CAAC,MAAD,CAA/C;AAEb;;AAEG;;AACI,MAAM,QAAQ,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;AAC1F,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,GAAZ;AAAiB,IAAA,KAAjB;AAAwB,IAAA,KAAK,GAAG,QAAhC;AAA0C,IAAA;AAA1C,MAAqD,KAA3D;AAEA,QAAM,KAAK,GAAe;AACxB,IAAA,QADwB;AAExB,IAAA,GAFwB;AAGxB,IAAA,KAHwB;AAIxB,IAAA,KAJwB;AAKxB,IAAA,MALwB;AAMxB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KANY;AASxB,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAA7B;AATkB,GAA1B;AAeA,SAAO,KAAP;AACD,CAnBM;;AAAM,OAAA,CAAA,QAAA,GAAQ,QAAR","sourceRoot":""}
|
|
@@ -3,11 +3,13 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useImageStyles = void 0;
|
|
6
|
+
exports.useImageStyles = exports.imageClassName = void 0;
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
exports.imageClassName = 'fui-Image';
|
|
11
|
+
|
|
12
|
+
const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
11
13
|
"root": {
|
|
12
14
|
"g2u3we": "fj3muxo",
|
|
13
15
|
"h3c5rm": ["f1akhkt", "f1lxtadh"],
|
|
@@ -34,7 +36,7 @@ var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
|
34
36
|
"Dimara": "ft85np5"
|
|
35
37
|
},
|
|
36
38
|
"rootShadow": {
|
|
37
|
-
"E5pizo":
|
|
39
|
+
"E5pizo": "f1whvlc6"
|
|
38
40
|
},
|
|
39
41
|
"rootFitNone": {
|
|
40
42
|
"st4lth": "f1plgu50",
|
|
@@ -64,12 +66,12 @@ var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
|
64
66
|
"a9b677": "fly5x3f"
|
|
65
67
|
}
|
|
66
68
|
}, {
|
|
67
|
-
"d": [".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f1fabniw{border-radius:var(--borderRadiusNone);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f44lkw9{border-radius:var(--borderRadiusCircular);}", ".ft85np5{border-radius:var(--borderRadiusMedium);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".
|
|
69
|
+
"d": [".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f1fabniw{border-radius:var(--borderRadiusNone);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f44lkw9{border-radius:var(--borderRadiusCircular);}", ".ft85np5{border-radius:var(--borderRadiusMedium);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f1plgu50{object-fit:none;}", ".f13uwng7{object-position:left top;}", ".fjmyj0p{object-position:right top;}", ".f1l02sjl{height:100%;}", ".fly5x3f{width:100%;}", ".f14xojzb{object-position:center;}", ".f1ps3kmd{object-fit:cover;}", ".f1kle4es{object-fit:contain;}"]
|
|
68
70
|
});
|
|
69
71
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
state.root.className = react_make_styles_1.mergeClasses(styles.root, state.bordered && styles.rootBordered, state.shape === 'circular' && styles.rootCircular, state.shape === 'rounded' && styles.rootRounded, state.shadow && styles.rootShadow, state.fit === 'none' && styles.rootFitNone, state.fit === 'center' && styles.rootFitCenter, state.fit === 'cover' && styles.rootFitCover, state.fit === 'contain' && styles.rootFitContain, state.block && styles.rootBlock, state.root.className);
|
|
72
|
+
const useImageStyles = state => {
|
|
73
|
+
const styles = useStyles();
|
|
74
|
+
state.root.className = react_make_styles_1.mergeClasses(exports.imageClassName, styles.root, state.bordered && styles.rootBordered, state.shape === 'circular' && styles.rootCircular, state.shape === 'rounded' && styles.rootRounded, state.shadow && styles.rootShadow, state.fit === 'none' && styles.rootFitNone, state.fit === 'center' && styles.rootFitCenter, state.fit === 'cover' && styles.rootFitCover, state.fit === 'contain' && styles.rootFitContain, state.block && styles.rootBlock, state.root.className);
|
|
73
75
|
};
|
|
74
76
|
|
|
75
77
|
exports.useImageStyles = useImageStyles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Image/useImageStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Image/useImageStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAGa,OAAA,CAAA,cAAA,GAAiB,WAAjB;;AAEb,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAkDO,MAAM,cAAc,GAAI,KAAD,IAAsB;AAClD,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CACrB,OAAA,CAAA,cADqB,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,YAHJ,EAIrB,KAAK,CAAC,KAAN,KAAgB,UAAhB,IAA8B,MAAM,CAAC,YAJhB,EAKrB,KAAK,CAAC,KAAN,KAAgB,SAAhB,IAA6B,MAAM,CAAC,WALf,EAMrB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,UANF,EAOrB,KAAK,CAAC,GAAN,KAAc,MAAd,IAAwB,MAAM,CAAC,WAPV,EAQrB,KAAK,CAAC,GAAN,KAAc,QAAd,IAA0B,MAAM,CAAC,aARZ,EASrB,KAAK,CAAC,GAAN,KAAc,OAAd,IAAyB,MAAM,CAAC,YATX,EAUrB,KAAK,CAAC,GAAN,KAAc,SAAd,IAA2B,MAAM,CAAC,cAVb,EAWrB,KAAK,CAAC,KAAN,IAAe,MAAM,CAAC,SAXD,EAYrB,KAAK,CAAC,IAAN,CAAW,SAZU,CAAvB;AAcD,CAhBM;;AAAM,OAAA,CAAA,cAAA,GAAc,cAAd","sourceRoot":""}
|
package/lib-commonjs/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-image",
|
|
3
|
-
"version": "9.0.0-
|
|
3
|
+
"version": "9.0.0-beta.4",
|
|
4
4
|
"description": "Fluent UI React Image component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -21,15 +21,16 @@
|
|
|
21
21
|
"start": "yarn storybook",
|
|
22
22
|
"test": "jest",
|
|
23
23
|
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
|
24
|
-
"build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-image/src && yarn docs",
|
|
25
|
-
"storybook": "start-storybook"
|
|
24
|
+
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-image/src && yarn docs",
|
|
25
|
+
"storybook": "start-storybook",
|
|
26
|
+
"type-check": "tsc -b tsconfig.json"
|
|
26
27
|
},
|
|
27
28
|
"devDependencies": {
|
|
28
|
-
"@fluentui/babel-make-styles": "9.0.0-
|
|
29
|
+
"@fluentui/babel-make-styles": "9.0.0-beta.4",
|
|
29
30
|
"@fluentui/eslint-plugin": "*",
|
|
30
|
-
"@fluentui/jest-serializer-make-styles": "9.0.0-
|
|
31
|
+
"@fluentui/jest-serializer-make-styles": "9.0.0-beta.4",
|
|
31
32
|
"@fluentui/react-conformance": "*",
|
|
32
|
-
"@fluentui/react-conformance-make-styles": "9.0.0-
|
|
33
|
+
"@fluentui/react-conformance-make-styles": "9.0.0-beta.4",
|
|
33
34
|
"@fluentui/scripts": "^1.0.0",
|
|
34
35
|
"@types/enzyme": "3.10.3",
|
|
35
36
|
"@types/enzyme-adapter-react-16": "1.0.3",
|
|
@@ -44,8 +45,8 @@
|
|
|
44
45
|
"react-test-renderer": "^16.3.0"
|
|
45
46
|
},
|
|
46
47
|
"dependencies": {
|
|
47
|
-
"@fluentui/react-make-styles": "9.0.0-
|
|
48
|
-
"@fluentui/react-utilities": "9.0.0-
|
|
48
|
+
"@fluentui/react-make-styles": "9.0.0-beta.4",
|
|
49
|
+
"@fluentui/react-utilities": "9.0.0-beta.4",
|
|
49
50
|
"tslib": "^2.1.0"
|
|
50
51
|
},
|
|
51
52
|
"peerDependencies": {
|
|
@@ -55,7 +56,6 @@
|
|
|
55
56
|
"react-dom": ">=16.8.0 <18.0.0"
|
|
56
57
|
},
|
|
57
58
|
"beachball": {
|
|
58
|
-
"tag": "alpha",
|
|
59
59
|
"disallowedChangeTypes": [
|
|
60
60
|
"major",
|
|
61
61
|
"minor",
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
|
|
2
|
-
import makeStylesTests from '@fluentui/react-conformance-make-styles';
|
|
3
|
-
export function isConformant(testInfo) {
|
|
4
|
-
var defaultOptions = {
|
|
5
|
-
asPropHandlesRef: true,
|
|
6
|
-
componentPath: module.parent.filename.replace('.test', ''),
|
|
7
|
-
disabledTests: ['has-docblock'],
|
|
8
|
-
extraTests: makeStylesTests,
|
|
9
|
-
skipAsPropTests: true
|
|
10
|
-
};
|
|
11
|
-
baseIsConformant(defaultOptions, testInfo);
|
|
12
|
-
}
|
|
13
|
-
//# sourceMappingURL=isConformant.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY,IAAI,gBAAzB,QAAiD,6BAAjD;AAEA,OAAO,eAAP,MAA4B,yCAA5B;AAEA,OAAM,SAAU,YAAV,CACJ,QADI,EACqF;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,aAAa,EAAE,CAAC,cAAD,CAH4C;AAI3D,IAAA,UAAU,EAAE,eAJ+C;AAK3D,IAAA,eAAe,EAAE;AAL0C,GAA7D;AAQA,EAAA,gBAAgB,CAAC,cAAD,EAAiB,QAAjB,CAAhB;AACD","sourceRoot":""}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.isConformant = void 0;
|
|
7
|
-
|
|
8
|
-
var react_conformance_1 = /*#__PURE__*/require("@fluentui/react-conformance");
|
|
9
|
-
|
|
10
|
-
var react_conformance_make_styles_1 = /*#__PURE__*/require("@fluentui/react-conformance-make-styles");
|
|
11
|
-
|
|
12
|
-
function isConformant(testInfo) {
|
|
13
|
-
var defaultOptions = {
|
|
14
|
-
asPropHandlesRef: true,
|
|
15
|
-
componentPath: module.parent.filename.replace('.test', ''),
|
|
16
|
-
disabledTests: ['has-docblock'],
|
|
17
|
-
extraTests: react_conformance_make_styles_1.default,
|
|
18
|
-
skipAsPropTests: true
|
|
19
|
-
};
|
|
20
|
-
react_conformance_1.isConformant(defaultOptions, testInfo);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
exports.isConformant = isConformant;
|
|
24
|
-
//# sourceMappingURL=isConformant.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAEA,IAAA,+BAAA,gBAAA,OAAA,CAAA,yCAAA,CAAA;;AAEA,SAAgB,YAAhB,CACE,QADF,EAC2F;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,aAAa,EAAE,CAAC,cAAD,CAH4C;AAI3D,IAAA,UAAU,EAAE,+BAAA,CAAA,OAJ+C;AAK3D,IAAA,eAAe,EAAE;AAL0C,GAA7D;AAQA,EAAA,mBAAA,CAAA,YAAA,CAAiB,cAAjB,EAAiC,QAAjC;AACD;;AAZD,OAAA,CAAA,YAAA,GAAA,YAAA","sourceRoot":""}
|