@fluentui/react-image 0.0.0-nightly-20220608-0420.1 → 0.0.0-nightly-20220613-0426.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.
Files changed (6) hide show
  1. package/CHANGELOG.json +11 -5
  2. package/CHANGELOG.md +6 -5
  3. package/MIGRATION.md +29 -29
  4. package/README.md +17 -35
  5. package/Spec.md +5 -10
  6. package/package.json +4 -4
package/CHANGELOG.json CHANGED
@@ -2,16 +2,22 @@
2
2
  "name": "@fluentui/react-image",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 08 Jun 2022 04:32:08 GMT",
6
- "tag": "@fluentui/react-image_v0.0.0-nightly-20220608-0420.1",
7
- "version": "0.0.0-nightly-20220608-0420.1",
5
+ "date": "Mon, 13 Jun 2022 04:39:30 GMT",
6
+ "tag": "@fluentui/react-image_v0.0.0-nightly-20220613-0426.1",
7
+ "version": "0.0.0-nightly-20220613-0426.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
+ {
11
+ "author": "Humberto.Morimoto@microsoft.com",
12
+ "package": "@fluentui/react-image",
13
+ "commit": "52b0b9480fe4393e29863165a458c0a66f765d70",
14
+ "comment": "README, spec and migration guide cleanup for react-image."
15
+ },
10
16
  {
11
17
  "author": "beachball",
12
18
  "package": "@fluentui/react-image",
13
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220608-0420.1",
14
- "commit": "60b10ac54e8953147582e39ccf022ad0044d1733"
19
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220613-0426.1",
20
+ "commit": "2b454ddc90667c28deec89e4aa340c5aaa242465"
15
21
  }
16
22
  ]
17
23
  }
package/CHANGELOG.md CHANGED
@@ -1,17 +1,18 @@
1
1
  # Change Log - @fluentui/react-image
2
2
 
3
- This log was last generated on Wed, 08 Jun 2022 04:32:08 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 13 Jun 2022 04:39:30 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20220608-0420.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v0.0.0-nightly-20220608-0420.1)
7
+ ## [0.0.0-nightly-20220613-0426.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v0.0.0-nightly-20220613-0426.1)
8
8
 
9
- Wed, 08 Jun 2022 04:32:08 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.0-rc.11..@fluentui/react-image_v0.0.0-nightly-20220608-0420.1)
9
+ Mon, 13 Jun 2022 04:39:30 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.0-rc.11..@fluentui/react-image_v0.0.0-nightly-20220613-0426.1)
11
11
 
12
12
  ### Changes
13
13
 
