chore: migrate .shorthands() [cxe-red] (microsoft#31449)

Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>
miroslavstastny · Jun 14, 2024 · 9455bcc · 9455bcc
1 parent 07bcec2
commit 9455bcc
Show file tree

Hide file tree

Showing 111 changed files with 496 additions and 441 deletions.
diff --git a/change/@fluentui-react-accordion-66284eca-4787-42d3-8ddd-f9c06314f892.json b/change/@fluentui-react-accordion-66284eca-4787-42d3-8ddd-f9c06314f892.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-accordion",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-avatar-1d17f01f-ebbb-4e58-aba4-8f171e89f79e.json b/change/@fluentui-react-avatar-1d17f01f-ebbb-4e58-aba4-8f171e89f79e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-avatar",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-badge-168d3cf0-e620-43b2-9cbe-6bb0794c055a.json b/change/@fluentui-react-badge-168d3cf0-e620-43b2-9cbe-6bb0794c055a.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-badge",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-button-e62d7797-16ec-4e08-b1f9-aa860819263a.json b/change/@fluentui-react-button-e62d7797-16ec-4e08-b1f9-aa860819263a.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate .shorthands() [cxe-red]",
+  "packageName": "@fluentui/react-button",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-calendar-compat-06d327f1-e470-4e24-b14b-336b607e19c5.json b/change/@fluentui-react-calendar-compat-06d327f1-e470-4e24-b14b-336b607e19c5.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-calendar-compat",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-checkbox-52f9e436-bec9-4d82-81b0-a64429452ad7.json b/change/@fluentui-react-checkbox-52f9e436-bec9-4d82-81b0-a64429452ad7.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-checkbox",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-infolabel-412420b5-1a20-43b8-9615-987dbce7dcf9.json b/change/@fluentui-react-infolabel-412420b5-1a20-43b8-9615-987dbce7dcf9.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-infolabel",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-input-ac34f3b1-9b3f-4d13-9686-c8c0053e653e.json b/change/@fluentui-react-input-ac34f3b1-9b3f-4d13-9686-c8c0053e653e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-input",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-link-52531033-f1e9-4639-a12f-29fe52a54772.json b/change/@fluentui-react-link-52531033-f1e9-4639-a12f-29fe52a54772.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-link",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-progress-cb51a44d-e953-4555-97b8-332646ec1f1f.json b/change/@fluentui-react-progress-cb51a44d-e953-4555-97b8-332646ec1f1f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-progress",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-radio-47764f53-211d-4785-a177-1cab7e74ce6a.json b/change/@fluentui-react-radio-47764f53-211d-4785-a177-1cab7e74ce6a.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-radio",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-rating-e450bc29-5da7-469b-895f-2b88d55d8002.json b/change/@fluentui-react-rating-e450bc29-5da7-469b-895f-2b88d55d8002.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-rating",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-select-248458a0-8fde-4582-9eda-5d1d8f48ca63.json b/change/@fluentui-react-select-248458a0-8fde-4582-9eda-5d1d8f48ca63.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-select",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-skeleton-b1ca7fb8-fa01-43ff-a594-c9ccaad8c3ca.json b/change/@fluentui-react-skeleton-b1ca7fb8-fa01-43ff-a594-c9ccaad8c3ca.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-skeleton",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-slider-c4ceaf2d-e534-45f5-a61e-2bc4dca28a40.json b/change/@fluentui-react-slider-c4ceaf2d-e534-45f5-a61e-2bc4dca28a40.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-slider",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-spinbutton-a5d848f8-f1c5-4aee-8cdd-576971cbff01.json b/change/@fluentui-react-spinbutton-a5d848f8-f1c5-4aee-8cdd-576971cbff01.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-spinbutton",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-switch-5ca06704-8e12-4e0d-9b1c-d54dd9b0f733.json b/change/@fluentui-react-switch-5ca06704-8e12-4e0d-9b1c-d54dd9b0f733.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-switch",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tabs-42ce0514-3574-4c9f-b03a-1a737b90e198.json b/change/@fluentui-react-tabs-42ce0514-3574-4c9f-b03a-1a737b90e198.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-tabs",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-textarea-9952d38b-d4f7-4fe7-8701-ba085bcec3a8.json b/change/@fluentui-react-textarea-9952d38b-d4f7-4fe7-8701-ba085bcec3a8.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-textarea",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tooltip-25b5e493-75d0-45da-8686-159b88c0b058.json b/change/@fluentui-react-tooltip-25b5e493-75d0-45da-8686-159b88c0b058.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/...ponents/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts b/...ponents/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts
@@ -20,17 +20,17 @@ const useStyles = makeStyles({
     fontFamily: 'inherit',
     fontSize: 'inherit',
     lineHeight: 'normal',
-    ...shorthands.overflow('visible'),
-    ...shorthands.padding(0),
+    overflow: 'visible',
+    padding: '0',
     WebkitAppearance: 'button',
     textAlign: 'unset',
   },
   focusIndicator: createFocusOutlineStyle(),
   root: {
     color: tokens.colorNeutralForeground1,
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.margin(0),
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    margin: '0',
+    borderRadius: tokens.borderRadiusMedium,
   },
   rootDisabled: {
     backgroundImage: 'none',
@@ -43,7 +43,7 @@ const useStyles = makeStyles({
     position: 'relative',
     width: '100%',
     ...shorthands.borderWidth('0'),
-    ...shorthands.padding(0, tokens.spacingHorizontalM, 0, tokens.spacingHorizontalMNudge),
+    padding: `0 ${tokens.spacingHorizontalM} 0 ${tokens.spacingHorizontalMNudge}`,
     minHeight: '44px',
     display: 'flex',
     alignItems: 'center',

diff --git a/...omponents/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.styles.ts b/...omponents/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.styles.ts
@@ -1,5 +1,5 @@
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 
 import type { AccordionPanelSlots, AccordionPanelState } from './AccordionPanel.types';
@@ -13,7 +13,7 @@ export const accordionPanelClassNames: SlotClassNames<AccordionPanelSlots> = {
  */
 const useStyles = makeStyles({
   root: {
-    ...shorthands.margin(0, tokens.spacingHorizontalM),
+    margin: `0 ${tokens.spacingHorizontalM}`,
   },
 });
 

diff --git a/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.styles.ts b/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.styles.ts
@@ -1,6 +1,6 @@
 import { tokens } from '@fluentui/react-theme';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import type { AvatarSlots, AvatarState } from './Avatar.types';
 
 export const avatarClassNames: SlotClassNames<AvatarSlots> = {
@@ -114,18 +114,10 @@ const useStyles = makeStyles({
   textSubtitle1: { fontSize: tokens.fontSizeBase500 },
   textTitle3: { fontSize: tokens.fontSizeBase600 },
 
-  squareSmall: {
-    ...shorthands.borderRadius(tokens.borderRadiusSmall),
-  },
-  squareMedium: {
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
-  },
-  squareLarge: {
-    ...shorthands.borderRadius(tokens.borderRadiusLarge),
-  },
-  squareXLarge: {
-    ...shorthands.borderRadius(tokens.borderRadiusXLarge),
-  },
+  squareSmall: { borderRadius: tokens.borderRadiusSmall },
+  squareMedium: { borderRadius: tokens.borderRadiusMedium },
+  squareLarge: { borderRadius: tokens.borderRadiusLarge },
+  squareXLarge: { borderRadius: tokens.borderRadiusXLarge },
 
   activeOrInactive: {
     transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation
@@ -178,7 +170,7 @@ const useStyles = makeStyles({
     transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`,
 
     '::before,::after': {
-      ...shorthands.margin(0),
+      margin: 0,
       opacity: 0,
       transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`,
     },

diff --git a/...components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.ts b/...components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { useSizeStyles } from '../../Avatar';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
@@ -25,12 +25,8 @@ const useRootStyles = makeStyles({
     flexShrink: 0,
     position: 'relative',
   },
-  overflowItem: {
-    ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),
-  },
-  nonOverflowItem: {
-    ...shorthands.borderRadius(tokens.borderRadiusCircular),
-  },
+  overflowItem: { padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}` },
+  nonOverflowItem: { borderRadius: tokens.borderRadiusCircular },
 });
 
 /**
@@ -40,9 +36,7 @@ const useAvatarStyles = makeStyles({
   nonOverflowItem: {
     position: 'absolute',
   },
-  pie: {
-    ...shorthands.borderRadius(0),
-  },
+  pie: { borderRadius: '0' },
 });
 
 /**

diff --git a/...ents/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts b/...ents/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts
@@ -20,8 +20,8 @@ export const avatarGroupPopoverClassNames: SlotClassNames<AvatarGroupPopoverSlot
 const useContentStyles = makeStyles({
   base: {
     listStyleType: 'none',
-    ...shorthands.margin('0'),
-    ...shorthands.padding('0'),
+    margin: '0',
+    padding: '0',
     display: 'flex',
     flexDirection: 'column',
   },
@@ -34,8 +34,8 @@ const usePopoverSurfaceStyles = makeStyles({
   base: {
     maxHeight: '220px',
     minHeight: '80px',
-    ...shorthands.overflow('hidden', 'scroll'),
-    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),
+    overflow: 'hidden scroll',
+    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,
     width: '220px',
   },
 });
@@ -53,9 +53,9 @@ const useTriggerButtonStyles = makeStyles({
     color: tokens.colorNeutralForeground1,
     backgroundColor: tokens.colorNeutralBackground1,
     ...shorthands.borderColor(tokens.colorNeutralStroke1),
-    ...shorthands.borderRadius(tokens.borderRadiusCircular),
+    borderRadius: tokens.borderRadiusCircular,
     ...shorthands.borderStyle('solid'),
-    ...shorthands.padding(0),
+    padding: '0',
 
     // Match color to Avatar's outline color.
     '@media (forced-colors: active)': {
@@ -70,7 +70,7 @@ const useTriggerButtonStyles = makeStyles({
   },
 
   focusIndicator: createCustomFocusIndicatorStyle({
-    ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
+    border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
     outlineStyle: 'none',
   }),
 

diff --git a/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.styles.ts b/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.styles.ts
@@ -54,50 +54,43 @@ const useRootStyles = makeStyles({
     fontSize: '4px',
     lineHeight: '4px',
     minWidth: 'unset',
-    ...shorthands.padding('unset'),
+    padding: 'unset',
   },
   'extra-small': {
     width: '10px',
     height: '10px',
     fontSize: '6px',
     lineHeight: '6px',
     minWidth: 'unset',
-    ...shorthands.padding('unset'),
+    padding: 'unset',
   },
   small: {
     width: '16px',
     height: '16px',
-    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`),
+    padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,
   },
   medium: {
     // Set by useRootClassName
   },
   large: {
     width: '24px',
     height: '24px',
-    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),
+    padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,
   },
   'extra-large': {
     width: '32px',
     height: '32px',
-    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`),
+    padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`,
   },
 
   // shape
 
-  square: {
-    ...shorthands.borderRadius(tokens.borderRadiusNone),
-  },
-  rounded: {
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
-  },
-  roundedSmallToTiny: {
-    ...shorthands.borderRadius(tokens.borderRadiusSmall),
-  },
+  square: { borderRadius: tokens.borderRadiusNone },
+  rounded: { borderRadius: tokens.borderRadiusMedium },
+  roundedSmallToTiny: { borderRadius: tokens.borderRadiusSmall },
   circular: {
     // Set by useRootClassName
   },
-
   // hide the boder when appearance is "ghost"
 
   borderGhost: {

diff --git a/.../react-components/react-badge/src/components/CounterBadge/useCounterBadgeStyles.styles.ts b/.../react-components/react-badge/src/components/CounterBadge/useCounterBadgeStyles.styles.ts
@@ -1,4 +1,4 @@
-import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
+import { mergeClasses, makeStyles } from '@griffel/react';
 import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { BadgeSlots } from '../Badge/Badge.types';
@@ -14,7 +14,7 @@ const useStyles = makeStyles({
     minWidth: 'auto',
     width: '6px',
     height: '6px',
-    ...shorthands.padding('0'),
+    padding: '0',
   },
   hide: {
     display: 'none',