react-image: Migrate to simplified slots (#19745)

* Migrate to simplified slots * Fixed typo * Change files * Fixed root slot as and imageslots * Changed root type to IntrinsicShorthandProps Co-authored-by: André <andrefcdias@users.noreply.github.com> * Updated api md * Fixed typo and change file Co-authored-by: André <andrefcdias@users.noreply.github.com>
microsoft · Sep 14, 2021 · 5fed6eb · 5fed6eb
1 parent e870763
commit 5fed6eb
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 35 deletions.
diff --git a/change/@fluentui-react-image-9142fc98-0dd2-4c38-8a21-7dccbbe21ae2.json b/change/@fluentui-react-image-9142fc98-0dd2-4c38-8a21-7dccbbe21ae2.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Migrate to simplified slots",
+  "packageName": "@fluentui/react-image",
+  "email": "tkrasniqi@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-image/etc/react-image.api.md b/packages/react-image/etc/react-image.api.md
@@ -4,33 +4,45 @@
 
 ```ts
 
-import type { ComponentPropsCompat } from '@fluentui/react-utilities';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 
 // @public (undocumented)
-const Image_2: React_2.FunctionComponent<ImageProps & React_2.RefAttributes<HTMLElement>>;
+const Image_2: React_2.FunctionComponent<ImageProps>;
 export { Image_2 as Image }
 
 // @public (undocumented)
-export interface ImageProps extends ComponentPropsCompat, React_2.ImgHTMLAttributes<HTMLImageElement> {
+export type ImageCommons = {
     bordered?: boolean;
-    circular?: boolean;
     fit?: 'none' | 'center' | 'contain' | 'cover';
     fluid?: boolean;
+    circular?: boolean;
     rounded?: boolean;
+};
+
+// @public (undocumented)
+export interface ImageProps extends ComponentProps<ImageSlots>, Partial<ImageCommons> {
 }
 
 // @public (undocumented)
-export interface ImageState extends ImageProps {
-    // (undocumented)
-    ref: React_2.RefObject<HTMLElement>;
+export const imageShorthandProps: Array<keyof ImageSlots>;
+
+// @public (undocumented)
+export type ImageSlots = {
+    root: IntrinsicShorthandProps<'img'>;
+};
+
+// @public (undocumented)
+export interface ImageState extends ComponentState<ImageSlots>, ImageCommons {
 }
 
 // @public
 export const renderImage: (state: ImageState) => JSX.Element;
 
 // @public
-export const useImage: (props: ImageProps, ref: React_2.Ref<HTMLElement>, defaultProps?: ImageProps | undefined) => ImageState;
+export const useImage: (props: ImageProps, ref: React_2.Ref<HTMLImageElement>) => ImageState;
 
 // @public (undocumented)
 export const useImageStyles: (state: ImageState) => void;

diff --git a/packages/react-image/src/common/isConformant.ts b/packages/react-image/src/common/isConformant.ts
@@ -10,6 +10,7 @@ export function isConformant<TProps = {}>(
     componentPath: module!.parent!.filename.replace('.test', ''),
     disabledTests: ['has-docblock'],
     extraTests: makeStylesTests as TestObject<TProps>,
+    skipAsPropTests: true,
   };
 
   baseIsConformant(defaultOptions, testInfo);

diff --git a/packages/react-image/src/components/Image/Image.tsx b/packages/react-image/src/components/Image/Image.tsx
@@ -4,8 +4,8 @@ import { useImage } from './useImage';
 import { useImageStyles } from './useImageStyles';
 import type { ImageProps } from './Image.types';
 
-export const Image: React.FunctionComponent<ImageProps & React.RefAttributes<HTMLElement>> = React.forwardRef(
-  (props: ImageProps, ref: React.Ref<HTMLElement>) => {
+export const Image: React.FunctionComponent<ImageProps> = React.forwardRef(
+  (props: ImageProps, ref: React.Ref<HTMLImageElement>) => {
     const state = useImage(props, ref);
     useImageStyles(state);
 

diff --git a/packages/react-image/src/components/Image/Image.types.ts b/packages/react-image/src/components/Image/Image.types.ts
@@ -1,7 +1,10 @@
-import * as React from 'react';
-import type { ComponentPropsCompat } from '@fluentui/react-utilities';
+import type { ComponentState, ComponentProps, IntrinsicShorthandProps } from '@fluentui/react-utilities';
 
-export interface ImageProps extends ComponentPropsCompat, React.ImgHTMLAttributes<HTMLImageElement> {
+export type ImageSlots = {
+  root: IntrinsicShorthandProps<'img'>;
+};
+
+export type ImageCommons = {
   /**
    * An image can appear with rectangular border.
    */
@@ -26,8 +29,8 @@ export interface ImageProps extends ComponentPropsCompat, React.ImgHTMLAttribute
    * An image can appear rounded.
    */
   rounded?: boolean;
-}
+};
+
+export interface ImageProps extends ComponentProps<ImageSlots>, Partial<ImageCommons> {}
 
-export interface ImageState extends ImageProps {
-  ref: React.RefObject<HTMLElement>;
-}
+export interface ImageState extends ComponentState<ImageSlots>, ImageCommons {}
diff --git a/packages/react-image/src/components/Image/renderImage.tsx b/packages/react-image/src/components/Image/renderImage.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react';
-import { getSlotsCompat } from '@fluentui/react-utilities';
-import type { ImageState } from './Image.types';
+import { getSlots } from '@fluentui/react-utilities';
+import { ImageSlots, ImageState } from './Image.types';
+import { imageShorthandProps } from './useImage';
 
 /**
  * Define the render function.
  * Given the state of an image, renders it.
  */
 export const renderImage = (state: ImageState) => {
-  const { slots, slotProps } = getSlotsCompat(state);
+  const { slots, slotProps } = getSlots<ImageSlots>(state, imageShorthandProps);
 
   return <slots.root {...slotProps.root} />;
 };
diff --git a/packages/react-image/src/components/Image/useImage.ts b/packages/react-image/src/components/Image/useImage.ts
@@ -1,24 +1,30 @@
 import * as React from 'react';
-import { makeMergeProps, resolveShorthandProps, useMergedRefs } from '@fluentui/react-utilities';
-import type { ImageProps, ImageState } from './Image.types';
+import { getNativeElementProps } from '@fluentui/react-utilities';
+import type { ImageProps, ImageSlots, ImageState } from './Image.types';
 
-const mergeProps = makeMergeProps<ImageState>();
+export const imageShorthandProps: Array<keyof ImageSlots> = ['root'];
 
 /**
  * Given user props, returns state and render function for an Image.
  */
-export const useImage = (props: ImageProps, ref: React.Ref<HTMLElement>, defaultProps?: ImageProps): ImageState => {
-  const resolvedRef = useMergedRefs(ref, React.useRef(null));
-  const state = mergeProps(
-    {
-      ref: resolvedRef,
-      as: 'img',
+export const useImage = (props: ImageProps, ref: React.Ref<HTMLImageElement>): ImageState => {
+  const { bordered, fit, fluid, circular, rounded } = props;
+  const state: ImageState = {
+    bordered,
+    fit,
+    fluid,
+    circular,
+    rounded,
+    components: {
+      root: 'img',
     },
-    defaultProps,
-    resolveShorthandProps(props, []),
-  );
+    root: getNativeElementProps('img', {
+      ref,
+      ...props,
+    }),
+  };
 
-  state['aria-hidden'] = state.alt || state['aria-label'] ? undefined : 'true';
+  state.root['aria-hidden'] = state.root.alt || state.root['aria-label'] ? undefined : 'true';
 
   return state;
 };
diff --git a/packages/react-image/src/components/Image/useImageStyles.ts b/packages/react-image/src/components/Image/useImageStyles.ts
@@ -51,7 +51,7 @@ const useStyles = makeStyles({
 
 export const useImageStyles = (state: ImageState) => {
   const styles = useStyles();
-  state.className = mergeClasses(
+  state.root.className = mergeClasses(
     styles.root,
     state.bordered && styles.rootBordered,
     state.circular && styles.rootCircular,
@@ -61,6 +61,6 @@ export const useImageStyles = (state: ImageState) => {
     state.fit === 'cover' && styles.rootFitCover,
     state.fit === 'contain' && styles.rootFitContain,
     state.fluid && styles.rootFluid,
-    state.className,
+    state.root.className,
   );
 };