From 5abfc99d99c6b1508c7243add9971a39bb50812e Mon Sep 17 00:00:00 2001
From: Martin Hochel <martinhochel@microsoft.com>
Date: Mon, 19 Jul 2021 15:17:55 +0200
Subject: [PATCH] chore(react-image): migrate to new SB controlls setup
 (#18972)

* chore(react-image): migrate to new SB controlls setup
* refactor(react-image): remove redundant api declared by native img
* Change files
---
 ...-7bca6359-4ce8-4609-80b6-a7f69066e3e3.json |  7 +++++
 packages/react-image/.storybook/preview.js    |  4 +++
 packages/react-image/etc/react-image.api.md   |  4 ---
 packages/react-image/src/Image.stories.tsx    | 27 +++++++++++++++++--
 .../src/components/Image/Image.types.ts       | 10 -------
 packages/react-image/tsconfig.json            |  2 +-
 6 files changed, 37 insertions(+), 17 deletions(-)
 create mode 100644 change/@fluentui-react-image-7bca6359-4ce8-4609-80b6-a7f69066e3e3.json

diff --git a/change/@fluentui-react-image-7bca6359-4ce8-4609-80b6-a7f69066e3e3.json b/change/@fluentui-react-image-7bca6359-4ce8-4609-80b6-a7f69066e3e3.json
new file mode 100644
index 0000000000000..f4d272d69540a
--- /dev/null
+++ b/change/@fluentui-react-image-7bca6359-4ce8-4609-80b6-a7f69066e3e3.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore(react-image): migrate to new SB controlls setup",
+  "packageName": "@fluentui/react-image",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/react-image/.storybook/preview.js b/packages/react-image/.storybook/preview.js
index b52409294c330..10fd98d02c945 100644
--- a/packages/react-image/.storybook/preview.js
+++ b/packages/react-image/.storybook/preview.js
@@ -1,3 +1,7 @@
 import * as rootPreview from '../../../.storybook/preview';
 
+/** @type {typeof rootPreview.decorators} */
 export const decorators = [...rootPreview.decorators];
+
+/** @type {typeof rootPreview.parameters} */
+export const parameters = { ...rootPreview.parameters };
diff --git a/packages/react-image/etc/react-image.api.md b/packages/react-image/etc/react-image.api.md
index 7eede492a7dbb..c44e30c7a969e 100644
--- a/packages/react-image/etc/react-image.api.md
+++ b/packages/react-image/etc/react-image.api.md
@@ -9,18 +9,15 @@ import * as React_2 from 'react';
 
 // @public (undocumented)
 const Image_2: React_2.FunctionComponent<ImageProps & React_2.RefAttributes<HTMLElement>>;
-
 export { Image_2 as Image }
 
 // @public (undocumented)
 export interface ImageProps extends ComponentPropsCompat, React_2.ImgHTMLAttributes<HTMLImageElement> {
-    alt?: string;
     bordered?: boolean;
     circular?: boolean;
     fit?: 'none' | 'center' | 'contain' | 'cover';
     fluid?: boolean;
     rounded?: boolean;
-    src?: string;
 }
 
 // @public (undocumented)
@@ -38,7 +35,6 @@ export const useImage: (props: ImageProps, ref: React_2.Ref<HTMLElement>, defaul
 // @public (undocumented)
 export const useImageStyles: (state: ImageState) => void;
 
-
 // (No @packageDocumentation comment for this package)
 
 ```
diff --git a/packages/react-image/src/Image.stories.tsx b/packages/react-image/src/Image.stories.tsx
index c89484aa57c2a..4c9922c304fd7 100644
--- a/packages/react-image/src/Image.stories.tsx
+++ b/packages/react-image/src/Image.stories.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
-import { Image } from './index';
 import { makeStyles } from '@fluentui/react-make-styles';
+import { ArgTypes, Meta, Parameters } from '@storybook/react';
+
+import { Image, ImageProps } from './index';
 
 /**
  * Temporary Stack until there's one in its own package.
@@ -31,6 +33,27 @@ const Stack = (props: React.PropsWithChildren<{ horizontal?: boolean }>) => {
   return <div {...rest} className={horizontal ? hStack : vStack} />;
 };
 
+export const Default = (props: ImageProps) => {
+  return <Image {...props} />;
+};
+Default.argTypes = {
+  alt: {
+    control: 'text',
+    defaultValue: 'Image placeholder',
+    description: `description of the image, which isn't mandatory but is incredibly useful for accessibility`,
+  },
+  src: {
+    control: 'text',
+    defaultValue: 'https://via.placeholder.com/300x300',
+    description: 'path to the image you want to display',
+  },
+} as ArgTypes;
+Default.parameters = {
+  controls: {
+    disable: false,
+  },
+} as Parameters;
+
 export const ImageAppearanceShape = () => (
   <Stack horizontal>
     <Image
@@ -185,4 +208,4 @@ export const ImageFluid = () => (
 export default {
   title: 'Components/Image',
   component: Image,
-};
+} as Meta;
diff --git a/packages/react-image/src/components/Image/Image.types.ts b/packages/react-image/src/components/Image/Image.types.ts
index c48260b1133bc..02379356f6e90 100644
--- a/packages/react-image/src/components/Image/Image.types.ts
+++ b/packages/react-image/src/components/Image/Image.types.ts
@@ -2,11 +2,6 @@ import * as React from 'react';
 import { ComponentPropsCompat } from '@fluentui/react-utilities';
 
 export interface ImageProps extends ComponentPropsCompat, React.ImgHTMLAttributes<HTMLImageElement> {
-  /**
-   * An alternative text for an image.
-   */
-  alt?: string;
-
   /**
    * An image can appear with rectangular border.
    */
@@ -31,11 +26,6 @@ export interface ImageProps extends ComponentPropsCompat, React.ImgHTMLAttribute
    * An image can appear rounded.
    */
   rounded?: boolean;
-
-  /**
-   * An image can have source URL.
-   */
-  src?: string;
 }
 
 export interface ImageState extends ImageProps {
diff --git a/packages/react-image/tsconfig.json b/packages/react-image/tsconfig.json
index 1259d048631bd..5a977f51e4d87 100644
--- a/packages/react-image/tsconfig.json
+++ b/packages/react-image/tsconfig.json
@@ -12,6 +12,6 @@
     "importHelpers": true,
     "noUnusedLocals": true,
     "preserveConstEnums": true,
-    "types": ["jest", "custom-global", "inline-style-expand-shorthand"]
+    "types": ["jest", "custom-global", "inline-style-expand-shorthand", "storybook__addons"]
   }
 }