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

microsoft · May 22, 2024 · d00c916 · d00c916
1 parent 5e68a1a
commit d00c916
Show file tree

Hide file tree

Showing 156 changed files with 810 additions and 1,024 deletions.
diff --git a/change/@fluentui-react-combobox-4a7ed138-43ff-437b-9c1e-24fa4586982a.json b/change/@fluentui-react-combobox-4a7ed138-43ff-437b-9c1e-24fa4586982a.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-combobox",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-list-preview-78f6bd00-6db0-4045-bc63-4cb7afd6ec17.json b/change/@fluentui-react-list-preview-78f6bd00-6db0-4045-bc63-4cb7afd6ec17.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-list-preview",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-menu-25369f67-e2b8-4c87-9ae3-08b261b62198.json b/change/@fluentui-react-menu-25369f67-e2b8-4c87-9ae3-08b261b62198.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-menu",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-migration-v0-v9-c4288bb7-698d-46b1-8f23-13d448adb6aa.json b/change/@fluentui-react-migration-v0-v9-c4288bb7-698d-46b1-8f23-13d448adb6aa.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-migration-v0-v9",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-popover-c27a0266-e35a-4977-8506-cbb761ad2d2c.json b/change/@fluentui-react-popover-c27a0266-e35a-4977-8506-cbb761ad2d2c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-popover",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-positioning-8110750c-6f4f-4244-a31d-1e860a7dfd38.json b/change/@fluentui-react-positioning-8110750c-6f4f-4244-a31d-1e860a7dfd38.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-positioning",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-table-bc710dce-491d-47ec-9846-0f64ec8de1da.json b/change/@fluentui-react-table-bc710dce-491d-47ec-9846-0f64ec8de1da.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-table",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tabster-52de6886-68f2-4c0a-84ce-9bebf2975c1a.json b/change/@fluentui-react-tabster-52de6886-68f2-4c0a-84ce-9bebf2975c1a.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-tabster",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tag-picker-369b83a7-918d-4bec-9e56-f393e79f5a02.json b/change/@fluentui-react-tag-picker-369b83a7-918d-4bec-9e56-f393e79f5a02.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-tag-picker",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tags-2d9f08dd-e5d2-4a8f-9e37-1cb07a41a788.json b/change/@fluentui-react-tags-2d9f08dd-e5d2-4a8f-9e37-1cb07a41a788.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-tags",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-toast-0d9f3a3e-ae4a-47de-8d1b-296d29eee6eb.json b/change/@fluentui-react-toast-0d9f3a3e-ae4a-47de-8d1b-296d29eee6eb.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-toast",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-toolbar-24f067de-1c8c-4dfd-b26f-1948b3e11469.json b/change/@fluentui-react-toolbar-24f067de-1c8c-4dfd-b26f-1948b3e11469.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-toolbar",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tree-00c134d2-8ff6-4c54-8cc1-eba037f04fb2.json b/change/@fluentui-react-tree-00c134d2-8ff6-4c54-8cc1-eba037f04fb2.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace usage of .shorthands() in styles",
+  "packageName": "@fluentui/react-tree",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/...eact-components/react-aria/stories/AriaLiveAnnouncer/AriaLiveAnnouncerDefault.stories.tsx b/...eact-components/react-aria/stories/AriaLiveAnnouncer/AriaLiveAnnouncerDefault.stories.tsx
@@ -1,24 +1,14 @@
 import * as React from 'react';
-import {
-  AriaLiveAnnouncer,
-  Button,
-  Field,
-  Input,
-  makeStyles,
-  shorthands,
-  tokens,
-  useAnnounce,
-} from '@fluentui/react-components';
+import { AriaLiveAnnouncer, Button, Field, Input, makeStyles, tokens, useAnnounce } from '@fluentui/react-components';
 
 const useClasses = makeStyles({
   container: {
     display: 'flex',
     flexDirection: 'column',
-    ...shorthands.gap('8px'),
-    ...shorthands.padding('8px'),
-
-    ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),
-    ...shorthands.borderRadius('4px'),
+    gap: '8px',
+    padding: '8px',
+    border: `1px solid ${tokens.colorNeutralStroke1}`,
+    borderRadius: '4px',
   },
 });
 

