@fluentui/react-image 9.0.0-rc.8 → 9.0.1
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 +203 -1
- package/CHANGELOG.md +76 -2
- package/MIGRATION.md +29 -29
- package/README.md +17 -35
- package/Spec.md +5 -10
- package/dist/index.d.ts +20 -18
- package/lib/components/Image/Image.js.map +1 -1
- package/lib/components/Image/Image.types.js.map +1 -1
- package/lib/components/Image/renderImage.js.map +1 -1
- package/lib/components/Image/useImage.js +4 -4
- package/lib/components/Image/useImage.js.map +1 -1
- package/lib/components/Image/useImageStyles.js +18 -21
- package/lib/components/Image/useImageStyles.js.map +1 -1
- package/lib/index.js +1 -2
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Image/Image.js.map +1 -1
- package/lib-commonjs/components/Image/renderImage.js.map +1 -1
- package/lib-commonjs/components/Image/useImage.js +4 -4
- package/lib-commonjs/components/Image/useImage.js.map +1 -1
- package/lib-commonjs/components/Image/useImageStyles.js +19 -22
- package/lib-commonjs/components/Image/useImageStyles.js.map +1 -1
- package/lib-commonjs/index.js +1 -8
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +6 -8
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,209 @@
|
|
|
2
2
|
"name": "@fluentui/react-image",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 28 Jun 2022 17:37:49 GMT",
|
|
6
|
+
"tag": "@fluentui/react-image_v9.0.1",
|
|
7
|
+
"version": "9.0.1",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "lingfangao@hotmail.com",
|
|
12
|
+
"package": "@fluentui/react-image",
|
|
13
|
+
"commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b",
|
|
14
|
+
"comment": "fix: Use caret dependency range for Griffel"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-image",
|
|
19
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10",
|
|
20
|
+
"commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Tue, 28 Jun 2022 15:13:36 GMT",
|
|
27
|
+
"tag": "@fluentui/react-image_v9.0.0",
|
|
28
|
+
"version": "9.0.0",
|
|
29
|
+
"comments": {
|
|
30
|
+
"prerelease": [
|
|
31
|
+
{
|
|
32
|
+
"author": "lingfangao@hotmail.com",
|
|
33
|
+
"package": "@fluentui/react-image",
|
|
34
|
+
"commit": "e0aabd850b15adf9c151ebd4e332f7c50ad6cfdf",
|
|
35
|
+
"comment": "Update 9.0.0-rc dependencies to use caret range"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
39
|
+
"package": "@fluentui/react-image",
|
|
40
|
+
"commit": "52b0b9480fe4393e29863165a458c0a66f765d70",
|
|
41
|
+
"comment": "README, spec and migration guide cleanup for react-image."
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"author": "lingfangao@hotmail.com",
|
|
45
|
+
"package": "@fluentui/react-image",
|
|
46
|
+
"commit": "675acea49c97f10837ddee9b8c4350ca27750125",
|
|
47
|
+
"comment": "Bump Griffel dependencies"
|
|
48
|
+
}
|
|
49
|
+
],
|
|
50
|
+
"none": [
|
|
51
|
+
{
|
|
52
|
+
"author": "tristan.watanabe@gmail.com",
|
|
53
|
+
"package": "@fluentui/react-image",
|
|
54
|
+
"commit": "4c5ccaf79e7028146b6939968afe6103a119705c",
|
|
55
|
+
"comment": "chore: Move Image stories to folder with index entry."
|
|
56
|
+
}
|
|
57
|
+
],
|
|
58
|
+
"patch": [
|
|
59
|
+
{
|
|
60
|
+
"author": "lingfangao@hotmail.com",
|
|
61
|
+
"package": "@fluentui/react-image",
|
|
62
|
+
"commit": "c7b1348bdad7aa883c29bfbc96ef2a32e6ebc7dd",
|
|
63
|
+
"comment": "feat: Initial 9.0.0 release"
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"author": "beachball",
|
|
67
|
+
"package": "@fluentui/react-image",
|
|
68
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0",
|
|
69
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"author": "beachball",
|
|
73
|
+
"package": "@fluentui/react-image",
|
|
74
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0",
|
|
75
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"author": "beachball",
|
|
79
|
+
"package": "@fluentui/react-image",
|
|
80
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9",
|
|
81
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
|
82
|
+
}
|
|
83
|
+
]
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"date": "Thu, 23 Jun 2022 14:25:31 GMT",
|
|
88
|
+
"tag": "@fluentui/react-image_v9.0.0-rc.12",
|
|
89
|
+
"version": "9.0.0-rc.12",
|
|
90
|
+
"comments": {
|
|
91
|
+
"prerelease": [
|
|
92
|
+
{
|
|
93
|
+
"author": "beachball",
|
|
94
|
+
"package": "@fluentui/react-image",
|
|
95
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.10",
|
|
96
|
+
"commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
|
|
97
|
+
}
|
|
98
|
+
]
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"date": "Tue, 31 May 2022 21:28:39 GMT",
|
|
103
|
+
"tag": "@fluentui/react-image_v9.0.0-rc.11",
|
|
104
|
+
"version": "9.0.0-rc.11",
|
|
105
|
+
"comments": {
|
|
106
|
+
"prerelease": [
|
|
107
|
+
{
|
|
108
|
+
"author": "olfedias@microsoft.com",
|
|
109
|
+
"package": "@fluentui/react-image",
|
|
110
|
+
"commit": "0a5e9fa77a72eecafdd07034ccdc0b95fd49877c",
|
|
111
|
+
"comment": "chore: Update Griffel to latest version"
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"author": "beachball",
|
|
115
|
+
"package": "@fluentui/react-image",
|
|
116
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.10",
|
|
117
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"author": "beachball",
|
|
121
|
+
"package": "@fluentui/react-image",
|
|
122
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8",
|
|
123
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
124
|
+
}
|
|
125
|
+
]
|
|
126
|
+
}
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
"date": "Mon, 23 May 2022 18:56:44 GMT",
|
|
130
|
+
"tag": "@fluentui/react-image_v9.0.0-rc.10",
|
|
131
|
+
"version": "9.0.0-rc.10",
|
|
132
|
+
"comments": {
|
|
133
|
+
"prerelease": [
|
|
134
|
+
{
|
|
135
|
+
"author": "esteban.230@hotmail.com",
|
|
136
|
+
"package": "@fluentui/react-image",
|
|
137
|
+
"commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
|
|
138
|
+
"comment": "Removing <componentName>ClassName exports."
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
142
|
+
"package": "@fluentui/react-image",
|
|
143
|
+
"commit": "8fb515ae57dbd2ff50a52ab896daa058568c5273",
|
|
144
|
+
"comment": "Image: Updating useImageStyles to use styles[state] pattern for props of string union types."
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
"author": "beachball",
|
|
148
|
+
"package": "@fluentui/react-image",
|
|
149
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.9",
|
|
150
|
+
"commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"author": "beachball",
|
|
154
|
+
"package": "@fluentui/react-image",
|
|
155
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7",
|
|
156
|
+
"commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
|
|
157
|
+
}
|
|
158
|
+
]
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
"date": "Mon, 23 May 2022 12:14:16 GMT",
|
|
163
|
+
"tag": "@fluentui/react-image_v9.0.0-rc.9",
|
|
164
|
+
"version": "9.0.0-rc.9",
|
|
165
|
+
"comments": {
|
|
166
|
+
"prerelease": [
|
|
167
|
+
{
|
|
168
|
+
"author": "olfedias@microsoft.com",
|
|
169
|
+
"package": "@fluentui/react-image",
|
|
170
|
+
"commit": "60804cec07a495b8a5d1fc66338bf0443b212144",
|
|
171
|
+
"comment": "chore: Update Griffel to latest version"
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
175
|
+
"package": "@fluentui/react-image",
|
|
176
|
+
"commit": "9ee5fba37a8d253133f4338575ebedd238cd74a3",
|
|
177
|
+
"comment": "Removing ImageCommons type."
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
"author": "olfedias@microsoft.com",
|
|
181
|
+
"package": "@fluentui/react-image",
|
|
182
|
+
"commit": "f120fe9160ad7311a87af0cfacd8d2fb26275e34",
|
|
183
|
+
"comment": "chore: Update Griffel to latest version"
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
"author": "beachball",
|
|
187
|
+
"package": "@fluentui/react-image",
|
|
188
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.9",
|
|
189
|
+
"commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
"author": "beachball",
|
|
193
|
+
"package": "@fluentui/react-image",
|
|
194
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.8",
|
|
195
|
+
"commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
"author": "beachball",
|
|
199
|
+
"package": "@fluentui/react-image",
|
|
200
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6",
|
|
201
|
+
"commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
|
|
202
|
+
}
|
|
203
|
+
]
|
|
204
|
+
}
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
"date": "Thu, 05 May 2022 18:26:30 GMT",
|
|
6
208
|
"tag": "@fluentui/react-image_v9.0.0-rc.8",
|
|
7
209
|
"version": "9.0.0-rc.8",
|
|
8
210
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,86 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-image
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 28 Jun 2022 17:37:49 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.1)
|
|
8
|
+
|
|
9
|
+
Tue, 28 Jun 2022 17:37:49 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.0..@fluentui/react-image_v9.0.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: Use caret dependency range for Griffel ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by lingfangao@hotmail.com)
|
|
15
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.0)
|
|
18
|
+
|
|
19
|
+
Tue, 28 Jun 2022 15:13:36 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.0-rc.12..@fluentui/react-image_v9.0.0)
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- feat: Initial 9.0.0 release ([PR #23733](https://github.com/microsoft/fluentui/pull/23733) by lingfangao@hotmail.com)
|
|
25
|
+
- Bump @fluentui/react-utilities to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
26
|
+
- Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
27
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
28
|
+
|
|
29
|
+
### Changes
|
|
30
|
+
|
|
31
|
+
- Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
|
|
32
|
+
- README, spec and migration guide cleanup for react-image. ([PR #23447](https://github.com/microsoft/fluentui/pull/23447) by Humberto.Morimoto@microsoft.com)
|
|
33
|
+
- Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
|
|
34
|
+
|
|
35
|
+
## [9.0.0-rc.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.0-rc.12)
|
|
36
|
+
|
|
37
|
+
Thu, 23 Jun 2022 14:25:31 GMT
|
|
38
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.0-rc.11..@fluentui/react-image_v9.0.0-rc.12)
|
|
39
|
+
|
|
40
|
+
### Changes
|
|
41
|
+
|
|
42
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
|
|
43
|
+
|
|
44
|
+
## [9.0.0-rc.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.0-rc.11)
|
|
45
|
+
|
|
46
|
+
Tue, 31 May 2022 21:28:39 GMT
|
|
47
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.0-rc.10..@fluentui/react-image_v9.0.0-rc.11)
|
|
48
|
+
|
|
49
|
+
### Changes
|
|
50
|
+
|
|
51
|
+
- chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
|
|
52
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
53
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
54
|
+
|
|
55
|
+
## [9.0.0-rc.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.0-rc.10)
|
|
56
|
+
|
|
57
|
+
Mon, 23 May 2022 18:56:44 GMT
|
|
58
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.0-rc.9..@fluentui/react-image_v9.0.0-rc.10)
|
|
59
|
+
|
|
60
|
+
### Changes
|
|
61
|
+
|
|
62
|
+
- Removing <componentName>ClassName exports. ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by esteban.230@hotmail.com)
|
|
63
|
+
- Image: Updating useImageStyles to use styles[state] pattern for props of string union types. ([PR #23121](https://github.com/microsoft/fluentui/pull/23121) by Humberto.Morimoto@microsoft.com)
|
|
64
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
|
|
65
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
|
|
66
|
+
|
|
67
|
+
## [9.0.0-rc.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.0-rc.9)
|
|
68
|
+
|
|
69
|
+
Mon, 23 May 2022 12:14:16 GMT
|
|
70
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.0-rc.8..@fluentui/react-image_v9.0.0-rc.9)
|
|
71
|
+
|
|
72
|
+
### Changes
|
|
73
|
+
|
|
74
|
+
- chore: Update Griffel to latest version ([PR #23029](https://github.com/microsoft/fluentui/pull/23029) by olfedias@microsoft.com)
|
|
75
|
+
- Removing ImageCommons type. ([PR #22957](https://github.com/microsoft/fluentui/pull/22957) by Humberto.Morimoto@microsoft.com)
|
|
76
|
+
- chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
|
|
77
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
78
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
79
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
80
|
+
|
|
7
81
|
## [9.0.0-rc.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.0-rc.8)
|
|
8
82
|
|
|
9
|
-
Thu, 05 May 2022 18:
|
|
83
|
+
Thu, 05 May 2022 18:26:30 GMT
|
|
10
84
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.0-rc.7..@fluentui/react-image_v9.0.0-rc.8)
|
|
11
85
|
|
|
12
86
|
### Changes
|
package/MIGRATION.md
CHANGED
|
@@ -2,28 +2,28 @@
|
|
|
2
2
|
|
|
3
3
|
## Introduction
|
|
4
4
|
|
|
5
|
-
This guide is a reference for upgrading the Image component from v8
|
|
5
|
+
This guide is a reference for upgrading the `Image` component from v8 or v0 to v9 .
|
|
6
6
|
|
|
7
|
-
## Migration from v8
|
|
7
|
+
## Migration from v8
|
|
8
8
|
|
|
9
9
|
### Property mapping
|
|
10
10
|
|
|
11
|
-
The table below presents a mapping of props between the v8
|
|
11
|
+
The table below presents a mapping of props between the v8 and v9 `Image` components in order to clarify which properties require changes to achieve the same result.
|
|
12
12
|
|
|
13
13
|
> ⚠️ Note - Properties not in this table are considered deprecated.
|
|
14
14
|
|
|
15
|
-
| v7 / v8 | v9
|
|
16
|
-
| ----------------------- |
|
|
17
|
-
| `className` |
|
|
18
|
-
| `coverStyle` | `fit` | ⚠️ |
|
|
19
|
-
| `imageFit` | `fit`
|
|
20
|
-
| `maximizeFrame` | `block`
|
|
21
|
-
| `loading` | -
|
|
22
|
-
| `onLoadingStateChanged` | -
|
|
23
|
-
| `shouldFadeIn` | -
|
|
24
|
-
| `shouldStartVisible` | -
|
|
25
|
-
| `styles` | -
|
|
26
|
-
| `theme` | -
|
|
15
|
+
| v7 / v8 | v9 | Good to go? |
|
|
16
|
+
| ----------------------- | --------------- | ----------- |
|
|
17
|
+
| `className` | `className` | ✔️ |
|
|
18
|
+
| `coverStyle` | `fit="cover"` | ⚠️ |
|
|
19
|
+
| `imageFit` | `fit="contain"` | ✔️ |
|
|
20
|
+
| `maximizeFrame` | `block` | ✔️ |
|
|
21
|
+
| `loading` | - | ❌ |
|
|
22
|
+
| `onLoadingStateChanged` | - | ❌ |
|
|
23
|
+
| `shouldFadeIn` | - | ❌ |
|
|
24
|
+
| `shouldStartVisible` | - | ❌ |
|
|
25
|
+
| `styles` | - | ❌ |
|
|
26
|
+
| `theme` | - | ❌ |
|
|
27
27
|
|
|
28
28
|
### className
|
|
29
29
|
|
|
@@ -55,7 +55,7 @@ This prop has been renamed to `block` which will result in the same behaviour as
|
|
|
55
55
|
|
|
56
56
|
### loading
|
|
57
57
|
|
|
58
|
-
|
|
58
|
+
For v9, this feature is no longer supported. The alternative is to use the global events such as: `onLoad`, `onError` to detect the image loading state.
|
|
59
59
|
|
|
60
60
|
### onLoadingStateChanged
|
|
61
61
|
|
|
@@ -127,27 +127,27 @@ export default function App() {
|
|
|
127
127
|
|
|
128
128
|
### styles
|
|
129
129
|
|
|
130
|
-
|
|
130
|
+
For v9, you should migrate to use `make-styles` and do style customizations through the `className` prop.
|
|
131
131
|
|
|
132
132
|
### theme
|
|
133
133
|
|
|
134
|
-
|
|
134
|
+
For v9, you should use `tokens` in conjunction with `make-styles` and `FluentProvider` to achieve theming correctly.
|
|
135
135
|
|
|
136
|
-
## Migration from v0
|
|
136
|
+
## Migration from v0
|
|
137
137
|
|
|
138
138
|
### Property mapping
|
|
139
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.
|
|
140
|
+
The table below presents a mapping of props between the v0 and v9 versions of `Image` in order to make it clear which properties require changes to achieve the same result.
|
|
141
141
|
|
|
142
142
|
| v0 | v9 | Good to go? |
|
|
143
143
|
| --------------- | ------------------ | ----------- |
|
|
144
144
|
| `accessibility` | - | ❌ |
|
|
145
|
-
| `alt` |
|
|
146
|
-
| `aria-label` | -
|
|
145
|
+
| `alt` | `alt` | ✔️ |
|
|
146
|
+
| `aria-label` | `aria-label` | ✔️ |
|
|
147
147
|
| `as` | - | ❌ |
|
|
148
148
|
| `avatar` | `shape="circular"` | ✔️ |
|
|
149
149
|
| `circular` | `shape="circular"` | ✔️ |
|
|
150
|
-
| `className` |
|
|
150
|
+
| `className` | `className` | ✔️ |
|
|
151
151
|
| `fluid` | `block` | ✔️ |
|
|
152
152
|
| `styles` | - | ❌ |
|
|
153
153
|
| `variables` | - | ❌ |
|
|
@@ -156,8 +156,8 @@ The table below presents a mapping of props between the v0 and v9 versions in or
|
|
|
156
156
|
|
|
157
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
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.
|
|
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
161
|
|
|
162
162
|
### alt
|
|
163
163
|
|
|
@@ -169,7 +169,7 @@ _This property has not changed and can be left as is._
|
|
|
169
169
|
|
|
170
170
|
### as
|
|
171
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.
|
|
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
173
|
|
|
174
174
|
### avatar
|
|
175
175
|
|
|
@@ -201,13 +201,13 @@ This prop has been renamed to `block` which will result into the same behaviour
|
|
|
201
201
|
|
|
202
202
|
### styles
|
|
203
203
|
|
|
204
|
-
|
|
204
|
+
For v9, you should migrate to use `make-styles` and do style customizations through the `className` prop.
|
|
205
205
|
|
|
206
206
|
### variables
|
|
207
207
|
|
|
208
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
209
|
|
|
210
|
-
#### v0
|
|
210
|
+
#### v0 implementation
|
|
211
211
|
|
|
212
212
|
```jsx
|
|
213
213
|
const MyComponent = () => {
|
|
@@ -215,7 +215,7 @@ const MyComponent = () => {
|
|
|
215
215
|
};
|
|
216
216
|
```
|
|
217
217
|
|
|
218
|
-
#### v9
|
|
218
|
+
#### v9 implementation
|
|
219
219
|
|
|
220
220
|
```jsx
|
|
221
221
|
import { Image } from '@fluentui/react-image';
|
package/README.md
CHANGED
|
@@ -1,57 +1,39 @@
|
|
|
1
1
|
# @fluentui/react-image
|
|
2
2
|
|
|
3
|
-
**
|
|
4
|
-
|
|
5
|
-
> WIP 🚧 - These are not production-ready components as we are still in a Beta phase.
|
|
3
|
+
**Image components for [Fluent UI React](https://aka.ms/fluentui-storybook)**
|
|
6
4
|
|
|
7
5
|
Usage of Image component ensures consistent styling and behaviour of images in your application based on the Fluent UI Design System.
|
|
8
6
|
|
|
9
7
|
## Usage
|
|
10
8
|
|
|
11
|
-
To
|
|
12
|
-
|
|
13
|
-
```sh
|
|
14
|
-
npm install @fluentui/react-components
|
|
15
|
-
```
|
|
9
|
+
To import Image:
|
|
16
10
|
|
|
17
11
|
```js
|
|
18
12
|
import { Image } from '@fluentui/react-components';
|
|
19
|
-
|
|
20
|
-
const App = () => {
|
|
21
|
-
return <Image src="example_image.png" />;
|
|
22
|
-
};
|
|
23
13
|
```
|
|
24
14
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
```sh
|
|
28
|
-
npm install @fluentui/react-image
|
|
29
|
-
npm install @fluentui/react-provider
|
|
30
|
-
```
|
|
15
|
+
### Examples
|
|
31
16
|
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
</FluentProvider>
|
|
40
|
-
);
|
|
17
|
+
```jsx
|
|
18
|
+
<Image src="example_image.png" />
|
|
19
|
+
<Image src="example_image.png" alt="Example image" />;
|
|
20
|
+
<Image src="example_image.png" bordered />;
|
|
21
|
+
<Image src="example_image.png" fit="contain" />;
|
|
22
|
+
<Image src="example_image.png" shadow />;
|
|
23
|
+
<Image src="example_image.png" shape="circular" />;
|
|
41
24
|
```
|
|
42
25
|
|
|
43
|
-
|
|
26
|
+
See [Fluent UI Storybook](https://aka.ms/fluentui-storybook) for more detailed usage examples.
|
|
44
27
|
|
|
45
|
-
|
|
46
|
-
<img src="example_image.png" alt="Example image" />
|
|
47
|
-
```
|
|
28
|
+
Alternatively, run Storybook locally with:
|
|
48
29
|
|
|
49
|
-
|
|
30
|
+
1. `yarn start`
|
|
31
|
+
2. Select `react-image` from the list.
|
|
50
32
|
|
|
51
|
-
|
|
33
|
+
### Specification
|
|
52
34
|
|
|
53
|
-
|
|
35
|
+
See [SPEC.md](./SPEC.md).
|
|
54
36
|
|
|
55
37
|
## Migration
|
|
56
38
|
|
|
57
|
-
|
|
39
|
+
If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest Image implementation.
|
package/Spec.md
CHANGED
|
@@ -73,18 +73,16 @@ n/a
|
|
|
73
73
|
|
|
74
74
|
## API proposal
|
|
75
75
|
|
|
76
|
-
See [
|
|
77
|
-
|
|
78
|
-
[react-image/image.types.ts]: https://github.com/microsoft/fluentui/blob/master/packages/react-image/src/components/Image/Image.types.ts
|
|
76
|
+
See API at [Image.types.ts](./src/components/Image/Image.types.ts).
|
|
79
77
|
|
|
80
78
|
Proposed component props:
|
|
81
79
|
|
|
82
80
|
| Name | Type | Default value | Comments |
|
|
83
81
|
| ---------- | --------- | ------------- | -------------------------------------------- |
|
|
84
82
|
| `bordered` | `boolean` | `false` | |
|
|
85
|
-
| `fit` | `string` | "
|
|
83
|
+
| `fit` | `string` | `"none"` | One of: `none`, `center`, `contain`, `cover` |
|
|
86
84
|
| `block` | `boolean` | `false` | |
|
|
87
|
-
| `shape ` | `string ` | `
|
|
85
|
+
| `shape ` | `string ` | `"square"` | One of: `square`, `circular` , `rounded` |
|
|
88
86
|
| `shadow` | `boolean` | `false` | |
|
|
89
87
|
|
|
90
88
|
All native html attributes of the `<img />` will be available to be used as props of the Image component.
|
|
@@ -153,12 +151,9 @@ Sample code based on the proposed API:
|
|
|
153
151
|
<img src="..." class="...">
|
|
154
152
|
```
|
|
155
153
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
<!-- _Describe what will need to be done to upgrade from the existing implementations:_
|
|
154
|
+
## Migration
|
|
159
155
|
|
|
160
|
-
|
|
161
|
-
- _Migration from v0_ -->
|
|
156
|
+
See [MIGRATION.md](./MIGRATION.md).
|
|
162
157
|
|
|
163
158
|
## Accessibility
|
|
164
159
|
|
package/dist/index.d.ts
CHANGED
|
@@ -11,44 +11,46 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
|
11
11
|
declare const Image_2: ForwardRefComponent<ImageProps>;
|
|
12
12
|
export { Image_2 as Image }
|
|
13
13
|
|
|
14
|
-
/**
|
|
15
|
-
* @deprecated Use `imageClassNames.root` instead.
|
|
16
|
-
*/
|
|
17
|
-
export declare const imageClassName = "fui-Image";
|
|
18
|
-
|
|
19
14
|
export declare const imageClassNames: SlotClassNames<ImageSlots>;
|
|
20
15
|
|
|
21
|
-
declare type
|
|
16
|
+
export declare type ImageProps = ComponentProps<ImageSlots> & {
|
|
17
|
+
/**
|
|
18
|
+
* An image can take up the width of its container.
|
|
19
|
+
*
|
|
20
|
+
* @default false
|
|
21
|
+
*/
|
|
22
|
+
block?: boolean;
|
|
22
23
|
/**
|
|
23
|
-
* An image can appear with rectangular border.
|
|
24
|
+
* An image can appear with a rectangular border.
|
|
25
|
+
*
|
|
26
|
+
* @default false
|
|
24
27
|
*/
|
|
25
28
|
bordered?: boolean;
|
|
26
29
|
/**
|
|
27
30
|
* An image can set how it should be resized to fit its container.
|
|
31
|
+
*
|
|
32
|
+
* @default 'default'
|
|
28
33
|
*/
|
|
29
|
-
fit?: 'none' | 'center' | 'contain' | 'cover';
|
|
34
|
+
fit?: 'none' | 'center' | 'contain' | 'cover' | 'default';
|
|
30
35
|
/**
|
|
31
|
-
* An image can
|
|
36
|
+
* An image can appear elevated with shadow.
|
|
37
|
+
*
|
|
38
|
+
* @default false
|
|
32
39
|
*/
|
|
33
|
-
|
|
40
|
+
shadow?: boolean;
|
|
34
41
|
/**
|
|
35
42
|
* An image can appear square, circular, or rounded.
|
|
36
|
-
*
|
|
43
|
+
*
|
|
44
|
+
* @default 'square'
|
|
37
45
|
*/
|
|
38
46
|
shape?: 'square' | 'circular' | 'rounded';
|
|
39
|
-
/**
|
|
40
|
-
* An image can appear elevated with shadow.
|
|
41
|
-
*/
|
|
42
|
-
shadow?: boolean;
|
|
43
47
|
};
|
|
44
48
|
|
|
45
|
-
export declare type ImageProps = ComponentProps<ImageSlots> & Partial<ImageCommons>;
|
|
46
|
-
|
|
47
49
|
export declare type ImageSlots = {
|
|
48
50
|
root: Slot<'img'>;
|
|
49
51
|
};
|
|
50
52
|
|
|
51
|
-
export declare type ImageState = ComponentState<ImageSlots> &
|
|
53
|
+
export declare type ImageState = ComponentState<ImageSlots> & Required<Pick<ImageProps, 'block' | 'bordered' | 'fit' | 'shadow' | 'shape'>>;
|
|
52
54
|
|
|
53
55
|
/**
|
|
54
56
|
* Define the render function.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAIA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;
|
|
1
|
+
{"version":3,"sources":["components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAIA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EAEA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { renderImage_unstable } from './renderImage';\nimport { useImage_unstable } from './useImage';\nimport { useImageStyles_unstable } from './useImageStyles';\nimport type { ImageProps } from './Image.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The Image component ensures the consistent styling of images.\n */\nexport const Image: ForwardRefComponent<ImageProps> = React.forwardRef((props, ref) => {\n const state = useImage_unstable(props, ref);\n useImageStyles_unstable(state);\n\n return renderImage_unstable(state);\n});\n\nImage.displayName = 'Image';\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.types.js","sourceRoot":"../src/","sources":["components/Image/Image.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';\n\nexport type ImageSlots = {\n root: Slot<'img'>;\n};\n\
|
|
1
|
+
{"version":3,"file":"Image.types.js","sourceRoot":"../src/","sources":["components/Image/Image.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';\n\nexport type ImageSlots = {\n root: Slot<'img'>;\n};\n\nexport type ImageProps = ComponentProps<ImageSlots> & {\n /**\n * An image can take up the width of its container.\n *\n * @default false\n */\n block?: boolean;\n\n /**\n * An image can appear with a rectangular border.\n *\n * @default false\n */\n bordered?: boolean;\n\n /**\n * An image can set how it should be resized to fit its container.\n *\n * @default 'default'\n */\n fit?: 'none' | 'center' | 'contain' | 'cover' | 'default';\n\n /**\n * An image can appear elevated with shadow.\n *\n * @default false\n */\n shadow?: boolean;\n\n /**\n * An image can appear square, circular, or rounded.\n *\n * @default 'square'\n */\n shape?: 'square' | 'circular' | 'rounded';\n};\n\nexport type ImageState = ComponentState<ImageSlots> &\n Required<Pick<ImageProps, 'block' | 'bordered' | 'fit' | 'shadow' | 'shape'>>;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Image/renderImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;;AAGG;;AACH,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;
|
|
1
|
+
{"version":3,"sources":["components/Image/renderImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;;AAGG;;AACH,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAa,KAAb,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 { ImageSlots, ImageState } from './Image.types';\n\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */\nexport const renderImage_unstable = (state: ImageState) => {\n const { slots, slotProps } = getSlots<ImageSlots>(state);\n\n return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -5,11 +5,11 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
|
|
|
5
5
|
|
|
6
6
|
export const useImage_unstable = (props, ref) => {
|
|
7
7
|
const {
|
|
8
|
-
bordered,
|
|
9
|
-
fit,
|
|
10
|
-
block,
|
|
8
|
+
bordered = false,
|
|
9
|
+
fit = 'default',
|
|
10
|
+
block = false,
|
|
11
11
|
shape = 'square',
|
|
12
|
-
shadow
|
|
12
|
+
shadow = false
|
|
13
13
|
} = props;
|
|
14
14
|
const state = {
|
|
15
15
|
bordered,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Image/useImage.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;
|
|
1
|
+
{"version":3,"sources":["components/Image/useImage.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;EACnG,MAAM;IAAE,QAAQ,GAAG,KAAb;IAAoB,GAAG,GAAG,SAA1B;IAAqC,KAAK,GAAG,KAA7C;IAAoD,KAAK,GAAG,QAA5D;IAAsE,MAAM,GAAG;EAA/E,IAAyF,KAA/F;EAEA,MAAM,KAAK,GAAe;IACxB,QADwB;IAExB,GAFwB;IAGxB,KAHwB;IAIxB,KAJwB;IAKxB,MALwB;IAMxB,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CANY;IASxB,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAAR;EATH,CAA1B;EAeA,OAAO,KAAP;AACD,CAnBM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ImageProps, ImageState } from './Image.types';\n\n/**\n * Given user props, returns state and render function for an Image.\n */\nexport const useImage_unstable = (props: ImageProps, ref: React.Ref<HTMLImageElement>): ImageState => {\n const { bordered = false, fit = 'default', block = false, shape = 'square', shadow = false } = props;\n\n const state: ImageState = {\n bordered,\n fit,\n block,\n shape,\n shadow,\n components: {\n root: 'img',\n },\n root: getNativeElementProps('img', {\n ref,\n ...props,\n }),\n };\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,16 +1,11 @@
|
|
|
1
1
|
import { shorthands, mergeClasses, __styles } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated Use `imageClassNames.root` instead.
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
export const imageClassName = 'fui-Image';
|
|
8
3
|
export const imageClassNames = {
|
|
9
4
|
root: 'fui-Image'
|
|
10
5
|
};
|
|
11
6
|
|
|
12
7
|
const useStyles = /*#__PURE__*/__styles({
|
|
13
|
-
"
|
|
8
|
+
"base": {
|
|
14
9
|
"g2u3we": "fj3muxo",
|
|
15
10
|
"h3c5rm": ["f1akhkt", "f1lxtadh"],
|
|
16
11
|
"B9xav0g": "f1aperda",
|
|
@@ -22,7 +17,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
22
17
|
"B7ck84d": "f1ewtqcl",
|
|
23
18
|
"mc9l5x": "f14t3ns0"
|
|
24
19
|
},
|
|
25
|
-
"
|
|
20
|
+
"bordered": {
|
|
26
21
|
"icvyot": "fzkkow9",
|
|
27
22
|
"vrafjx": ["fcdblym", "fjik90z"],
|
|
28
23
|
"oivjwe": "fg706s2",
|
|
@@ -32,54 +27,56 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
32
27
|
"Bn0qgzm": "f1vxd6vx",
|
|
33
28
|
"ibv6hh": ["f1ojsxk5", "f5tn483"]
|
|
34
29
|
},
|
|
35
|
-
"
|
|
30
|
+
"circular": {
|
|
36
31
|
"Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
|
|
37
32
|
"Beyfa6y": ["f1nfllo7", "f8fbkgy"],
|
|
38
33
|
"B7oj6ja": ["f1djnp8u", "f1s8kh49"],
|
|
39
34
|
"Btl43ni": ["f1s8kh49", "f1djnp8u"]
|
|
40
35
|
},
|
|
41
|
-
"
|
|
36
|
+
"rounded": {
|
|
42
37
|
"Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
|
|
43
38
|
"Beyfa6y": ["f16jpd5f", "f1aa9q02"],
|
|
44
39
|
"B7oj6ja": ["f1jar5jt", "fyu767a"],
|
|
45
40
|
"Btl43ni": ["fyu767a", "f1jar5jt"]
|
|
46
41
|
},
|
|
47
|
-
"
|
|
42
|
+
"square": {},
|
|
43
|
+
"shadow": {
|
|
48
44
|
"E5pizo": "f1whvlc6"
|
|
49
45
|
},
|
|
50
|
-
"
|
|
46
|
+
"center": {
|
|
51
47
|
"st4lth": "f1plgu50",
|
|
52
|
-
"Ermj5k":
|
|
48
|
+
"Ermj5k": "f14xojzb",
|
|
53
49
|
"Bqenvij": "f1l02sjl",
|
|
54
50
|
"a9b677": "fly5x3f"
|
|
55
51
|
},
|
|
56
|
-
"
|
|
57
|
-
"st4lth": "
|
|
52
|
+
"contain": {
|
|
53
|
+
"st4lth": "f1kle4es",
|
|
58
54
|
"Ermj5k": "f14xojzb",
|
|
59
55
|
"Bqenvij": "f1l02sjl",
|
|
60
56
|
"a9b677": "fly5x3f"
|
|
61
57
|
},
|
|
62
|
-
"
|
|
58
|
+
"default": {},
|
|
59
|
+
"cover": {
|
|
63
60
|
"st4lth": "f1ps3kmd",
|
|
64
61
|
"Ermj5k": "f14xojzb",
|
|
65
62
|
"Bqenvij": "f1l02sjl",
|
|
66
63
|
"a9b677": "fly5x3f"
|
|
67
64
|
},
|
|
68
|
-
"
|
|
69
|
-
"st4lth": "
|
|
70
|
-
"Ermj5k": "
|
|
65
|
+
"none": {
|
|
66
|
+
"st4lth": "f1plgu50",
|
|
67
|
+
"Ermj5k": ["f13uwng7", "fjmyj0p"],
|
|
71
68
|
"Bqenvij": "f1l02sjl",
|
|
72
69
|
"a9b677": "fly5x3f"
|
|
73
70
|
},
|
|
74
|
-
"
|
|
71
|
+
"block": {
|
|
75
72
|
"a9b677": "fly5x3f"
|
|
76
73
|
}
|
|
77
74
|
}, {
|
|
78
|
-
"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);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-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);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f1plgu50{object-fit:none;}", ".
|
|
75
|
+
"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);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-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);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f1plgu50{object-fit:none;}", ".f14xojzb{object-position:center;}", ".f1l02sjl{height:100%;}", ".fly5x3f{width:100%;}", ".f1kle4es{object-fit:contain;}", ".f1ps3kmd{object-fit:cover;}", ".f13uwng7{object-position:left top;}", ".fjmyj0p{object-position:right top;}"]
|
|
79
76
|
});
|
|
80
77
|
|
|
81
78
|
export const useImageStyles_unstable = state => {
|
|
82
79
|
const styles = useStyles();
|
|
83
|
-
state.root.className = mergeClasses(imageClassNames.root, styles.
|
|
80
|
+
state.root.className = mergeClasses(imageClassNames.root, styles.base, state.block && styles.block, state.bordered && styles.bordered, state.shadow && styles.shadow, styles[state.fit], styles[state.shape], state.root.className);
|
|
84
81
|
};
|
|
85
82
|
//# sourceMappingURL=useImageStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Image/useImageStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA
|
|
1
|
+
{"version":3,"sources":["components/Image/useImageStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,eAAe,GAA+B;EACzD,IAAI,EAAE;AADmD,CAApD;;AAIP,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;;AAmEA,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAsB;EAC3D,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,eAAe,CAAC,IADiB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,KAAN,IAAe,MAAM,CAAC,KAHW,EAIjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJQ,EAKjC,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MALU,EAMjC,MAAM,CAAC,KAAK,CAAC,GAAP,CAN2B,EAOjC,MAAM,CAAC,KAAK,CAAC,KAAP,CAP2B,EAQjC,KAAK,CAAC,IAAN,CAAW,SARsB,CAAnC;AAUD,CAZM","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ImageSlots, ImageState } from './Image.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const imageClassNames: SlotClassNames<ImageSlots> = {\n root: 'fui-Image',\n};\n\nconst useStyles = makeStyles({\n // Base styles\n base: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n\n boxSizing: 'border-box',\n display: 'inline-block',\n },\n\n // Bordered styles\n bordered: {\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n },\n\n // Shape variations\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n square: {\n /* The square styles are exactly the same as the base styles. */\n },\n\n // Shadow styles\n shadow: {\n boxShadow: tokens.shadow4,\n },\n\n // Fit variations\n center: {\n objectFit: 'none',\n objectPosition: 'center',\n height: '100%',\n width: '100%',\n },\n contain: {\n objectFit: 'contain',\n objectPosition: 'center',\n height: '100%',\n width: '100%',\n },\n default: {\n /* The default styles are exactly the same as the base styles. */\n },\n cover: {\n objectFit: 'cover',\n objectPosition: 'center',\n height: '100%',\n width: '100%',\n },\n none: {\n objectFit: 'none',\n objectPosition: 'left top',\n height: '100%',\n width: '100%',\n },\n\n // Block styles\n block: {\n width: '100%',\n },\n});\n\nexport const useImageStyles_unstable = (state: ImageState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n imageClassNames.root,\n styles.base,\n state.block && styles.block,\n state.bordered && styles.bordered,\n state.shadow && styles.shadow,\n styles[state.fit],\n styles[state.shape],\n state.root.className,\n );\n};\n"],"sourceRoot":"../src/"}
|
package/lib/index.js
CHANGED
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
export { Image,
|
|
2
|
-
imageClassName, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable } from './Image';
|
|
1
|
+
export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable } from './Image';
|
|
3
2
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable } from './Image';\nexport type { ImageProps, ImageSlots, ImageState } from './Image';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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;
|
|
1
|
+
{"version":3,"sources":["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;EACpF,MAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;EACA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;EAEA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { renderImage_unstable } from './renderImage';\nimport { useImage_unstable } from './useImage';\nimport { useImageStyles_unstable } from './useImageStyles';\nimport type { ImageProps } from './Image.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The Image component ensures the consistent styling of images.\n */\nexport const Image: ForwardRefComponent<ImageProps> = React.forwardRef((props, ref) => {\n const state = useImage_unstable(props, ref);\n useImageStyles_unstable(state);\n\n return renderImage_unstable(state);\n});\n\nImage.displayName = 'Image';\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Image/renderImage.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;AAGG;;;AACI,MAAM,oBAAoB,GAAI,KAAD,IAAsB;
|
|
1
|
+
{"version":3,"sources":["components/Image/renderImage.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;AAGG;;;AACI,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;EAEA,OAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ImageSlots, ImageState } from './Image.types';\n\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */\nexport const renderImage_unstable = (state: ImageState) => {\n const { slots, slotProps } = getSlots<ImageSlots>(state);\n\n return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -13,11 +13,11 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
|
13
13
|
|
|
14
14
|
const useImage_unstable = (props, ref) => {
|
|
15
15
|
const {
|
|
16
|
-
bordered,
|
|
17
|
-
fit,
|
|
18
|
-
block,
|
|
16
|
+
bordered = false,
|
|
17
|
+
fit = 'default',
|
|
18
|
+
block = false,
|
|
19
19
|
shape = 'square',
|
|
20
|
-
shadow
|
|
20
|
+
shadow = false
|
|
21
21
|
} = props;
|
|
22
22
|
const state = {
|
|
23
23
|
bordered,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Image/useImage.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;
|
|
1
|
+
{"version":3,"sources":["components/Image/useImage.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;EACnG,MAAM;IAAE,QAAQ,GAAG,KAAb;IAAoB,GAAG,GAAG,SAA1B;IAAqC,KAAK,GAAG,KAA7C;IAAoD,KAAK,GAAG,QAA5D;IAAsE,MAAM,GAAG;EAA/E,IAAyF,KAA/F;EAEA,MAAM,KAAK,GAAe;IACxB,QADwB;IAExB,GAFwB;IAGxB,KAHwB;IAIxB,KAJwB;IAKxB,MALwB;IAMxB,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CANY;IASxB,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAA7B;EATkB,CAA1B;EAeA,OAAO,KAAP;AACD,CAnBM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ImageProps, ImageState } from './Image.types';\n\n/**\n * Given user props, returns state and render function for an Image.\n */\nexport const useImage_unstable = (props: ImageProps, ref: React.Ref<HTMLImageElement>): ImageState => {\n const { bordered = false, fit = 'default', block = false, shape = 'square', shadow = false } = props;\n\n const state: ImageState = {\n bordered,\n fit,\n block,\n shape,\n shadow,\n components: {\n root: 'img',\n },\n root: getNativeElementProps('img', {\n ref,\n ...props,\n }),\n };\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -3,23 +3,18 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useImageStyles_unstable = exports.imageClassNames =
|
|
6
|
+
exports.useImageStyles_unstable = exports.imageClassNames = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
|
10
10
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
11
|
-
/**
|
|
12
|
-
* @deprecated Use `imageClassNames.root` instead.
|
|
13
|
-
*/
|
|
14
11
|
|
|
15
|
-
|
|
16
|
-
exports.imageClassName = 'fui-Image';
|
|
17
12
|
exports.imageClassNames = {
|
|
18
13
|
root: 'fui-Image'
|
|
19
14
|
};
|
|
20
15
|
|
|
21
16
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
22
|
-
"
|
|
17
|
+
"base": {
|
|
23
18
|
"g2u3we": "fj3muxo",
|
|
24
19
|
"h3c5rm": ["f1akhkt", "f1lxtadh"],
|
|
25
20
|
"B9xav0g": "f1aperda",
|
|
@@ -31,7 +26,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
31
26
|
"B7ck84d": "f1ewtqcl",
|
|
32
27
|
"mc9l5x": "f14t3ns0"
|
|
33
28
|
},
|
|
34
|
-
"
|
|
29
|
+
"bordered": {
|
|
35
30
|
"icvyot": "fzkkow9",
|
|
36
31
|
"vrafjx": ["fcdblym", "fjik90z"],
|
|
37
32
|
"oivjwe": "fg706s2",
|
|
@@ -41,55 +36,57 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
41
36
|
"Bn0qgzm": "f1vxd6vx",
|
|
42
37
|
"ibv6hh": ["f1ojsxk5", "f5tn483"]
|
|
43
38
|
},
|
|
44
|
-
"
|
|
39
|
+
"circular": {
|
|
45
40
|
"Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
|
|
46
41
|
"Beyfa6y": ["f1nfllo7", "f8fbkgy"],
|
|
47
42
|
"B7oj6ja": ["f1djnp8u", "f1s8kh49"],
|
|
48
43
|
"Btl43ni": ["f1s8kh49", "f1djnp8u"]
|
|
49
44
|
},
|
|
50
|
-
"
|
|
45
|
+
"rounded": {
|
|
51
46
|
"Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
|
|
52
47
|
"Beyfa6y": ["f16jpd5f", "f1aa9q02"],
|
|
53
48
|
"B7oj6ja": ["f1jar5jt", "fyu767a"],
|
|
54
49
|
"Btl43ni": ["fyu767a", "f1jar5jt"]
|
|
55
50
|
},
|
|
56
|
-
"
|
|
51
|
+
"square": {},
|
|
52
|
+
"shadow": {
|
|
57
53
|
"E5pizo": "f1whvlc6"
|
|
58
54
|
},
|
|
59
|
-
"
|
|
55
|
+
"center": {
|
|
60
56
|
"st4lth": "f1plgu50",
|
|
61
|
-
"Ermj5k":
|
|
57
|
+
"Ermj5k": "f14xojzb",
|
|
62
58
|
"Bqenvij": "f1l02sjl",
|
|
63
59
|
"a9b677": "fly5x3f"
|
|
64
60
|
},
|
|
65
|
-
"
|
|
66
|
-
"st4lth": "
|
|
61
|
+
"contain": {
|
|
62
|
+
"st4lth": "f1kle4es",
|
|
67
63
|
"Ermj5k": "f14xojzb",
|
|
68
64
|
"Bqenvij": "f1l02sjl",
|
|
69
65
|
"a9b677": "fly5x3f"
|
|
70
66
|
},
|
|
71
|
-
"
|
|
67
|
+
"default": {},
|
|
68
|
+
"cover": {
|
|
72
69
|
"st4lth": "f1ps3kmd",
|
|
73
70
|
"Ermj5k": "f14xojzb",
|
|
74
71
|
"Bqenvij": "f1l02sjl",
|
|
75
72
|
"a9b677": "fly5x3f"
|
|
76
73
|
},
|
|
77
|
-
"
|
|
78
|
-
"st4lth": "
|
|
79
|
-
"Ermj5k": "
|
|
74
|
+
"none": {
|
|
75
|
+
"st4lth": "f1plgu50",
|
|
76
|
+
"Ermj5k": ["f13uwng7", "fjmyj0p"],
|
|
80
77
|
"Bqenvij": "f1l02sjl",
|
|
81
78
|
"a9b677": "fly5x3f"
|
|
82
79
|
},
|
|
83
|
-
"
|
|
80
|
+
"block": {
|
|
84
81
|
"a9b677": "fly5x3f"
|
|
85
82
|
}
|
|
86
83
|
}, {
|
|
87
|
-
"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);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-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);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f1plgu50{object-fit:none;}", ".
|
|
84
|
+
"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);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-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);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f1plgu50{object-fit:none;}", ".f14xojzb{object-position:center;}", ".f1l02sjl{height:100%;}", ".fly5x3f{width:100%;}", ".f1kle4es{object-fit:contain;}", ".f1ps3kmd{object-fit:cover;}", ".f13uwng7{object-position:left top;}", ".fjmyj0p{object-position:right top;}"]
|
|
88
85
|
});
|
|
89
86
|
|
|
90
87
|
const useImageStyles_unstable = state => {
|
|
91
88
|
const styles = useStyles();
|
|
92
|
-
state.root.className = react_1.mergeClasses(exports.imageClassNames.root, styles.
|
|
89
|
+
state.root.className = react_1.mergeClasses(exports.imageClassNames.root, styles.base, state.block && styles.block, state.bordered && styles.bordered, state.shadow && styles.shadow, styles[state.fit], styles[state.shape], state.root.className);
|
|
93
90
|
};
|
|
94
91
|
|
|
95
92
|
exports.useImageStyles_unstable = useImageStyles_unstable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Image/useImageStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA
|
|
1
|
+
{"version":3,"sources":["components/Image/useImageStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,eAAA,GAA8C;EACzD,IAAI,EAAE;AADmD,CAA9C;;AAIb,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;;AAmEO,MAAM,uBAAuB,GAAI,KAAD,IAAsB;EAC3D,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,eAAA,CAAgB,IADK,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,KAAN,IAAe,MAAM,CAAC,KAHD,EAIrB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJJ,EAKrB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MALF,EAMrB,MAAM,CAAC,KAAK,CAAC,GAAP,CANe,EAOrB,MAAM,CAAC,KAAK,CAAC,KAAP,CAPe,EAQrB,KAAK,CAAC,IAAN,CAAW,SARU,CAAvB;AAUD,CAZM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ImageSlots, ImageState } from './Image.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const imageClassNames: SlotClassNames<ImageSlots> = {\n root: 'fui-Image',\n};\n\nconst useStyles = makeStyles({\n // Base styles\n base: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n\n boxSizing: 'border-box',\n display: 'inline-block',\n },\n\n // Bordered styles\n bordered: {\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n },\n\n // Shape variations\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n square: {\n /* The square styles are exactly the same as the base styles. */\n },\n\n // Shadow styles\n shadow: {\n boxShadow: tokens.shadow4,\n },\n\n // Fit variations\n center: {\n objectFit: 'none',\n objectPosition: 'center',\n height: '100%',\n width: '100%',\n },\n contain: {\n objectFit: 'contain',\n objectPosition: 'center',\n height: '100%',\n width: '100%',\n },\n default: {\n /* The default styles are exactly the same as the base styles. */\n },\n cover: {\n objectFit: 'cover',\n objectPosition: 'center',\n height: '100%',\n width: '100%',\n },\n none: {\n objectFit: 'none',\n objectPosition: 'left top',\n height: '100%',\n width: '100%',\n },\n\n // Block styles\n block: {\n width: '100%',\n },\n});\n\nexport const useImageStyles_unstable = (state: ImageState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n imageClassNames.root,\n styles.base,\n state.block && styles.block,\n state.bordered && styles.bordered,\n state.shadow && styles.shadow,\n styles[state.fit],\n styles[state.shape],\n state.root.className,\n );\n};\n"],"sourceRoot":"../src/"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useImage_unstable = exports.useImageStyles_unstable = exports.renderImage_unstable = exports.imageClassNames = exports.
|
|
6
|
+
exports.useImage_unstable = exports.useImageStyles_unstable = exports.renderImage_unstable = exports.imageClassNames = exports.Image = void 0;
|
|
7
7
|
|
|
8
8
|
var Image_1 = /*#__PURE__*/require("./Image");
|
|
9
9
|
|
|
@@ -12,13 +12,6 @@ Object.defineProperty(exports, "Image", {
|
|
|
12
12
|
get: function () {
|
|
13
13
|
return Image_1.Image;
|
|
14
14
|
}
|
|
15
|
-
}); // eslint-disable-next-line deprecation/deprecation -- https://github.com/microsoft/fluentui/pull/21960#issuecomment-1068991851
|
|
16
|
-
|
|
17
|
-
Object.defineProperty(exports, "imageClassName", {
|
|
18
|
-
enumerable: true,
|
|
19
|
-
get: function () {
|
|
20
|
-
return Image_1.imageClassName;
|
|
21
|
-
}
|
|
22
15
|
});
|
|
23
16
|
Object.defineProperty(exports, "imageClassNames", {
|
|
24
17
|
enumerable: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,KAAA;EAAK;AAAL,CAAA;AAAO,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;AAAsB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA","sourcesContent":["export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable } from './Image';\nexport type { ImageProps, ImageSlots, ImageState } from './Image';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-image",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.1",
|
|
4
4
|
"description": "Fluent UI React Image component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -28,13 +28,13 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.10",
|
|
32
32
|
"@fluentui/scripts": "^1.0.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@griffel/react": "1.0
|
|
36
|
-
"@fluentui/react-utilities": "9.0.0
|
|
37
|
-
"@fluentui/react-theme": "9.0.0
|
|
35
|
+
"@griffel/react": "^1.2.0",
|
|
36
|
+
"@fluentui/react-utilities": "^9.0.0",
|
|
37
|
+
"@fluentui/react-theme": "^9.0.0",
|
|
38
38
|
"tslib": "^2.1.0"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
@@ -45,9 +45,7 @@
|
|
|
45
45
|
},
|
|
46
46
|
"beachball": {
|
|
47
47
|
"disallowedChangeTypes": [
|
|
48
|
-
"major"
|
|
49
|
-
"minor",
|
|
50
|
-
"patch"
|
|
48
|
+
"major"
|
|
51
49
|
]
|
|
52
50
|
},
|
|
53
51
|
"exports": {
|