@fluentui/react-image 9.0.0-alpha.90 → 9.0.0-nightly.46b9ea7036.0

package/CHANGELOG.json

@@ -2,7 +2,117 @@
   "name": "@fluentui/react-image",
   "entries": [
     {
-      "date": "Tue, 05 Oct 2021 12:47:00 GMT",
+      "date": "Mon, 25 Oct 2021 09:17:19 GMT",
+      "tag": "@fluentui/react-image_v9.0.0-nightly.46b9ea7036.0",
+      "version": "9.0.0-nightly.46b9ea7036.0",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "email not defined",
+            "package": "@fluentui/react-image",
+            "comment": "Release nightly v9",
+            "commit": "55900273a4f023d6bb5cd8a3331f2f929d05a4ea"
+          },
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-image",
+            "comment": "Removed duplicate 'Image' from story names",
+            "commit": "55900273a4f023d6bb5cd8a3331f2f929d05a4ea"
+          },
+          {
+            "author": "peter@draxler.ml",
+            "package": "@fluentui/react-image",
+            "comment": "added styling of documentation",
+            "commit": "55900273a4f023d6bb5cd8a3331f2f929d05a4ea"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-image",
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-nightly.46b9ea7036.0",
+            "commit": "55900273a4f023d6bb5cd8a3331f2f929d05a4ea"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-image",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-nightly.46b9ea7036.0",
+            "commit": "55900273a4f023d6bb5cd8a3331f2f929d05a4ea"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-image",
+            "comment": "Bump @fluentui/babel-make-styles to v9.0.0-nightly.46b9ea7036.0",
+            "commit": "55900273a4f023d6bb5cd8a3331f2f929d05a4ea"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-image",
+            "comment": "Bump @fluentui/jest-serializer-make-styles to v9.0.0-nightly.46b9ea7036.0",
+            "commit": "55900273a4f023d6bb5cd8a3331f2f929d05a4ea"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-image",
+            "comment": "Bump @fluentui/react-conformance-make-styles to v9.0.0-nightly.46b9ea7036.0",
+            "commit": "55900273a4f023d6bb5cd8a3331f2f929d05a4ea"
+          }
+        ],
+        "none": [
+          {
+            "author": "tkrasniqi@microsoft.com",
+            "package": "@fluentui/react-image",
+            "comment": "Updated migration guide",
+            "commit": "55900273a4f023d6bb5cd8a3331f2f929d05a4ea"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 06 Oct 2021 10:37:22 GMT",
+      "tag": "@fluentui/react-image_v9.0.0-beta.1",
+      "version": "9.0.0-beta.1",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-image",
+            "comment": "Bump all v9 components to beta prerelease tag",
+            "commit": "5553164c190a4beb4780745d0e6403109e057913"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-image",
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-beta.1",
+            "commit": "5553164c190a4beb4780745d0e6403109e057913"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-image",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-beta.1",
+            "commit": "5553164c190a4beb4780745d0e6403109e057913"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-image",
+            "comment": "Bump @fluentui/babel-make-styles to v9.0.0-beta.1",
+            "commit": "5553164c190a4beb4780745d0e6403109e057913"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-image",
+            "comment": "Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.1",
+            "commit": "5553164c190a4beb4780745d0e6403109e057913"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-image",
+            "comment": "Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.1",
+            "commit": "5553164c190a4beb4780745d0e6403109e057913"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 05 Oct 2021 12:47:58 GMT",
       "tag": "@fluentui/react-image_v9.0.0-alpha.90",
       "version": "9.0.0-alpha.90",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,42 @@
 # Change Log - @fluentui/react-image
 
-This log was last generated on Tue, 05 Oct 2021 12:47:00 GMT and should not be manually modified.
+This log was last generated on Mon, 25 Oct 2021 09:17:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-nightly.46b9ea7036.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.0-nightly.46b9ea7036.0)
+
+Mon, 25 Oct 2021 09:17:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.0-beta.1..@fluentui/react-image_v9.0.0-nightly.46b9ea7036.0)
+
+### Changes
+
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/55900273a4f023d6bb5cd8a3331f2f929d05a4ea) by email not defined)
+- Removed duplicate 'Image' from story names ([commit](https://github.com/microsoft/fluentui/commit/55900273a4f023d6bb5cd8a3331f2f929d05a4ea) by gcox@microsoft.com)
+- added styling of documentation ([commit](https://github.com/microsoft/fluentui/commit/55900273a4f023d6bb5cd8a3331f2f929d05a4ea) by peter@draxler.ml)
+- Bump @fluentui/react-make-styles to v9.0.0-nightly.46b9ea7036.0 ([commit](https://github.com/microsoft/fluentui/commit/55900273a4f023d6bb5cd8a3331f2f929d05a4ea) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-nightly.46b9ea7036.0 ([commit](https://github.com/microsoft/fluentui/commit/55900273a4f023d6bb5cd8a3331f2f929d05a4ea) by beachball)
+- Bump @fluentui/babel-make-styles to v9.0.0-nightly.46b9ea7036.0 ([commit](https://github.com/microsoft/fluentui/commit/55900273a4f023d6bb5cd8a3331f2f929d05a4ea) by beachball)
+- Bump @fluentui/jest-serializer-make-styles to v9.0.0-nightly.46b9ea7036.0 ([commit](https://github.com/microsoft/fluentui/commit/55900273a4f023d6bb5cd8a3331f2f929d05a4ea) by beachball)
+- Bump @fluentui/react-conformance-make-styles to v9.0.0-nightly.46b9ea7036.0 ([commit](https://github.com/microsoft/fluentui/commit/55900273a4f023d6bb5cd8a3331f2f929d05a4ea) by beachball)
+
+## [9.0.0-beta.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.0-beta.1)
+
+Wed, 06 Oct 2021 10:37:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.0-alpha.90..@fluentui/react-image_v9.0.0-beta.1)
+
+### Changes
+
+- Bump all v9 components to beta prerelease tag ([PR #20106](https://github.com/microsoft/fluentui/pull/20106) by lingfangao@hotmail.com)
+- Bump @fluentui/react-make-styles to v9.0.0-beta.1 ([PR #20106](https://github.com/microsoft/fluentui/pull/20106) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-beta.1 ([PR #20106](https://github.com/microsoft/fluentui/pull/20106) by beachball)
+- Bump @fluentui/babel-make-styles to v9.0.0-beta.1 ([PR #20106](https://github.com/microsoft/fluentui/pull/20106) by beachball)
+- Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.1 ([PR #20106](https://github.com/microsoft/fluentui/pull/20106) by beachball)
+- Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.1 ([PR #20106](https://github.com/microsoft/fluentui/pull/20106) by beachball)
+
 ## [9.0.0-alpha.90](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.0-alpha.90)
 
-Tue, 05 Oct 2021 12:47:00 GMT 
+Tue, 05 Oct 2021 12:47:58 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.0-alpha.89..@fluentui/react-image_v9.0.0-alpha.90)
 
 ### Changes

package/MIGRATION.md

@@ -0,0 +1,235 @@
+# Image Migration
+
+## Introduction
+
+This guide is a reference for upgrading the Image component from v8 (Fabric) or v0 (Northstar) to v9 (FluentUI vNext).
+
+## Migration from v8 (Fabric)
+
+### Property mapping
+
+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.
+
+> ⚠️ Note - Properties not in this table are considered deprecated.
+
+| v7 / v8                 | v9      | Good to go? |
+| ----------------------- | ------- | ----------- |
+| `className`             | -       | ✔️          |
+| `coverStyle`            | `fit`   | ⚠️          |
+| `imageFit`              | `fit`   | ✔️          |
+| `maximizeFrame`         | `block` | ✔️          |
+| `loading`               | -       | ✔️          |
+| `onLoadingStateChanged` | -       | ❌          |
+| `shouldFadeIn`          | -       | ❌          |
+| `shouldStartVisible`    | -       | ❌          |
+| `styles`                | -       | ❌          |
+| `theme`                 | -       | ❓          |
+
+### className
+
+_This property has not changed and can be left as is._
+
+### coverStyle
+
+The behaviour of this prop can be achieved using the `fit` prop with the value of `cover`.
+
+```jsx
+<Image src="example.jpg" fit="cover" />
+```
+
+### imageFit
+
+This can be achieved using the `fit` prop by asigning the value of `contain`.
+
+```jsx
+<Image src="example.jpg" fit="contain" />
+```
+
+### maximizeFrame
+
+This prop has been renamed to `block` which will result in the same behaviour as before.
+
+```jsx
+<Image src="example.jpg" block />
+```
+
+### loading
+
+_This property has not changed and can be used as is._
+
+### onLoadingStateChanged
+
+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.
+
+### shouldFadeIn
+
+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:
+
+```jsx
+import { useState } from 'react';
+import { Image } from '@fluentui/react-image';
+import { makeStyles } from '@fluentui/react-make-styles';
+
+const useStyles = makeStyles(theme => ({
+  fadeIn400: {
+    animationName: {
+      from : {
+        opacity: 0,
+      },
+      to: {
+        opacity: 1,
+      }
+    },
+    animationIterationCount: 'infinite',
+    animationDuration: '0.367s',
+  },
+})
+
+const MyComponent = () => {
+    const [isLoaded, setLoaded] = useState(false);
+    const styles = useStyles()
+
+    return <Image src="example.jpg" onLoad={()=> setLoaded(true)} className={!isLoaded? styles.fadeIn400 : ''} />
+}
+```
+
+### shouldStartVisible
+
+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:
+
+```jsx
+import { useState } from 'react';
+import { makeStyles } from '@fluentui/react-make-styles';
+import { Image } from '@fluentui/react-image';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'none',
+  },
+});
+
+export default function App() {
+  const [isLoaded, setLoaded] = useState(null);
+
+  const styles = useStyles();
+
+  return (
+    <Image
+      src="https://via.placeholder.com/300x300"
+      alt="Example image"
+      onLoad={() => setLoaded(true)}
+      onError={() => setLoaded(false)}
+      className={isLoaded === false ? styles.root : ''}
+    />
+  );
+}
+```
+
+### styles
+
+_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._
+
+### theme
+
+_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._
+
+## Migration from v0 (Northstar)
+
+### Property mapping
+
+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.
+
+| v0              | v9                 | Good to go? |
+| --------------- | ------------------ | ----------- |
+| `accessibility` | -                  | ❌          |
+| `alt`           | -                  | ✔️          |
+| `aria-label`    | -                  | ✔️          |
+| `as`            | -                  | ❌          |
+| `avatar`        | `shape="circular"` | ✔️          |
+| `circular`      | `shape="circular"` | ✔️          |
+| `className`     | -                  | ✔️          |
+| `fluid`         | `block`            | ✔️          |
+| `styles`        | -                  | ❌          |
+| `variables`     | -                  | ❌          |
+
+### accessibility
+
+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:
+
+- It is important for Image to have the `alt` description.
+- 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.
+
+### alt
+
+_This property has not changed and can be left as is._
+
+### aria-label
+
+_This property has not changed and can be left as is._
+
+### as
+
+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.
+
+### avatar
+
+This can be achieved using the `shape` prop with the value of `circular`.
+
+```jsx
+<Image src="example.jpg" shape="circular" />
+```
+
+### circular
+
+This can be achieved using the `shape` prop with the value of `circular`.
+
+```jsx
+<Image src="example.jpg" shape="circular" />
+```
+
+### className
+
+_This property has not changed and can be left as is._
+
+### fluid
+
+This prop has been renamed to `block` which will result into the same behaviour as before.
+
+```jsx
+<Image src="example.jpg" block />
+```
+
+### styles
+
+_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._
+
+### variables
+
+For v9, this feature is no longer supported. The alternative is to apply styles through `make-styles`. Below is an example of a migration:
+
+#### v0 (Northstar) implementation
+
+```jsx
+const MyComponent = () => {
+  return <Image src="example.jpg" variables={{ width: '100px' }} />;
+};
+```
+
+#### v9 (Fluent UI vNext) implementation
+
+```jsx
+import { Image } from '@fluentui/react-image';
+import { makeStyles } from '@fluentui/react-make-styles';
+
+const useStyles = makeStyles(theme => ({
+  width100: {
+     width: '100px'
+  },
+})
+
+const MyComponent = () => {
+    const styles = useStyles()
+
+    return <Image src="example.jpg" className={styles.width100} />
+}
+```

package/README.md

@@ -51,3 +51,7 @@ The DOM structure will result into:
 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`.
 
 For more information on the component, please refer to the [API documentation](https://aka.ms/fluentui-storybook).
+
+## Migration
+
+For migrating from older versions of FluentUI, please check out the [migration guide](./MIGRATION.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-image",
-  "version": "9.0.0-alpha.90",
+  "version": "9.0.0-nightly.46b9ea7036.0",
   "description": "Fluent UI React Image component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -25,11 +25,11 @@
     "storybook": "start-storybook"
   },
   "devDependencies": {
-    "@fluentui/babel-make-styles": "9.0.0-alpha.60",
+    "@fluentui/babel-make-styles": "9.0.0-nightly.46b9ea7036.0",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/jest-serializer-make-styles": "9.0.0-alpha.53",
+    "@fluentui/jest-serializer-make-styles": "9.0.0-nightly.46b9ea7036.0",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-make-styles": "9.0.0-alpha.22",
+    "@fluentui/react-conformance-make-styles": "9.0.0-nightly.46b9ea7036.0",
     "@fluentui/scripts": "^1.0.0",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
@@ -44,8 +44,8 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "9.0.0-alpha.78",
-    "@fluentui/react-utilities": "9.0.0-alpha.56",
+    "@fluentui/react-make-styles": "9.0.0-nightly.46b9ea7036.0",
+    "@fluentui/react-utilities": "9.0.0-nightly.46b9ea7036.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
@@ -55,7 +55,7 @@
     "react-dom": ">=16.8.0 <18.0.0"
   },
   "beachball": {
-    "tag": "alpha",
+    "tag": "beta",
     "disallowedChangeTypes": [
       "major",
       "minor",