chore: enforce files naming to use .styles.ts [cxe-coastal]

change/@fluentui-react-accordion-3d303e19-07a6-449c-b1d5-d8d78cef31ea.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-accordion",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-combobox-b6cc9e27-3ab1-4928-ac0a-894baa58100d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-combobox",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-divider-3a13a563-5a35-4fb8-8138-0cab7bf13600.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-divider",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-migration-v8-v9-4a61ce24-7289-4982-aafe-d6831ac66121.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-migration-v8-v9",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-select-76bd679e-f84d-4082-bee0-53e812f18865.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-select",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-slider-56cd433c-e747-4c48-874a-2e84bd088f8a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-slider",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tabs-71bff42b-a541-4e02-8cd0-4985bc7d6218.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-tabs",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-accordion/src/components/Accordion/Accordion.tsx

@@ -3,7 +3,7 @@ import { renderAccordion_unstable } from './renderAccordion';
 import { useAccordion_unstable } from './useAccordion';
 import { useAccordionContextValues_unstable } from './useAccordionContextValues';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
-import { useAccordionStyles_unstable } from './useAccordionStyles';
+import { useAccordionStyles_unstable } from './useAccordionStyles.styles';
 import type { AccordionProps } from './Accordion.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 

packages/react-components/react-accordion/src/components/Accordion/index.ts

@@ -2,6 +2,6 @@ export * from './Accordion';
 export * from './Accordion.types';
 export * from './renderAccordion';
 export * from './useAccordion';
-export * from './useAccordionStyles';
+export * from './useAccordionStyles.styles';
 export * from './useAccordionContextValues';
 export * from './AccordionContext';

packages/react-components/react-accordion/src/components/AccordionHeader/AccordionHeader.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useAccordionHeader_unstable } from './useAccordionHeader';
 import { renderAccordionHeader_unstable } from './renderAccordionHeader';
-import { useAccordionHeaderStyles_unstable } from './useAccordionHeaderStyles';
+import { useAccordionHeaderStyles_unstable } from './useAccordionHeaderStyles.styles';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useAccordionHeaderContextValues_unstable } from './useAccordionHeaderContextValues';
 import type { AccordionHeaderProps } from './AccordionHeader.types';

packages/react-components/react-accordion/src/components/AccordionHeader/index.ts

@@ -3,4 +3,4 @@ export * from './AccordionHeader.types';
 export * from './renderAccordionHeader';
 export * from './useAccordionHeader';
 export * from './useAccordionHeaderContextValues';
-export * from './useAccordionHeaderStyles';
+export * from './useAccordionHeaderStyles.styles';

packages/react-components/react-accordion/src/components/AccordionItem/AccordionItem.tsx

@@ -3,7 +3,7 @@ import { useAccordionItem_unstable } from './useAccordionItem';
 import { useAccordionItemContextValues_unstable } from './useAccordionItemContextValues';
 import { renderAccordionItem_unstable } from './renderAccordionItem';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
-import { useAccordionItemStyles_unstable } from './useAccordionItemStyles';
+import { useAccordionItemStyles_unstable } from './useAccordionItemStyles.styles';
 import type { AccordionItemProps } from './AccordionItem.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 

packages/react-components/react-accordion/src/components/AccordionItem/index.ts

@@ -4,4 +4,4 @@ export * from './renderAccordionItem';
 export * from './useAccordionItem';
 export * from './useAccordionItemContextValues';
 export * from './AccordionItemContext';
-export * from './useAccordionItemStyles';
+export * from './useAccordionItemStyles.styles';

packages/react-components/react-accordion/src/components/AccordionPanel/AccordionPanel.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useAccordionPanel_unstable } from './useAccordionPanel';
 import { renderAccordionPanel_unstable } from './renderAccordionPanel';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
-import { useAccordionPanelStyles_unstable } from './useAccordionPanelStyles';
+import { useAccordionPanelStyles_unstable } from './useAccordionPanelStyles.styles';
 import type { AccordionPanelProps } from './AccordionPanel.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 

packages/react-components/react-accordion/src/components/AccordionPanel/index.ts

