From e0cc47596150c03c8e78312f7ddd5a80dfa67783 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Tue, 25 Apr 2023 14:56:58 +0200 Subject: [PATCH] chore: enforce files naming to use .styles.ts [cxe-coastal] --- ...-3d303e19-07a6-449c-b1d5-d8d78cef31ea.json | 7 + ...-b6cc9e27-3ab1-4928-ac0a-894baa58100d.json | 7 + ...-3a13a563-5a35-4fb8-8138-0cab7bf13600.json | 7 + ...-4a61ce24-7289-4982-aafe-d6831ac66121.json | 7 + ...-76bd679e-f84d-4082-bee0-53e812f18865.json | 7 + ...-56cd433c-e747-4c48-874a-2e84bd088f8a.json | 7 + ...-71bff42b-a541-4e02-8cd0-4985bc7d6218.json | 7 + .../src/components/Accordion/Accordion.tsx | 2 +- .../src/components/Accordion/index.ts | 2 +- ...Styles.ts => useAccordionStyles.styles.ts} | 0 .../AccordionHeader/AccordionHeader.tsx | 2 +- .../src/components/AccordionHeader/index.ts | 2 +- ....ts => useAccordionHeaderStyles.styles.ts} | 0 .../AccordionItem/AccordionItem.tsx | 2 +- .../src/components/AccordionItem/index.ts | 2 +- ...es.ts => useAccordionItemStyles.styles.ts} | 0 .../AccordionPanel/AccordionPanel.tsx | 2 +- .../src/components/AccordionPanel/index.ts | 2 +- ...s.ts => useAccordionPanelStyles.styles.ts} | 0 .../src/components/Combobox/Combobox.tsx | 2 +- .../src/components/Combobox/index.ts | 2 +- ...xStyles.ts => useComboboxStyles.styles.ts} | 0 .../src/components/Dropdown/Dropdown.tsx | 2 +- .../src/components/Dropdown/index.ts | 2 +- ...nStyles.ts => useDropdownStyles.styles.ts} | 0 .../src/components/Listbox/Listbox.tsx | 2 +- .../src/components/Listbox/index.ts | 2 +- ...oxStyles.ts => useListboxStyles.styles.ts} | 0 .../src/components/Option/Option.test.tsx | 2 +- .../src/components/Option/Option.tsx | 2 +- .../src/components/Option/index.ts | 2 +- ...ionStyles.ts => useOptionStyles.styles.ts} | 0 .../components/OptionGroup/OptionGroup.tsx | 2 +- .../src/components/OptionGroup/index.ts | 2 +- ...yles.ts => useOptionGroupStyles.styles.ts} | 0 .../src/components/Divider/Divider.tsx | 2 +- .../src/components/Divider/index.ts | 2 +- ...erStyles.ts => useDividerStyles.styles.ts} | 0 .../etc/react-migration-v8-v9.api.md | 2 +- .../components/Stack/StackItemShim.styles.ts | 119 ++++++++++++++ .../src/components/Stack/StackItemShim.tsx | 129 ++------------- .../src/components/Stack/StackShim.styles.ts | 139 ++++++++++++++++ .../src/components/Stack/StackShim.tsx | 150 ++---------------- ...eviewV8.tsx => ThemePreviewV8.stories.tsx} | 0 ...eviewV9.tsx => ThemePreviewV9.stories.tsx} | 4 +- .../ThemeShim/createV8Theme/index.stories.tsx | 4 +- .../ThemeShim/createV9Theme/index.stories.tsx | 4 +- .../src/components/Select/Select.tsx | 2 +- .../src/components/Select/index.ts | 2 +- ...ectStyles.ts => useSelectStyles.styles.ts} | 0 .../src/components/Slider/Slider.tsx | 2 +- .../src/components/Slider/index.ts | 2 +- .../src/components/Slider/useSliderState.tsx | 2 +- ...derStyles.ts => useSliderStyles.styles.ts} | 0 .../react-tabs/src/components/Tab/Tab.tsx | 2 +- .../react-tabs/src/components/Tab/index.ts | 4 +- ...r.ts => useTabAnimatedIndicator.styles.ts} | 0 ...useTabStyles.ts => useTabStyles.styles.ts} | 2 +- .../src/components/TabList/TabList.tsx | 2 +- .../src/components/TabList/index.ts | 2 +- ...stStyles.ts => useTabListStyles.styles.ts} | 0 .../Tabs/TabListWithOverflow.stories.tsx | 1 - .../react-tags/src/components/Tag/Tag.tsx | 2 +- .../react-tags/src/components/Tag/index.ts | 2 +- ...useTagStyles.ts => useTagStyles.styles.ts} | 0 .../src/components/TagButton/TagButton.tsx | 2 +- .../src/components/TagButton/index.ts | 2 +- ...Styles.ts => useTagButtonStyles.styles.ts} | 0 68 files changed, 369 insertions(+), 304 deletions(-) create mode 100644 change/@fluentui-react-accordion-3d303e19-07a6-449c-b1d5-d8d78cef31ea.json create mode 100644 change/@fluentui-react-combobox-b6cc9e27-3ab1-4928-ac0a-894baa58100d.json create mode 100644 change/@fluentui-react-divider-3a13a563-5a35-4fb8-8138-0cab7bf13600.json create mode 100644 change/@fluentui-react-migration-v8-v9-4a61ce24-7289-4982-aafe-d6831ac66121.json create mode 100644 change/@fluentui-react-select-76bd679e-f84d-4082-bee0-53e812f18865.json create mode 100644 change/@fluentui-react-slider-56cd433c-e747-4c48-874a-2e84bd088f8a.json create mode 100644 change/@fluentui-react-tabs-71bff42b-a541-4e02-8cd0-4985bc7d6218.json rename packages/react-components/react-accordion/src/components/Accordion/{useAccordionStyles.ts => useAccordionStyles.styles.ts} (100%) rename packages/react-components/react-accordion/src/components/AccordionHeader/{useAccordionHeaderStyles.ts => useAccordionHeaderStyles.styles.ts} (100%) rename packages/react-components/react-accordion/src/components/AccordionItem/{useAccordionItemStyles.ts => useAccordionItemStyles.styles.ts} (100%) rename packages/react-components/react-accordion/src/components/AccordionPanel/{useAccordionPanelStyles.ts => useAccordionPanelStyles.styles.ts} (100%) rename packages/react-components/react-combobox/src/components/Combobox/{useComboboxStyles.ts => useComboboxStyles.styles.ts} (100%) rename packages/react-components/react-combobox/src/components/Dropdown/{useDropdownStyles.ts => useDropdownStyles.styles.ts} (100%) rename packages/react-components/react-combobox/src/components/Listbox/{useListboxStyles.ts => useListboxStyles.styles.ts} (100%) rename packages/react-components/react-combobox/src/components/Option/{useOptionStyles.ts => useOptionStyles.styles.ts} (100%) rename packages/react-components/react-combobox/src/components/OptionGroup/{useOptionGroupStyles.ts => useOptionGroupStyles.styles.ts} (100%) rename packages/react-components/react-divider/src/components/Divider/{useDividerStyles.ts => useDividerStyles.styles.ts} (100%) create mode 100644 packages/react-components/react-migration-v8-v9/src/components/Stack/StackItemShim.styles.ts create mode 100644 packages/react-components/react-migration-v8-v9/src/components/Stack/StackShim.styles.ts rename packages/react-components/react-migration-v8-v9/stories/ThemeShim/{ThemePreviewV8.tsx => ThemePreviewV8.stories.tsx} (100%) rename packages/react-components/react-migration-v8-v9/stories/ThemeShim/{ThemePreviewV9.tsx => ThemePreviewV9.stories.tsx} (98%) rename packages/react-components/react-select/src/components/Select/{useSelectStyles.ts => useSelectStyles.styles.ts} (100%) rename packages/react-components/react-slider/src/components/Slider/{useSliderStyles.ts => useSliderStyles.styles.ts} (100%) rename packages/react-components/react-tabs/src/components/Tab/{useTabAnimatedIndicator.ts => useTabAnimatedIndicator.styles.ts} (100%) rename packages/react-components/react-tabs/src/components/Tab/{useTabStyles.ts => useTabStyles.styles.ts} (99%) rename packages/react-components/react-tabs/src/components/TabList/{useTabListStyles.ts => useTabListStyles.styles.ts} (100%) rename packages/react-components/react-tags/src/components/Tag/{useTagStyles.ts => useTagStyles.styles.ts} (100%) rename packages/react-components/react-tags/src/components/TagButton/{useTagButtonStyles.ts => useTagButtonStyles.styles.ts} (100%) diff --git a/change/@fluentui-react-accordion-3d303e19-07a6-449c-b1d5-d8d78cef31ea.json b/change/@fluentui-react-accordion-3d303e19-07a6-449c-b1d5-d8d78cef31ea.json new file mode 100644 index 00000000000000..9ab7c6cf7a20d9 --- /dev/null +++ b/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" +} diff --git a/change/@fluentui-react-combobox-b6cc9e27-3ab1-4928-ac0a-894baa58100d.json b/change/@fluentui-react-combobox-b6cc9e27-3ab1-4928-ac0a-894baa58100d.json new file mode 100644 index 00000000000000..ec9169ef812326 --- /dev/null +++ b/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" +} diff --git a/change/@fluentui-react-divider-3a13a563-5a35-4fb8-8138-0cab7bf13600.json b/change/@fluentui-react-divider-3a13a563-5a35-4fb8-8138-0cab7bf13600.json new file mode 100644 index 00000000000000..1bec47503157ce --- /dev/null +++ b/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" +} diff --git a/change/@fluentui-react-migration-v8-v9-4a61ce24-7289-4982-aafe-d6831ac66121.json b/change/@fluentui-react-migration-v8-v9-4a61ce24-7289-4982-aafe-d6831ac66121.json new file mode 100644 index 00000000000000..a5cef33a0136b8 --- /dev/null +++ b/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" +} diff --git a/change/@fluentui-react-select-76bd679e-f84d-4082-bee0-53e812f18865.json b/change/@fluentui-react-select-76bd679e-f84d-4082-bee0-53e812f18865.json new file mode 100644 index 00000000000000..15843c5848ad93 --- /dev/null +++ b/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" +} diff --git a/change/@fluentui-react-slider-56cd433c-e747-4c48-874a-2e84bd088f8a.json b/change/@fluentui-react-slider-56cd433c-e747-4c48-874a-2e84bd088f8a.json new file mode 100644 index 00000000000000..0197057cd6353b --- /dev/null +++ b/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" +} diff --git a/change/@fluentui-react-tabs-71bff42b-a541-4e02-8cd0-4985bc7d6218.json b/change/@fluentui-react-tabs-71bff42b-a541-4e02-8cd0-4985bc7d6218.json new file mode 100644 index 00000000000000..c4b2878521f3a6 --- /dev/null +++ b/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" +} diff --git a/packages/react-components/react-accordion/src/components/Accordion/Accordion.tsx b/packages/react-components/react-accordion/src/components/Accordion/Accordion.tsx index 96541a5b99bded..0ca066ac271c24 100644 --- a/packages/react-components/react-accordion/src/components/Accordion/Accordion.tsx +++ b/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'; diff --git a/packages/react-components/react-accordion/src/components/Accordion/index.ts b/packages/react-components/react-accordion/src/components/Accordion/index.ts index d9adcc93385c65..7a08828b1b164b 100644 --- a/packages/react-components/react-accordion/src/components/Accordion/index.ts +++ b/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'; diff --git a/packages/react-components/react-accordion/src/components/Accordion/useAccordionStyles.ts b/packages/react-components/react-accordion/src/components/Accordion/useAccordionStyles.styles.ts similarity index 100% rename from packages/react-components/react-accordion/src/components/Accordion/useAccordionStyles.ts rename to packages/react-components/react-accordion/src/components/Accordion/useAccordionStyles.styles.ts diff --git a/packages/react-components/react-accordion/src/components/AccordionHeader/AccordionHeader.tsx b/packages/react-components/react-accordion/src/components/AccordionHeader/AccordionHeader.tsx index 0cd1528a711d41..fde332bf9f9b92 100644 --- a/packages/react-components/react-accordion/src/components/AccordionHeader/AccordionHeader.tsx +++ b/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'; diff --git a/packages/react-components/react-accordion/src/components/AccordionHeader/index.ts b/packages/react-components/react-accordion/src/components/AccordionHeader/index.ts index 792098d81365fe..ce32bacc27b603 100644 --- a/packages/react-components/react-accordion/src/components/AccordionHeader/index.ts +++ b/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'; diff --git a/packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts b/packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts similarity index 100% rename from packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts rename to packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts diff --git a/packages/react-components/react-accordion/src/components/AccordionItem/AccordionItem.tsx b/packages/react-components/react-accordion/src/components/AccordionItem/AccordionItem.tsx index 31dd4c02890fa3..37e51812c423e3 100644 --- a/packages/react-components/react-accordion/src/components/AccordionItem/AccordionItem.tsx +++ b/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'; diff --git a/packages/react-components/react-accordion/src/components/AccordionItem/index.ts b/packages/react-components/react-accordion/src/components/AccordionItem/index.ts index 13ea595a5ea148..301f2238c6d80f 100644 --- a/packages/react-components/react-accordion/src/components/AccordionItem/index.ts +++ b/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'; diff --git a/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts b/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItemStyles.styles.ts similarity index 100% rename from packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts rename to packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItemStyles.styles.ts diff --git a/packages/react-components/react-accordion/src/components/AccordionPanel/AccordionPanel.tsx b/packages/react-components/react-accordion/src/components/AccordionPanel/AccordionPanel.tsx index 1bb9be54771bae..0e2789b4cacb86 100644 --- a/packages/react-components/react-accordion/src/components/AccordionPanel/AccordionPanel.tsx +++ b/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'; diff --git a/packages/react-components/react-accordion/src/components/AccordionPanel/index.ts b/packages/react-components/react-accordion/src/components/AccordionPanel/index.ts index e1ca5d427e86fc..bef7ad6cf7234a 100644 --- a/packages/react-components/react-accordion/src/components/AccordionPanel/index.ts +++ b/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'; diff --git a/packages/react-components/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts b/packages/react-components/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.styles.ts similarity index 100% rename from packages/react-components/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts rename to packages/react-components/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.styles.ts diff --git a/packages/react-components/react-combobox/src/components/Combobox/Combobox.tsx b/packages/react-components/react-combobox/src/components/Combobox/Combobox.tsx index 146c04d14bf6bf..d17957febc0197 100644 --- a/packages/react-components/react-combobox/src/components/Combobox/Combobox.tsx +++ b/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'; diff --git a/packages/react-components/react-combobox/src/components/Combobox/index.ts b/packages/react-components/react-combobox/src/components/Combobox/index.ts index fcf1f5cdbe75f8..1af6008ba433b5 100644 --- a/packages/react-components/react-combobox/src/components/Combobox/index.ts +++ b/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'; diff --git a/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.ts b/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.styles.ts similarity index 100% rename from packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.ts rename to packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.styles.ts diff --git a/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.tsx b/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.tsx index daed766849a9d4..2a5e275cadb548 100644 --- a/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.tsx +++ b/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'; diff --git a/packages/react-components/react-combobox/src/components/Dropdown/index.ts b/packages/react-components/react-combobox/src/components/Dropdown/index.ts index fec938fad0d638..edd3a4a0372599 100644 --- a/packages/react-components/react-combobox/src/components/Dropdown/index.ts +++ b/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'; diff --git a/packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.ts b/packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.styles.ts similarity index 100% rename from packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.ts rename to packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.styles.ts diff --git a/packages/react-components/react-combobox/src/components/Listbox/Listbox.tsx b/packages/react-components/react-combobox/src/components/Listbox/Listbox.tsx index fb0bc844fcda37..9a58dba7d1b7c8 100644 --- a/packages/react-components/react-combobox/src/components/Listbox/Listbox.tsx +++ b/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'; diff --git a/packages/react-components/react-combobox/src/components/Listbox/index.ts b/packages/react-components/react-combobox/src/components/Listbox/index.ts index a8b171c8e29886..32df07e927eed0 100644 --- a/packages/react-components/react-combobox/src/components/Listbox/index.ts +++ b/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'; diff --git a/packages/react-components/react-combobox/src/components/Listbox/useListboxStyles.ts b/packages/react-components/react-combobox/src/components/Listbox/useListboxStyles.styles.ts similarity index 100% rename from packages/react-components/react-combobox/src/components/Listbox/useListboxStyles.ts rename to packages/react-components/react-combobox/src/components/Listbox/useListboxStyles.styles.ts diff --git a/packages/react-components/react-combobox/src/components/Option/Option.test.tsx b/packages/react-components/react-combobox/src/components/Option/Option.test.tsx index 3115ba10f80b70..17012d4793c882 100644 --- a/packages/react-components/react-combobox/src/components/Option/Option.test.tsx +++ b/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({ diff --git a/packages/react-components/react-combobox/src/components/Option/Option.tsx b/packages/react-components/react-combobox/src/components/Option/Option.tsx index 906572dc49a987..4e845ad57027b7 100644 --- a/packages/react-components/react-combobox/src/components/Option/Option.tsx +++ b/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'; diff --git a/packages/react-components/react-combobox/src/components/Option/index.ts b/packages/react-components/react-combobox/src/components/Option/index.ts index 48ecc2d8940620..ae79dd2478fcf0 100644 --- a/packages/react-components/react-combobox/src/components/Option/index.ts +++ b/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'; diff --git a/packages/react-components/react-combobox/src/components/Option/useOptionStyles.ts b/packages/react-components/react-combobox/src/components/Option/useOptionStyles.styles.ts similarity index 100% rename from packages/react-components/react-combobox/src/components/Option/useOptionStyles.ts rename to packages/react-components/react-combobox/src/components/Option/useOptionStyles.styles.ts diff --git a/packages/react-components/react-combobox/src/components/OptionGroup/OptionGroup.tsx b/packages/react-components/react-combobox/src/components/OptionGroup/OptionGroup.tsx index b5a23c3aa6914a..c134e21e97308a 100644 --- a/packages/react-components/react-combobox/src/components/OptionGroup/OptionGroup.tsx +++ b/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'; diff --git a/packages/react-components/react-combobox/src/components/OptionGroup/index.ts b/packages/react-components/react-combobox/src/components/OptionGroup/index.ts index 7f79e5d5537536..c23fdf13a47463 100644 --- a/packages/react-components/react-combobox/src/components/OptionGroup/index.ts +++ b/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'; diff --git a/packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts b/packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroupStyles.styles.ts similarity index 100% rename from packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts rename to packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroupStyles.styles.ts diff --git a/packages/react-components/react-divider/src/components/Divider/Divider.tsx b/packages/react-components/react-divider/src/components/Divider/Divider.tsx index 3e903864c76675..fdd78846de4678 100644 --- a/packages/react-components/react-divider/src/components/Divider/Divider.tsx +++ b/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'; diff --git a/packages/react-components/react-divider/src/components/Divider/index.ts b/packages/react-components/react-divider/src/components/Divider/index.ts index c26f4aa8ce11e9..aaab7dcd4274e9 100644 --- a/packages/react-components/react-divider/src/components/Divider/index.ts +++ b/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'; diff --git a/packages/react-components/react-divider/src/components/Divider/useDividerStyles.ts b/packages/react-components/react-divider/src/components/Divider/useDividerStyles.styles.ts similarity index 100% rename from packages/react-components/react-divider/src/components/Divider/useDividerStyles.ts rename to packages/react-components/react-divider/src/components/Divider/useDividerStyles.styles.ts diff --git a/packages/react-components/react-migration-v8-v9/etc/react-migration-v8-v9.api.md b/packages/react-components/react-migration-v8-v9/etc/react-migration-v8-v9.api.md index f2142ff2bb029c..9ab032796c3502 100644 --- a/packages/react-components/react-migration-v8-v9/etc/react-migration-v8-v9.api.md +++ b/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'; diff --git a/packages/react-components/react-migration-v8-v9/src/components/Stack/StackItemShim.styles.ts b/packages/react-components/react-migration-v8-v9/src/components/Stack/StackItemShim.styles.ts new file mode 100644 index 00000000000000..d5a3279224ef1e --- /dev/null +++ b/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, + }, +}); diff --git a/packages/react-components/react-migration-v8-v9/src/components/Stack/StackItemShim.tsx b/packages/react-components/react-migration-v8-v9/src/components/Stack/StackItemShim.tsx index b2d683d26dbcb5..b4dec5debf3169 100644 --- a/packages/react-components/react-migration-v8-v9/src/components/Stack/StackItemShim.tsx +++ b/packages/react-components/react-migration-v8-v9/src/components/Stack/StackItemShim.tsx @@ -1,130 +1,19 @@ +import { mergeClasses } from '@griffel/react'; import * as React from 'react'; +import type { IStackItemProps } from '@fluentui/react'; -import { IStackItemProps } from '@fluentui/react'; -import { makeStyles, mergeClasses } from '@griffel/react'; +import { + useFlexAlignSelfStyles, + useFlexGrowStyles, + useFlexOrderStyles, + useFlexShrinkStyles, + useStackItemShimStyles, +} from './StackItemShim.styles'; const stackItemClassNames = { root: 'ms-StackItem', }; -const useStackItemShimStyles = makeStyles({ - root: { - height: 'auto', - width: 'auto', - }, - disableShrink: { - flexShrink: 0, - }, - verticalFill: { - height: '100%', - }, -}); - -const useFlexAlignSelfStyles = makeStyles({ - auto: { - alignSelf: 'auto', - }, - baseline: { - alignSelf: 'baseline', - }, - center: { - alignSelf: 'center', - }, - start: { - alignSelf: 'flex-start', - }, - end: { - alignSelf: 'flex-end', - }, - stretch: { - alignSelf: 'stretch', - }, -}); - -const useFlexGrowStyles = makeStyles({ - inherit: { - flexGrow: 'inherit', - }, - initial: { - flexGrow: 'initial', - }, - revert: { - flexGrow: 'revert', - }, - unset: { - flexGrow: 'unset', - }, - '1': { - flexGrow: 1, - }, - '2': { - flexGrow: 2, - }, - '3': { - flexGrow: 3, - }, -}); - -const useFlexShrinkStyles = makeStyles({ - inherit: { - flexShrink: 'inherit', - }, - initial: { - flexShrink: 'initial', - }, - revert: { - flexShrink: 'revert', - }, - unset: { - flexShrink: 'unset', - }, - 0: { - flexShrink: 0, - }, - 1: { - flexShrink: 1, - }, - 2: { - flexShrink: 2, - }, -}); - -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, - }, -}); - export const StackItemShim = (props: IStackItemProps) => { const { grow, shrink, disableShrink, align, verticalFill, order, className, children } = props; diff --git a/packages/react-components/react-migration-v8-v9/src/components/Stack/StackShim.styles.ts b/packages/react-components/react-migration-v8-v9/src/components/Stack/StackShim.styles.ts new file mode 100644 index 00000000000000..6c088e8cc5bf53 --- /dev/null +++ b/packages/react-components/react-migration-v8-v9/src/components/Stack/StackShim.styles.ts @@ -0,0 +1,139 @@ +import { makeStyles } from '@griffel/react'; + +export const useStackStyles = makeStyles({ + root: { + display: 'flex', + flexDirection: 'column', + flexWrap: 'nowrap', + width: 'auto', + height: 'auto', + boxSizing: 'border-box', + '> *': { + textOverflow: 'ellipsis', + }, + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + '> *:not(.ms-StackItem)': { + flexShrink: 1, + }, + }, + horizontal: { + flexDirection: 'row', + }, + verticalFill: { + height: '100%', + }, + reversedVertical: { + flexDirection: 'column-reverse', + }, + reversedHorizontal: { + flexDirection: 'row-reverse', + }, + disableShrink: { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + '> *:not(.ms-StackItem)': { + flexShrink: 0, + }, + }, + wrap: { + display: 'flex', + flexWrap: 'wrap', + height: '100%', + }, + inner: { + display: 'flex', + flexDirection: 'column', + flexWrap: 'wrap', + boxSizing: 'border-box', + maxWidth: '100vw', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + '> *:not(.ms-StackItem)': { + flexShrink: 1, + }, + }, + innerWidth: { + width: '100%', + }, +}); + +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 useFlexAlignItemsStyles = makeStyles({ + baseline: { + alignItems: 'baseline', + }, + center: { + alignItems: 'center', + }, + start: { + alignItems: 'flex-start', + }, + end: { + alignItems: 'flex-end', + }, + stretch: { + alignItems: 'stretch', + }, + 'space-between': { + alignItems: 'space-between', + }, + + 'space-around': { + alignItems: 'space-around', + }, + 'space-evenly': { + alignItems: 'space-evenly', + }, +}); + +export const useFlexJustifyContentStyles = makeStyles({ + baseline: { + justifyContent: 'baseline', + }, + center: { + justifyContent: 'center', + }, + start: { + justifyContent: 'flex-start', + }, + end: { + justifyContent: 'flex-end', + }, + stretch: { + justifyContent: 'stretch', + }, + 'space-between': { + justifyContent: 'space-between', + }, + + 'space-around': { + justifyContent: 'space-around', + }, + 'space-evenly': { + justifyContent: 'space-evenly', + }, +}); diff --git a/packages/react-components/react-migration-v8-v9/src/components/Stack/StackShim.tsx b/packages/react-components/react-migration-v8-v9/src/components/Stack/StackShim.tsx index 3c11e75b38c6ea..90675967900a1d 100644 --- a/packages/react-components/react-migration-v8-v9/src/components/Stack/StackShim.tsx +++ b/packages/react-components/react-migration-v8-v9/src/components/Stack/StackShim.tsx @@ -1,10 +1,16 @@ -import * as React from 'react'; - +import { mergeClasses } from '@griffel/react'; import { classNamesFunction } from '@fluentui/react'; import type { IStackProps, IStackTokens, IStackItemProps } from '@fluentui/react'; -import { makeStyles, mergeClasses } from '@griffel/react'; +import * as React from 'react'; + import { getChildrenGapStyles } from './stackUtils'; import type { StackShimStyles } from './stackUtils'; +import { + useFlexAlignItemsStyles, + useFlexGrowStyles, + useFlexJustifyContentStyles, + useStackStyles, +} from './StackShim.styles'; const stackClassNames = { root: 'ms-Stack', @@ -13,144 +19,6 @@ const stackClassNames = { const getClassNames = classNamesFunction(); -const useStackStyles = makeStyles({ - root: { - display: 'flex', - flexDirection: 'column', - flexWrap: 'nowrap', - width: 'auto', - height: 'auto', - boxSizing: 'border-box', - '> *': { - textOverflow: 'ellipsis', - }, - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - '> *:not(.ms-StackItem)': { - flexShrink: 1, - }, - }, - horizontal: { - flexDirection: 'row', - }, - verticalFill: { - height: '100%', - }, - reversedVertical: { - flexDirection: 'column-reverse', - }, - reversedHorizontal: { - flexDirection: 'row-reverse', - }, - disableShrink: { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - '> *:not(.ms-StackItem)': { - flexShrink: 0, - }, - }, - wrap: { - display: 'flex', - flexWrap: 'wrap', - height: '100%', - }, - inner: { - display: 'flex', - flexDirection: 'column', - flexWrap: 'wrap', - boxSizing: 'border-box', - maxWidth: '100vw', - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - '> *:not(.ms-StackItem)': { - flexShrink: 1, - }, - }, - innerWidth: { - width: '100%', - }, -}); - -const useFlexGrowStyles = makeStyles({ - inherit: { - flexGrow: 'inherit', - }, - initial: { - flexGrow: 'initial', - }, - revert: { - flexGrow: 'revert', - }, - unset: { - flexGrow: 'unset', - }, - '1': { - flexGrow: 1, - }, - '2': { - flexGrow: 2, - }, - '3': { - flexGrow: 3, - }, -}); - -const useFlexAlignItemsStyles = makeStyles({ - baseline: { - alignItems: 'baseline', - }, - center: { - alignItems: 'center', - }, - start: { - alignItems: 'flex-start', - }, - end: { - alignItems: 'flex-end', - }, - stretch: { - alignItems: 'stretch', - }, - 'space-between': { - alignItems: 'space-between', - }, - - 'space-around': { - alignItems: 'space-around', - }, - 'space-evenly': { - alignItems: 'space-evenly', - }, -}); - -const useFlexJustifyContentStyles = makeStyles({ - baseline: { - justifyContent: 'baseline', - }, - center: { - justifyContent: 'center', - }, - start: { - justifyContent: 'flex-start', - }, - end: { - justifyContent: 'flex-end', - }, - stretch: { - justifyContent: 'stretch', - }, - 'space-between': { - justifyContent: 'space-between', - }, - - 'space-around': { - justifyContent: 'space-around', - }, - 'space-evenly': { - justifyContent: 'space-evenly', - }, -}); - export const StackShim = (props: IStackProps) => { const styles = useStackStyles(); const alignItemsFlexStyles = useFlexAlignItemsStyles(); diff --git a/packages/react-components/react-migration-v8-v9/stories/ThemeShim/ThemePreviewV8.tsx b/packages/react-components/react-migration-v8-v9/stories/ThemeShim/ThemePreviewV8.stories.tsx similarity index 100% rename from packages/react-components/react-migration-v8-v9/stories/ThemeShim/ThemePreviewV8.tsx rename to packages/react-components/react-migration-v8-v9/stories/ThemeShim/ThemePreviewV8.stories.tsx diff --git a/packages/react-components/react-migration-v8-v9/stories/ThemeShim/ThemePreviewV9.tsx b/packages/react-components/react-migration-v8-v9/stories/ThemeShim/ThemePreviewV9.stories.tsx similarity index 98% rename from packages/react-components/react-migration-v8-v9/stories/ThemeShim/ThemePreviewV9.tsx rename to packages/react-components/react-migration-v8-v9/stories/ThemeShim/ThemePreviewV9.stories.tsx index 682b44782b29d1..c285f1242d6f83 100644 --- a/packages/react-components/react-migration-v8-v9/stories/ThemeShim/ThemePreviewV9.tsx +++ b/packages/react-components/react-migration-v8-v9/stories/ThemeShim/ThemePreviewV9.stories.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; -import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; import { + makeStyles, + mergeClasses, + shorthands, tokens, Body1, Title3, diff --git a/packages/react-components/react-migration-v8-v9/stories/ThemeShim/createV8Theme/index.stories.tsx b/packages/react-components/react-migration-v8-v9/stories/ThemeShim/createV8Theme/index.stories.tsx index 9d916aed6ec5e5..1f353b46587305 100644 --- a/packages/react-components/react-migration-v8-v9/stories/ThemeShim/createV8Theme/index.stories.tsx +++ b/packages/react-components/react-migration-v8-v9/stories/ThemeShim/createV8Theme/index.stories.tsx @@ -19,8 +19,8 @@ import { import { brandWeb, createV8Theme } from '@fluentui/react-migration-v8-v9'; import descriptionMd from './Description.md'; -import { ThemePreviewV8 } from '../ThemePreviewV8'; -import { ThemePreviewV9 } from '../ThemePreviewV9'; +import { ThemePreviewV8 } from '../ThemePreviewV8.stories'; +import { ThemePreviewV9 } from '../ThemePreviewV9.stories'; initializeIcons(); diff --git a/packages/react-components/react-migration-v8-v9/stories/ThemeShim/createV9Theme/index.stories.tsx b/packages/react-components/react-migration-v8-v9/stories/ThemeShim/createV9Theme/index.stories.tsx index cd09e8909f4583..7df5e8276e9159 100644 --- a/packages/react-components/react-migration-v8-v9/stories/ThemeShim/createV9Theme/index.stories.tsx +++ b/packages/react-components/react-migration-v8-v9/stories/ThemeShim/createV9Theme/index.stories.tsx @@ -16,8 +16,8 @@ import { import { createV9Theme } from '@fluentui/react-migration-v8-v9'; import descriptionMd from './Description.md'; -import { ThemePreviewV8 } from '../ThemePreviewV8'; -import { ThemePreviewV9 } from '../ThemePreviewV9'; +import { ThemePreviewV8 } from '../ThemePreviewV8.stories'; +import { ThemePreviewV9 } from '../ThemePreviewV9.stories'; const useStyles = makeStyles({ root: { diff --git a/packages/react-components/react-select/src/components/Select/Select.tsx b/packages/react-components/react-select/src/components/Select/Select.tsx index baae3e3e40c8ca..983b8378ac44d1 100644 --- a/packages/react-components/react-select/src/components/Select/Select.tsx +++ b/packages/react-components/react-select/src/components/Select/Select.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useSelect_unstable } from './useSelect'; import { renderSelect_unstable } from './renderSelect'; -import { useSelectStyles_unstable } from './useSelectStyles'; +import { useSelectStyles_unstable } from './useSelectStyles.styles'; import type { SelectProps } from './Select.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-select/src/components/Select/index.ts b/packages/react-components/react-select/src/components/Select/index.ts index 8db1ab454a2735..c2e3c8832ebbda 100644 --- a/packages/react-components/react-select/src/components/Select/index.ts +++ b/packages/react-components/react-select/src/components/Select/index.ts @@ -2,4 +2,4 @@ export * from './Select'; export * from './Select.types'; export * from './renderSelect'; export * from './useSelect'; -export * from './useSelectStyles'; +export * from './useSelectStyles.styles'; diff --git a/packages/react-components/react-select/src/components/Select/useSelectStyles.ts b/packages/react-components/react-select/src/components/Select/useSelectStyles.styles.ts similarity index 100% rename from packages/react-components/react-select/src/components/Select/useSelectStyles.ts rename to packages/react-components/react-select/src/components/Select/useSelectStyles.styles.ts diff --git a/packages/react-components/react-slider/src/components/Slider/Slider.tsx b/packages/react-components/react-slider/src/components/Slider/Slider.tsx index faabab328ed365..b91b25c04ef976 100644 --- a/packages/react-components/react-slider/src/components/Slider/Slider.tsx +++ b/packages/react-components/react-slider/src/components/Slider/Slider.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useSlider_unstable } from './useSlider'; import { renderSlider_unstable } from './renderSlider'; -import { useSliderStyles_unstable } from './useSliderStyles'; +import { useSliderStyles_unstable } from './useSliderStyles.styles'; import type { SliderProps } from './Slider.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-slider/src/components/Slider/index.ts b/packages/react-components/react-slider/src/components/Slider/index.ts index f3e54dae153f77..de6598e13922a4 100644 --- a/packages/react-components/react-slider/src/components/Slider/index.ts +++ b/packages/react-components/react-slider/src/components/Slider/index.ts @@ -3,4 +3,4 @@ export * from './Slider.types'; export * from './renderSlider'; export * from './useSlider'; export { useSliderState_unstable } from './useSliderState'; -export { sliderClassNames, sliderCSSVars, useSliderStyles_unstable } from './useSliderStyles'; +export { sliderClassNames, sliderCSSVars, useSliderStyles_unstable } from './useSliderStyles.styles'; diff --git a/packages/react-components/react-slider/src/components/Slider/useSliderState.tsx b/packages/react-components/react-slider/src/components/Slider/useSliderState.tsx index 23a77e3f20a053..f25a10d72ce2a3 100644 --- a/packages/react-components/react-slider/src/components/Slider/useSliderState.tsx +++ b/packages/react-components/react-slider/src/components/Slider/useSliderState.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities'; import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts'; -import { sliderCSSVars } from './useSliderStyles'; +import { sliderCSSVars } from './useSliderStyles.styles'; import type { SliderState, SliderProps } from './Slider.types'; const { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars; diff --git a/packages/react-components/react-slider/src/components/Slider/useSliderStyles.ts b/packages/react-components/react-slider/src/components/Slider/useSliderStyles.styles.ts similarity index 100% rename from packages/react-components/react-slider/src/components/Slider/useSliderStyles.ts rename to packages/react-components/react-slider/src/components/Slider/useSliderStyles.styles.ts diff --git a/packages/react-components/react-tabs/src/components/Tab/Tab.tsx b/packages/react-components/react-tabs/src/components/Tab/Tab.tsx index a193d1c82147da..406c9e6c49050b 100644 --- a/packages/react-components/react-tabs/src/components/Tab/Tab.tsx +++ b/packages/react-components/react-tabs/src/components/Tab/Tab.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useTab_unstable } from './useTab'; import { renderTab_unstable } from './renderTab'; -import { useTabStyles_unstable } from './useTabStyles'; +import { useTabStyles_unstable } from './useTabStyles.styles'; import type { TabProps } from './Tab.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-tabs/src/components/Tab/index.ts b/packages/react-components/react-tabs/src/components/Tab/index.ts index 70ec7ca5814b3c..cbe0a6d4854b7f 100644 --- a/packages/react-components/react-tabs/src/components/Tab/index.ts +++ b/packages/react-components/react-tabs/src/components/Tab/index.ts @@ -2,5 +2,5 @@ export * from './Tab'; export * from './Tab.types'; export * from './renderTab'; export * from './useTab'; -export * from './useTabStyles'; -export * from './useTabAnimatedIndicator'; +export * from './useTabStyles.styles'; +export * from './useTabAnimatedIndicator.styles'; diff --git a/packages/react-components/react-tabs/src/components/Tab/useTabAnimatedIndicator.ts b/packages/react-components/react-tabs/src/components/Tab/useTabAnimatedIndicator.styles.ts similarity index 100% rename from packages/react-components/react-tabs/src/components/Tab/useTabAnimatedIndicator.ts rename to packages/react-components/react-tabs/src/components/Tab/useTabAnimatedIndicator.styles.ts diff --git a/packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts b/packages/react-components/react-tabs/src/components/Tab/useTabStyles.styles.ts similarity index 99% rename from packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts rename to packages/react-components/react-tabs/src/components/Tab/useTabStyles.styles.ts index a50e34d8f82759..dc386858e3ff40 100644 --- a/packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts +++ b/packages/react-components/react-tabs/src/components/Tab/useTabStyles.styles.ts @@ -4,7 +4,7 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; import { tokens, typographyStyles } from '@fluentui/react-theme'; import { SlotClassNames } from '@fluentui/react-utilities'; -import { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator'; +import { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles'; export const tabClassNames: SlotClassNames = { root: 'fui-Tab', diff --git a/packages/react-components/react-tabs/src/components/TabList/TabList.tsx b/packages/react-components/react-tabs/src/components/TabList/TabList.tsx index bd5ce0ae033312..32ba043bf0f95d 100644 --- a/packages/react-components/react-tabs/src/components/TabList/TabList.tsx +++ b/packages/react-components/react-tabs/src/components/TabList/TabList.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useTabList_unstable } from './useTabList'; import { renderTabList_unstable } from './renderTabList'; -import { useTabListStyles_unstable } from './useTabListStyles'; +import { useTabListStyles_unstable } from './useTabListStyles.styles'; import type { TabListProps } from './TabList.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useTabListContextValues_unstable } from './useTabListContextValues'; diff --git a/packages/react-components/react-tabs/src/components/TabList/index.ts b/packages/react-components/react-tabs/src/components/TabList/index.ts index 734925eb8ef6d7..369e73e4b5092d 100644 --- a/packages/react-components/react-tabs/src/components/TabList/index.ts +++ b/packages/react-components/react-tabs/src/components/TabList/index.ts @@ -4,4 +4,4 @@ export * from './TabListContext'; export * from './renderTabList'; export * from './useTabList'; export * from './useTabListContextValues'; -export * from './useTabListStyles'; +export * from './useTabListStyles.styles'; diff --git a/packages/react-components/react-tabs/src/components/TabList/useTabListStyles.ts b/packages/react-components/react-tabs/src/components/TabList/useTabListStyles.styles.ts similarity index 100% rename from packages/react-components/react-tabs/src/components/TabList/useTabListStyles.ts rename to packages/react-components/react-tabs/src/components/TabList/useTabListStyles.styles.ts diff --git a/packages/react-components/react-tabs/stories/Tabs/TabListWithOverflow.stories.tsx b/packages/react-components/react-tabs/stories/Tabs/TabListWithOverflow.stories.tsx index d1142f40c3a601..d53231002ac6fd 100644 --- a/packages/react-components/react-tabs/stories/Tabs/TabListWithOverflow.stories.tsx +++ b/packages/react-components/react-tabs/stories/Tabs/TabListWithOverflow.stories.tsx @@ -17,7 +17,6 @@ import { Overflow, OverflowItem, } from '@fluentui/react-components'; -// eslint-disable-next-line import/no-extraneous-dependencies import { Calendar3DayRegular, CalendarAgendaRegular, diff --git a/packages/react-components/react-tags/src/components/Tag/Tag.tsx b/packages/react-components/react-tags/src/components/Tag/Tag.tsx index 12541970e70a05..c1bb93011ef86a 100644 --- a/packages/react-components/react-tags/src/components/Tag/Tag.tsx +++ b/packages/react-components/react-tags/src/components/Tag/Tag.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useTag_unstable } from './useTag'; import { renderTag_unstable } from './renderTag'; -import { useTagStyles_unstable } from './useTagStyles'; +import { useTagStyles_unstable } from './useTagStyles.styles'; import type { TagProps } from './Tag.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-tags/src/components/Tag/index.ts b/packages/react-components/react-tags/src/components/Tag/index.ts index 142ad9d5c187af..a44c9ce425d76c 100644 --- a/packages/react-components/react-tags/src/components/Tag/index.ts +++ b/packages/react-components/react-tags/src/components/Tag/index.ts @@ -2,4 +2,4 @@ export * from './Tag'; export * from './Tag.types'; export * from './renderTag'; export * from './useTag'; -export * from './useTagStyles'; +export * from './useTagStyles.styles'; diff --git a/packages/react-components/react-tags/src/components/Tag/useTagStyles.ts b/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts similarity index 100% rename from packages/react-components/react-tags/src/components/Tag/useTagStyles.ts rename to packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts diff --git a/packages/react-components/react-tags/src/components/TagButton/TagButton.tsx b/packages/react-components/react-tags/src/components/TagButton/TagButton.tsx index aa55c30c625e33..8b9fc592af5b28 100644 --- a/packages/react-components/react-tags/src/components/TagButton/TagButton.tsx +++ b/packages/react-components/react-tags/src/components/TagButton/TagButton.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useTagButton_unstable } from './useTagButton'; import { renderTagButton_unstable } from './renderTagButton'; -import { useTagButtonStyles_unstable } from './useTagButtonStyles'; +import { useTagButtonStyles_unstable } from './useTagButtonStyles.styles'; import type { TagButtonProps } from './TagButton.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-tags/src/components/TagButton/index.ts b/packages/react-components/react-tags/src/components/TagButton/index.ts index 722687cc27a851..42382817cf40b7 100644 --- a/packages/react-components/react-tags/src/components/TagButton/index.ts +++ b/packages/react-components/react-tags/src/components/TagButton/index.ts @@ -2,4 +2,4 @@ export * from './TagButton'; export * from './TagButton.types'; export * from './renderTagButton'; export * from './useTagButton'; -export * from './useTagButtonStyles'; +export * from './useTagButtonStyles.styles'; diff --git a/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.ts b/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.styles.ts similarity index 100% rename from packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.ts rename to packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.styles.ts