chore: enforce files naming to use .styles.ts [cxe-prg files] (micros…

…oft#27707)

change/@fluentui-react-card-89b5306c-af55-4d03-b990-f2b07036e565.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-card",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-image-92afbcf5-895a-4a67-a8d1-44863348de3e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-image",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-text-7a7f2c17-ac1a-481e-92c2-28e5e19a1c7a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-text",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useBreadcrumb_unstable } from './useBreadcrumb';
 import { renderBreadcrumb_unstable } from './renderBreadcrumb';
-import { useBreadcrumbStyles_unstable } from './useBreadcrumbStyles';
+import { useBreadcrumbStyles_unstable } from './useBreadcrumbStyles.styles';
 import type { BreadcrumbProps } from './Breadcrumb.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useBreadcrumbContextValues_unstable } from './useBreadcrumbContextValue';

packages/react-components/react-breadcrumb/src/components/Breadcrumb/index.ts

@@ -2,4 +2,4 @@ export * from './Breadcrumb';
 export * from './Breadcrumb.types';
 export * from './renderBreadcrumb';
 export * from './useBreadcrumb';
-export * from './useBreadcrumbStyles';
+export * from './useBreadcrumbStyles.styles';

packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import { BreadcrumbButton } from './BreadcrumbButton';
 import { BreadcrumbButtonProps } from './BreadcrumbButton.types';
 import { isConformant } from '../../testing/isConformant';
-import { breadcrumbButtonClassNames } from './useBreadcrumbButtonStyles';
+import { breadcrumbButtonClassNames } from './useBreadcrumbButtonStyles.styles';
 
 describe('BreadcrumbButton', () => {
   isConformant({

packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useBreadcrumbButton_unstable } from './useBreadcrumbButton';
 import { renderBreadcrumbButton_unstable } from './renderBreadcrumbButton';
-import { useBreadcrumbButtonStyles_unstable } from './useBreadcrumbButtonStyles';
+import { useBreadcrumbButtonStyles_unstable } from './useBreadcrumbButtonStyles.styles';
 import type { BreadcrumbButtonProps } from './BreadcrumbButton.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 

packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/index.ts

@@ -2,4 +2,4 @@ export * from './BreadcrumbButton';
 export * from './BreadcrumbButton.types';
 export * from './renderBreadcrumbButton';
 export * from './useBreadcrumbButton';
-export * from './useBreadcrumbButtonStyles';
+export * from './useBreadcrumbButtonStyles.styles';

packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useBreadcrumbDivider_unstable } from './useBreadcrumbDivider';
 import { renderBreadcrumbDivider_unstable } from './renderBreadcrumbDivider';
-import { useBreadcrumbDividerStyles_unstable } from './useBreadcrumbDividerStyles';
+import { useBreadcrumbDividerStyles_unstable } from './useBreadcrumbDividerStyles.styles';
 import type { BreadcrumbDividerProps } from './BreadcrumbDivider.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 

packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/index.ts

@@ -2,4 +2,4 @@ export * from './BreadcrumbDivider';
 export * from './BreadcrumbDivider.types';
 export * from './renderBreadcrumbDivider';
 export * from './useBreadcrumbDivider';
-export * from './useBreadcrumbDividerStyles';
+export * from './useBreadcrumbDividerStyles.styles';

packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useBreadcrumbItem_unstable } from './useBreadcrumbItem';
 import { renderBreadcrumbItem_unstable } from './renderBreadcrumbItem';
-import { useBreadcrumbItemStyles_unstable } from './useBreadcrumbItemStyles';
+import { useBreadcrumbItemStyles_unstable } from './useBreadcrumbItemStyles.styles';
 import type { BreadcrumbItemProps } from './BreadcrumbItem.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 

packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/index.ts

@@ -2,4 +2,4 @@ export * from './BreadcrumbItem';
 export * from './BreadcrumbItem.types';
 export * from './renderBreadcrumbItem';
 export * from './useBreadcrumbItem';
-export * from './useBreadcrumbItemStyles';
+export * from './useBreadcrumbItemStyles.styles';

packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import { BreadcrumbLink } from './BreadcrumbLink';
 import type { BreadcrumbLinkProps } from './BreadcrumbLink.types';
 import { isConformant } from '../../testing/isConformant';
-import { breadcrumbLinkClassNames } from './useBreadcrumbLinkStyles';
+import { breadcrumbLinkClassNames } from './useBreadcrumbLinkStyles.styles';
 
 describe('BreadcrumbLink', () => {
   isConformant({

packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useBreadcrumbLink_unstable } from './useBreadcrumbLink';
 import { renderBreadcrumbLink_unstable } from './renderBreadcrumbLink';
-import { useBreadcrumbLinkStyles_unstable } from './useBreadcrumbLinkStyles';
+import { useBreadcrumbLinkStyles_unstable } from './useBreadcrumbLinkStyles.styles';
 import type { BreadcrumbLinkProps } from './BreadcrumbLink.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 

packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/index.ts

@@ -2,4 +2,4 @@ export * from './BreadcrumbLink';
 export * from './BreadcrumbLink.types';
 export * from './renderBreadcrumbLink';
 export * from './useBreadcrumbLink';
-export * from './useBreadcrumbLinkStyles';
+export * from './useBreadcrumbLinkStyles.styles';

packages/react-components/react-card/src/components/Card/Card.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import { Card } from './Card';
 import { isConformant } from '../../testing/isConformant';
 import { CardProps } from './Card.types';
-import { cardClassNames } from './useCardStyles';
+import { cardClassNames } from './useCardStyles.styles';
 
 describe('Card', () => {
   isConformant<CardProps>({

packages/react-components/react-card/src/components/Card/Card.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useCard_unstable } from './useCard';
 import { renderCard_unstable } from './renderCard';
-import { useCardStyles_unstable } from './useCardStyles';
+import { useCardStyles_unstable } from './useCardStyles.styles';
 import type { CardProps } from './Card.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCardContextValue } from './useCardContextValue';

packages/react-components/react-card/src/components/Card/index.ts

@@ -3,4 +3,4 @@ export * from './Card.types';
 export * from './CardContext';
 export * from './renderCard';
 export * from './useCard';
-export * from './useCardStyles';
+export * from './useCardStyles.styles';

packages/react-components/react-card/src/components/Card/useCardStyles.ts → packages/react-components/react-card/src/components/Card/useCardStyles.styles.ts

@@ -3,9 +3,9 @@ import { tokens } from '@fluentui/react-theme';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 
-import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles';
-import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles';
-import { cardFooterClassNames } from '../CardFooter/useCardFooterStyles';
+import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';
+import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';
+import { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';
 import type { CardSlots, CardState } from './Card.types';
 
 /**

packages/react-components/react-card/src/components/CardFooter/CardFooter.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useCardFooter_unstable } from './useCardFooter';
 import { renderCardFooter_unstable } from './renderCardFooter';
-import { useCardFooterStyles_unstable } from './useCardFooterStyles';
+import { useCardFooterStyles_unstable } from './useCardFooterStyles.styles';
 import type { CardFooterProps } from './CardFooter.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 

packages/react-components/react-card/src/components/CardFooter/index.ts

@@ -2,4 +2,4 @@ export * from './CardFooter';
 export * from './CardFooter.types';
 export * from './renderCardFooter';
 export * from './useCardFooter';
-export * from './useCardFooterStyles';
+export * from './useCardFooterStyles.styles';

packages/react-components/react-card/src/components/CardHeader/CardHeader.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useCardHeader_unstable } from './useCardHeader';
 import { renderCardHeader_unstable } from './renderCardHeader';
-import { useCardHeaderStyles_unstable } from './useCardHeaderStyles';
+import { useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';
 import type { CardHeaderProps } from './CardHeader.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 

packages/react-components/react-card/src/components/CardHeader/index.ts

@@ -2,4 +2,4 @@ export * from './CardHeader';
 export * from './CardHeader.types';
 export * from './renderCardHeader';
 export * from './useCardHeader';
-export * from './useCardHeaderStyles';
+export * from './useCardHeaderStyles.styles';

packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
 import type { CardHeaderProps, CardHeaderState } from './CardHeader.types';
 import { useCardContext_unstable } from '../Card/CardContext';
-import { cardHeaderClassNames } from './useCardHeaderStyles';
+import { cardHeaderClassNames } from './useCardHeaderStyles.styles';
 
 /**
  * Create the state required to render CardHeader.

packages/react-components/react-card/src/components/CardPreview/CardPreview.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useCardPreview_unstable } from './useCardPreview';
 import { renderCardPreview_unstable } from './renderCardPreview';
-import { useCardPreviewStyles_unstable } from './useCardPreviewStyles';
+import { useCardPreviewStyles_unstable } from './useCardPreviewStyles.styles';
 import type { CardPreviewProps } from './CardPreview.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 

packages/react-components/react-card/src/components/CardPreview/index.ts

@@ -2,4 +2,4 @@ export * from './CardPreview';
 export * from './CardPreview.types';
 export * from './renderCardPreview';
 export * from './useCardPreview';
-export * from './useCardPreviewStyles';
+export * from './useCardPreviewStyles.styles';

packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
 import type { CardPreviewProps, CardPreviewState } from './CardPreview.types';
 import { useCardContext_unstable } from '../Card/CardContext';
-import { cardPreviewClassNames } from './useCardPreviewStyles';
+import { cardPreviewClassNames } from './useCardPreviewStyles.styles';
 
 /**
  * Create the state required to render CardPreview.

packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useDrawer_unstable } from './useDrawer';
 import { renderDrawer_unstable } from './renderDrawer';
-import { useDrawerStyles_unstable } from './useDrawerStyles';
+import { useDrawerStyles_unstable } from './useDrawerStyles.styles';
 import type { DrawerProps } from './Drawer.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 

packages/react-components/react-drawer/src/components/Drawer/index.ts

@@ -2,4 +2,4 @@ export * from './Drawer';
 export * from './Drawer.types';
 export * from './renderDrawer';
 export * from './useDrawer';
-export * from './useDrawerStyles';
+export * from './useDrawerStyles.styles';

packages/react-components/react-image/src/components/Image/Image.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { renderImage_unstable } from './renderImage';
 import { useImage_unstable } from './useImage';
-import { useImageStyles_unstable } from './useImageStyles';
+import { useImageStyles_unstable } from './useImageStyles.styles';
 import type { ImageProps } from './Image.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';

packages/react-components/react-image/src/components/Image/index.ts

@@ -2,4 +2,4 @@ export * from './Image.types';
 export * from './Image';
 export * from './renderImage';
 export * from './useImage';
-export * from './useImageStyles';
+export * from './useImageStyles.styles';

packages/react-components/react-text/src/components/Text/Text.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useText_unstable } from './useText';
 import { renderText_unstable } from './renderText';
-import { useTextStyles_unstable } from './useTextStyles';
+import { useTextStyles_unstable } from './useTextStyles.styles';
 import type { TextProps } from './Text.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';

packages/react-components/react-text/src/components/Text/index.ts

@@ -2,4 +2,4 @@ export * from './Text';
 export * from './Text.types';
 export * from './renderText';
 export * from './useText';
-export * from './useTextStyles';
+export * from './useTextStyles.styles';

packages/react-components/react-text/src/components/presets/Body1/Body1.tsx

@@ -1,26 +1,13 @@
 import type { FunctionComponent } from 'react';
-import { makeStyles } from '@griffel/react';
 import { createPreset } from '../createPreset';
-import { SlotClassNames } from '@fluentui/react-utilities';
-import type { TextSlots, TextPresetProps } from '../../Text/Text.types';
-import { typographyStyles } from '@fluentui/react-theme';
-
-export const body1ClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-Body1',
-};
-
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  root: typographyStyles.body1,
-});
+import type { TextPresetProps } from '../../Text/Text.types';
+import { body1ClassNames, useBody1Styles } from './useBody1Styles.styles';
 
 /**
  * Text preset component for the Body1 typography variant
  */
 export const Body1: FunctionComponent<TextPresetProps> = createPreset({
-  useStyles,
+  useStyles: useBody1Styles,
   className: body1ClassNames.root,
   displayName: 'Body1',
 });

packages/react-components/react-text/src/components/presets/Body1/index.ts

@@ -1 +1,2 @@
 export * from './Body1';
+export { body1ClassNames } from './useBody1Styles.styles';

packages/react-components/react-text/src/components/presets/Body1/useBody1Styles.styles.ts

@@ -0,0 +1,15 @@
+import { makeStyles } from '@griffel/react';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import type { TextSlots } from '../../Text/Text.types';
+import { typographyStyles } from '@fluentui/react-theme';
+
+export const body1ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Body1',
+};
+
+/**
+ * Styles for the root slot
+ */
+export const useBody1Styles = makeStyles({
+  root: typographyStyles.body1,
+});

packages/react-components/react-text/src/components/presets/Body1Strong/Body1Strong.tsx

@@ -1,26 +1,13 @@
 import type { FunctionComponent } from 'react';
-import { makeStyles } from '@griffel/react';
 import { createPreset } from '../createPreset';
-import { SlotClassNames } from '@fluentui/react-utilities';
-import type { TextSlots, TextPresetProps } from '../../Text/Text.types';
-import { typographyStyles } from '@fluentui/react-theme';
-
-export const body1StrongClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-Body1Strong',
-};
-
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  root: typographyStyles.body1Strong,
-});
+import type { TextPresetProps } from '../../Text/Text.types';
+import { body1StrongClassNames, useBody1StrongStyles } from './useBody1StrongStyles.styles';
 
 /**
  * Text preset component for the Body1Strong typography variant
  */
 export const Body1Strong: FunctionComponent<TextPresetProps> = createPreset({
-  useStyles,
+  useStyles: useBody1StrongStyles,
   className: body1StrongClassNames.root,
   displayName: 'Body1Strong',
 });

packages/react-components/react-text/src/components/presets/Body1Strong/index.ts

@@ -1 +1,2 @@
 export * from './Body1Strong';
+export { body1StrongClassNames } from './useBody1StrongStyles.styles';

packages/react-components/react-text/src/components/presets/Body1Strong/useBody1StrongStyles.styles.ts

@@ -0,0 +1,15 @@
+import { makeStyles } from '@griffel/react';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import type { TextSlots } from '../../Text/Text.types';
+import { typographyStyles } from '@fluentui/react-theme';
+
+export const body1StrongClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Body1Strong',
+};
+
+/**
+ * Styles for the root slot
+ */
+export const useBody1StrongStyles = makeStyles({
+  root: typographyStyles.body1Strong,
+});

packages/react-components/react-text/src/components/presets/Body1Stronger/Body1Stronger.tsx

@@ -1,26 +1,13 @@
 import type { FunctionComponent } from 'react';
-import { makeStyles } from '@griffel/react';
 import { createPreset } from '../createPreset';
-import { SlotClassNames } from '@fluentui/react-utilities';
-import type { TextSlots, TextPresetProps } from '../../Text/Text.types';
-import { typographyStyles } from '@fluentui/react-theme';
-
-export const body1StrongerClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-Body1Stronger',
-};
-
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  root: typographyStyles.body1Stronger,
-});
+import type { TextPresetProps } from '../../Text/Text.types';
+import { body1StrongerClassNames, useBody1StrongerStyles } from './useBody1StrongerStyles.styles';
 
 /**
  * Text preset component for the Body1Stronger typography variant
  */
 export const Body1Stronger: FunctionComponent<TextPresetProps> = createPreset({
-  useStyles,
+  useStyles: useBody1StrongerStyles,
   className: body1StrongerClassNames.root,
   displayName: 'Body1Stronger',
 });

packages/react-components/react-text/src/components/presets/Body1Stronger/index.ts

@@ -1 +1,2 @@
 export * from './Body1Stronger';
+export { body1StrongerClassNames } from './useBody1StrongerStyles.styles';