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

microsoft · May 21, 2024 · 67e5617 · 67e5617
1 parent 9c98ebd
commit 67e5617
Show file tree

Hide file tree

Showing 150 changed files with 759 additions and 884 deletions.
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'),
+    ...shorthands.border('0') /* TODO: Expected "border" to have 3 arguments, got 1. Please migrate it manually. */,
     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,10 @@ 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'),
+    ...shorthands.border('0') /* TODO: Expected "border" to have 3 arguments, got 1. Please migrate it manually. */,
     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': {
@@ -48,7 +48,7 @@ const useStyles = makeStyles({
 
       ...shorthands.borderStyle('solid'),
       ...shorthands.borderWidth('2px'),
-      ...shorthands.borderRadius(tokens.borderRadiusMedium),
+      borderRadius: `${tokens.borderRadiusMedium}`,
       ...shorthands.borderColor(tokens.colorStrokeFocus2),
 
       top: '-2px',
@@ -98,8 +98,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',

diff --git a/...react-components/react-combobox/src/components/OptionGroup/useOptionGroupStyles.styles.ts b/...react-components/react-combobox/src/components/OptionGroup/useOptionGroupStyles.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 { OptionGroupSlots, OptionGroupState } from './OptionGroup.types';
 
 export const optionGroupClassNames: SlotClassNames<OptionGroupSlots> = {
@@ -19,21 +19,21 @@ const useStyles = makeStyles({
 
     '&:not(:last-child)::after': {
       content: '""',
-      ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),
+      borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,
       display: 'block',
       paddingBottom: tokens.spacingHorizontalXS,
-      ...shorthands.margin(0, `calc(${tokens.spacingHorizontalXS} * -1)`, tokens.spacingVerticalXS),
+      margin: `0 ${`calc(${tokens.spacingHorizontalXS} * -1)`} ${tokens.spacingVerticalXS}`,
     },
   },
 
   label: {
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    borderRadius: `${tokens.borderRadiusMedium}`,
     color: tokens.colorNeutralForeground3,
     display: 'block',
     fontSize: tokens.fontSizeBase200,
     fontWeight: tokens.fontWeightSemibold,
     lineHeight: tokens.lineHeightBase200,
-    ...shorthands.padding(tokens.spacingHorizontalS, tokens.spacingHorizontalSNudge),
+    padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalSNudge}`,
   },
 });
 

diff --git a/...s/react-components/react-combobox/stories/Combobox/ComboboxActiveOptionChange.stories.tsx b/...s/react-components/react-combobox/stories/Combobox/ComboboxActiveOptionChange.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Combobox, makeStyles, Option, shorthands, useId } from '@fluentui/react-components';
+import { Combobox, makeStyles, Option, useId } from '@fluentui/react-components';
 import type { ComboboxProps } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
@@ -8,7 +8,8 @@ const useStyles = makeStyles({
     display: 'grid',
     gridTemplateRows: 'repeat(1fr)',
     justifyItems: 'start',
-    ...shorthands.gap('2px'),
+    gap: '2px',
+
     maxWidth: '400px',
   },
 });

diff --git a/packages/react-components/react-combobox/stories/Combobox/ComboboxAppearance.stories.tsx b/packages/react-components/react-combobox/stories/Combobox/ComboboxAppearance.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Combobox, makeStyles, Option, shorthands, tokens, useId } from '@fluentui/react-components';
+import { Combobox, makeStyles, Option, tokens, useId } from '@fluentui/react-components';
 import type { ComboboxProps } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
@@ -8,15 +8,17 @@ const useStyles = makeStyles({
     display: 'grid',
     gridTemplateRows: 'repeat(1fr)',
     justifyItems: 'start',
-    ...shorthands.gap('20px'),
+    gap: '20px',
+
     maxWidth: '400px',
     '> div': {
       display: 'grid',
       gridTemplateRows: 'repeat(1fr)',
       justifyItems: 'start',
-      ...shorthands.gap('2px'),
+      gap: '2px',
+
       // need padding to see the background color for filled variants
-      ...shorthands.padding('5px', '20px', '10px'),
+      padding: '5px 20px 10px',
     },
   },
   // filledLighter and filledDarker appearances depend on particular background colors

diff --git a/packages/react-components/react-combobox/stories/Combobox/ComboboxClearable.stories.tsx b/packages/react-components/react-combobox/stories/Combobox/ComboboxClearable.stories.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { Combobox, Label, makeStyles, Option, shorthands, useId } from '@fluentui/react-components';
+import { Combobox, Label, makeStyles, Option, useId } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   root: {
     display: 'grid',
     gridTemplateRows: 'auto auto',
     justifyItems: 'start',
-    ...shorthands.gap('2px'),
+    gap: '2px',
   },
 });