@@ -2,4 +2,4 @@ export * from './AccordionPanel';
 export * from './AccordionPanel.types';
 export * from './renderAccordionPanel';
 export * from './useAccordionPanel';
-export * from './useAccordionPanelStyles';
+export * from './useAccordionPanelStyles.styles';

packages/react-components/react-combobox/src/components/Combobox/Combobox.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useCombobox_unstable } from './useCombobox';
 import { renderCombobox_unstable } from './renderCombobox';
-import { useComboboxStyles_unstable } from './useComboboxStyles';
+import { useComboboxStyles_unstable } from './useComboboxStyles.styles';
 import type { ComboboxProps } from './Combobox.types';
 import { useComboboxContextValues } from '../../contexts/useComboboxContextValues';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';

packages/react-components/react-combobox/src/components/Combobox/index.ts

@@ -2,4 +2,4 @@ export * from './Combobox';
 export * from './Combobox.types';
 export * from './renderCombobox';
 export * from './useCombobox';
-export * from './useComboboxStyles';
+export * from './useComboboxStyles.styles';

packages/react-components/react-combobox/src/components/Dropdown/Dropdown.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useDropdown_unstable } from './useDropdown';
 import { renderDropdown_unstable } from './renderDropdown';
-import { useDropdownStyles_unstable } from './useDropdownStyles';
+import { useDropdownStyles_unstable } from './useDropdownStyles.styles';
 import type { DropdownProps } from './Dropdown.types';
 import { useComboboxContextValues } from '../../contexts/useComboboxContextValues';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';

packages/react-components/react-combobox/src/components/Dropdown/index.ts

@@ -2,4 +2,4 @@ export * from './Dropdown';
 export * from './Dropdown.types';
 export * from './renderDropdown';
 export * from './useDropdown';
-export * from './useDropdownStyles';
+export * from './useDropdownStyles.styles';

packages/react-components/react-combobox/src/components/Listbox/Listbox.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useListbox_unstable } from './useListbox';
 import { renderListbox_unstable } from './renderListbox';
-import { useListboxStyles_unstable } from './useListboxStyles';
+import { useListboxStyles_unstable } from './useListboxStyles.styles';
 import type { ListboxProps } from './Listbox.types';
 import { useListboxContextValues } from '../../contexts/useListboxContextValues';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';

packages/react-components/react-combobox/src/components/Listbox/index.ts

@@ -2,4 +2,4 @@ export * from './Listbox';
 export * from './Listbox.types';
 export * from './renderListbox';
 export * from './useListbox';
-export * from './useListboxStyles';
+export * from './useListboxStyles.styles';

packages/react-components/react-combobox/src/components/Option/Option.test.tsx

@@ -5,7 +5,7 @@ import { ListboxContext } from '../../contexts/ListboxContext';
 import { Option } from './Option';
 import type { OptionProps } from './Option.types';
 import { isConformant } from '../../testing/isConformant';
