From 308cd9f27cf3736be65b174eb1a4bd2ccb623901 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Mon, 8 Nov 2021 12:17:42 +0100
Subject: [PATCH] chore(perf-test,vr-tests): update styles to not use CSS
 shorthands

---
 apps/perf-test/src/scenarios/MakeStyles.tsx   | 10 +++----
 apps/vr-tests/src/stories/Badge.stories.tsx   |  6 ++---
 .../src/stories/MakeStyles.stories.tsx        | 26 +++++++++----------
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/apps/perf-test/src/scenarios/MakeStyles.tsx b/apps/perf-test/src/scenarios/MakeStyles.tsx
index 3fad25a6bb7ba7..64cde720eaa772 100644
--- a/apps/perf-test/src/scenarios/MakeStyles.tsx
+++ b/apps/perf-test/src/scenarios/MakeStyles.tsx
@@ -6,20 +6,20 @@ const renderer = createDOMRenderer(document);
 const useStyles = makeStyles({
   view: {
     alignItems: 'stretch',
-    borderWidth: 0,
-    borderStyle: 'solid',
+    borderLeftWidth: 0,
+    borderLeftStyle: 'solid',
     boxSizing: 'border-box',
     display: 'flex',
     flexBasis: 'auto',
     flexDirection: 'column',
     flexShrink: 0,
-    margin: 0,
-    padding: 0,
+    marginLeft: 0,
+    paddingLeft: 0,
     position: 'relative',
     minHeight: 0,
     minWidth: 0,
   },
-  boxOuter: { alignSelf: 'flex-start', padding: '4px' },
+  boxOuter: { alignSelf: 'flex-start', paddingLeft: '4px' },
   boxRow: { flexDirection: 'row' },
   boxColor0: { backgroundColor: '#14171A' },
   boxColor1: { backgroundColor: '#AAB8C2' },
diff --git a/apps/vr-tests/src/stories/Badge.stories.tsx b/apps/vr-tests/src/stories/Badge.stories.tsx
index fd0d08ce361bbf..bef7290572150c 100644
--- a/apps/vr-tests/src/stories/Badge.stories.tsx
+++ b/apps/vr-tests/src/stories/Badge.stories.tsx
@@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import { Badge, BadgeCommons } from '@fluentui/react-badge';
 import { Circle12Regular } from '@fluentui/react-icons';
-import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';
+import { mergeClasses, makeStyles, shorthands } from '@fluentui/react-make-styles';
 
 const badgeColors: BadgeCommons['color'][] = [
   'brand',
@@ -26,8 +26,8 @@ const useStyles = makeStyles({
   badgeContainer: {
     display: 'flex',
     alignItems: 'center',
-    gap: '5px',
-    padding: '5px',
+    ...shorthands.gap('5px'),
+    ...shorthands.padding('5px'),
   },
 
   label: {
diff --git a/apps/vr-tests/src/stories/MakeStyles.stories.tsx b/apps/vr-tests/src/stories/MakeStyles.stories.tsx
index a1f5b3d26b2e06..57d691ec424e6b 100644
--- a/apps/vr-tests/src/stories/MakeStyles.stories.tsx
+++ b/apps/vr-tests/src/stories/MakeStyles.stories.tsx
@@ -1,4 +1,4 @@
-import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';
+import { shorthands, mergeClasses, makeStyles } from '@fluentui/react-make-styles';
 import { FluentProvider } from '@fluentui/react-provider';
 import { webLightTheme } from '@fluentui/react-theme';
 import { storiesOf } from '@storybook/react';
@@ -7,23 +7,23 @@ import Screener, { Steps } from 'screener-storybook/src/screener';
 
 const useStyles = makeStyles({
   box: theme => ({
-    border: `5px solid ${theme.colorNeutralStroke1}`,
-    borderLeft: `20px solid ${theme.colorPaletteBlueBorder2}`,
+    ...shorthands.border('5px', 'solid', theme.colorNeutralStroke1),
+    ...shorthands.borderLeft('20px', 'solid', theme.colorPaletteBlueBorder2),
 
     backgroundColor: theme.colorNeutralBackground1,
     color: theme.colorNeutralForeground1,
 
-    margin: '5px',
-    padding: '5px',
+    ...shorthands.margin('5px'),
+    ...shorthands.padding('5px'),
     paddingLeft: '50px',
   }),
 
   container: theme => ({
-    border: `5px solid ${theme.colorNeutralStroke1}`,
-    borderLeft: `20px solid ${theme.colorPaletteBlueBorder2}`,
+    ...shorthands.border('5px', 'solid', theme.colorNeutralStroke1),
+    ...shorthands.borderLeft('20px', 'solid', theme.colorPaletteBlueBorder2),
 
-    margin: '5px',
-    padding: '5px',
+    ...shorthands.margin('5px'),
+    ...shorthands.padding('5px'),
   }),
   containerPrimary: theme => ({
     borderLeftColor: theme.colorPaletteDarkOrangeBorder2,
@@ -36,8 +36,8 @@ const useStyles = makeStyles({
 
 const useFocusStylesA = makeStyles({
   root: {
-    border: '3px solid blue',
-    padding: '10px',
+    ...shorthands.border('3px', 'solid', 'blue'),
+    ...shorthands.padding('10px'),
 
     ':focus': {
       color: 'red',
@@ -49,8 +49,8 @@ const useFocusStylesA = makeStyles({
 });
 const useFocusStylesB = makeStyles({
   root: {
-    border: '3px solid orange',
-    padding: '10px',
+    ...shorthands.border('3px', 'solid', 'orange'),
+    ...shorthands.padding('10px'),
 
     ':hover': {
       color: 'orange',