chore: migrate .shorthands() [teams-prg & xc-uxe]

layershifter · May 22, 2024 · 5f016c3 · 5f016c3
1 parent 7a2367b
commit 5f016c3
Show file tree

Hide file tree

Showing 28 changed files with 120 additions and 97 deletions.
diff --git a/change/@fluentui-react-alert-2a903a1d-66cb-41fc-b835-43febef54cfb.json b/change/@fluentui-react-alert-2a903a1d-66cb-41fc-b835-43febef54cfb.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-alert",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-message-bar-4e5e5678-23f5-4afe-bdc9-db8ce6961ee0.json b/change/@fluentui-react-message-bar-4e5e5678-23f5-4afe-bdc9-db8ce6961ee0.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-message-bar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-nav-preview-35368031-3709-4e1a-b9b7-ad2baf16672d.json b/change/@fluentui-react-nav-preview-35368031-3709-4e1a-b9b7-ad2baf16672d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-nav-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-teaching-popover-3f2cae26-cf57-492a-91c8-8f2ff6bf6b9b.json b/change/@fluentui-react-teaching-popover-3f2cae26-cf57-492a-91c8-8f2ff6bf6b9b.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-teaching-popover",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.styles.ts b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.styles.ts
@@ -17,9 +17,9 @@ const useStyles = makeStyles({
     display: 'flex',
     alignItems: 'center',
     minHeight: '44px',
-    ...shorthands.padding('0', '12px'),
-    ...shorthands.borderRadius('4px'),
-    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),
+    padding: '0 12px',
+    borderRadius: '4px',
+    border: `1px solid ${tokens.colorTransparentStroke}`,
     boxShadow: tokens.shadow8,
     fontSize: tokens.fontSizeBase300,
     fontWeight: tokens.fontWeightSemibold,
@@ -33,13 +33,11 @@ const useStyles = makeStyles({
   icon: {
     height: '16px',
     fontSize: '16px',
-    ...shorthands.padding('0', '8px', '0', '0'),
-  },
-  avatar: {
-    ...shorthands.margin('0', '8px', '0', '0'),
+    padding: '0 8px 0 0',
   },
+  avatar: { margin: '0 8px 0 0' },
   action: {
-    ...shorthands.padding('5px', '10px'),
+    padding: '5px 10px',
     minWidth: 0,
     marginLeft: 'auto',
     color: tokens.colorBrandForeground1,

diff --git a/...mponents/react-carousel-preview/src/components/CarouselNav/useCarouselNavStyles.styles.ts b/...mponents/react-carousel-preview/src/components/CarouselNav/useCarouselNavStyles.styles.ts
@@ -19,8 +19,8 @@ const useStyles = makeStyles({
     alignItems: 'center',
     justifyContent: 'center',
     ...createCustomFocusIndicatorStyle({
-      ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
-      ...shorthands.borderRadius(tokens.borderRadiusMedium),
+      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+      borderRadius: tokens.borderRadiusMedium,
       ...shorthands.borderColor('transparent'),
     }),
   },

diff --git a/...ct-carousel-preview/src/components/CarouselNavButton/useCarouselNavButtonStyles.styles.ts b/...ct-carousel-preview/src/components/CarouselNavButton/useCarouselNavButtonStyles.styles.ts
@@ -21,13 +21,13 @@ const useStyles = makeStyles({
     backgroundColor: tokens.colorBrandBackground,
   },
   rootUnselected: {
-    ...shorthands.border(0),
-    ...shorthands.borderRadius('50%'),
-    ...shorthands.padding('0px'),
-    ...shorthands.outline(tokens.strokeWidthThin, 'solid', 'transparent'), // For high contrast
+    border: 'none',
+    borderRadius: '50%',
+    padding: '0px',
+    outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast
     ...createCustomFocusIndicatorStyle({
-      ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
-      ...shorthands.borderRadius(tokens.borderRadiusMedium),
+      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+      borderRadius: tokens.borderRadiusMedium,
       ...shorthands.borderColor('transparent'),
     }),
     backgroundColor: `color-mix(in srgb, ${tokens.colorBrandBackground} 30%, transparent)`,
@@ -38,14 +38,14 @@ const useStyles = makeStyles({
     },
   },
   rootSelected: {
-    ...shorthands.outline(tokens.strokeWidthThin, 'solid', 'transparent'), // For high contrast
+    outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast
     width: '16px',
-    ...shorthands.border(0),
-    ...shorthands.borderRadius('4px'),
-    ...shorthands.padding('0px'),
+    border: 'none',
+    borderRadius: '4px',
+    padding: '0px',
     ...createCustomFocusIndicatorStyle({
-      ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
-      ...shorthands.borderRadius(tokens.borderRadiusMedium),
+      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+      borderRadius: tokens.borderRadiusMedium,
       ...shorthands.borderColor('transparent'),
     }),
   },

diff --git a/...eact-components/react-message-bar/src/components/MessageBar/useMessageBarStyles.styles.ts b/...eact-components/react-message-bar/src/components/MessageBar/useMessageBarStyles.styles.ts
@@ -58,7 +58,7 @@ const useStyles = makeStyles({
   },
 
   square: {
-    ...shorthands.borderRadius(0),
+    borderRadius: '0',
   },
 });
 

diff --git a/packages/react-components/react-message-bar/stories/MessageBar/Animation.stories.tsx b/packages/react-components/react-message-bar/stories/MessageBar/Animation.stories.tsx
@@ -11,7 +11,6 @@ import {
   Button,
   Link,
   makeStyles,
-  shorthands,
   tokens,
   Field,
   RadioGroup,
@@ -24,14 +23,15 @@ const useStyles = makeStyles({
     flexDirection: 'row',
   },
   messageBarGroup: {
-    ...shorthands.padding(tokens.spacingHorizontalMNudge),
+    padding: tokens.spacingHorizontalMNudge,
     display: 'flex',
     flexDirection: 'column',
     marginTop: '10px',
-    ...shorthands.gap('10px'),
+    gap: '10px',
+
     height: '300px',
-    ...shorthands.overflow('auto'),
-    ...shorthands.border('2px', 'solid', tokens.colorBrandForeground1),
+    overflow: 'auto',
+    border: `2px solid ${tokens.colorBrandForeground1}`,
   },
   field: {
     flexGrow: 1,
@@ -40,7 +40,7 @@ const useStyles = makeStyles({
   },
   buttonGroup: {
     display: 'flex',
-    ...shorthands.gap('5px'),
+    gap: '5px',
   },
 });
 

diff --git a/packages/react-components/react-message-bar/stories/MessageBar/Dismiss.stories.tsx b/packages/react-components/react-message-bar/stories/MessageBar/Dismiss.stories.tsx
@@ -10,25 +10,25 @@ import {
   Button,
   Link,
   makeStyles,
-  shorthands,
   tokens,
 } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   messageBarGroup: {
-    ...shorthands.padding(tokens.spacingHorizontalMNudge),
+    padding: tokens.spacingHorizontalMNudge,
     display: 'flex',
     flexDirection: 'column',
     marginTop: '10px',
-    ...shorthands.gap('10px'),
+    gap: '10px',
+
     height: '300px',
-    ...shorthands.overflow('auto'),
-    ...shorthands.border('2px', 'solid', tokens.colorBrandForeground1),
+    overflow: 'auto',
+    border: `2px solid ${tokens.colorBrandForeground1}`,
   },
   buttonGroup: {
     display: 'flex',
     justifyContent: 'end',
-    ...shorthands.gap('5px'),
+    gap: '5px',
   },
 });
 

diff --git a/packages/react-components/react-message-bar/stories/MessageBar/Intent.stories.tsx b/packages/react-components/react-message-bar/stories/MessageBar/Intent.stories.tsx
@@ -6,14 +6,13 @@ import {
   MessageBarIntent,
   Link,
   makeStyles,
-  shorthands,
 } from '@fluentui/react-components';
 
 const useClasses = makeStyles({
   container: {
     display: 'flex',
     flexDirection: 'column',
-    ...shorthands.gap('10px'),
+    gap: '10px',
   },
 });
 const intents: MessageBarIntent[] = ['info', 'warning', 'error', 'success'];

diff --git a/packages/react-components/react-message-bar/stories/MessageBar/Reflow.stories.tsx b/packages/react-components/react-message-bar/stories/MessageBar/Reflow.stories.tsx
@@ -3,7 +3,6 @@ import {
   Button,
   Link,
   makeStyles,
-  shorthands,
   tokens,
   Switch,
   mergeClasses,
@@ -21,15 +20,16 @@ const useStyles = makeStyles({
   resizableArea: {
     display: 'flex',
     flexDirection: 'column',
-    ...shorthands.padding('30px', '10px'),
-    ...shorthands.gap('10px'),
-    ...shorthands.border('2px', 'solid', tokens.colorBrandBackground),
+    padding: '30px 10px',
+    gap: '10px',
+    border: `2px solid ${tokens.colorBrandBackground}`,
     position: 'relative',
-    ...shorthands.overflow('hidden'),
+    overflow: 'hidden',
+
     '::after': {
       content: `'Resizable Area'`,
       position: 'absolute',
-      ...shorthands.padding('1px', '4px', '1px'),
+      padding: '1px 4px 1px',
       top: '-2px',
       left: '-2px',
       fontFamily: 'monospace',

diff --git a/packages/react-components/react-message-bar/stories/MessageBar/Shape.stories.tsx b/packages/react-components/react-message-bar/stories/MessageBar/Shape.stories.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { makeStyles, shorthands, MessageBar, MessageBarTitle, MessageBarBody } from '@fluentui/react-components';
+import { makeStyles, MessageBar, MessageBarTitle, MessageBarBody } from '@fluentui/react-components';
 
 const useClasses = makeStyles({
   container: {
     display: 'flex',
     flexDirection: 'column',
-    ...shorthands.gap('10px'),
+    gap: '10px',
   },
 });
 

diff --git a/...omponents/react-nav-preview/src/components/NavDrawerBody/useNavDrawerBodyStyles.styles.ts b/...omponents/react-nav-preview/src/components/NavDrawerBody/useNavDrawerBodyStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { useDrawerBodyStyles_unstable } from '@fluentui/react-drawer';
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -13,7 +13,7 @@ export const navDrawerBodyClassNames: SlotClassNames<NavDrawerBodySlots> = {
  */
 const useStyles = makeStyles({
   root: {
-    ...shorthands.padding(0, tokens.spacingVerticalMNudge),
+    padding: `0 ${tokens.spacingVerticalMNudge}`,
     alignItems: 'unset',
   },
 });

diff --git a/...nents/react-nav-preview/src/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.ts b/...nents/react-nav-preview/src/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { useDrawerFooterStyles_unstable } from '@fluentui/react-drawer';
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -14,7 +14,7 @@ export const navDrawerFooterClassNames: SlotClassNames<NavDrawerFooterSlots> = {
 const useStyles = makeStyles({
   root: {
     display: 'unset',
-    ...shorthands.padding(0, tokens.spacingVerticalMNudge),
+    padding: `0 ${tokens.spacingVerticalMNudge}`,
   },
 });
 

diff --git a/...nents/react-nav-preview/src/components/NavDrawerHeader/useNavDrawerHeaderStyles.styles.ts b/...nents/react-nav-preview/src/components/NavDrawerHeader/useNavDrawerHeaderStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { useDrawerHeaderStyles_unstable } from '@fluentui/react-drawer';
 
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -13,7 +13,7 @@ export const navDrawerHeaderClassNames: SlotClassNames<NavDrawerHeaderSlots> = {
  */
 const useStyles = makeStyles({
   root: {
-    ...shorthands.margin('unset'),
+    margin: 'unset',
     paddingInlineStart: '12px',
     paddingBlockStart: '10px',
     paddingBlockEnd: '0px',

diff --git a/...react-nav-preview/src/components/NavDrawerHeaderNav/useNavDrawerHeaderNavStyles.styles.ts b/...react-nav-preview/src/components/NavDrawerHeaderNav/useNavDrawerHeaderNavStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { useDrawerHeaderNavigationStyles_unstable } from '@fluentui/react-drawer';
 
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -13,7 +13,7 @@ export const navDrawerHeaderNavClassNames: SlotClassNames<NavDrawerHeaderNavSlot
  */
 const useStyles = makeStyles({
   root: {
-    ...shorthands.margin('unset'),
+    margin: 'unset',
     paddingInlineStart: '0px',
     paddingBlockStart: '0px',
   },

diff --git a/packages/react-components/react-nav-preview/src/components/sharedNavStyles.styles.ts b/packages/react-components/react-nav-preview/src/components/sharedNavStyles.styles.ts
@@ -1,6 +1,6 @@
 import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { makeResetStyles, makeStyles, shorthands } from '@griffel/react';
+import { makeResetStyles, makeStyles } from '@griffel/react';
 
 // Styles shared by several nav components.
 
@@ -62,7 +62,7 @@ export const useIndicatorStyles = makeStyles({
       backgroundColor: tokens.colorNeutralForeground2BrandSelected,
       height: `${navItemTokens.indicatorHeight}px`,
       width: `${navItemTokens.indicatorWidth}px`,
-      ...shorthands.borderRadius(tokens.borderRadiusCircular),
+      borderRadius: tokens.borderRadiusCircular,
       content: '""',
     },
   },
@@ -79,7 +79,7 @@ export const useIconStyles = makeStyles({
     alignItems: 'top',
     display: 'inline-flex',
     justifyContent: 'center',
-    ...shorthands.overflow('hidden'),
+    overflow: 'hidden',
     [`& .${iconFilledClassName}`]: {
       display: 'none',
     },

diff --git a/packages/react-components/react-nav-preview/stories/NavDrawer/NavDrawerDefault.stories.tsx b/packages/react-components/react-nav-preview/stories/NavDrawer/NavDrawerDefault.stories.tsx
@@ -19,7 +19,6 @@ import {
   Radio,
   RadioGroup,
   makeStyles,
-  shorthands,
   tokens,
   useId,
 } from '@fluentui/react-components';
@@ -60,16 +59,15 @@ import type { DrawerProps } from '@fluentui/react-drawer';
 
 const useStyles = makeStyles({
   root: {
-    ...shorthands.border('2px', 'solid', '#ccc'),
-    ...shorthands.overflow('hidden'),
+    border: '2px solid #ccc',
+    overflow: 'hidden',
     display: 'flex',
     height: '600px',
     backgroundColor: '#fff',
   },
   content: {
-    ...shorthands.flex(1),
-    ...shorthands.padding('16px'),
-
+    flex: '1',
+    padding: '16px',
     display: 'grid',
     justifyContent: 'flex-start',
     alignItems: 'flex-start',

diff --git a/packages/react-components/react-nav-preview/stories/NavItem/NavItemDefault.stories.tsx b/packages/react-components/react-nav-preview/stories/NavItem/NavItemDefault.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Nav, NavItem, NavItemProps } from '@fluentui/react-nav-preview';
 import { Folder20Regular, Folder20Filled, bundleIcon } from '@fluentui/react-icons';
-import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
+import { makeStyles, tokens } from '@fluentui/react-components';
 
 const Folder = bundleIcon(Folder20Filled, Folder20Regular);
 
@@ -11,7 +11,7 @@ const useStyles = makeStyles({
     flexDirection: 'column',
     maxWidth: '260px',
     rowGap: '60px',
-    ...shorthands.padding('40px'),
+    padding: '40px',
     backgroundColor: tokens.colorNeutralBackground4,
   },
 });
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,7 +58,7 @@ const useStyles = makeStyles({ @@
       },
       square: {
-        ...shorthands.borderRadius(0),
+        borderRadius: '0',
       },
     });
@@ Expand Down @@