diff --git a/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.styles.ts b/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.styles.ts
@@ -25,7 +25,7 @@ const fieldHeights = {
 const useStyles = makeStyles({
   root: {
     alignItems: 'center',
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    borderRadius: tokens.borderRadiusMedium,
     boxSizing: 'border-box',
     columnGap: tokens.spacingHorizontalXXS,
     display: 'inline-grid',
@@ -52,7 +52,7 @@ const useStyles = makeStyles({
       height: `max(2px, ${tokens.borderRadiusMedium})`,
       borderBottomLeftRadius: tokens.borderRadiusMedium,
       borderBottomRightRadius: tokens.borderRadiusMedium,
-      ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),
+      borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,
       clipPath: 'inset(calc(100% - 2px) 0 0 0)',
       transform: 'scaleX(0)',
       transitionProperty: 'transform',
@@ -82,7 +82,7 @@ const useStyles = makeStyles({
 
   listbox: {
     boxShadow: `${tokens.shadow16}`,
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    borderRadius: tokens.borderRadiusMedium,
     maxHeight: '80vh',
     boxSizing: 'border-box',
   },
@@ -115,7 +115,7 @@ const useStyles = makeStyles({
   // appearance variants
   outline: {
     backgroundColor: tokens.colorNeutralBackground1,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
     borderBottomColor: tokens.colorNeutralStrokeAccessible,
   },
 
@@ -132,16 +132,16 @@ const useStyles = makeStyles({
   },
   underline: {
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),
-    ...shorthands.borderRadius(0),
+    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,
+    borderRadius: '0',
   },
   'filled-lighter': {
     backgroundColor: tokens.colorNeutralBackground1,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
   },
   'filled-darker': {
     backgroundColor: tokens.colorNeutralBackground3,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
   },
   invalid: {
     ':not(:focus-within),:hover:not(:focus-within)': {
@@ -168,7 +168,7 @@ const useInputStyles = makeStyles({
   input: {
     alignSelf: 'stretch',
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.border('0'),
+    border: 'none',
     color: tokens.colorNeutralForeground1,
     fontFamily: tokens.fontFamilyBase,
 
@@ -185,15 +185,15 @@ const useInputStyles = makeStyles({
   // size variants
   small: {
     ...typographyStyles.caption1,
-    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`),
+    padding: `0 0 0 ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,
   },
   medium: {
     ...typographyStyles.body1,
-    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`),
+    padding: `0 0 0 ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,
   },
   large: {
     ...typographyStyles.body2,
-    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`),
+    padding: `0 0 0 ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`,
   },
   disabled: {
     color: tokens.colorNeutralForegroundDisabled,
@@ -225,9 +225,9 @@ const useIconStyles = makeStyles({
   visuallyHidden: {
     clip: 'rect(0px, 0px, 0px, 0px)',
     height: '1px',
-    ...shorthands.margin('-1px'),
-    ...shorthands.overflow('hidden'),
-    ...shorthands.padding('0px'),
+    margin: '-1px',
+    overflow: 'hidden',
+    padding: '0px',
     width: '1px',
     position: 'absolute',
   },

diff --git a/packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.styles.ts b/packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.styles.ts
@@ -18,7 +18,7 @@ export const dropdownClassNames: SlotClassNames<DropdownSlots> = {
  */
 const useStyles = makeStyles({
   root: {
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    borderRadius: tokens.borderRadiusMedium,
     boxSizing: 'border-box',
     display: 'inline-flex',
     minWidth: '250px',
@@ -42,7 +42,7 @@ const useStyles = makeStyles({
       height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,
       borderBottomLeftRadius: tokens.borderRadiusMedium,
       borderBottomRightRadius: tokens.borderRadiusMedium,
-      ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),
+      borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,
       clipPath: 'inset(calc(100% - 2px) 0 0 0)',
       transform: 'scaleX(0)',
       transitionProperty: 'transform',
@@ -80,7 +80,7 @@ const useStyles = makeStyles({
   listbox: {
     boxSizing: 'border-box',
     boxShadow: `${tokens.shadow16}`,
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    borderRadius: tokens.borderRadiusMedium,
     maxHeight: '80vh',
   },
 
@@ -97,7 +97,7 @@ const useStyles = makeStyles({
   button: {
     alignItems: 'center',
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.border('0'),
+    border: 'none',
     boxSizing: 'border-box',
     color: tokens.colorNeutralForeground1,
     columnGap: tokens.spacingHorizontalXXS,
@@ -121,37 +121,28 @@ const useStyles = makeStyles({
   // size variants
   small: {
     ...typographyStyles.caption1,
-    ...shorthands.padding(
-      '3px',
-      tokens.spacingHorizontalSNudge,
-      '3px',
-      `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,
-    ),
+    padding: `3px ${
+      tokens.spacingHorizontalSNudge
+    } 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,
   },
   medium: {
     ...typographyStyles.body1,
-    ...shorthands.padding(
-      '5px',
-      tokens.spacingHorizontalMNudge,
-      '5px',
-      `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,
-    ),
+    padding: `5px ${
+      tokens.spacingHorizontalMNudge
+    } 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,
   },
   large: {
     columnGap: tokens.spacingHorizontalSNudge,
     ...typographyStyles.body2,
-    ...shorthands.padding(
-      '7px',
-      tokens.spacingHorizontalM,
-      '7px',
-      `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,
-    ),
+    padding: `7px ${
+      tokens.spacingHorizontalM
+    } 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`,
   },
 
   // appearance variants
   outline: {
     backgroundColor: tokens.colorNeutralBackground1,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
     borderBottomColor: tokens.colorNeutralStrokeAccessible,
   },
   outlineInteractive: {
@@ -167,16 +158,16 @@ const useStyles = makeStyles({
   },
   underline: {
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),
-    ...shorthands.borderRadius(0),
+    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,
+    borderRadius: '0',
   },
   'filled-lighter': {
     backgroundColor: tokens.colorNeutralBackground1,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),
+    border: `${tokens.strokeWidthThin} solid transparent`,
   },
   'filled-darker': {
     backgroundColor: tokens.colorNeutralBackground3,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),
+    border: `${tokens.strokeWidthThin} solid transparent`,
   },
   invalid: {
     ':not(:focus-within),:hover:not(:focus-within)': {

diff --git a/packages/react-components/react-combobox/src/components/Listbox/useListboxStyles.styles.ts b/packages/react-components/react-combobox/src/components/Listbox/useListboxStyles.styles.ts
@@ -1,6 +1,6 @@
 import { tokens } from '@fluentui/react-theme';
 import { SlotClassNames } from '@fluentui/react-utilities';
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import type { ListboxSlots, ListboxState } from './Listbox.types';
 
 export const listboxClassNames: SlotClassNames<ListboxSlots> = {
@@ -18,8 +18,8 @@ const useStyles = makeStyles({
     flexDirection: 'column',
     minWidth: '160px',
     overflowY: 'auto',
-    ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),
-    ...shorthands.padding(tokens.spacingHorizontalXS),
+    outline: `1px solid ${tokens.colorTransparentStroke}`,
+    padding: tokens.spacingHorizontalXS,
     rowGap: tokens.spacingHorizontalXXS,
   },
 });

diff --git a/packages/react-components/react-combobox/src/components/Option/useOptionStyles.styles.ts b/packages/react-components/react-combobox/src/components/Option/useOptionStyles.styles.ts
@@ -15,15 +15,15 @@ export const optionClassNames: SlotClassNames<OptionSlots> = {
 const useStyles = makeStyles({
   root: {
     alignItems: 'center',
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    borderRadius: tokens.borderRadiusMedium,
     color: tokens.colorNeutralForeground1,
     columnGap: tokens.spacingHorizontalXS,
     cursor: 'pointer',
     display: 'flex',
     fontFamily: tokens.fontFamilyBase,
     fontSize: tokens.fontSizeBase300,
     lineHeight: tokens.lineHeightBase300,
-    ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalS),
+    padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,
     position: 'relative',
 
     ':hover': {
@@ -46,10 +46,8 @@ const useStyles = makeStyles({
       pointerEvents: 'none',
       zIndex: 1,
 
-      ...shorthands.borderStyle('solid'),
-      ...shorthands.borderWidth('2px'),
-      ...shorthands.borderRadius(tokens.borderRadiusMedium),
-      ...shorthands.borderColor(tokens.colorStrokeFocus2),
+      border: `2px solid ${tokens.colorStrokeFocus2}`,
+      borderRadius: tokens.borderRadiusMedium,
 
       top: '-2px',
       bottom: '-2px',
@@ -98,8 +96,8 @@ const useStyles = makeStyles({
   },
 
   multiselectCheck: {
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),
-    ...shorthands.borderRadius(tokens.borderRadiusSmall),
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,
+    borderRadius: tokens.borderRadiusSmall,
     boxSizing: 'border-box',
 
     display: 'flex',