14
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20220608-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/60b10ac54e8953147582e39ccf022ad0044d1733) by beachball)
14
+ - README, spec and migration guide cleanup for react-image. ([PR #23447](https://github.com/microsoft/fluentui/pull/23447) by Humberto.Morimoto@microsoft.com)
15
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20220613-0426.1 ([commit](https://github.com/microsoft/fluentui/commit/2b454ddc90667c28deec89e4aa340c5aaa242465) by beachball)
15
16
 
16
17
  ## [9.0.0-rc.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.0-rc.11)
17
18
 
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 (Fabric) or v0 (Northstar) to v9 (FluentUI vNext).
5
+ This guide is a reference for upgrading the `Image` component from v8 or v0 to v9 .
6
6
 
7
- ## Migration from v8 (Fabric)
7
+ ## Migration from v8
8
8
 
9
9
  ### Property mapping
10
10
 
11
- The table below presents a mapping of props between the v8 (FabricUI) and v9 (Fluent UI vNext) in order to clarify which properties require changes to achieve the same result.
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 | Good to go? |
16
- | ----------------------- | ------- | ----------- |
17
- | `className` | - | ✔️ |
18
- | `coverStyle` | `fit` | ⚠️ |
19
- | `imageFit` | `fit` | ✔️ |
20
- | `maximizeFrame` | `block` | ✔️ |
21
- | `loading` | - | ✔️ |
22
- | `onLoadingStateChanged` | - | ❌ |
23
- | `shouldFadeIn` | - | ❌ |
24
- | `shouldStartVisible` | - | ❌ |
25
- | `styles` | - | ❌ |
26
- | `theme` | - | ❓ |
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
- _This property has not changed and can be used as is._
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
- _This property has not changed and can be used as is. However, we highly recommend that you migrate to a `make-styles` styling solution for performance reasons._
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
- _This property has not changed and can be used as is. However, we highly recommend that you migrate to a `make-styles` styling solution for performance reasons._
134
+ For v9, you should use `tokens` in conjunction with `make-styles` and `FluentProvider` to achieve theming correctly.
135
135
 
136
- ## Migration from v0 (Northstar)
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
- _This property has not changed and can be used as is. However, we highly recommend that you migrate to a `make-styles` styling solution for performance reasons._
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 (Northstar) implementation
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 (Fluent UI vNext) implementation
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
- **React Image component for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
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 use the Image component, it is required to install the main package of Fluent UI components:
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
- Or, installing only the `react-image` package:
26
-
27
- ```sh
28
- npm install @fluentui/react-image
29
- npm install @fluentui/react-provider
30
- ```
15
+ ### Examples
31
16
 
32
- ```js
33
- import { Image } from '@fluentui/react-image';
34
- import { FluentProvider } from '@fluentui/react-provider';
35
-
36
- const App = () => (
37
- <FluentProvider>
38
- <Image src="example_image.png" alt="Example image" />;
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
- The DOM structure will result into:
26
+ See [Fluent UI Storybook](https://aka.ms/fluentui-storybook) for more detailed usage examples.
44
27
 
45
- ```jsx
46
- <img src="example_image.png" alt="Example image" />
47
- ```
28
+ Alternatively, run Storybook locally with:
48
29
 
49
- ## API
30
+ 1. `yarn start`
31
+ 2. Select `react-image` from the list.
50
32
 
51
- Image component is build upon the `<img/>` tag, which does support all the native attributes. Additionaly, the following properties are available: `bordered`, `fit`, `block`, `shape` and `shadow`.
33
+ ### Specification
52
34
 
53
- For more information on the component, please refer to the [API documentation](https://aka.ms/fluentui-storybook).
35
+ See [SPEC.md](./SPEC.md).
54
36
 
55
37
  ## Migration
56
38
 
57
- For migrating from older versions of FluentUI, please check out the [migration guide](./MIGRATION.md)
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 [react-image/Image.types.ts] for the API.
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` | "`none`" | One of: `none`, `center`, `contain`, `cover` |
83
+ | `fit` | `string` | `"none"` | One of: `none`, `center`, `contain`, `cover` |
86
84
  | `block` | `boolean` | `false` | |
87
- | `shape ` | `string ` | `false` | One of: `square`, `circular` , `rounded` |
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
- <!-- ## Migration -->
157
-
158
- <!-- _Describe what will need to be done to upgrade from the existing implementations:_
154
+ ## Migration
159
155
 
160
- - _Migration from v8_
161
- - _Migration from v0_ -->
156
+ See [MIGRATION.md](./MIGRATION.md).
162
157
 
163
158
  ## Accessibility
164
159
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-image",
3
- "version": "0.0.0-nightly-20220608-0420.1",
3
+ "version": "0.0.0-nightly-20220613-0426.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": "0.0.0-nightly-20220608-0420.0",
31
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220613-0426.0",
32
32
  "@fluentui/scripts": "^1.0.0"
33
33
  },
34
34
  "dependencies": {
35
35
  "@griffel/react": "1.1.0",
36
- "@fluentui/react-utilities": "0.0.0-nightly-20220608-0420.1",
37
- "@fluentui/react-theme": "0.0.0-nightly-20220608-0420.0",
36
+ "@fluentui/react-utilities": "0.0.0-nightly-20220613-0426.1",
37
+ "@fluentui/react-theme": "0.0.0-nightly-20220613-0426.0",
38
38
  "tslib": "^2.1.0"
39
39
  },
40
40
  "peerDependencies": {