@fluentui/react-image 9.0.8 → 9.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +46 -4
- package/CHANGELOG.md +25 -5
- package/lib/Image.js.map +1 -1
- package/lib/components/Image/Image.js.map +1 -1
- package/lib/components/Image/Image.types.js.map +1 -1
- package/lib/components/Image/index.js.map +1 -1
- package/lib/components/Image/renderImage.js.map +1 -1
- package/lib/components/Image/useImage.js.map +1 -1
- package/lib/components/Image/useImageStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Image.js.map +1 -1
- package/lib-commonjs/components/Image/Image.js.map +1 -1
- package/lib-commonjs/components/Image/index.js.map +1 -1
- package/lib-commonjs/components/Image/renderImage.js.map +1 -1
- package/lib-commonjs/components/Image/useImage.js.map +1 -1
- package/lib-commonjs/components/Image/useImageStyles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +10 -10
- package/MIGRATION.md +0 -235
- package/Spec.md +0 -168
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,49 @@
|
|
|
2
2
|
"name": "@fluentui/react-image",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 02 Nov 2022 11:54:53 GMT",
|
|
6
|
+
"tag": "@fluentui/react-image_v9.0.10",
|
|
7
|
+
"version": "9.0.10",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "olfedias@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-image",
|
|
13
|
+
"commit": "c619ba066f11a8654e95375314824ba6b81b003e",
|
|
14
|
+
"comment": "chore: Update Griffel to latest version"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-image",
|
|
19
|
+
"comment": "Bump @fluentui/react-utilities to v9.2.0",
|
|
20
|
+
"commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-image",
|
|
25
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.17",
|
|
26
|
+
"commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
|
|
27
|
+
}
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"date": "Tue, 25 Oct 2022 00:35:32 GMT",
|
|
33
|
+
"tag": "@fluentui/react-image_v9.0.9",
|
|
34
|
+
"version": "9.0.9",
|
|
35
|
+
"comments": {
|
|
36
|
+
"patch": [
|
|
37
|
+
{
|
|
38
|
+
"author": "tristan.watanabe@gmail.com",
|
|
39
|
+
"package": "@fluentui/react-image",
|
|
40
|
+
"commit": "c483be010271f3224064a9778e6432167f2249d0",
|
|
41
|
+
"comment": "chore: Migrate to new package structure."
|
|
42
|
+
}
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"date": "Thu, 20 Oct 2022 08:39:34 GMT",
|
|
6
48
|
"tag": "@fluentui/react-image_v9.0.8",
|
|
7
49
|
"version": "9.0.8",
|
|
8
50
|
"comments": {
|
|
@@ -23,19 +65,19 @@
|
|
|
23
65
|
"author": "beachball",
|
|
24
66
|
"package": "@fluentui/react-image",
|
|
25
67
|
"comment": "Bump @fluentui/react-utilities to v9.1.2",
|
|
26
|
-
"commit": "
|
|
68
|
+
"commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
|
|
27
69
|
},
|
|
28
70
|
{
|
|
29
71
|
"author": "beachball",
|
|
30
72
|
"package": "@fluentui/react-image",
|
|
31
73
|
"comment": "Bump @fluentui/react-theme to v9.1.1",
|
|
32
|
-
"commit": "
|
|
74
|
+
"commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
|
|
33
75
|
},
|
|
34
76
|
{
|
|
35
77
|
"author": "beachball",
|
|
36
78
|
"package": "@fluentui/react-image",
|
|
37
79
|
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16",
|
|
38
|
-
"commit": "
|
|
80
|
+
"commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
|
|
39
81
|
}
|
|
40
82
|
]
|
|
41
83
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,21 +1,41 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-image
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 02 Nov 2022 11:54:53 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.10)
|
|
8
|
+
|
|
9
|
+
Wed, 02 Nov 2022 11:54:53 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.9..@fluentui/react-image_v9.0.10)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: Update Griffel to latest version ([PR #25412](https://github.com/microsoft/fluentui/pull/25412) by olfedias@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-utilities to v9.2.0 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
|
|
16
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.17 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
|
|
17
|
+
|
|
18
|
+
## [9.0.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.9)
|
|
19
|
+
|
|
20
|
+
Tue, 25 Oct 2022 00:35:32 GMT
|
|
21
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.8..@fluentui/react-image_v9.0.9)
|
|
22
|
+
|
|
23
|
+
### Patches
|
|
24
|
+
|
|
25
|
+
- chore: Migrate to new package structure. ([PR #25230](https://github.com/microsoft/fluentui/pull/25230) by tristan.watanabe@gmail.com)
|
|
26
|
+
|
|
7
27
|
## [9.0.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.8)
|
|
8
28
|
|
|
9
|
-
Thu, 20 Oct 2022 08:
|
|
29
|
+
Thu, 20 Oct 2022 08:39:34 GMT
|
|
10
30
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.7..@fluentui/react-image_v9.0.8)
|
|
11
31
|
|
|
12
32
|
### Patches
|
|
13
33
|
|
|
14
34
|
- chore: Update Griffel to latest version ([PR #25212](https://github.com/microsoft/fluentui/pull/25212) by olfedias@microsoft.com)
|
|
15
35
|
- chore: Bump peer deps to support React 18 ([PR #24972](https://github.com/microsoft/fluentui/pull/24972) by mgodbolt@microsoft.com)
|
|
16
|
-
- Bump @fluentui/react-utilities to v9.1.2 ([
|
|
17
|
-
- Bump @fluentui/react-theme to v9.1.1 ([
|
|
18
|
-
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16 ([
|
|
36
|
+
- Bump @fluentui/react-utilities to v9.1.2 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
|
|
37
|
+
- Bump @fluentui/react-theme to v9.1.1 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
|
|
38
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
|
|
19
39
|
|
|
20
40
|
## [9.0.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.7)
|
|
21
41
|
|
package/lib/Image.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.js","sourceRoot":"../src/","sources":["Image.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Image/index';\n"]}
|
|
1
|
+
{"version":3,"file":"Image.js","sourceRoot":"../src/","sources":["packages/react-components/react-image/src/Image.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Image/index';\n"]}
|
|
@@ -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;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
|
+
{"version":3,"sources":["packages/react-components/react-image/src/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\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
|
+
{"version":3,"file":"Image.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-image/src/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,"file":"index.js","sourceRoot":"../src/","sources":["components/Image/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Image.types';\nexport * from './Image';\nexport * from './renderImage';\nexport * from './useImage';\nexport * from './useImageStyles';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-image/src/components/Image/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Image.types';\nexport * from './Image';\nexport * from './renderImage';\nexport * from './useImage';\nexport * from './useImageStyles';\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;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/"}
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-image/src/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/"}
|
|
@@ -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;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
|
+
{"version":3,"sources":["packages/react-components/react-image/src/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 +1 @@
|
|
|
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/"}
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-image/src/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.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-image/src/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":["Image.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Image/index';\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-image/src/Image.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Image/index';\n"],"sourceRoot":"../src/"}
|
|
@@ -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;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
|
+
{"version":3,"sources":["packages/react-components/react-image/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;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/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Image.types';\nexport * from './Image';\nexport * from './renderImage';\nexport * from './useImage';\nexport * from './useImageStyles';\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-image/src/components/Image/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Image.types';\nexport * from './Image';\nexport * from './renderImage';\nexport * from './useImage';\nexport * from './useImageStyles';\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;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/"}
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-image/src/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/"}
|
|
@@ -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;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/"}
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-image/src/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/"}
|
|
@@ -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;;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/"}
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-image/src/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/"}
|
|
@@ -1 +1 @@
|
|
|
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/"}
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-image/src/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,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-image",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.10",
|
|
4
4
|
"description": "Fluent UI React Image component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
7
|
-
"typings": "dist/index.d.ts",
|
|
7
|
+
"typings": "./dist/index.d.ts",
|
|
8
8
|
"sideEffects": false,
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
@@ -20,20 +20,19 @@
|
|
|
20
20
|
"lint": "just-scripts lint",
|
|
21
21
|
"start": "yarn storybook",
|
|
22
22
|
"test": "jest --passWithNoTests",
|
|
23
|
-
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
|
24
|
-
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-image/src && yarn docs",
|
|
25
23
|
"storybook": "start-storybook",
|
|
26
|
-
"type-check": "tsc -b tsconfig.json"
|
|
24
|
+
"type-check": "tsc -b tsconfig.json",
|
|
25
|
+
"generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
|
|
27
26
|
},
|
|
28
27
|
"devDependencies": {
|
|
29
28
|
"@fluentui/eslint-plugin": "*",
|
|
30
29
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
30
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.17",
|
|
32
31
|
"@fluentui/scripts": "^1.0.0"
|
|
33
32
|
},
|
|
34
33
|
"dependencies": {
|
|
35
|
-
"@griffel/react": "^1.4.
|
|
36
|
-
"@fluentui/react-utilities": "^9.
|
|
34
|
+
"@griffel/react": "^1.4.2",
|
|
35
|
+
"@fluentui/react-utilities": "^9.2.0",
|
|
37
36
|
"@fluentui/react-theme": "^9.1.1",
|
|
38
37
|
"tslib": "^2.1.0"
|
|
39
38
|
},
|
|
@@ -51,9 +50,10 @@
|
|
|
51
50
|
},
|
|
52
51
|
"exports": {
|
|
53
52
|
".": {
|
|
54
|
-
"types": "./
|
|
53
|
+
"types": "./dist/index.d.ts",
|
|
55
54
|
"import": "./lib/index.js",
|
|
56
55
|
"require": "./lib-commonjs/index.js"
|
|
57
|
-
}
|
|
56
|
+
},
|
|
57
|
+
"./package.json": "./package.json"
|
|
58
58
|
}
|
|
59
59
|
}
|
package/MIGRATION.md
DELETED
|
@@ -1,235 +0,0 @@
|
|
|
1
|
-
# Image Migration
|
|
2
|
-
|
|
3
|
-
## Introduction
|
|
4
|
-
|
|
5
|
-
This guide is a reference for upgrading the `Image` component from v8 or v0 to v9 .
|
|
6
|
-
|
|
7
|
-
## Migration from v8
|
|
8
|
-
|
|
9
|
-
### Property mapping
|
|
10
|
-
|
|
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
|
-
|
|
13
|
-
> ⚠️ Note - Properties not in this table are considered deprecated.
|
|
14
|
-
|
|
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
|
-
|
|
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
|
-
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
|
-
|
|
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 '@griffel/react';
|
|
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 '@griffel/react';
|
|
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
|
-
For v9, you should migrate to use `make-styles` and do style customizations through the `className` prop.
|
|
131
|
-
|
|
132
|
-
### theme
|
|
133
|
-
|
|
134
|
-
For v9, you should use `tokens` in conjunction with `make-styles` and `FluentProvider` to achieve theming correctly.
|
|
135
|
-
|
|
136
|
-
## Migration from v0
|
|
137
|
-
|
|
138
|
-
### Property mapping
|
|
139
|
-
|
|
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
|
-
|
|
142
|
-
| v0 | v9 | Good to go? |
|
|
143
|
-
| --------------- | ------------------ | ----------- |
|
|
144
|
-
| `accessibility` | - | ❌ |
|
|
145
|
-
| `alt` | `alt` | ✔️ |
|
|
146
|
-
| `aria-label` | `aria-label` | ✔️ |
|
|
147
|
-
| `as` | - | ❌ |
|
|
148
|
-
| `avatar` | `shape="circular"` | ✔️ |
|
|
149
|
-
| `circular` | `shape="circular"` | ✔️ |
|
|
150
|
-
| `className` | `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
|
-
For v9, you should migrate to use `make-styles` and do style customizations through the `className` prop.
|
|
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 implementation
|
|
211
|
-
|
|
212
|
-
```jsx
|
|
213
|
-
const MyComponent = () => {
|
|
214
|
-
return <Image src="example.jpg" variables={{ width: '100px' }} />;
|
|
215
|
-
};
|
|
216
|
-
```
|
|
217
|
-
|
|
218
|
-
#### v9 implementation
|
|
219
|
-
|
|
220
|
-
```jsx
|
|
221
|
-
import { Image } from '@fluentui/react-image';
|
|
222
|
-
import { makeStyles } from '@griffel/react';
|
|
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/Spec.md
DELETED
|
@@ -1,168 +0,0 @@
|
|
|
1
|
-
# @fluentui/react-image
|
|
2
|
-
|
|
3
|
-
## Background
|
|
4
|
-
|
|
5
|
-
Image is a visual representation of some content, such as a photo, illustration etc.
|
|
6
|
-
|
|
7
|
-
## Concerns
|
|
8
|
-
|
|
9
|
-
Based on the OpenUI research and the Figma specification, Image seems to be one of those components that is purely styling, thus I would appreciate your answers in any of these questions:
|
|
10
|
-
|
|
11
|
-
- Are there any components would need to use Image?
|
|
12
|
-
- Apart from styling, are there any other functionalities for Image?
|
|
13
|
-
|
|
14
|
-
**Conclusion**: Some potential features that Image can have are:
|
|
15
|
-
|
|
16
|
-
- fallback image placeholder when image fails to load
|
|
17
|
-
- onLoading callback when image fails to load
|
|
18
|
-
- styling helpers
|
|
19
|
-
These will be addressed on later iterations when needed
|
|
20
|
-
|
|
21
|
-
- Is there any benefit of having Image as a component? (taking into consideration that it is css styling and we will need to maintain it over time.)
|
|
22
|
-
|
|
23
|
-
**Conclusion**: The image component will ensure correct styling and behaviour regardless of the Theme
|
|
24
|
-
|
|
25
|
-
## Prior Art
|
|
26
|
-
|
|
27
|
-
- Convergence epic issue: [#16658](https://github.com/microsoft/fluentui/issues/16658)
|
|
28
|
-
- Open UI research [Link](https://open-ui.org/components/image.research), PR: [#274](https://github.com/openui/open-ui/pull/274)
|
|
29
|
-
|
|
30
|
-
### V8/v0 comparison
|
|
31
|
-
|
|
32
|
-
Comparison done in: [#17608](https://github.com/microsoft/fluentui/pull/17608)
|
|
33
|
-
|
|
34
|
-
[image@v7/v8]: https://developer.microsoft.com/en-us/fluentui#/controls/web/image
|
|
35
|
-
[image@v0]: https://fluentsite.z22.web.core.windows.net/0.53.0/components/image/props
|
|
36
|
-
|
|
37
|
-
| Purpose | v7 / v8 | v0 | Matching |
|
|
38
|
-
| ----------------------------------------------------------------------- | ----------------------- | --------------- | ----------------------------- |
|
|
39
|
-
| Additional CSS class name(s) to apply | `className` | `className` | matching |
|
|
40
|
-
| Specifies the cover style to be used for this image | `coverStyle` | N/A | v0 missing |
|
|
41
|
-
| Replaces the src in case of errors | `errorSrc` [DEPRECATED] | N/A | _See `onLoadingStateChanged`_ |
|
|
42
|
-
| Determines how the image is scaled and cropped to fit the frame | `imageFit` | `fluid` | partially matching |
|
|
43
|
-
| Expands image frame to fill its parent container | `maximizeFrame` | `fluid` | partially matching |
|
|
44
|
-
| Optional callback for when the image load state changed | `onLoadingStateChanged` | N/A | v0 missing |
|
|
45
|
-
| Fades the image in when loaded | `shouldFadeIn` | N/A | v0 missing |
|
|
46
|
-
| The image starts as visible and is hidden on error | `shouldStartVisible` | N/A | v0 missing |
|
|
47
|
-
| Provides customized styling that will layer on top of the variant rules | `styles` | `styles` | matching |
|
|
48
|
-
| Theme provided by HOC | `theme` | `variables` | matching |
|
|
49
|
-
| Accessibility behavior overridden by the user | N/A | `accessibility` | v7/v8 missing |
|
|
50
|
-
| An element type to render as (string or component) | N/A | `as` | v7/v8 missing |
|
|
51
|
-
| An image may be formatted to appear inline with text as an avatar | N/A | `avatar` | v7/v8 missing |
|
|
52
|
-
| An image can appear circular | N/A | `circular` | v7/v8 missing |
|
|
53
|
-
| Component design prop | N/A | `design` | v7/v8 missing |
|
|
54
|
-
| Image source URL | N/A | `src` | v7/v8 missing |
|
|
55
|
-
|
|
56
|
-
### v8 usage
|
|
57
|
-
|
|
58
|
-
```jsx
|
|
59
|
-
import { Image, ImageFit } from '@fluentui/react/lib/Image';
|
|
60
|
-
|
|
61
|
-
<Image maximizeFrame imageFit={ImageFit.contain} src="..." alt="Example of the image component in v8" />;
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
### v0 usage
|
|
65
|
-
|
|
66
|
-
```jsx
|
|
67
|
-
<Image block src="..." alt="Example of the image component in v0" />
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
## Variants
|
|
71
|
-
|
|
72
|
-
n/a
|
|
73
|
-
|
|
74
|
-
## API proposal
|
|
75
|
-
|
|
76
|
-
See API at [Image.types.ts](./src/components/Image/Image.types.ts).
|
|
77
|
-
|
|
78
|
-
Proposed component props:
|
|
79
|
-
|
|
80
|
-
| Name | Type | Default value | Comments |
|
|
81
|
-
| ---------- | --------- | ------------- | -------------------------------------------- |
|
|
82
|
-
| `bordered` | `boolean` | `false` | |
|
|
83
|
-
| `fit` | `string` | `"none"` | One of: `none`, `center`, `contain`, `cover` |
|
|
84
|
-
| `block` | `boolean` | `false` | |
|
|
85
|
-
| `shape ` | `string ` | `"square"` | One of: `square`, `circular` , `rounded` |
|
|
86
|
-
| `shadow` | `boolean` | `false` | |
|
|
87
|
-
|
|
88
|
-
All native html attributes of the `<img />` will be available to be used as props of the Image component.
|
|
89
|
-
|
|
90
|
-
## Sample Code
|
|
91
|
-
|
|
92
|
-
Sample code based on the proposed API:
|
|
93
|
-
|
|
94
|
-
### Bordered
|
|
95
|
-
|
|
96
|
-
```jsx
|
|
97
|
-
<Image bordered src="..." />
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
### Block
|
|
101
|
-
|
|
102
|
-
```jsx
|
|
103
|
-
<Image block src="..." />
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
### Rounded
|
|
107
|
-
|
|
108
|
-
```jsx
|
|
109
|
-
<Image shape="rounded" src="..." />
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
### Circular
|
|
113
|
-
|
|
114
|
-
```jsx
|
|
115
|
-
<Image shape="circular" src="..." />
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
### Fit
|
|
119
|
-
|
|
120
|
-
```jsx
|
|
121
|
-
// None
|
|
122
|
-
<Image fit="none" src="..." />
|
|
123
|
-
|
|
124
|
-
// Center
|
|
125
|
-
<Image fit="center" src="..." />
|
|
126
|
-
|
|
127
|
-
// Contain
|
|
128
|
-
<Image fit="contain" src="..." />
|
|
129
|
-
|
|
130
|
-
// Cover
|
|
131
|
-
<Image fit="cover" src="..." />
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
## Structure
|
|
135
|
-
|
|
136
|
-
### Public
|
|
137
|
-
|
|
138
|
-
```tsx
|
|
139
|
-
<Image src=".." />
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
### Internal
|
|
143
|
-
|
|
144
|
-
```tsx
|
|
145
|
-
<slots.root {...slotProps.root} />
|
|
146
|
-
```
|
|
147
|
-
|
|
148
|
-
### DOM
|
|
149
|
-
|
|
150
|
-
```tsx
|
|
151
|
-
<img src="..." class="...">
|
|
152
|
-
```
|
|
153
|
-
|
|
154
|
-
## Migration
|
|
155
|
-
|
|
156
|
-
See [MIGRATION.md](./MIGRATION.md).
|
|
157
|
-
|
|
158
|
-
## Accessibility
|
|
159
|
-
|
|
160
|
-
Images should include the `alt` attribute that includes a description of the image's content and function to be accessible to assistive technologies. The alt description should be concise and clearly communicate the meaning and purpose of the image on where it was included. Avoid using "image of", "picture of" etc. as it is redundant.
|
|
161
|
-
|
|
162
|
-
The images that are only decorative and do not have the structural relevance implied by the semantic element should use the `alt=""` (null alt text) or `role="presentation"`/`role="none"` which will remove the semantic meaning of the element. In case the image is needed to be removed from the accessibility tree then `aria-hidden="true"` can be used.
|
|
163
|
-
|
|
164
|
-
### Relevant documents
|
|
165
|
-
|
|
166
|
-
- [WAI-ARIA 1.1 img Spec](https://www.w3.org/TR/wai-aria-1.1/#img)
|
|
167
|
-
- [WAI-ARIA 1.2 img Spec](https://www.w3.org/TR/wai-aria-1.2/#img)
|
|
168
|
-
- [WAI-ARIA 1.1 Hiding Semantics](https://www.w3.org/TR/wai-aria-practices-1.1/#presentation_role)
|