-import { optionClassNames } from './useOptionStyles';
+import { optionClassNames } from './useOptionStyles.styles';
 
 describe('Option', () => {
   isConformant<OptionProps>({

packages/react-components/react-combobox/src/components/Option/Option.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useOption_unstable } from './useOption';
 import { renderOption_unstable } from './renderOption';
-import { useOptionStyles_unstable } from './useOptionStyles';
+import { useOptionStyles_unstable } from './useOptionStyles.styles';
 import type { OptionProps } from './Option.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';

packages/react-components/react-combobox/src/components/Option/index.ts

@@ -2,4 +2,4 @@ export * from './Option';
 export * from './Option.types';
 export * from './renderOption';
 export * from './useOption';
-export * from './useOptionStyles';
+export * from './useOptionStyles.styles';

packages/react-components/react-combobox/src/components/OptionGroup/OptionGroup.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useOptionGroup_unstable } from './useOptionGroup';
 import { renderOptionGroup_unstable } from './renderOptionGroup';
-import { useOptionGroupStyles_unstable } from './useOptionGroupStyles';
+import { useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';
 import type { OptionGroupProps } from './OptionGroup.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';

packages/react-components/react-combobox/src/components/OptionGroup/index.ts

@@ -2,4 +2,4 @@ export * from './OptionGroup';
 export * from './OptionGroup.types';
 export * from './renderOptionGroup';
 export * from './useOptionGroup';
-export * from './useOptionGroupStyles';
+export * from './useOptionGroupStyles.styles';

packages/react-components/react-divider/src/components/Divider/Divider.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { renderDivider_unstable } from './renderDivider';
 import { useDivider_unstable } from './useDivider';
-import { useDividerStyles_unstable } from './useDividerStyles';
+import { useDividerStyles_unstable } from './useDividerStyles.styles';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { DividerProps } from './Divider.types';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';

packages/react-components/react-divider/src/components/Divider/index.ts

@@ -2,4 +2,4 @@ export * from './Divider';
 export * from './Divider.types';
 export * from './renderDivider';
 export * from './useDivider';
-export * from './useDividerStyles';
+export * from './useDividerStyles.styles';

packages/react-components/react-migration-v8-v9/etc/react-migration-v8-v9.api.md

@@ -13,7 +13,7 @@ import type { IButtonProps } from '@fluentui/react';
 import type { IContextualMenuItem } from '@fluentui/react';
 import type { IContextualMenuProps } from '@fluentui/react';
 import type { IPalette } from '@fluentui/react';
-import { IStackItemProps } from '@fluentui/react';
+import type { IStackItemProps } from '@fluentui/react';
 import type { IStackProps } from '@fluentui/react';
 import type { MenuProps } from '@fluentui/react-menu';
 import * as React_2 from 'react';

packages/react-components/react-migration-v8-v9/src/components/Stack/StackItemShim.styles.ts

@@ -0,0 +1,119 @@
+import { makeStyles } from '@griffel/react';
+
+export const useStackItemShimStyles = makeStyles({
+  root: {
+    height: 'auto',
+    width: 'auto',
+  },
+  disableShrink: {
+    flexShrink: 0,
+  },
+  verticalFill: {
+    height: '100%',
+  },
+});
+
+export const useFlexAlignSelfStyles = makeStyles({
+  auto: {
+    alignSelf: 'auto',
+  },
+  baseline: {
+    alignSelf: 'baseline',
+  },
+  center: {
+    alignSelf: 'center',
+  },
+  start: {
+    alignSelf: 'flex-start',
+  },
+  end: {
+    alignSelf: 'flex-end',
+  },
+  stretch: {
+    alignSelf: 'stretch',
+  },
+});
+
+export const useFlexGrowStyles = makeStyles({
+  inherit: {
+    flexGrow: 'inherit',
+  },
+  initial: {
+    flexGrow: 'initial',
+  },
+  revert: {
+    flexGrow: 'revert',
+  },
+  unset: {
+    flexGrow: 'unset',
+  },
+  '1': {
+    flexGrow: 1,
+  },
+  '2': {
+    flexGrow: 2,
+  },
+  '3': {
+    flexGrow: 3,
+  },
+});
+
+export const useFlexShrinkStyles = makeStyles({
+  inherit: {
+    flexShrink: 'inherit',
+  },
+  initial: {
+    flexShrink: 'initial',
+  },
+  revert: {
+    flexShrink: 'revert',
+  },
+  unset: {
+    flexShrink: 'unset',
+  },
+  0: {
+    flexShrink: 0,
+  },
+  1: {
+    flexShrink: 1,
+  },
+  2: {
+    flexShrink: 2,
+  },
+});
+
+export const useFlexOrderStyles = makeStyles({
+  inherit: {
+    order: 'inherit',
+  },
+  initial: {
+    order: 'initial',
+  },
+  unset: {
+    order: 'unset',
+  },
+  revert: {
+    order: 'revert',
+  },
+  '-3': {
+    order: -3,
+  },
+  '-2': {
+    order: -2,
+  },
+  '-1': {
+    order: -1,
+  },
+  '0': {
+    order: 0,
+  },
+  '1': {
+    order: 1,
+  },
+  '2': {
+    order: 2,
+  },
+  '3': {
+    order: 3,
+  },
+});