chore: enforce files naming to use .styles.ts

apps/perf-test-react-components/.eslintrc.json

@@ -2,6 +2,7 @@
   "extends": ["plugin:@fluentui/eslint-plugin/react"],
   "root": true,
   "rules": {
+    "@griffel/styles-file": "off",
     "no-console": "off"
   }
 }

apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.styles.ts

@@ -0,0 +1,64 @@
+import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
+
+export const useComparisonTileStyles = makeStyles({
+  root: {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    ...shorthands.padding('5px', '0px'),
+    ...shorthands.gap('10px'),
+    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),
+    maxHeight: '105px',
+    ':hover': {
+      backgroundColor: tokens.colorNeutralBackground2Hover,
+    },
+  },
+
+  badge: {
+    position: 'absolute',
+    top: '5px',
+    right: '10px',
+  },
+
+  warning: {
+    color: tokens.colorPaletteDarkOrangeBackground3,
+  },
+
+  success: {
+    color: tokens.colorPaletteGreenBackground3,
+  },
+
+  v0: {
+    width: '16px',
+    height: '16px',
+  },
+
+  v9: {
+    width: '20px',
+    height: '20px',
+  },
+
+  tile: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    ...shorthands.gap('2px'),
+  },
+
+  buttonReset: {
+    resize: 'horizontal',
+    boxSizing: 'content-box',
+    backgroundColor: 'inherit',
+    color: 'inherit',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    lineHeight: 'normal',
+    ...shorthands.overflow('visible'),
+    ...shorthands.padding(0),
+    ...shorthands.borderStyle('none'),
+    WebkitAppearance: 'button',
+    textAlign: 'unset',
+  },
+});

apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.tsx

@@ -1,70 +1,9 @@
 import * as React from 'react';
 import { DismissRegular, InfoRegular } from '@fluentui/react-icons';
