react-image - Updates styles from makeStylesCompat to makeStyles (#17441

)

* react-image - Updates styles from makeStylesCompat to makeStyles

* Change files

change/@fluentui-react-image-f92f944d-9ca4-42c7-84bd-6de0560b56c8.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "react-image - Updates styles from makeStylesCompat to makeStyles",
+  "packageName": "@fluentui/react-image",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-image/etc/react-image.api.md

@@ -36,9 +36,6 @@ export const useImage: (props: ImageProps, ref: React.Ref<HTMLElement>, defaultP
 // @public (undocumented)
 export const useImageStyles: (state: ImageState) => void;
 
-// @public (undocumented)
-export const useRootStyles: (selectors: ImageState) => string;
-
 
 // (No @packageDocumentation comment for this package)
 

packages/react-image/src/components/Image/useImageStyles.ts

@@ -1,94 +1,78 @@
-import { makeStylesCompat, ax } from '@fluentui/react-make-styles';
+import { ax, makeStyles } from '@fluentui/react-make-styles';
 import { ImageState } from './Image.types';
 
-export const useRootStyles = makeStylesCompat<ImageState>([
-  [
-    null,
-    theme => ({
-      borderColor: theme.alias.color.neutral.neutralStroke1,
-      borderRadius: theme.global.borderRadius.none,
-      boxShadow: theme.alias.shadow.shadow4,
+const useStyles = makeStyles({
+  root: theme => ({
+    borderColor: theme.alias.color.neutral.neutralStroke1,
+    borderRadius: theme.global.borderRadius.none,
+    boxShadow: theme.alias.shadow.shadow4,
 
-      boxSizing: 'border-box',
-      display: 'inline-block',
-    }),
-  ],
-  [
-    props => props.bordered,
-    theme => ({
-      borderStyle: 'solid',
-      borderWidth: theme.global.strokeWidth.thin,
-    }),
-  ],
-  [
-    props => props.circular,
-    theme => ({
-      borderRadius: theme.global.borderRadius.circular,
-    }),
-  ],
-  [
-    props => props.rounded,
-    theme => ({
-      borderRadius: theme.global.borderRadius.medium,
-    }),
-  ],
-  [
-    props => props.fit === 'none',
-    {
-      objectFit: 'none',
-      objectPosition: 'left top',
-      height: '100%',
-      width: '100%',
+    boxSizing: 'border-box',
+    display: 'inline-block',
+  }),
+  rootBordered: theme => ({
+    borderStyle: 'solid',
+    borderWidth: theme.global.strokeWidth.thin,
+  }),
+  rootCircular: theme => ({
+    borderRadius: theme.global.borderRadius.circular,
+  }),
+  rootRounded: theme => ({
+    borderRadius: theme.global.borderRadius.medium,
+  }),
+  rootFitNone: {
+    objectFit: 'none',
+    objectPosition: 'left top',
+    height: '100%',
+    width: '100%',
 
-      // TODO IE 11
-      // font-family: 'object-fit: none; object-position: left top;',
-    },
-  ],
-  [
-    props => props.fit === 'center',
-    {
-      objectFit: 'none',
-      objectPosition: 'center',
-      height: '100%',
-      width: '100%',
+    // TODO IE 11
+    // font-family: 'object-fit: none; object-position: left top;',
+  },
+  rootFitCenter: {
+    objectFit: 'none',
+    objectPosition: 'center',
+    height: '100%',
+    width: '100%',
 
-      // TODO IE 11
-      // font-family: 'object-fit: none; object-position: center;',
-    },
-  ],
-  [
-    props => props.fit === 'cover',
-    {
-      objectFit: 'cover',
-      objectPosition: 'center',
-      height: '100%',
-      width: '100%',
+    // TODO IE 11
+    // font-family: 'object-fit: none; object-position: center;',
+  },
+  rootFitCover: {
+    objectFit: 'cover',
+    objectPosition: 'center',
+    height: '100%',
+    width: '100%',
 
-      // TODO IE 11
-      // font-family: 'object-fit: cover; object-position: center;',
-    },
-  ],
-  [
-    props => props.fit === 'contain',
-    {
-      objectFit: 'contain',
-      objectPosition: 'center',
-      height: '100%',
-      width: '100%',
+    // TODO IE 11
+    // font-family: 'object-fit: cover; object-position: center;',
+  },
+  rootFitContain: {
+    objectFit: 'contain',
+    objectPosition: 'center',
+    height: '100%',
+    width: '100%',
 
-      // TODO IE 11
-      // font-family: 'object-fit: contain; object-position: center;',
-    },
-  ],
-  [
-    props => props.fluid,
-    {
-      width: '100%',
-    },
-  ],
-]);
+    // TODO IE 11
+    // font-family: 'object-fit: contain; object-position: center;',
+  },
+  rootFluid: {
+    width: '100%',
+  },
+});
 
 export const useImageStyles = (state: ImageState) => {
-  const rootClassName = useRootStyles(state);
-  state.className = ax(rootClassName, state.className);
+  const styles = useStyles();
+  state.className = ax(
+    styles.root,
+    state.bordered && styles.rootBordered,
+    state.circular && styles.rootCircular,
+    state.rounded && styles.rootRounded,
+    state.fit === 'none' && styles.rootFitNone,
+    state.fit === 'center' && styles.rootFitCenter,
+    state.fit === 'cover' && styles.rootFitCover,
+    state.fit === 'contain' && styles.rootFitContain,
+    state.fluid && styles.rootFluid,
+    state.className,
+  );
 };