fix(react-image): update styles to not use CSS shorthands

microsoft · Nov 29, 2021 · 55567fe · 55567fe
1 parent b8537fb
commit 55567fe
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 15 deletions.
diff --git a/change/@fluentui-react-image-f564a1b4-7542-42b2-b9aa-fa0421f9be5e.json b/change/@fluentui-react-image-f564a1b4-7542-42b2-b9aa-fa0421f9be5e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "update styles to not use CSS shorthands",
+  "packageName": "@fluentui/react-image",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-image/src/components/Image/useImageStyles.ts b/packages/react-image/src/components/Image/useImageStyles.ts
@@ -1,25 +1,25 @@
-import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';
+import { shorthands, mergeClasses, makeStyles } from '@fluentui/react-make-styles';
 import type { ImageState } from './Image.types';
 
 export const imageClassName = 'fui-Image';
 
 const useStyles = makeStyles({
   root: theme => ({
-    borderColor: theme.colorNeutralStroke1,
-    borderRadius: theme.borderRadiusNone,
+    ...shorthands.borderColor(theme.colorNeutralStroke1),
+    ...shorthands.borderRadius(theme.borderRadiusNone),
 
     boxSizing: 'border-box',
     display: 'inline-block',
   }),
   rootBordered: theme => ({
-    borderStyle: 'solid',
-    borderWidth: theme.strokeWidthThin,
+    ...shorthands.borderStyle('solid'),
+    ...shorthands.borderWidth(theme.strokeWidthThin),
   }),
   rootCircular: theme => ({
-    borderRadius: theme.borderRadiusCircular,
+    ...shorthands.borderRadius(theme.borderRadiusCircular),
   }),
   rootRounded: theme => ({
-    borderRadius: theme.borderRadiusMedium,
+    ...shorthands.borderRadius(theme.borderRadiusMedium),
   }),
   rootShadow: theme => ({
     boxShadow: theme.shadow4,

diff --git a/packages/react-image/src/stories/ImageBlock.stories.tsx b/packages/react-image/src/stories/ImageBlock.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Image } from '../Image'; // codesandbox-dependency: @fluentui/react-image ^9.0.0-beta
+import { Image } from '../Image';
 
 export const Block = () => (
   <>

diff --git a/packages/react-image/src/stories/ImageBordered.stories.tsx b/packages/react-image/src/stories/ImageBordered.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Image } from '../Image'; // codesandbox-dependency: @fluentui/react-image ^9.0.0-beta
+import { Image } from '../Image';
 
 export const Bordered = () => (
   <div>

diff --git a/packages/react-image/src/stories/ImageDefault.stories.tsx b/packages/react-image/src/stories/ImageDefault.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { ImageProps } from '../Image'; // codesandbox-dependency: @fluentui/react-image ^9.0.0-beta
+import type { ImageProps } from '../Image';
 import type { ArgTypes, Parameters } from '@storybook/react';
-import { Image } from '../Image'; // codesandbox-dependency: @fluentui/react-image ^9.0.0-beta
+import { Image } from '../Image';
 
 export const Default = (props: ImageProps) => {
   return <Image {...props} />;

diff --git a/packages/react-image/src/stories/ImageFallback.stories.tsx b/packages/react-image/src/stories/ImageFallback.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Image } from '../Image'; // codesandbox-dependency: @fluentui/react-image ^9.0.0-beta
+import { Image } from '../Image';
 
 export const Fallback = () => (
   <div style={{ display: 'flex', gap: 8 }}>

diff --git a/packages/react-image/src/stories/ImageFit.stories.tsx b/packages/react-image/src/stories/ImageFit.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Image } from '../Image'; // codesandbox-dependency: @fluentui/react-image ^9.0.0-beta
+import { Image } from '../Image';
 
 export const Fit = () => (
   <>

diff --git a/packages/react-image/src/stories/ImageShadow.stories.tsx b/packages/react-image/src/stories/ImageShadow.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Image } from '../Image'; // codesandbox-dependency: @fluentui/react-image ^9.0.0-beta
+import { Image } from '../Image';
 
 export const Shadow = () => <Image shadow src="https://via.placeholder.com/300x300" />;
 Shadow.parameters = {

diff --git a/packages/react-image/src/stories/ImageShape.stories.tsx b/packages/react-image/src/stories/ImageShape.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Image } from '../Image'; // codesandbox-dependency: @fluentui/react-image ^9.0.0-beta
+import { Image } from '../Image';
 
 export const Shape = () => (
   <div style={{ display: 'flex', gap: 8 }}>