-import { makeStyles, shorthands, tokens, Button, mergeClasses, Tooltip } from '@fluentui/react-components';
-import { V0IconComponent, V9IconComponent } from './types';
-
-const useIconTileStyles = makeStyles({
-  root: {
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    ...shorthands.padding('5px', '0px'),
-    ...shorthands.gap('10px'),
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),
-    maxHeight: '105px',
-    ':hover': {
-      backgroundColor: tokens.colorNeutralBackground2Hover,
-    },
-  },
-
-  badge: {
-    position: 'absolute',
-    top: '5px',
-    right: '10px',
-  },
-
-  warning: {
-    color: tokens.colorPaletteDarkOrangeBackground3,
-  },
-
-  success: {
-    color: tokens.colorPaletteGreenBackground3,
-  },
+import { Button, mergeClasses, Tooltip } from '@fluentui/react-components';
 
-  v0: {
-    width: '16px',
-    height: '16px',
-  },
-
-  v9: {
-    width: '20px',
-    height: '20px',
-  },
-
-  tile: {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    ...shorthands.gap('2px'),
-  },
-
-  buttonReset: {
-    resize: 'horizontal',
-    boxSizing: 'content-box',
-    backgroundColor: 'inherit',
-    color: 'inherit',
-    fontFamily: 'inherit',
-    fontSize: 'inherit',
-    lineHeight: 'normal',
-    ...shorthands.overflow('visible'),
-    ...shorthands.padding(0),
-    ...shorthands.borderStyle('none'),
-    WebkitAppearance: 'button',
-    textAlign: 'unset',
-  },
-});
+import { V0IconComponent, V9IconComponent } from './types';
+import { useComparisonTileStyles } from './ComparisonTile.styles';
 
 interface IComparisonTileProps {
   V0Icon: V0IconComponent;
@@ -76,7 +15,7 @@ export const ComparisonTile: React.FC<IComparisonTileProps> = ({ V0Icon, V9Icon
 
   const tooltipWarningContent = <ul>{noV9Icon && <li>No equivalent icon available</li>}</ul>;
 
-  const styles = useIconTileStyles();
+  const styles = useComparisonTileStyles();
   return (
     <div className={styles.root} role="listitem">
       <Tooltip relationship="description" content={noV9Icon ? tooltipWarningContent : 'Good to go!'}>

apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconCatalog.styles.ts

@@ -0,0 +1,16 @@
+import { makeStyles } from '@fluentui/react-components';
+
+export const useIconCatalogStyles = makeStyles({
+  searchPanel: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: '10px',
+    marginTop: '20px',
+  },
+
+  switch: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});

apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconCatalog.tsx

@@ -2,27 +2,13 @@ import * as React from 'react';
 import { Provider, teamsV2Theme } from '@fluentui/react-northstar';
 import * as v0Icons from '@fluentui/react-icons-northstar';
 import * as v9Icons from '@fluentui/react-icons';
-import { makeStyles, Input, Switch, Label } from '@fluentui/react-components';
+import { Input, Switch, Label } from '@fluentui/react-components';
 import type { InputProps, SwitchProps } from '@fluentui/react-components';
 import { iconMapping as rawMapping } from './iconMapping';
 import { IconGrid } from './IconGrid';
 import { useDebounce } from './useDebounce';
 import { V0IconComponent, V9IconComponent } from './types';
-
-const useStyles = makeStyles({
-  searchPanel: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: '10px',
-    marginTop: '20px',
-  },
-
-  switch: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-});
+import { useIconCatalogStyles } from './IconCatalog.styles';
 
 const _mapping = rawMapping
   .map(entry => {
@@ -46,7 +32,8 @@ const _mapping = rawMapping
 const mapping = _mapping.filter(Boolean) as Array<NonNullable<(typeof _mapping)[number]>>;
 
 const IconCatalogInner: React.FC = () => {
-  const styles = useStyles();
+  const styles = useIconCatalogStyles();
+
   const [searchTerm, setSearchTerm] = React.useState<string | undefined>(undefined);
   const [searchV0, setSearchV0] = React.useState(true);
 

apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.styles.ts

@@ -0,0 +1,51 @@
+import { makeStyles, shorthands } from '@griffel/react';
+
+export const useColorBlockStyles = makeStyles({
+  root: {
+    ...shorthands.borderTop('1px', 'solid', '#aaa'),
+    ...shorthands.borderBottom('1px', 'solid', '#aaa'),
+    ...shorthands.borderLeft('1px', 'solid', 'transparent'),
+    ...shorthands.borderRight('1px', 'solid', '#aaa'),
+    display: 'grid',
+    gridTemplateColumns: 'auto 1fr',
+    gridTemplateRows: 'auto',
+    columnGap: '10px',
+    ...shorthands.padding('0', '5px', '0', '0'),
+  },
+  flipAlign: {
+    ...shorthands.borderLeft('1px', 'solid', '#aaa'),
+    ...shorthands.borderRight('1px', 'solid', 'transparent'),
+    gridTemplateColumns: '1fr auto',
+    ...shorthands.padding('0', '0', '0', '5px'),
+  },
+  color: {
+    backgroundColor: 'var(--ColorBlock__background-color)',
+    ...shorthands.borderLeft('1px', 'solid', '#aaa'),
+    ...shorthands.borderRight('1px', 'solid', '#aaa'),
+    width: '20px',
+    alignSelf: 'stretch',
+  },
+  names: {
+    alignSelf: 'flex-start',
+    display: 'grid',
+    gridTemplateColumns: 'auto auto',
+    gridTemplateRows: 'auto',
+    columnGap: '5px',
+    justifySelf: 'flex-start',
+    '& label': {
+      textAlign: 'right',
+      color: '#aaa',
+      ...shorthands.margin(0),
+      ...shorthands.padding(0),
+    },
+  },
+  blockName: {
+    fontWeight: '700',
+  },
+  colorName: {},
+  colorValue: {},
+  comment: {
+    color: 'green',
+    maxWidth: '250px',
+  },
+});

apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.tsx

@@ -1,56 +1,8 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { mergeClasses } from '@griffel/react';
 import * as React from 'react';
-import { ColorInfo } from './types';
 
-const useStyles = makeStyles({
-  root: {
-    ...shorthands.borderTop('1px', 'solid', '#aaa'),
-    ...shorthands.borderBottom('1px', 'solid', '#aaa'),
-    ...shorthands.borderLeft('1px', 'solid', 'transparent'),
-    ...shorthands.borderRight('1px', 'solid', '#aaa'),
-    display: 'grid',
-    gridTemplateColumns: 'auto 1fr',
-    gridTemplateRows: 'auto',
-    columnGap: '10px',
-    ...shorthands.padding('0', '5px', '0', '0'),
-  },
-  flipAlign: {
-    ...shorthands.borderLeft('1px', 'solid', '#aaa'),
-    ...shorthands.borderRight('1px', 'solid', 'transparent'),
-    gridTemplateColumns: '1fr auto',
-    ...shorthands.padding('0', '0', '0', '5px'),
-  },
-  color: {
-    backgroundColor: 'var(--ColorBlock__background-color)',
-    ...shorthands.borderLeft('1px', 'solid', '#aaa'),
-    ...shorthands.borderRight('1px', 'solid', '#aaa'),
-    width: '20px',
-    alignSelf: 'stretch',
-  },
-  names: {
-    alignSelf: 'flex-start',
-    display: 'grid',
-    gridTemplateColumns: 'auto auto',
-    gridTemplateRows: 'auto',
-    columnGap: '5px',
-    justifySelf: 'flex-start',
-    '& label': {
-      textAlign: 'right',
-      color: '#aaa',
-      ...shorthands.margin(0),
-      ...shorthands.padding(0),
-    },
-  },
-  blockName: {
-    fontWeight: '700',
-  },
-  colorName: {},
-  colorValue: {},
-  comment: {
-    color: 'green',
-    maxWidth: '250px',
-  },
-});
+import { ColorInfo } from './types';
+import { useColorBlockStyles } from './ColorBlock.styles';
 
 type Props = ColorInfo & {
   flipAlign?: boolean;
@@ -95,7 +47,7 @@ const getLabels = (kind: string) => {
 export const ColorBlock = (props: Props) => {
   const { name, colorName, colorValue, kind, comment, flipAlign } = props;
 
-  const styles = useStyles();
+  const styles = useColorBlockStyles();
   const labels = getLabels(kind);
 
   const className = mergeClasses(styles.root, flipAlign && styles.flipAlign);

apps/public-docsite-v9/src/Concepts/Poster/AreaCard.styles.ts

@@ -0,0 +1,32 @@
+import { makeStyles, shorthands, tokens, typographyStyles } from '@fluentui/react-components';
+
+export const useAreaCardStyles = makeStyles({
+  root: {
+    ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralBackground3),
+    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    ...shorthands.overflow('visible'),
+    ...shorthands.padding('40px'),
+    boxSizing: 'border-box',
+    boxShadow: tokens.shadow16,
+    ...shorthands.margin('50px'),
+  },
+  title: {
+    ...typographyStyles.subtitle1,
+    color: tokens.colorBrandForeground2,
+  },
+  items: {
+    alignContent: 'flex-start',
+    alignItems: 'flex-start',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    justifyItems: 'flex-start',
+  },
+  column: {
+    alignItems: 'flex-start',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    justifyItems: 'flex-start',
+  },
+});