From 0bf5374da5df0649ac7fdc065d141f0b8cd7ddf6 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Wed, 5 Oct 2022 15:39:41 -0700 Subject: [PATCH 01/23] feat: export contexts from react-combobox (#25099) --- ...-cb21bbcc-609e-40f4-9a10-0fa16f2ad882.json | 7 +++++++ .../react-combobox/etc/react-combobox.api.md | 21 +++++++++++++++++++ .../src/contexts/ComboboxContext.ts | 2 ++ .../src/contexts/ListboxContext.ts | 2 ++ .../react-combobox/src/index.ts | 6 ++++++ 5 files changed, 38 insertions(+) create mode 100644 change/@fluentui-react-combobox-cb21bbcc-609e-40f4-9a10-0fa16f2ad882.json diff --git a/change/@fluentui-react-combobox-cb21bbcc-609e-40f4-9a10-0fa16f2ad882.json b/change/@fluentui-react-combobox-cb21bbcc-609e-40f4-9a10-0fa16f2ad882.json new file mode 100644 index 00000000000000..ce104ba1e3c835 --- /dev/null +++ b/change/@fluentui-react-combobox-cb21bbcc-609e-40f4-9a10-0fa16f2ad882.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "feat: export contexts from react-combobox", + "packageName": "@fluentui/react-combobox", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-combobox/etc/react-combobox.api.md b/packages/react-components/react-combobox/etc/react-combobox.api.md index 4e71789dffe545..0b3719b173c67d 100644 --- a/packages/react-components/react-combobox/etc/react-combobox.api.md +++ b/packages/react-components/react-combobox/etc/react-combobox.api.md @@ -8,8 +8,11 @@ import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; +import { FC } from 'react'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import type { PositioningShorthand } from '@fluentui/react-positioning'; +import { Provider } from 'react'; +import { ProviderProps } from 'react'; import * as React_2 from 'react'; import type { Slot } from '@fluentui/react-utilities'; import { SlotClassNames } from '@fluentui/react-utilities'; @@ -20,6 +23,9 @@ export const Combobox: ForwardRefComponent; // @public (undocumented) export const comboboxClassNames: SlotClassNames; +// @public +export type ComboboxContextValue = Pick; + // @public (undocumented) export type ComboboxContextValues = ComboboxBaseContextValues; @@ -35,6 +41,9 @@ export type ComboboxProps = Omit, 'input'> children?: React_2.ReactNode; }; +// @public (undocumented) +export const ComboboxProvider: Provider & FC>; + // @public (undocumented) export type ComboboxSlots = { root: NonNullable>; @@ -83,6 +92,9 @@ export const Listbox: ForwardRefComponent; // @public (undocumented) export const listboxClassNames: SlotClassNames; +// @public +export type ListboxContextValue = Pick; + // @public (undocumented) export type ListboxContextValues = { listbox: ListboxContextValue; @@ -91,6 +103,9 @@ export type ListboxContextValues = { // @public export type ListboxProps = ComponentProps & SelectionProps; +// @public (undocumented) +export const ListboxProvider: Provider & FC>; + // @public (undocumented) export type ListboxSlots = { root: Slot<'div'>; @@ -167,6 +182,9 @@ export const renderOptionGroup_unstable: (state: OptionGroupState) => JSX.Elemen // @public export const useCombobox_unstable: (props: ComboboxProps, ref: React_2.Ref) => ComboboxState; +// @public (undocumented) +export function useComboboxContextValues(state: ComboboxBaseState): ComboboxBaseContextValues; + // @public export const useComboboxStyles_unstable: (state: ComboboxState) => ComboboxState; @@ -179,6 +197,9 @@ export const useDropdownStyles_unstable: (state: DropdownState) => DropdownState // @public export const useListbox_unstable: (props: ListboxProps, ref: React_2.Ref) => ListboxState; +// @public (undocumented) +export function useListboxContextValues(state: ListboxState): ListboxContextValues; + // @public export const useListboxStyles_unstable: (state: ListboxState) => ListboxState; diff --git a/packages/react-components/react-combobox/src/contexts/ComboboxContext.ts b/packages/react-components/react-combobox/src/contexts/ComboboxContext.ts index bc7559599cfb92..e009c9e943a189 100644 --- a/packages/react-components/react-combobox/src/contexts/ComboboxContext.ts +++ b/packages/react-components/react-combobox/src/contexts/ComboboxContext.ts @@ -39,3 +39,5 @@ export const ComboboxContext = createContext({ }, size: 'medium', }); + +export const ComboboxProvider = ComboboxContext.Provider; diff --git a/packages/react-components/react-combobox/src/contexts/ListboxContext.ts b/packages/react-components/react-combobox/src/contexts/ListboxContext.ts index 31b1ef4c995b2a..ba09c4653941f6 100644 --- a/packages/react-components/react-combobox/src/contexts/ListboxContext.ts +++ b/packages/react-components/react-combobox/src/contexts/ListboxContext.ts @@ -31,3 +31,5 @@ export const ListboxContext = createContext({ // noop }, }); + +export const ListboxProvider = ListboxContext.Provider; diff --git a/packages/react-components/react-combobox/src/index.ts b/packages/react-components/react-combobox/src/index.ts index 462e3d421d6ec0..bb95cbfb3cb5b4 100644 --- a/packages/react-components/react-combobox/src/index.ts +++ b/packages/react-components/react-combobox/src/index.ts @@ -1,3 +1,9 @@ +export { ComboboxProvider } from './contexts/ComboboxContext'; +export type { ComboboxContextValue } from './contexts/ComboboxContext'; +export { ListboxProvider } from './contexts/ListboxContext'; +export type { ListboxContextValue } from './contexts/ListboxContext'; +export { useComboboxContextValues } from './contexts/useComboboxContextValues'; +export { useListboxContextValues } from './contexts/useListboxContextValues'; export { Listbox, listboxClassNames, From abcbd1e1328c85f9804b4cf5e3e48630ac553cc6 Mon Sep 17 00:00:00 2001 From: "Geoff Cox (Microsoft)" Date: Wed, 5 Oct 2022 16:02:41 -0700 Subject: [PATCH 02/23] removed individual shim packages (#25101) --- .github/CODEOWNERS | 4 - lerna.json | 1 - package.json | 2 - .../react-button-shim-v8-v9/.babelrc.json | 4 - .../react-button-shim-v8-v9/.eslintrc.json | 4 - .../react-button-shim-v8-v9/.npmignore | 29 - .../.storybook/main.js | 14 - .../.storybook/preview.js | 7 - .../.storybook/tsconfig.json | 10 - .../react-button-shim-v8-v9/LICENSE | 15 - .../react-button-shim-v8-v9/README.md | 5 - .../react-button-shim-v8-v9/Spec.md | 63 - .../config/api-extractor.json | 10 - .../react-button-shim-v8-v9/config/tests.js | 1 - .../etc/react-button-shim-v8-v9.api.md | 40 - .../react-button-shim-v8-v9/jest.config.js | 21 - .../react-button-shim-v8-v9/just.config.ts | 3 - .../react-button-shim-v8-v9/package.json | 54 - .../src/ActionButtonShim.ts | 1 - .../react-button-shim-v8-v9/src/ButtonShim.ts | 1 - .../src/CommandButtonShim.ts | 1 - .../src/CompoundButtonShim.ts | 1 - .../src/DefaultButtonShim.ts | 1 - .../src/MenuButtonShim.ts | 1 - .../src/PrimaryButtonShim.ts | 1 - .../src/ToggleButtonShim.ts | 1 - .../ActionButtonShim.test.tsx | 12 - .../ActionButtonShim/ActionButtonShim.tsx | 23 - .../ActionButtonShim.test.tsx.snap | 12 - .../src/components/ActionButtonShim/index.ts | 1 - .../components/ButtonShim/ButtonShim.test.tsx | 12 - .../src/components/ButtonShim/ButtonShim.tsx | 24 - .../__snapshots__/ButtonShim.test.tsx.snap | 12 - .../src/components/ButtonShim/index.ts | 1 - .../CommandButtonShim.test.tsx | 12 - .../CommandButtonShim/CommandButtonShim.tsx | 4 - .../CommandButtonShim.test.tsx.snap | 12 - .../src/components/CommandButtonShim/index.ts | 1 - .../CompoundButtonShim.test.tsx | 12 - .../CompoundButtonShim/CompoundButtonShim.tsx | 26 - .../CompoundButtonShim.test.tsx.snap | 16 - .../components/CompoundButtonShim/index.ts | 1 - .../DefaultButtonShim.test.tsx | 12 - .../DefaultButtonShim/DefaultButtonShim.tsx | 14 - .../DefaultButtonShim.test.tsx.snap | 12 - .../src/components/DefaultButtonShim/index.ts | 1 - .../MenuButtonShim/MenuButtonShim.test.tsx | 12 - .../MenuButtonShim/MenuButtonShim.tsx | 39 - .../MenuButtonShim.test.tsx.snap | 35 - .../src/components/MenuButtonShim/index.ts | 1 - .../PrimaryButtonShim.test.tsx | 12 - .../PrimaryButtonShim/PrimaryButtonShim.tsx | 13 - .../PrimaryButtonShim.test.tsx.snap | 12 - .../src/components/PrimaryButtonShim/index.ts | 1 - .../ToggleButtonShim.test.tsx | 12 - .../ToggleButtonShim/ToggleButtonShim.tsx | 27 - .../ToggleButtonShim.test.tsx.snap | 13 - .../src/components/ToggleButtonShim/index.ts | 1 - .../react-button-shim-v8-v9/src/index.ts | 9 - .../src/shimButtonProps.tsx | 35 - .../ActionButtonShimBestPractices.md | 5 - .../ActionButtonShimDefault.stories.tsx | 4 - .../ActionButtonShimDescription.md | 0 .../ActionButtonShim/index.stories.tsx | 18 - .../ButtonShim/ButtonShimBestPractices.md | 5 - .../ButtonShim/ButtonShimDefault.stories.tsx | 4 - .../ButtonShim/ButtonShimDescription.md | 0 .../src/stories/ButtonShim/index.stories.tsx | 18 - .../CommandButtonShimBestPractices.md | 5 - .../CommandButtonShimDefault.stories.tsx | 4 - .../CommandButtonShimDescription.md | 0 .../CommandButtonShim/index.stories.tsx | 18 - .../CompoundButtonShimBestPractices.md | 5 - .../CompoundButtonShimDefault.stories.tsx | 4 - .../CompoundButtonShimDescription.md | 0 .../CompoundButtonShim/index.stories.tsx | 18 - .../DefaultButtonShimBestPractices.md | 5 - .../DefaultButtonShimDefault.stories.tsx | 4 - .../DefaultButtonShimDescription.md | 0 .../DefaultButtonShim/index.stories.tsx | 18 - .../MenuButtonShimBestPractices.md | 5 - .../MenuButtonShimDefault.stories.tsx | 4 - .../MenuButtonShimDescription.md | 0 .../stories/MenuButtonShim/index.stories.tsx | 18 - .../PrimaryButtonShimBestPractices.md | 5 - .../PrimaryButtonShimDefault.stories.tsx | 4 - .../PrimaryButtonShimDescription.md | 0 .../PrimaryButtonShim/index.stories.tsx | 18 - .../ToggleButtonShimBestPractices.md | 5 - .../ToggleButtonShimDefault.stories.tsx | 4 - .../ToggleButtonShimDescription.md | 0 .../ToggleButtonShim/index.stories.tsx | 18 - .../react-button-shim-v8-v9/tsconfig.json | 25 - .../react-button-shim-v8-v9/tsconfig.lib.json | 22 - .../tsconfig.spec.json | 9 - .../react-menu-shim-v8-v9/.babelrc.json | 4 - .../react-menu-shim-v8-v9/.eslintrc.json | 4 - .../react-menu-shim-v8-v9/.npmignore | 29 - .../react-menu-shim-v8-v9/.storybook/main.js | 14 - .../.storybook/preview.js | 7 - .../.storybook/tsconfig.json | 10 - .../react-menu-shim-v8-v9/LICENSE | 15 - .../react-menu-shim-v8-v9/README.md | 5 - .../react-menu-shim-v8-v9/Spec.md | 63 - .../config/api-extractor.json | 10 - .../react-menu-shim-v8-v9/config/tests.js | 1 - .../etc/react-menu-shim-v8-v9.api.md | 33 - .../react-menu-shim-v8-v9/jest.config.js | 21 - .../react-menu-shim-v8-v9/just.config.ts | 3 - .../react-menu-shim-v8-v9/package.json | 53 - .../react-menu-shim-v8-v9/src/MenuShim.ts | 1 - .../src/components/MenuShim/MenuShim.tsx | 70 -- .../src/components/MenuShim/index.ts | 1 - .../react-menu-shim-v8-v9/src/index.ts | 2 - .../src/shimMenuProps.tsx | 38 - .../MenuShimV8V9/MenuShimBestPractices.md | 5 - .../MenuShimV8V9/MenuShimDefault.stories.tsx | 4 - .../MenuShimV8V9/MenuShimDescription.md | 0 .../stories/MenuShimV8V9/index.stories.tsx | 18 - .../react-menu-shim-v8-v9/tsconfig.json | 25 - .../react-menu-shim-v8-v9/tsconfig.lib.json | 22 - .../react-menu-shim-v8-v9/tsconfig.spec.json | 9 - .../react-stack-shim-v8-v9/.babelrc.json | 4 - .../react-stack-shim-v8-v9/.eslintrc.json | 4 - .../react-stack-shim-v8-v9/.npmignore | 29 - .../react-stack-shim-v8-v9/.storybook/main.js | 14 - .../.storybook/preview.js | 7 - .../.storybook/tsconfig.json | 10 - .../react-stack-shim-v8-v9/LICENSE | 15 - .../react-stack-shim-v8-v9/README.md | 5 - .../react-stack-shim-v8-v9/Spec.md | 63 - .../config/api-extractor.json | 10 - .../react-stack-shim-v8-v9/config/tests.js | 1 - .../etc/react-stack-shim-v8-v9.api.md | 18 - .../react-stack-shim-v8-v9/jest.config.js | 21 - .../react-stack-shim-v8-v9/just.config.ts | 3 - .../react-stack-shim-v8-v9/package.json | 52 - .../src/StackItemShim.ts | 1 - .../react-stack-shim-v8-v9/src/StackShim.ts | 1 - .../StackItemShim/StackItemShim.test.tsx | 12 - .../StackItemShim/StackItemShim.tsx | 161 --- .../__snapshots__/StackItemShim.test.tsx.snap | 11 - .../src/components/StackItemShim/index.ts | 1 - .../components/StackShim/StackShim.test.tsx | 11 - .../src/components/StackShim/StackShim.tsx | 303 ----- .../__snapshots__/StackShim.test.tsx.snap | 11 - .../src/components/StackShim/index.ts | 1 - .../react-stack-shim-v8-v9/src/index.ts | 2 - .../react-stack-shim-v8-v9/src/stackUtils.ts | 185 --- .../StackItemShimBestPractices.md | 5 - .../StackItemShimDefault.stories.tsx | 4 - .../StackItemShim/StackItemShimDescription.md | 0 .../stories/StackItemShim/index.stories.tsx | 18 - .../StackShimV8V9/StackShimBestPractices.md | 5 - .../StackShimDefault.stories.tsx | 4 - .../StackShimV8V9/StackShimDescription.md | 0 .../stories/StackShimV8V9/index.stories.tsx | 18 - .../react-stack-shim-v8-v9/tsconfig.json | 25 - .../react-stack-shim-v8-v9/tsconfig.lib.json | 22 - .../react-stack-shim-v8-v9/tsconfig.spec.json | 9 - .../react-theme-shim-v8-v9/.babelrc.json | 4 - .../react-theme-shim-v8-v9/.eslintrc.json | 4 - .../react-theme-shim-v8-v9/.npmignore | 29 - .../react-theme-shim-v8-v9/.storybook/main.js | 14 - .../.storybook/preview.js | 7 - .../.storybook/tsconfig.json | 10 - .../react-theme-shim-v8-v9/LICENSE | 15 - .../react-theme-shim-v8-v9/README.md | 5 - .../react-theme-shim-v8-v9/Spec.md | 63 - .../config/api-extractor.json | 10 - .../react-theme-shim-v8-v9/config/tests.js | 1 - .../etc/react-theme-shim-v8-v9.api.md | 158 --- .../react-theme-shim-v8-v9/jest.config.js | 21 - .../react-theme-shim-v8-v9/just.config.ts | 3 - .../react-theme-shim-v8-v9/package.json | 54 - .../react-theme-shim-v8-v9/src/index.ts | 30 - .../src/themeDuplicates.ts | 1073 ----------------- .../react-theme-shim-v8-v9/src/v8ThemeShim.ts | 346 ------ .../src/v9BrandVariantsShim.ts | 76 -- .../react-theme-shim-v8-v9/src/v9ThemeShim.ts | 200 --- .../react-theme-shim-v8-v9/tsconfig.json | 25 - .../react-theme-shim-v8-v9/tsconfig.lib.json | 22 - .../react-theme-shim-v8-v9/tsconfig.spec.json | 9 - tsconfig.base.json | 4 - workspace.json | 28 - 185 files changed, 4753 deletions(-) delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/.babelrc.json delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/.eslintrc.json delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/.npmignore delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/.storybook/main.js delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/.storybook/preview.js delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/.storybook/tsconfig.json delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/LICENSE delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/README.md delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/Spec.md delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/config/api-extractor.json delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/config/tests.js delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/etc/react-button-shim-v8-v9.api.md delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/jest.config.js delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/just.config.ts delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/package.json delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/ActionButtonShim.ts delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/ButtonShim.ts delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/CommandButtonShim.ts delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/CompoundButtonShim.ts delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/DefaultButtonShim.ts delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/MenuButtonShim.ts delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/PrimaryButtonShim.ts delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/ToggleButtonShim.ts delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/ActionButtonShim.test.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/ActionButtonShim.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/__snapshots__/ActionButtonShim.test.tsx.snap delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/index.ts delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/ButtonShim.test.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/ButtonShim.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/__snapshots__/ButtonShim.test.tsx.snap delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/index.ts delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/CommandButtonShim.test.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/CommandButtonShim.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/__snapshots__/CommandButtonShim.test.tsx.snap delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/index.ts delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/CompoundButtonShim.test.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/CompoundButtonShim.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/__snapshots__/CompoundButtonShim.test.tsx.snap delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/index.ts delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/DefaultButtonShim.test.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/DefaultButtonShim.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/__snapshots__/DefaultButtonShim.test.tsx.snap delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/index.ts delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/MenuButtonShim.test.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/MenuButtonShim.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/__snapshots__/MenuButtonShim.test.tsx.snap delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/index.ts delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/PrimaryButtonShim.test.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/PrimaryButtonShim.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/__snapshots__/PrimaryButtonShim.test.tsx.snap delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/index.ts delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/ToggleButtonShim.test.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/ToggleButtonShim.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/__snapshots__/ToggleButtonShim.test.tsx.snap delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/index.ts delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/index.ts delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/shimButtonProps.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/ActionButtonShimBestPractices.md delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/ActionButtonShimDefault.stories.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/ActionButtonShimDescription.md delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/index.stories.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/ButtonShimBestPractices.md delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/ButtonShimDefault.stories.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/ButtonShimDescription.md delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/index.stories.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/CommandButtonShimBestPractices.md delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/CommandButtonShimDefault.stories.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/CommandButtonShimDescription.md delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/index.stories.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/CompoundButtonShimBestPractices.md delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/CompoundButtonShimDefault.stories.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/CompoundButtonShimDescription.md delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/index.stories.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/DefaultButtonShimBestPractices.md delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/DefaultButtonShimDefault.stories.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/DefaultButtonShimDescription.md delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/index.stories.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/MenuButtonShimBestPractices.md delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/MenuButtonShimDefault.stories.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/MenuButtonShimDescription.md delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/index.stories.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/PrimaryButtonShimBestPractices.md delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/PrimaryButtonShimDefault.stories.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/PrimaryButtonShimDescription.md delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/index.stories.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/ToggleButtonShimBestPractices.md delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/ToggleButtonShimDefault.stories.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/ToggleButtonShimDescription.md delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/index.stories.tsx delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/tsconfig.json delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/tsconfig.lib.json delete mode 100644 packages/react-components-migration/react-button-shim-v8-v9/tsconfig.spec.json delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/.babelrc.json delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/.eslintrc.json delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/.npmignore delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/.storybook/main.js delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/.storybook/preview.js delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/.storybook/tsconfig.json delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/LICENSE delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/README.md delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/Spec.md delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/config/api-extractor.json delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/config/tests.js delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/etc/react-menu-shim-v8-v9.api.md delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/jest.config.js delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/just.config.ts delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/package.json delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/src/MenuShim.ts delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/src/components/MenuShim/MenuShim.tsx delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/src/components/MenuShim/index.ts delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/src/index.ts delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/src/shimMenuProps.tsx delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/MenuShimBestPractices.md delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/MenuShimDefault.stories.tsx delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/MenuShimDescription.md delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/index.stories.tsx delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.json delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.lib.json delete mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.spec.json delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/.babelrc.json delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/.eslintrc.json delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/.npmignore delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/.storybook/main.js delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/.storybook/preview.js delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/.storybook/tsconfig.json delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/LICENSE delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/README.md delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/Spec.md delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/config/api-extractor.json delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/config/tests.js delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/etc/react-stack-shim-v8-v9.api.md delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/jest.config.js delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/just.config.ts delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/package.json delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/src/StackItemShim.ts delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/src/StackShim.ts delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/StackItemShim.test.tsx delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/StackItemShim.tsx delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/__snapshots__/StackItemShim.test.tsx.snap delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/index.ts delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/StackShim.test.tsx delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/StackShim.tsx delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/__snapshots__/StackShim.test.tsx.snap delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/index.ts delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/src/index.ts delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/src/stackUtils.ts delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/StackItemShimBestPractices.md delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/StackItemShimDefault.stories.tsx delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/StackItemShimDescription.md delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/index.stories.tsx delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/StackShimBestPractices.md delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/StackShimDefault.stories.tsx delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/StackShimDescription.md delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/index.stories.tsx delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.json delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.lib.json delete mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.spec.json delete mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/.babelrc.json delete mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/.eslintrc.json delete mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/.npmignore delete mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/.storybook/main.js delete mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/.storybook/preview.js delete mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/.storybook/tsconfig.json delete mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/LICENSE delete mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/README.md delete mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/Spec.md delete mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/config/api-extractor.json delete mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/config/tests.js delete mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/etc/react-theme-shim-v8-v9.api.md delete mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/jest.config.js delete mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/just.config.ts delete mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/package.json delete mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/src/index.ts delete mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/src/themeDuplicates.ts delete mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/src/v8ThemeShim.ts delete mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/src/v9BrandVariantsShim.ts delete mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/src/v9ThemeShim.ts delete mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.json delete mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.lib.json delete mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.spec.json diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 649642a4a47540..49a1f52e38f489 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -172,10 +172,6 @@ packages/react-components/babel-preset-global-context @microsoft/teams-prg packages/react-components/react-table @microsoft/teams-prg packages/react-components/react-progress @microsoft/cxe-red @tomi-msft packages/react-components/react-persona @microsoft/cxe-red @sopranopillow -packages/react-components-migration/react-button-shim-v8-v9 @microsoft/cxe-coastal -packages/react-components-migration/react-menu-shim-v8-v9 @microsoft/cxe-coastal -packages/react-components-migration/react-stack-shim-v8-v9 @microsoft/cxe-coastal -packages/react-components-migration/react-theme-shim-v8-v9 @microsoft/cxe-coastal packages/react-components/react-avatar-context @microsoft/teams-prg packages/react-components/react-infobutton @microsoft/cxe-red @sopranopillow # <%= NX-CODEOWNER-PLACEHOLDER %> diff --git a/lerna.json b/lerna.json index 008c48e367af79..d59304546a4557 100644 --- a/lerna.json +++ b/lerna.json @@ -3,7 +3,6 @@ "apps/*", "packages/*", "packages/react-components/*", - "packages/react-components-migration/*", "scripts", "packages/fluentui/*", "tools", diff --git a/package.json b/package.json index b228f0ce812d22..cf21f08a591244 100644 --- a/package.json +++ b/package.json @@ -318,7 +318,6 @@ "packages/*", "packages/fluentui/*", "packages/react-components/*", - "packages/react-components-migration/*", "scripts", "tools", "typings" @@ -346,7 +345,6 @@ "apps/![react-18-tests-v8][react-18-tests-v9]/package.json", "packages/!(web-components)/package.json", "packages/react-components/*/package.json", - "packages/react-components-migration/*/package.json", "packages/fluentui/*/package.json", "scripts/package.json" ], diff --git a/packages/react-components-migration/react-button-shim-v8-v9/.babelrc.json b/packages/react-components-migration/react-button-shim-v8-v9/.babelrc.json deleted file mode 100644 index 40e01373083cee..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/.babelrc.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["@griffel"], - "plugins": ["annotate-pure-calls", "@babel/transform-react-pure-annotations"] -} diff --git a/packages/react-components-migration/react-button-shim-v8-v9/.eslintrc.json b/packages/react-components-migration/react-button-shim-v8-v9/.eslintrc.json deleted file mode 100644 index ceea884c70dccc..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/.eslintrc.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "extends": ["plugin:@fluentui/eslint-plugin/react"], - "root": true -} diff --git a/packages/react-components-migration/react-button-shim-v8-v9/.npmignore b/packages/react-components-migration/react-button-shim-v8-v9/.npmignore deleted file mode 100644 index 52d2a7273a151d..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/.npmignore +++ /dev/null @@ -1,29 +0,0 @@ -.storybook/ -.vscode/ -bundle-size/ -config/ -coverage/ -e2e/ -etc/ -node_modules/ -src/ -dist/types/ -temp/ -__fixtures__ -__mocks__ -__tests__ - -*.api.json -*.log -*.spec.* -*.stories.* -*.test.* -*.yml - -# config files -*config.* -*rc.* -.editorconfig -.eslint* -.git* -.prettierignore diff --git a/packages/react-components-migration/react-button-shim-v8-v9/.storybook/main.js b/packages/react-components-migration/react-button-shim-v8-v9/.storybook/main.js deleted file mode 100644 index f57cfd09509e78..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/.storybook/main.js +++ /dev/null @@ -1,14 +0,0 @@ -const rootMain = require('../../../../.storybook/main'); - -module.exports = /** @type {Omit} */ ({ - ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], - addons: [...rootMain.addons], - webpackFinal: (config, options) => { - const localConfig = { ...rootMain.webpackFinal(config, options) }; - - // add your own webpack tweaks if needed - - return localConfig; - }, -}); diff --git a/packages/react-components-migration/react-button-shim-v8-v9/.storybook/preview.js b/packages/react-components-migration/react-button-shim-v8-v9/.storybook/preview.js deleted file mode 100644 index 1939500a3d18c7..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/.storybook/preview.js +++ /dev/null @@ -1,7 +0,0 @@ -import * as rootPreview from '../../../../.storybook/preview'; - -/** @type {typeof rootPreview.decorators} */ -export const decorators = [...rootPreview.decorators]; - -/** @type {typeof rootPreview.parameters} */ -export const parameters = { ...rootPreview.parameters }; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/.storybook/tsconfig.json b/packages/react-components-migration/react-button-shim-v8-v9/.storybook/tsconfig.json deleted file mode 100644 index f9f60e1234ed49..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/.storybook/tsconfig.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "outDir": "", - "allowJs": true, - "checkJs": true, - "types": ["static-assets", "environment", "storybook__addons"] - }, - "include": ["../src/**/*.stories.ts", "../src/**/*.stories.tsx", "*.js"] -} diff --git a/packages/react-components-migration/react-button-shim-v8-v9/LICENSE b/packages/react-components-migration/react-button-shim-v8-v9/LICENSE deleted file mode 100644 index debd57baa7cc11..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/LICENSE +++ /dev/null @@ -1,15 +0,0 @@ -@fluentui/react-button-shim-v8-v9 - -Copyright (c) Microsoft Corporation - -All rights reserved. - -MIT License - -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - -Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license diff --git a/packages/react-components-migration/react-button-shim-v8-v9/README.md b/packages/react-components-migration/react-button-shim-v8-v9/README.md deleted file mode 100644 index 144ab8fea3b87e..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# @fluentui/react-button-shim-v8-v9 - -**React Button Shim V8 V9 components for [Fluent UI React](https://react.fluentui.dev/)** - -These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release. diff --git a/packages/react-components-migration/react-button-shim-v8-v9/Spec.md b/packages/react-components-migration/react-button-shim-v8-v9/Spec.md deleted file mode 100644 index b3a98ccb681f73..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/Spec.md +++ /dev/null @@ -1,63 +0,0 @@ -# @fluentui/react-button-shim-v8-v9 Spec - -## Background - -_Description and use cases of this component_ - -## Prior Art - -_Include background research done for this component_ - -- _Link to Open UI research_ -- _Link to comparison of v7 and v0_ -- _Link to GitHub epic issue for the converged component_ - -## Sample Code - -_Provide some representative example code that uses the proposed API for the component_ - -## Variants - -_Describe visual or functional variants of this control, if applicable. For example, a slider could have a 2D variant._ - -## API - -_List the **Props** and **Slots** proposed for the component. Ideally this would just be a link to the component's `.types.ts` file_ - -## Structure - -- _**Public**_ -- _**Internal**_ -- _**DOM** - how the component will be rendered as HTML elements_ - -## Migration - -_Describe what will need to be done to upgrade from the existing implementations:_ - -- _Migration from v8_ -- _Migration from v0_ - -## Behaviors - -_Explain how the component will behave in use, including:_ - -- _Component States_ -- _Interaction_ - - _Keyboard_ - - _Cursor_ - - _Touch_ - - _Screen readers_ - -## Accessibility - -Base accessibility information is included in the design document. After the spec is filled and review, outcomes from it need to be communicated to design and incorporated in the design document. - -- Decide whether to use **native element** or folow **ARIA** and provide reasons -- Identify the **[ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/) pattern** and, if the component is listed there, follow its specification as possible. -- Identify accessibility **variants**, the `role` ([ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)) of the component, its `slots` and `aria-*` props. -- Describe the **keyboard navigation**: Tab Oder and Arrow Key Navigation. Describe any other keyboard **shortcuts** used -- Specify texts for **state change announcements** - [ARIA live regions - ](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) (number of available items in dropdown, error messages, confirmations, ...) -- Identify UI parts that appear on **hover or focus** and specify keyboard and screen reader interaction with them -- List cases when **focus** needs to be **trapped** in sections of the UI (for dialogs and popups or for hierarchical navigation) -- List cases when **focus** needs to be **moved programatically** (if parts of the UI are appearing/disappearing or other cases) diff --git a/packages/react-components-migration/react-button-shim-v8-v9/config/api-extractor.json b/packages/react-components-migration/react-button-shim-v8-v9/config/api-extractor.json deleted file mode 100644 index a8c3d3240d101e..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/config/api-extractor.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", - "extends": "@fluentui/scripts/api-extractor/api-extractor.common.v-next.json", - "dtsRollup": { - "enabled": true, - "untrimmedFilePath": "", - "publicTrimmedFilePath": "/dist/index.d.ts" - }, - "mainEntryPointFilePath": "/../../../dist/out-tsc/types/packages/react-components-migration//src/index.d.ts" -} diff --git a/packages/react-components-migration/react-button-shim-v8-v9/config/tests.js b/packages/react-components-migration/react-button-shim-v8-v9/config/tests.js deleted file mode 100644 index 2e211ae9e21420..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/config/tests.js +++ /dev/null @@ -1 +0,0 @@ -/** Jest test setup file. */ diff --git a/packages/react-components-migration/react-button-shim-v8-v9/etc/react-button-shim-v8-v9.api.md b/packages/react-components-migration/react-button-shim-v8-v9/etc/react-button-shim-v8-v9.api.md deleted file mode 100644 index 9b49db6d294a35..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/etc/react-button-shim-v8-v9.api.md +++ /dev/null @@ -1,40 +0,0 @@ -## API Report File for "@fluentui/react-button-shim-v8-v9" - -> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). - -```ts - -import { ButtonProps } from '@fluentui/react-components'; -import { IBaseButtonProps } from '@fluentui/react'; -import { IButtonProps } from '@fluentui/react'; -import * as React_2 from 'react'; - -// @public -const ActionButtonShim: React_2.ForwardRefExoticComponent>; -export { ActionButtonShim } -export { ActionButtonShim as CommandButtonShim } - -// @public (undocumented) -export const ButtonShim: React_2.ForwardRefExoticComponent>; - -// @public -export const CompoundButtonShim: React_2.ForwardRefExoticComponent>; - -// @public -export const DefaultButtonShim: React_2.ForwardRefExoticComponent>; - -// @public (undocumented) -export const MenuButtonShim: React_2.ForwardRefExoticComponent>; - -// @public -export const PrimaryButtonShim: React_2.ForwardRefExoticComponent>; - -// @public (undocumented) -export const shimButtonProps: (props: IBaseButtonProps & React_2.RefAttributes) => ButtonProps; - -// @public -export const ToggleButtonShim: React_2.ForwardRefExoticComponent>; - -// (No @packageDocumentation comment for this package) - -``` diff --git a/packages/react-components-migration/react-button-shim-v8-v9/jest.config.js b/packages/react-components-migration/react-button-shim-v8-v9/jest.config.js deleted file mode 100644 index 66b3a4a094d1f5..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/jest.config.js +++ /dev/null @@ -1,21 +0,0 @@ -// @ts-check - -/** - * @type {import('@jest/types').Config.InitialOptions} - */ -module.exports = { - displayName: 'react-button-shim-v8-v9', - preset: '../../../jest.preset.js', - globals: { - 'ts-jest': { - tsConfig: '/tsconfig.spec.json', - diagnostics: false, - }, - }, - transform: { - '^.+\\.tsx?$': 'ts-jest', - }, - coverageDirectory: './coverage', - setupFilesAfterEnv: ['./config/tests.js'], - snapshotSerializers: ['@griffel/jest-serializer'], -}; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/just.config.ts b/packages/react-components-migration/react-button-shim-v8-v9/just.config.ts deleted file mode 100644 index bcc7d9d264037c..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/just.config.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { preset } from '@fluentui/scripts'; - -preset(); diff --git a/packages/react-components-migration/react-button-shim-v8-v9/package.json b/packages/react-components-migration/react-button-shim-v8-v9/package.json deleted file mode 100644 index ab05c2e3b97d16..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/package.json +++ /dev/null @@ -1,54 +0,0 @@ -{ - "name": "@fluentui/react-button-shim-v8-v9", - "version": "9.0.0-alpha.0", - "private": true, - "description": "Fluent UI React Button shim to help migration from v8 to v9", - "main": "lib-commonjs/index.js", - "module": "lib/index.js", - "typings": "dist/index.d.ts", - "sideEffects": false, - "repository": { - "type": "git", - "url": "https://github.com/microsoft/fluentui" - }, - "license": "MIT", - "scripts": { - "build": "just-scripts build", - "clean": "just-scripts clean", - "code-style": "just-scripts code-style", - "just": "just-scripts", - "lint": "just-scripts lint", - "test": "jest --passWithNoTests", - "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor", - "type-check": "tsc -b tsconfig.json", - "storybook": "start-storybook", - "start": "yarn storybook" - }, - "devDependencies": { - "@fluentui/eslint-plugin": "*", - "@fluentui/react-conformance": "*", - "@fluentui/react-conformance-griffel": "9.0.0-beta.14", - "@fluentui/scripts": "^1.0.0" - }, - "dependencies": { - "@fluentui/react": "^8.97.2", - "@fluentui/react-components": "^9.4.0", - "@fluentui/react-menu-shim-v8-v9": "9.0.0-alpha.0", - "@fluentui/react-theme": "^9.1.0", - "@fluentui/react-utilities": "^9.1.0", - "@griffel/react": "^1.3.0", - "tslib": "^2.1.0" - }, - "peerDependencies": { - "@types/react": ">=16.8.0 <18.0.0", - "@types/react-dom": ">=16.8.0 <18.0.0", - "react": ">=16.8.0 <18.0.0", - "react-dom": ">=16.8.0 <18.0.0" - }, - "beachball": { - "disallowedChangeTypes": [ - "major", - "prerelease" - ] - } -} diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/ActionButtonShim.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/ActionButtonShim.ts deleted file mode 100644 index 6bcc53049c2084..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/ActionButtonShim.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components/ActionButtonShim/index'; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/ButtonShim.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/ButtonShim.ts deleted file mode 100644 index f499a468cf2a1b..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/ButtonShim.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components/ButtonShim/index'; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/CommandButtonShim.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/CommandButtonShim.ts deleted file mode 100644 index 619b1006ed5aaf..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/CommandButtonShim.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components/CommandButtonShim/index'; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/CompoundButtonShim.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/CompoundButtonShim.ts deleted file mode 100644 index 490cf65d2148cf..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/CompoundButtonShim.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components/CompoundButtonShim/index'; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/DefaultButtonShim.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/DefaultButtonShim.ts deleted file mode 100644 index 0b6f2b43fe53a8..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/DefaultButtonShim.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components/DefaultButtonShim/index'; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/MenuButtonShim.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/MenuButtonShim.ts deleted file mode 100644 index 3a280031f92cc1..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/MenuButtonShim.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components/MenuButtonShim/index'; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/PrimaryButtonShim.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/PrimaryButtonShim.ts deleted file mode 100644 index 990fee3c0e36c8..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/PrimaryButtonShim.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components/PrimaryButtonShim/index'; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/ToggleButtonShim.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/ToggleButtonShim.ts deleted file mode 100644 index e1d5fa45ed5cdd..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/ToggleButtonShim.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components/ToggleButtonShim/index'; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/ActionButtonShim.test.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/ActionButtonShim.test.tsx deleted file mode 100644 index 20378cc4a5ac19..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/ActionButtonShim.test.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { ActionButtonShim } from './ActionButtonShim'; - -describe('ActionButtonShim', () => { - // TODO add more tests here, and create visual regression tests in /apps/vr-tests - - it('renders a default state', () => { - const result = render(Default ActionButtonShim); - expect(result.container).toMatchSnapshot(); - }); -}); diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/ActionButtonShim.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/ActionButtonShim.tsx deleted file mode 100644 index 52dc8c978d9935..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/ActionButtonShim.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; - -import { IButtonProps } from '@fluentui/react'; - -import { Button } from '@fluentui/react-components'; - -import { shimButtonProps } from '../../shimButtonProps'; - -/** - * Shims a v8 ActionButton to render a v9 Button - */ -export const ActionButtonShim: React.ForwardRefExoticComponent< - IButtonProps & React.RefAttributes -> = React.forwardRef((props, _ref) => { - const variantProps = { - ...props, - variantClassName: 'ms-Button--action ms-Button--command', - }; - - const shimProps = shimButtonProps(variantProps); - - return - -`; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/index.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/index.ts deleted file mode 100644 index 9115c8927a96b4..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ActionButtonShim'; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/ButtonShim.test.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/ButtonShim.test.tsx deleted file mode 100644 index 7df19b24d82e63..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/ButtonShim.test.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { ButtonShim } from './ButtonShim'; - -describe('ButtonShim', () => { - // TODO add more tests here, and create visual regression tests in /apps/vr-tests - - it('renders a default state', () => { - const result = render(Default ButtonShim); - expect(result.container).toMatchSnapshot(); - }); -}); diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/ButtonShim.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/ButtonShim.tsx deleted file mode 100644 index eff0b2b957c51a..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/ButtonShim.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import * as React from 'react'; - -import { IBaseButtonProps } from '@fluentui/react'; - -import { Button } from '@fluentui/react-components'; - -import { shimButtonProps } from '../../shimButtonProps'; -import { ToggleButtonShim } from '../ToggleButtonShim'; -import { CompoundButtonShim } from '../CompoundButtonShim'; - -export const ButtonShim: React.ForwardRefExoticComponent< - IBaseButtonProps & React.RefAttributes -> = React.forwardRef((props, _ref) => { - const shimProps = shimButtonProps(props); - - if (props.toggle) { - return {props.children}; - } - if (props.secondaryText || props.onRenderDescription?.(props)) { - return ; - } - - return - -`; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/index.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/index.ts deleted file mode 100644 index fb6ee7d2957ab6..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ButtonShim'; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/CommandButtonShim.test.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/CommandButtonShim.test.tsx deleted file mode 100644 index 083c2f756e5792..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/CommandButtonShim.test.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { CommandButtonShim } from './CommandButtonShim'; - -describe('CommandButtonShim', () => { - // TODO add more tests here, and create visual regression tests in /apps/vr-tests - - it('renders a default state', () => { - const result = render(Default CommandButtonShim); - expect(result.container).toMatchSnapshot(); - }); -}); diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/CommandButtonShim.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/CommandButtonShim.tsx deleted file mode 100644 index f402200e5eb811..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/CommandButtonShim.tsx +++ /dev/null @@ -1,4 +0,0 @@ -/** - * Shims v8 CommandButtonShim to render a v9 Button - */ -export { ActionButtonShim as CommandButtonShim } from '../ActionButtonShim'; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/__snapshots__/CommandButtonShim.test.tsx.snap b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/__snapshots__/CommandButtonShim.test.tsx.snap deleted file mode 100644 index 601bfe5ed44490..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/__snapshots__/CommandButtonShim.test.tsx.snap +++ /dev/null @@ -1,12 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`CommandButtonShim renders a default state 1`] = ` -
- -
-`; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/index.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/index.ts deleted file mode 100644 index e6274fbcee40b9..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './CommandButtonShim'; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/CompoundButtonShim.test.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/CompoundButtonShim.test.tsx deleted file mode 100644 index 770fa3f37dbf16..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/CompoundButtonShim.test.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { CompoundButtonShim } from './CompoundButtonShim'; - -describe('CompoundButtonShim', () => { - // TODO add more tests here, and create visual regression tests in /apps/vr-tests - - it('renders a default state', () => { - const result = render(Default CompoundButtonShim); - expect(result.container).toMatchSnapshot(); - }); -}); diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/CompoundButtonShim.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/CompoundButtonShim.tsx deleted file mode 100644 index f016a8eca15d39..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/CompoundButtonShim.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import * as React from 'react'; - -import { IButtonProps } from '@fluentui/react'; - -import { CompoundButton, CompoundButtonProps } from '@fluentui/react-components'; - -import { shimButtonProps } from '../../shimButtonProps'; - -/** - * Shims v8 CompoundButton to render a v9 CompoundButton - */ -export const CompoundButtonShim: React.ForwardRefExoticComponent< - IButtonProps & React.RefAttributes -> = React.forwardRef((props, _ref) => { - const variantProps = { - ...props, - variantClassName: props.primary ? 'ms-Button--compoundPrimary' : 'ms-Button--compound', - }; - - const shimProps: CompoundButtonProps = { - ...shimButtonProps(variantProps), - secondaryContent: props.secondaryText || props.onRenderDescription?.(props), - }; - - return )} {...shimProps} />; -}); diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/__snapshots__/CompoundButtonShim.test.tsx.snap b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/__snapshots__/CompoundButtonShim.test.tsx.snap deleted file mode 100644 index 076710fb2d006b..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/__snapshots__/CompoundButtonShim.test.tsx.snap +++ /dev/null @@ -1,16 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`CompoundButtonShim renders a default state 1`] = ` -
- -
-`; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/index.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/index.ts deleted file mode 100644 index 9107a36bd8351c..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './CompoundButtonShim'; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/DefaultButtonShim.test.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/DefaultButtonShim.test.tsx deleted file mode 100644 index c06edd9cc44320..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/DefaultButtonShim.test.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { DefaultButtonShim } from './DefaultButtonShim'; - -describe('DefaultButtonShim', () => { - // TODO add more tests here, and create visual regression tests in /apps/vr-tests - - it('renders a default state', () => { - const result = render(Default DefaultButtonShim); - expect(result.container).toMatchSnapshot(); - }); -}); diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/DefaultButtonShim.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/DefaultButtonShim.tsx deleted file mode 100644 index e2d463e2d07da2..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/DefaultButtonShim.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from 'react'; - -import { IButtonProps } from '@fluentui/react'; - -import { ButtonShim } from '../ButtonShim'; - -/** - * Shims a v8 DefaultButton to render a v9 Button - */ -export const DefaultButtonShim: React.ForwardRefExoticComponent< - IButtonProps & React.RefAttributes -> = React.forwardRef((props, _ref) => { - return ; -}); diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/__snapshots__/DefaultButtonShim.test.tsx.snap b/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/__snapshots__/DefaultButtonShim.test.tsx.snap deleted file mode 100644 index e3d9e9ecdc11ba..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/__snapshots__/DefaultButtonShim.test.tsx.snap +++ /dev/null @@ -1,12 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`DefaultButtonShim renders a default state 1`] = ` -
- -
-`; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/index.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/index.ts deleted file mode 100644 index 795f15f4ce154f..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './DefaultButtonShim'; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/MenuButtonShim.test.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/MenuButtonShim.test.tsx deleted file mode 100644 index f0e5198d43dd97..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/MenuButtonShim.test.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { MenuButtonShim } from './MenuButtonShim'; - -describe('MenuButtonShim', () => { - // TODO add more tests here, and create visual regression tests in /apps/vr-tests - - it('renders a default state', () => { - const result = render(Default MenuButtonShim); - expect(result.container).toMatchSnapshot(); - }); -}); diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/MenuButtonShim.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/MenuButtonShim.tsx deleted file mode 100644 index 79e847f4e3c5be..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/MenuButtonShim.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import * as React from 'react'; - -import { IButtonProps } from '@fluentui/react'; -import { MenuButton, MenuButtonProps, Menu, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-components'; -import { MenuItemShim, shimMenuProps } from '@fluentui/react-menu-shim-v8-v9'; - -import { shimButtonProps } from '../../shimButtonProps'; - -export const MenuButtonShim: React.ForwardRefExoticComponent< - IButtonProps & React.RefAttributes -> = React.forwardRef((props, _ref) => { - const variantProps = { - ...props, - variantClassName: props.primary ? 'ms-Button--primary' : 'ms-Button--default', - }; - - const shimProps: MenuButtonProps = { - ...shimButtonProps(variantProps), - }; - - const shimmedMenuProps = props.menuProps ? shimMenuProps(props.menuProps) : {}; - - return ( - - - - - - - {props.menuProps?.items.map(item => ( - // key is added through item spread - // eslint-disable-next-line react/jsx-key - - ))} - - - - ); -}); diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/__snapshots__/MenuButtonShim.test.tsx.snap b/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/__snapshots__/MenuButtonShim.test.tsx.snap deleted file mode 100644 index 789318bfa17431..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/__snapshots__/MenuButtonShim.test.tsx.snap +++ /dev/null @@ -1,35 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`MenuButtonShim renders a default state 1`] = ` -
- -
-`; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/index.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/index.ts deleted file mode 100644 index 7c6fb301b3a0fc..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './MenuButtonShim'; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/PrimaryButtonShim.test.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/PrimaryButtonShim.test.tsx deleted file mode 100644 index 41dbd3994e4443..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/PrimaryButtonShim.test.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { PrimaryButtonShim } from './PrimaryButtonShim'; - -describe('PrimaryButtonShim', () => { - // TODO add more tests here, and create visual regression tests in /apps/vr-tests - - it('renders a default state', () => { - const result = render(Default PrimaryButtonShim); - expect(result.container).toMatchSnapshot(); - }); -}); diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/PrimaryButtonShim.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/PrimaryButtonShim.tsx deleted file mode 100644 index 0bde729d568a97..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/PrimaryButtonShim.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react'; - -import { IButtonProps } from '@fluentui/react'; -import { ButtonShim } from '../ButtonShim'; - -/** - * Shims v8 PrimaryButton to render a v9 Button - */ -export const PrimaryButtonShim: React.ForwardRefExoticComponent< - IButtonProps & React.RefAttributes -> = React.forwardRef((props, _ref) => { - return ; -}); diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/__snapshots__/PrimaryButtonShim.test.tsx.snap b/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/__snapshots__/PrimaryButtonShim.test.tsx.snap deleted file mode 100644 index 22a3f71cb00058..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/__snapshots__/PrimaryButtonShim.test.tsx.snap +++ /dev/null @@ -1,12 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`PrimaryButtonShim renders a default state 1`] = ` -
- -
-`; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/index.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/index.ts deleted file mode 100644 index af54b04c64f11d..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './PrimaryButtonShim'; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/ToggleButtonShim.test.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/ToggleButtonShim.test.tsx deleted file mode 100644 index 25a3212eb2986b..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/ToggleButtonShim.test.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { ToggleButtonShim } from './ToggleButtonShim'; - -describe('ToggleButtonShim', () => { - // TODO add more tests here, and create visual regression tests in /apps/vr-tests - - it('renders a default state', () => { - const result = render(Default ToggleButtonShim); - expect(result.container).toMatchSnapshot(); - }); -}); diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/ToggleButtonShim.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/ToggleButtonShim.tsx deleted file mode 100644 index 6ac5aae94f388f..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/ToggleButtonShim.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from 'react'; - -import { IButtonProps } from '@fluentui/react'; - -import { ToggleButton, ToggleButtonProps } from '@fluentui/react-components'; - -import { shimButtonProps } from '../../shimButtonProps'; - -/** - * Shims v8 ToggleButton to render a v9 ToggleButton - */ -export const ToggleButtonShim: React.ForwardRefExoticComponent< - IButtonProps & React.RefAttributes -> = React.forwardRef((props, _ref) => { - const variantProps = { - ...props, - variantClassName: props.primary ? 'ms-Button--compoundPrimary' : 'ms-Button--compound', - }; - - const shimProps: ToggleButtonProps = { - ...shimButtonProps(variantProps), - checked: props.checked, - defaultChecked: props.defaultChecked, - }; - - return )} {...shimProps} />; -}); diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/__snapshots__/ToggleButtonShim.test.tsx.snap b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/__snapshots__/ToggleButtonShim.test.tsx.snap deleted file mode 100644 index 76036052584aab..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/__snapshots__/ToggleButtonShim.test.tsx.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ToggleButtonShim renders a default state 1`] = ` -
- -
-`; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/index.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/index.ts deleted file mode 100644 index e5fbe7af5b7215..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ToggleButtonShim'; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/index.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/index.ts deleted file mode 100644 index 25c94aff40254f..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -export { shimButtonProps } from './shimButtonProps'; -export { ActionButtonShim } from './ActionButtonShim'; -export { ButtonShim } from './ButtonShim'; -export { ToggleButtonShim } from './ToggleButtonShim'; -export { CommandButtonShim } from './CommandButtonShim'; -export { CompoundButtonShim } from './CompoundButtonShim'; -export { DefaultButtonShim } from './DefaultButtonShim'; -export { PrimaryButtonShim } from './PrimaryButtonShim'; -export { MenuButtonShim } from './MenuButtonShim'; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/shimButtonProps.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/shimButtonProps.tsx deleted file mode 100644 index eea1acdf42210d..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/shimButtonProps.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from 'react'; - -import { IBaseButtonProps, Icon } from '@fluentui/react'; - -import { ButtonProps } from '@fluentui/react-components'; - -export const shimButtonProps = (props: IBaseButtonProps & React.RefAttributes): ButtonProps => { - //TODO: Icon shim. This still renders the v8 icon. - const icon = props.onRenderIcon ? ( - props.onRenderIcon(props) - ) : props.iconProps ? ( - - ) : undefined; - - const variantClassName = props.variantClassName ?? props.primary ? 'ms-Button--primary' : 'ms-Button--default'; - const className = [props.baseClassName, variantClassName, props.className].filter(Boolean).join(' '); - - return { - // spread incoming props to propagate HTML properties not part of IBaseButtonProps - ...props, - appearance: props.primary ? 'primary' : undefined, - className: className, - disabled: props.disabled, - disabledFocusable: props.allowDisabledFocus, - 'aria-hidden': props.ariaHidden, - 'aria-label': props.ariaLabel, - icon, - key: props.key || props.uniqueId, - children: props.onRenderChildren - ? props.onRenderChildren(props) - : props.onRenderText - ? props.onRenderText(props) - : props.text || props.children, - } as ButtonProps; -}; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/ActionButtonShimBestPractices.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/ActionButtonShimBestPractices.md deleted file mode 100644 index 08ff8ddeeb5f86..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/ActionButtonShimBestPractices.md +++ /dev/null @@ -1,5 +0,0 @@ -## Best practices - -### Do - -### Don't diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/ActionButtonShimDefault.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/ActionButtonShimDefault.stories.tsx deleted file mode 100644 index 300c8d66f8c92b..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/ActionButtonShimDefault.stories.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import * as React from 'react'; -import { ActionButtonShim, ActionButtonShimProps } from '@fluentui/react-button-shim-v8-v9'; - -export const Default = (props: Partial) => ; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/ActionButtonShimDescription.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/ActionButtonShimDescription.md deleted file mode 100644 index e69de29bb2d1d6..00000000000000 diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/index.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/index.stories.tsx deleted file mode 100644 index e91fa4dbc00125..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/index.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { ActionButtonShim } from '@fluentui/react-button-shim-v8-v9'; - -import descriptionMd from './ActionButtonShimDescription.md'; -import bestPracticesMd from './ActionButtonShimBestPractices.md'; - -export { Default } from './ActionButtonShimDefault.stories'; - -export default { - title: 'Preview Components/ActionButtonShim', - component: ActionButtonShim, - parameters: { - docs: { - description: { - component: [descriptionMd, bestPracticesMd].join('\n'), - }, - }, - }, -}; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/ButtonShimBestPractices.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/ButtonShimBestPractices.md deleted file mode 100644 index 08ff8ddeeb5f86..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/ButtonShimBestPractices.md +++ /dev/null @@ -1,5 +0,0 @@ -## Best practices - -### Do - -### Don't diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/ButtonShimDefault.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/ButtonShimDefault.stories.tsx deleted file mode 100644 index c283c1df9df880..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/ButtonShimDefault.stories.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import * as React from 'react'; -import { ButtonShim, ButtonShimProps } from '@fluentui/react-button-shim-v8-v9'; - -export const Default = (props: Partial) => ; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/ButtonShimDescription.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/ButtonShimDescription.md deleted file mode 100644 index e69de29bb2d1d6..00000000000000 diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/index.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/index.stories.tsx deleted file mode 100644 index 271f30819cebf9..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/index.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { ButtonShim } from '@fluentui/react-button-shim-v8-v9'; - -import descriptionMd from './ButtonShimDescription.md'; -import bestPracticesMd from './ButtonShimBestPractices.md'; - -export { Default } from './ButtonShimDefault.stories'; - -export default { - title: 'Preview Components/ButtonShim', - component: ButtonShim, - parameters: { - docs: { - description: { - component: [descriptionMd, bestPracticesMd].join('\n'), - }, - }, - }, -}; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/CommandButtonShimBestPractices.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/CommandButtonShimBestPractices.md deleted file mode 100644 index 08ff8ddeeb5f86..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/CommandButtonShimBestPractices.md +++ /dev/null @@ -1,5 +0,0 @@ -## Best practices - -### Do - -### Don't diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/CommandButtonShimDefault.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/CommandButtonShimDefault.stories.tsx deleted file mode 100644 index e43a503e071ab6..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/CommandButtonShimDefault.stories.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import * as React from 'react'; -import { CommandButtonShim, CommandButtonShimProps } from '@fluentui/react-button-shim-v8-v9'; - -export const Default = (props: Partial) => ; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/CommandButtonShimDescription.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/CommandButtonShimDescription.md deleted file mode 100644 index e69de29bb2d1d6..00000000000000 diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/index.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/index.stories.tsx deleted file mode 100644 index 90bc13a7e83c8d..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/index.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { CommandButtonShim } from '@fluentui/react-button-shim-v8-v9'; - -import descriptionMd from './CommandButtonShimDescription.md'; -import bestPracticesMd from './CommandButtonShimBestPractices.md'; - -export { Default } from './CommandButtonShimDefault.stories'; - -export default { - title: 'Preview Components/CommandButtonShim', - component: CommandButtonShim, - parameters: { - docs: { - description: { - component: [descriptionMd, bestPracticesMd].join('\n'), - }, - }, - }, -}; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/CompoundButtonShimBestPractices.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/CompoundButtonShimBestPractices.md deleted file mode 100644 index 08ff8ddeeb5f86..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/CompoundButtonShimBestPractices.md +++ /dev/null @@ -1,5 +0,0 @@ -## Best practices - -### Do - -### Don't diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/CompoundButtonShimDefault.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/CompoundButtonShimDefault.stories.tsx deleted file mode 100644 index 2fb83f86ac3f39..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/CompoundButtonShimDefault.stories.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import * as React from 'react'; -import { CompoundButtonShim, CompoundButtonShimProps } from '@fluentui/react-button-shim-v8-v9'; - -export const Default = (props: Partial) => ; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/CompoundButtonShimDescription.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/CompoundButtonShimDescription.md deleted file mode 100644 index e69de29bb2d1d6..00000000000000 diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/index.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/index.stories.tsx deleted file mode 100644 index 062c244bac5da1..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/index.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { CompoundButtonShim } from '@fluentui/react-button-shim-v8-v9'; - -import descriptionMd from './CompoundButtonShimDescription.md'; -import bestPracticesMd from './CompoundButtonShimBestPractices.md'; - -export { Default } from './CompoundButtonShimDefault.stories'; - -export default { - title: 'Preview Components/CompoundButtonShim', - component: CompoundButtonShim, - parameters: { - docs: { - description: { - component: [descriptionMd, bestPracticesMd].join('\n'), - }, - }, - }, -}; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/DefaultButtonShimBestPractices.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/DefaultButtonShimBestPractices.md deleted file mode 100644 index 08ff8ddeeb5f86..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/DefaultButtonShimBestPractices.md +++ /dev/null @@ -1,5 +0,0 @@ -## Best practices - -### Do - -### Don't diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/DefaultButtonShimDefault.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/DefaultButtonShimDefault.stories.tsx deleted file mode 100644 index 222a5deb5906e2..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/DefaultButtonShimDefault.stories.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import * as React from 'react'; -import { DefaultButtonShim, DefaultButtonShimProps } from '@fluentui/react-button-shim-v8-v9'; - -export const Default = (props: Partial) => ; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/DefaultButtonShimDescription.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/DefaultButtonShimDescription.md deleted file mode 100644 index e69de29bb2d1d6..00000000000000 diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/index.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/index.stories.tsx deleted file mode 100644 index d3377a51486995..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/index.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { DefaultButtonShim } from '@fluentui/react-button-shim-v8-v9'; - -import descriptionMd from './DefaultButtonShimDescription.md'; -import bestPracticesMd from './DefaultButtonShimBestPractices.md'; - -export { Default } from './DefaultButtonShimDefault.stories'; - -export default { - title: 'Preview Components/DefaultButtonShim', - component: DefaultButtonShim, - parameters: { - docs: { - description: { - component: [descriptionMd, bestPracticesMd].join('\n'), - }, - }, - }, -}; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/MenuButtonShimBestPractices.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/MenuButtonShimBestPractices.md deleted file mode 100644 index 08ff8ddeeb5f86..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/MenuButtonShimBestPractices.md +++ /dev/null @@ -1,5 +0,0 @@ -## Best practices - -### Do - -### Don't diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/MenuButtonShimDefault.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/MenuButtonShimDefault.stories.tsx deleted file mode 100644 index 225ba7ac3c1df5..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/MenuButtonShimDefault.stories.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import * as React from 'react'; -import { MenuButtonShim, MenuButtonShimProps } from '@fluentui/react-button-shim-v8-v9'; - -export const Default = (props: Partial) => ; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/MenuButtonShimDescription.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/MenuButtonShimDescription.md deleted file mode 100644 index e69de29bb2d1d6..00000000000000 diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/index.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/index.stories.tsx deleted file mode 100644 index 8739abe174069f..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/index.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { MenuButtonShim } from '@fluentui/react-button-shim-v8-v9'; - -import descriptionMd from './MenuButtonShimDescription.md'; -import bestPracticesMd from './MenuButtonShimBestPractices.md'; - -export { Default } from './MenuButtonShimDefault.stories'; - -export default { - title: 'Preview Components/MenuButtonShim', - component: MenuButtonShim, - parameters: { - docs: { - description: { - component: [descriptionMd, bestPracticesMd].join('\n'), - }, - }, - }, -}; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/PrimaryButtonShimBestPractices.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/PrimaryButtonShimBestPractices.md deleted file mode 100644 index 08ff8ddeeb5f86..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/PrimaryButtonShimBestPractices.md +++ /dev/null @@ -1,5 +0,0 @@ -## Best practices - -### Do - -### Don't diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/PrimaryButtonShimDefault.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/PrimaryButtonShimDefault.stories.tsx deleted file mode 100644 index 97b23f86ae6e9d..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/PrimaryButtonShimDefault.stories.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import * as React from 'react'; -import { PrimaryButtonShim, PrimaryButtonShimProps } from '@fluentui/react-button-shim-v8-v9'; - -export const Default = (props: Partial) => ; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/PrimaryButtonShimDescription.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/PrimaryButtonShimDescription.md deleted file mode 100644 index e69de29bb2d1d6..00000000000000 diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/index.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/index.stories.tsx deleted file mode 100644 index 5306f71f00ef0e..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/index.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { PrimaryButtonShim } from '@fluentui/react-button-shim-v8-v9'; - -import descriptionMd from './PrimaryButtonShimDescription.md'; -import bestPracticesMd from './PrimaryButtonShimBestPractices.md'; - -export { Default } from './PrimaryButtonShimDefault.stories'; - -export default { - title: 'Preview Components/PrimaryButtonShim', - component: PrimaryButtonShim, - parameters: { - docs: { - description: { - component: [descriptionMd, bestPracticesMd].join('\n'), - }, - }, - }, -}; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/ToggleButtonShimBestPractices.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/ToggleButtonShimBestPractices.md deleted file mode 100644 index 08ff8ddeeb5f86..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/ToggleButtonShimBestPractices.md +++ /dev/null @@ -1,5 +0,0 @@ -## Best practices - -### Do - -### Don't diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/ToggleButtonShimDefault.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/ToggleButtonShimDefault.stories.tsx deleted file mode 100644 index 34371d8776b0d9..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/ToggleButtonShimDefault.stories.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import * as React from 'react'; -import { ToggleButtonShim, ToggleButtonShimProps } from '@fluentui/react-button-shim-v8-v9'; - -export const Default = (props: Partial) => ; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/ToggleButtonShimDescription.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/ToggleButtonShimDescription.md deleted file mode 100644 index e69de29bb2d1d6..00000000000000 diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/index.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/index.stories.tsx deleted file mode 100644 index 5a1d10e17173c6..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/index.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { ToggleButtonShim } from '@fluentui/react-button-shim-v8-v9'; - -import descriptionMd from './ToggleButtonShimDescription.md'; -import bestPracticesMd from './ToggleButtonShimBestPractices.md'; - -export { Default } from './ToggleButtonShimDefault.stories'; - -export default { - title: 'Preview Components/ToggleButtonShim', - component: ToggleButtonShim, - parameters: { - docs: { - description: { - component: [descriptionMd, bestPracticesMd].join('\n'), - }, - }, - }, -}; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.json b/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.json deleted file mode 100644 index 1941a041d46c19..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "extends": "../../../tsconfig.base.json", - "compilerOptions": { - "target": "ES2019", - "noEmit": true, - "isolatedModules": true, - "importHelpers": true, - "jsx": "react", - "noUnusedLocals": true, - "preserveConstEnums": true - }, - "include": [], - "files": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - }, - { - "path": "./.storybook/tsconfig.json" - } - ] -} diff --git a/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.lib.json b/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.lib.json deleted file mode 100644 index 7f94e04299ed85..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.lib.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "noEmit": false, - "lib": ["ES2019", "dom"], - "declaration": true, - "declarationDir": "../../../dist/out-tsc/types", - "outDir": "../../../dist/out-tsc", - "inlineSources": true, - "types": ["static-assets", "environment"] - }, - "exclude": [ - "./src/common/**", - "**/*.spec.ts", - "**/*.spec.tsx", - "**/*.test.ts", - "**/*.test.tsx", - "**/*.stories.ts", - "**/*.stories.tsx" - ], - "include": ["./src/**/*.ts", "./src/**/*.tsx"] -} diff --git a/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.spec.json b/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.spec.json deleted file mode 100644 index 469fcba4d7ba75..00000000000000 --- a/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.spec.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "module": "CommonJS", - "outDir": "dist", - "types": ["jest", "node"] - }, - "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"] -} diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/.babelrc.json b/packages/react-components-migration/react-menu-shim-v8-v9/.babelrc.json deleted file mode 100644 index 40e01373083cee..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/.babelrc.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["@griffel"], - "plugins": ["annotate-pure-calls", "@babel/transform-react-pure-annotations"] -} diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/.eslintrc.json b/packages/react-components-migration/react-menu-shim-v8-v9/.eslintrc.json deleted file mode 100644 index ceea884c70dccc..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/.eslintrc.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "extends": ["plugin:@fluentui/eslint-plugin/react"], - "root": true -} diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/.npmignore b/packages/react-components-migration/react-menu-shim-v8-v9/.npmignore deleted file mode 100644 index 52d2a7273a151d..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/.npmignore +++ /dev/null @@ -1,29 +0,0 @@ -.storybook/ -.vscode/ -bundle-size/ -config/ -coverage/ -e2e/ -etc/ -node_modules/ -src/ -dist/types/ -temp/ -__fixtures__ -__mocks__ -__tests__ - -*.api.json -*.log -*.spec.* -*.stories.* -*.test.* -*.yml - -# config files -*config.* -*rc.* -.editorconfig -.eslint* -.git* -.prettierignore diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/.storybook/main.js b/packages/react-components-migration/react-menu-shim-v8-v9/.storybook/main.js deleted file mode 100644 index f57cfd09509e78..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/.storybook/main.js +++ /dev/null @@ -1,14 +0,0 @@ -const rootMain = require('../../../../.storybook/main'); - -module.exports = /** @type {Omit} */ ({ - ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], - addons: [...rootMain.addons], - webpackFinal: (config, options) => { - const localConfig = { ...rootMain.webpackFinal(config, options) }; - - // add your own webpack tweaks if needed - - return localConfig; - }, -}); diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/.storybook/preview.js b/packages/react-components-migration/react-menu-shim-v8-v9/.storybook/preview.js deleted file mode 100644 index 1939500a3d18c7..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/.storybook/preview.js +++ /dev/null @@ -1,7 +0,0 @@ -import * as rootPreview from '../../../../.storybook/preview'; - -/** @type {typeof rootPreview.decorators} */ -export const decorators = [...rootPreview.decorators]; - -/** @type {typeof rootPreview.parameters} */ -export const parameters = { ...rootPreview.parameters }; diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/.storybook/tsconfig.json b/packages/react-components-migration/react-menu-shim-v8-v9/.storybook/tsconfig.json deleted file mode 100644 index f9f60e1234ed49..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/.storybook/tsconfig.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "outDir": "", - "allowJs": true, - "checkJs": true, - "types": ["static-assets", "environment", "storybook__addons"] - }, - "include": ["../src/**/*.stories.ts", "../src/**/*.stories.tsx", "*.js"] -} diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/LICENSE b/packages/react-components-migration/react-menu-shim-v8-v9/LICENSE deleted file mode 100644 index a91ec68d1bca6e..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/LICENSE +++ /dev/null @@ -1,15 +0,0 @@ -@fluentui/react-menu-shim-v8-v9 - -Copyright (c) Microsoft Corporation - -All rights reserved. - -MIT License - -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - -Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/README.md b/packages/react-components-migration/react-menu-shim-v8-v9/README.md deleted file mode 100644 index 2ed3ed46f5d0cc..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# @fluentui/react-menu-shim-v8-v9 - -**React Menu Shim V8 V9 components for [Fluent UI React](https://react.fluentui.dev/)** - -These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release. diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/Spec.md b/packages/react-components-migration/react-menu-shim-v8-v9/Spec.md deleted file mode 100644 index 54cbdaa4e4f4cd..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/Spec.md +++ /dev/null @@ -1,63 +0,0 @@ -# @fluentui/react-menu-shim-v8-v9 Spec - -## Background - -_Description and use cases of this component_ - -## Prior Art - -_Include background research done for this component_ - -- _Link to Open UI research_ -- _Link to comparison of v7 and v0_ -- _Link to GitHub epic issue for the converged component_ - -## Sample Code - -_Provide some representative example code that uses the proposed API for the component_ - -## Variants - -_Describe visual or functional variants of this control, if applicable. For example, a slider could have a 2D variant._ - -## API - -_List the **Props** and **Slots** proposed for the component. Ideally this would just be a link to the component's `.types.ts` file_ - -## Structure - -- _**Public**_ -- _**Internal**_ -- _**DOM** - how the component will be rendered as HTML elements_ - -## Migration - -_Describe what will need to be done to upgrade from the existing implementations:_ - -- _Migration from v8_ -- _Migration from v0_ - -## Behaviors - -_Explain how the component will behave in use, including:_ - -- _Component States_ -- _Interaction_ - - _Keyboard_ - - _Cursor_ - - _Touch_ - - _Screen readers_ - -## Accessibility - -Base accessibility information is included in the design document. After the spec is filled and review, outcomes from it need to be communicated to design and incorporated in the design document. - -- Decide whether to use **native element** or folow **ARIA** and provide reasons -- Identify the **[ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/) pattern** and, if the component is listed there, follow its specification as possible. -- Identify accessibility **variants**, the `role` ([ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)) of the component, its `slots` and `aria-*` props. -- Describe the **keyboard navigation**: Tab Oder and Arrow Key Navigation. Describe any other keyboard **shortcuts** used -- Specify texts for **state change announcements** - [ARIA live regions - ](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) (number of available items in dropdown, error messages, confirmations, ...) -- Identify UI parts that appear on **hover or focus** and specify keyboard and screen reader interaction with them -- List cases when **focus** needs to be **trapped** in sections of the UI (for dialogs and popups or for hierarchical navigation) -- List cases when **focus** needs to be **moved programatically** (if parts of the UI are appearing/disappearing or other cases) diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/config/api-extractor.json b/packages/react-components-migration/react-menu-shim-v8-v9/config/api-extractor.json deleted file mode 100644 index a8c3d3240d101e..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/config/api-extractor.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", - "extends": "@fluentui/scripts/api-extractor/api-extractor.common.v-next.json", - "dtsRollup": { - "enabled": true, - "untrimmedFilePath": "", - "publicTrimmedFilePath": "/dist/index.d.ts" - }, - "mainEntryPointFilePath": "/../../../dist/out-tsc/types/packages/react-components-migration//src/index.d.ts" -} diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/config/tests.js b/packages/react-components-migration/react-menu-shim-v8-v9/config/tests.js deleted file mode 100644 index 2e211ae9e21420..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/config/tests.js +++ /dev/null @@ -1 +0,0 @@ -/** Jest test setup file. */ diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/etc/react-menu-shim-v8-v9.api.md b/packages/react-components-migration/react-menu-shim-v8-v9/etc/react-menu-shim-v8-v9.api.md deleted file mode 100644 index f1303f85625681..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/etc/react-menu-shim-v8-v9.api.md +++ /dev/null @@ -1,33 +0,0 @@ -## API Report File for "@fluentui/react-menu-shim-v8-v9" - -> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). - -```ts - -/// - -import { IContextualMenuItem } from '@fluentui/react'; -import { IContextualMenuProps } from '@fluentui/react'; -import { MenuGroupHeaderProps } from '@fluentui/react-menu'; -import { MenuItemCheckboxProps } from '@fluentui/react-menu'; -import { MenuItemProps } from '@fluentui/react-menu'; -import { MenuProps } from '@fluentui/react-menu'; - -// @public (undocumented) -export const MenuItemShim: (props: IContextualMenuItem) => JSX.Element; - -// @public (undocumented) -export const shimMenuHeaderProps: (props: IContextualMenuItem) => MenuGroupHeaderProps; - -// @public (undocumented) -export const shimMenuItemCheckboxProps: (props: IContextualMenuItem) => MenuItemCheckboxProps; - -// @public (undocumented) -export const shimMenuItemProps: (props: IContextualMenuItem) => MenuItemProps; - -// @public (undocumented) -export const shimMenuProps: (props: IContextualMenuProps) => Partial; - -// (No @packageDocumentation comment for this package) - -``` diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/jest.config.js b/packages/react-components-migration/react-menu-shim-v8-v9/jest.config.js deleted file mode 100644 index 919e856a190d8e..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/jest.config.js +++ /dev/null @@ -1,21 +0,0 @@ -// @ts-check - -/** - * @type {import('@jest/types').Config.InitialOptions} - */ -module.exports = { - displayName: 'react-menu-shim-v8-v9', - preset: '../../../jest.preset.js', - globals: { - 'ts-jest': { - tsConfig: '/tsconfig.spec.json', - diagnostics: false, - }, - }, - transform: { - '^.+\\.tsx?$': 'ts-jest', - }, - coverageDirectory: './coverage', - setupFilesAfterEnv: ['./config/tests.js'], - snapshotSerializers: ['@griffel/jest-serializer'], -}; diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/just.config.ts b/packages/react-components-migration/react-menu-shim-v8-v9/just.config.ts deleted file mode 100644 index bcc7d9d264037c..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/just.config.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { preset } from '@fluentui/scripts'; - -preset(); diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/package.json b/packages/react-components-migration/react-menu-shim-v8-v9/package.json deleted file mode 100644 index bb8f5d9358f0aa..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/package.json +++ /dev/null @@ -1,53 +0,0 @@ -{ - "name": "@fluentui/react-menu-shim-v8-v9", - "version": "9.0.0-alpha.0", - "private": true, - "description": "Fluent UI React Menu shim to help migration from v8 to v9", - "main": "lib-commonjs/index.js", - "module": "lib/index.js", - "typings": "dist/index.d.ts", - "sideEffects": false, - "repository": { - "type": "git", - "url": "https://github.com/microsoft/fluentui" - }, - "license": "MIT", - "scripts": { - "build": "just-scripts build", - "clean": "just-scripts clean", - "code-style": "just-scripts code-style", - "just": "just-scripts", - "lint": "just-scripts lint", - "test": "jest --passWithNoTests", - "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor", - "type-check": "tsc -b tsconfig.json", - "storybook": "start-storybook", - "start": "yarn storybook" - }, - "devDependencies": { - "@fluentui/eslint-plugin": "*", - "@fluentui/react-conformance": "*", - "@fluentui/react-conformance-griffel": "9.0.0-beta.14", - "@fluentui/scripts": "^1.0.0" - }, - "dependencies": { - "@fluentui/react": "^8.97.2", - "@fluentui/react-menu": "^9.2.2", - "@fluentui/react-theme": "^9.1.0", - "@fluentui/react-utilities": "^9.1.0", - "@griffel/react": "^1.3.0", - "tslib": "^2.1.0" - }, - "peerDependencies": { - "@types/react": ">=16.8.0 <18.0.0", - "@types/react-dom": ">=16.8.0 <18.0.0", - "react": ">=16.8.0 <18.0.0", - "react-dom": ">=16.8.0 <18.0.0" - }, - "beachball": { - "disallowedChangeTypes": [ - "major", - "prerelease" - ] - } -} diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/src/MenuShim.ts b/packages/react-components-migration/react-menu-shim-v8-v9/src/MenuShim.ts deleted file mode 100644 index 18626226a9c14c..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/src/MenuShim.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components/MenuShim/index'; diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/src/components/MenuShim/MenuShim.tsx b/packages/react-components-migration/react-menu-shim-v8-v9/src/components/MenuShim/MenuShim.tsx deleted file mode 100644 index 8b1a10d4a55f49..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/src/components/MenuShim/MenuShim.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import * as React from 'react'; - -import { ContextualMenuItemType, IContextualMenuItem } from '@fluentui/react'; -import { - MenuItem, - MenuDivider, - MenuGroup, - MenuGroupHeader, - MenuTrigger, - Menu, - MenuList, - MenuPopover, - MenuItemCheckbox, - MenuDividerProps, -} from '@fluentui/react-menu'; - -import { shimMenuHeaderProps, shimMenuItemCheckboxProps, shimMenuItemProps, shimMenuProps } from '../../shimMenuProps'; - -export const MenuItemShim = (props: IContextualMenuItem) => { - if (props.itemType === ContextualMenuItemType.Divider) { - const shimProps = shimMenuItemProps(props); - return ; - } - - if (props.itemType === ContextualMenuItemType.Section) { - const shimProps = shimMenuHeaderProps(props); - return ( - - {shimProps.children} - {/* //TODO: sectionProps handling */} - {props.subMenuProps?.items.map(item => ( - // key is added through item spread - // eslint-disable-next-line react/jsx-key - - ))} - - ); - } - - if (props.canCheck) { - const shimProps = shimMenuItemCheckboxProps(props); - return ; - } - - // Nested Menu to handle submenus - if (props.subMenuProps?.items && props.subMenuProps.items.length > 0) { - const shimmedMenuProps = shimMenuProps(props.subMenuProps); - const shimmedItemProps = shimMenuItemProps(props); - - return ( - - - - - - - {props.subMenuProps.items.map(item => ( - // key is added through item spread - // eslint-disable-next-line react/jsx-key - - ))} - - - - ); - } - - const shimProps = shimMenuItemProps(props); - return ; -}; diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/src/components/MenuShim/index.ts b/packages/react-components-migration/react-menu-shim-v8-v9/src/components/MenuShim/index.ts deleted file mode 100644 index d53169442c2874..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/src/components/MenuShim/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './MenuShim'; diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/src/index.ts b/packages/react-components-migration/react-menu-shim-v8-v9/src/index.ts deleted file mode 100644 index 7ac8bd6db8237e..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/src/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { shimMenuProps, shimMenuHeaderProps, shimMenuItemProps, shimMenuItemCheckboxProps } from './shimMenuProps'; -export { MenuItemShim } from './MenuShim'; diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/src/shimMenuProps.tsx b/packages/react-components-migration/react-menu-shim-v8-v9/src/shimMenuProps.tsx deleted file mode 100644 index 65e858cf866797..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/src/shimMenuProps.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import * as React from 'react'; - -import { IContextualMenuItem, IContextualMenuProps, Icon } from '@fluentui/react'; -import { MenuItemProps, MenuGroupHeaderProps, MenuItemCheckboxProps, MenuProps } from '@fluentui/react-menu'; - -export const shimMenuProps = (props: IContextualMenuProps): Partial => { - return { - hasIcons: props?.items.some(i => i.iconProps), - hasCheckmarks: props?.items.some(i => i.canCheck || i.checked), - }; -}; - -export const shimMenuItemProps = (props: IContextualMenuItem): MenuItemProps => { - //TODO: Handle menuItem.onRenderIcon - const icon = props.iconProps ? : undefined; - - return { - ...props, - 'aria-label': props.ariaLabel, - children: props.text, - icon, - secondaryContent: props.secondaryText, - } as MenuItemProps; -}; - -export const shimMenuItemCheckboxProps = (props: IContextualMenuItem): MenuItemCheckboxProps => { - return { - ...shimMenuItemProps(props), - name: props.text || 'name', - value: props.value || 'value', - }; -}; - -export const shimMenuHeaderProps = (props: IContextualMenuItem): MenuGroupHeaderProps => { - return { - children: props.sectionProps?.title, - }; -}; diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/MenuShimBestPractices.md b/packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/MenuShimBestPractices.md deleted file mode 100644 index 08ff8ddeeb5f86..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/MenuShimBestPractices.md +++ /dev/null @@ -1,5 +0,0 @@ -## Best practices - -### Do - -### Don't diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/MenuShimDefault.stories.tsx b/packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/MenuShimDefault.stories.tsx deleted file mode 100644 index 0fe12092b35256..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/MenuShimDefault.stories.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import * as React from 'react'; -import { MenuShim, MenuShimProps } from '@fluentui/react-menu-shim-v8-v9'; - -export const Default = (props: Partial) => ; diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/MenuShimDescription.md b/packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/MenuShimDescription.md deleted file mode 100644 index e69de29bb2d1d6..00000000000000 diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/index.stories.tsx b/packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/index.stories.tsx deleted file mode 100644 index 915316e1ed9818..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/index.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { MenuItemShim } from '@fluentui/react-menu-shim-v8-v9'; - -import descriptionMd from './MenuShimDescription.md'; -import bestPracticesMd from './MenuShimBestPractices.md'; - -export { Default } from './MenuShimDefault.stories'; - -export default { - title: 'Preview Components/MenuShim', - component: MenuItemShim, - parameters: { - docs: { - description: { - component: [descriptionMd, bestPracticesMd].join('\n'), - }, - }, - }, -}; diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.json b/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.json deleted file mode 100644 index 1941a041d46c19..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "extends": "../../../tsconfig.base.json", - "compilerOptions": { - "target": "ES2019", - "noEmit": true, - "isolatedModules": true, - "importHelpers": true, - "jsx": "react", - "noUnusedLocals": true, - "preserveConstEnums": true - }, - "include": [], - "files": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - }, - { - "path": "./.storybook/tsconfig.json" - } - ] -} diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.lib.json b/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.lib.json deleted file mode 100644 index 7f94e04299ed85..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.lib.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "noEmit": false, - "lib": ["ES2019", "dom"], - "declaration": true, - "declarationDir": "../../../dist/out-tsc/types", - "outDir": "../../../dist/out-tsc", - "inlineSources": true, - "types": ["static-assets", "environment"] - }, - "exclude": [ - "./src/common/**", - "**/*.spec.ts", - "**/*.spec.tsx", - "**/*.test.ts", - "**/*.test.tsx", - "**/*.stories.ts", - "**/*.stories.tsx" - ], - "include": ["./src/**/*.ts", "./src/**/*.tsx"] -} diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.spec.json b/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.spec.json deleted file mode 100644 index 469fcba4d7ba75..00000000000000 --- a/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.spec.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "module": "CommonJS", - "outDir": "dist", - "types": ["jest", "node"] - }, - "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"] -} diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/.babelrc.json b/packages/react-components-migration/react-stack-shim-v8-v9/.babelrc.json deleted file mode 100644 index 40e01373083cee..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/.babelrc.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["@griffel"], - "plugins": ["annotate-pure-calls", "@babel/transform-react-pure-annotations"] -} diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/.eslintrc.json b/packages/react-components-migration/react-stack-shim-v8-v9/.eslintrc.json deleted file mode 100644 index ceea884c70dccc..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/.eslintrc.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "extends": ["plugin:@fluentui/eslint-plugin/react"], - "root": true -} diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/.npmignore b/packages/react-components-migration/react-stack-shim-v8-v9/.npmignore deleted file mode 100644 index 52d2a7273a151d..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/.npmignore +++ /dev/null @@ -1,29 +0,0 @@ -.storybook/ -.vscode/ -bundle-size/ -config/ -coverage/ -e2e/ -etc/ -node_modules/ -src/ -dist/types/ -temp/ -__fixtures__ -__mocks__ -__tests__ - -*.api.json -*.log -*.spec.* -*.stories.* -*.test.* -*.yml - -# config files -*config.* -*rc.* -.editorconfig -.eslint* -.git* -.prettierignore diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/.storybook/main.js b/packages/react-components-migration/react-stack-shim-v8-v9/.storybook/main.js deleted file mode 100644 index f57cfd09509e78..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/.storybook/main.js +++ /dev/null @@ -1,14 +0,0 @@ -const rootMain = require('../../../../.storybook/main'); - -module.exports = /** @type {Omit} */ ({ - ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], - addons: [...rootMain.addons], - webpackFinal: (config, options) => { - const localConfig = { ...rootMain.webpackFinal(config, options) }; - - // add your own webpack tweaks if needed - - return localConfig; - }, -}); diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/.storybook/preview.js b/packages/react-components-migration/react-stack-shim-v8-v9/.storybook/preview.js deleted file mode 100644 index 1939500a3d18c7..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/.storybook/preview.js +++ /dev/null @@ -1,7 +0,0 @@ -import * as rootPreview from '../../../../.storybook/preview'; - -/** @type {typeof rootPreview.decorators} */ -export const decorators = [...rootPreview.decorators]; - -/** @type {typeof rootPreview.parameters} */ -export const parameters = { ...rootPreview.parameters }; diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/.storybook/tsconfig.json b/packages/react-components-migration/react-stack-shim-v8-v9/.storybook/tsconfig.json deleted file mode 100644 index f9f60e1234ed49..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/.storybook/tsconfig.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "outDir": "", - "allowJs": true, - "checkJs": true, - "types": ["static-assets", "environment", "storybook__addons"] - }, - "include": ["../src/**/*.stories.ts", "../src/**/*.stories.tsx", "*.js"] -} diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/LICENSE b/packages/react-components-migration/react-stack-shim-v8-v9/LICENSE deleted file mode 100644 index 2698596e14047d..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/LICENSE +++ /dev/null @@ -1,15 +0,0 @@ -@fluentui/react-stack-shim-v8-v9 - -Copyright (c) Microsoft Corporation - -All rights reserved. - -MIT License - -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - -Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/README.md b/packages/react-components-migration/react-stack-shim-v8-v9/README.md deleted file mode 100644 index 25bbbf8d951b2a..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# @fluentui/react-stack-shim-v8-v9 - -**React Stack Shim V8 V9 components for [Fluent UI React](https://react.fluentui.dev/)** - -These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release. diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/Spec.md b/packages/react-components-migration/react-stack-shim-v8-v9/Spec.md deleted file mode 100644 index fa45c7c5769561..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/Spec.md +++ /dev/null @@ -1,63 +0,0 @@ -# @fluentui/react-stack-shim-v8-v9 Spec - -## Background - -_Description and use cases of this component_ - -## Prior Art - -_Include background research done for this component_ - -- _Link to Open UI research_ -- _Link to comparison of v7 and v0_ -- _Link to GitHub epic issue for the converged component_ - -## Sample Code - -_Provide some representative example code that uses the proposed API for the component_ - -## Variants - -_Describe visual or functional variants of this control, if applicable. For example, a slider could have a 2D variant._ - -## API - -_List the **Props** and **Slots** proposed for the component. Ideally this would just be a link to the component's `.types.ts` file_ - -## Structure - -- _**Public**_ -- _**Internal**_ -- _**DOM** - how the component will be rendered as HTML elements_ - -## Migration - -_Describe what will need to be done to upgrade from the existing implementations:_ - -- _Migration from v8_ -- _Migration from v0_ - -## Behaviors - -_Explain how the component will behave in use, including:_ - -- _Component States_ -- _Interaction_ - - _Keyboard_ - - _Cursor_ - - _Touch_ - - _Screen readers_ - -## Accessibility - -Base accessibility information is included in the design document. After the spec is filled and review, outcomes from it need to be communicated to design and incorporated in the design document. - -- Decide whether to use **native element** or folow **ARIA** and provide reasons -- Identify the **[ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/) pattern** and, if the component is listed there, follow its specification as possible. -- Identify accessibility **variants**, the `role` ([ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)) of the component, its `slots` and `aria-*` props. -- Describe the **keyboard navigation**: Tab Oder and Arrow Key Navigation. Describe any other keyboard **shortcuts** used -- Specify texts for **state change announcements** - [ARIA live regions - ](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) (number of available items in dropdown, error messages, confirmations, ...) -- Identify UI parts that appear on **hover or focus** and specify keyboard and screen reader interaction with them -- List cases when **focus** needs to be **trapped** in sections of the UI (for dialogs and popups or for hierarchical navigation) -- List cases when **focus** needs to be **moved programatically** (if parts of the UI are appearing/disappearing or other cases) diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/config/api-extractor.json b/packages/react-components-migration/react-stack-shim-v8-v9/config/api-extractor.json deleted file mode 100644 index a8c3d3240d101e..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/config/api-extractor.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", - "extends": "@fluentui/scripts/api-extractor/api-extractor.common.v-next.json", - "dtsRollup": { - "enabled": true, - "untrimmedFilePath": "", - "publicTrimmedFilePath": "/dist/index.d.ts" - }, - "mainEntryPointFilePath": "/../../../dist/out-tsc/types/packages/react-components-migration//src/index.d.ts" -} diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/config/tests.js b/packages/react-components-migration/react-stack-shim-v8-v9/config/tests.js deleted file mode 100644 index 2e211ae9e21420..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/config/tests.js +++ /dev/null @@ -1 +0,0 @@ -/** Jest test setup file. */ diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/etc/react-stack-shim-v8-v9.api.md b/packages/react-components-migration/react-stack-shim-v8-v9/etc/react-stack-shim-v8-v9.api.md deleted file mode 100644 index 2df44368be8483..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/etc/react-stack-shim-v8-v9.api.md +++ /dev/null @@ -1,18 +0,0 @@ -## API Report File for "@fluentui/react-stack-shim-v8-v9" - -> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). - -```ts - -import { IStackItemProps } from '@fluentui/react'; -import { IStackProps } from '@fluentui/react'; - -// @public (undocumented) -export const StackItemShim: (props: IStackItemProps) => JSX.Element; - -// @public (undocumented) -export const StackShim: (props: IStackProps) => JSX.Element; - -// (No @packageDocumentation comment for this package) - -``` diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/jest.config.js b/packages/react-components-migration/react-stack-shim-v8-v9/jest.config.js deleted file mode 100644 index e3b98dddaf56f8..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/jest.config.js +++ /dev/null @@ -1,21 +0,0 @@ -// @ts-check - -/** - * @type {import('@jest/types').Config.InitialOptions} - */ -module.exports = { - displayName: 'react-stack-shim-v8-v9', - preset: '../../../jest.preset.js', - globals: { - 'ts-jest': { - tsConfig: '/tsconfig.spec.json', - diagnostics: false, - }, - }, - transform: { - '^.+\\.tsx?$': 'ts-jest', - }, - coverageDirectory: './coverage', - setupFilesAfterEnv: ['./config/tests.js'], - snapshotSerializers: ['@griffel/jest-serializer'], -}; diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/just.config.ts b/packages/react-components-migration/react-stack-shim-v8-v9/just.config.ts deleted file mode 100644 index bcc7d9d264037c..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/just.config.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { preset } from '@fluentui/scripts'; - -preset(); diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/package.json b/packages/react-components-migration/react-stack-shim-v8-v9/package.json deleted file mode 100644 index 91df113331420f..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/package.json +++ /dev/null @@ -1,52 +0,0 @@ -{ - "name": "@fluentui/react-stack-shim-v8-v9", - "version": "9.0.0-alpha.0", - "private": true, - "description": "Fluent UI React Stack shim to help migration from v8 to v9", - "main": "lib-commonjs/index.js", - "module": "lib/index.js", - "typings": "dist/index.d.ts", - "sideEffects": false, - "repository": { - "type": "git", - "url": "https://github.com/microsoft/fluentui" - }, - "license": "MIT", - "scripts": { - "build": "just-scripts build", - "clean": "just-scripts clean", - "code-style": "just-scripts code-style", - "just": "just-scripts", - "lint": "just-scripts lint", - "test": "jest --passWithNoTests", - "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor", - "type-check": "tsc -b tsconfig.json", - "storybook": "start-storybook", - "start": "yarn storybook" - }, - "devDependencies": { - "@fluentui/eslint-plugin": "*", - "@fluentui/react-conformance": "*", - "@fluentui/react-conformance-griffel": "9.0.0-beta.14", - "@fluentui/scripts": "^1.0.0" - }, - "dependencies": { - "@fluentui/react": "^8.97.2", - "@fluentui/react-theme": "^9.1.0", - "@fluentui/react-utilities": "^9.1.0", - "@griffel/react": "^1.3.0", - "tslib": "^2.1.0" - }, - "peerDependencies": { - "@types/react": ">=16.8.0 <18.0.0", - "@types/react-dom": ">=16.8.0 <18.0.0", - "react": ">=16.8.0 <18.0.0", - "react-dom": ">=16.8.0 <18.0.0" - }, - "beachball": { - "disallowedChangeTypes": [ - "major", - "prerelease" - ] - } -} diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/StackItemShim.ts b/packages/react-components-migration/react-stack-shim-v8-v9/src/StackItemShim.ts deleted file mode 100644 index 5ebc5a448623f6..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/src/StackItemShim.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components/StackItemShim/index'; diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/StackShim.ts b/packages/react-components-migration/react-stack-shim-v8-v9/src/StackShim.ts deleted file mode 100644 index 163fe82b7113b8..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/src/StackShim.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components/StackShim/index'; diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/StackItemShim.test.tsx b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/StackItemShim.test.tsx deleted file mode 100644 index e7810a62589f80..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/StackItemShim.test.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { StackItemShim } from './StackItemShim'; - -describe('StackItemShim', () => { - // TODO add more tests here, and create visual regression tests in /apps/vr-tests - - it('renders a default state', () => { - const result = render(Default StackItemShim); - expect(result.container).toMatchSnapshot(); - }); -}); diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/StackItemShim.tsx b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/StackItemShim.tsx deleted file mode 100644 index b2d683d26dbcb5..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/StackItemShim.tsx +++ /dev/null @@ -1,161 +0,0 @@ -import * as React from 'react'; - -import { IStackItemProps } from '@fluentui/react'; -import { makeStyles, mergeClasses } from '@griffel/react'; - -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; - - const styles = useStackItemShimStyles(); - const alignSelfStyles = useFlexAlignSelfStyles(); - const shrinkFlexStyles = useFlexShrinkStyles(); - const growFlexStyles: Record = useFlexGrowStyles(); - const orderFlexStyles: Record = useFlexOrderStyles(); - - const stackItemStyles = [styles.root, align && alignSelfStyles[align], verticalFill && styles.verticalFill]; - - if (order) { - stackItemStyles.push(orderFlexStyles[order]); - } - - if (grow) { - const flexGrow = grow === true ? growFlexStyles[1] : growFlexStyles[grow]; - stackItemStyles.push(flexGrow); - } - - if (shrink && !disableShrink) { - stackItemStyles.push(shrinkFlexStyles[1]); - } else if (disableShrink || (!grow && !shrink)) { - stackItemStyles.push(shrinkFlexStyles[0]); - } - - if (disableShrink) { - stackItemStyles.push(styles.disableShrink); - } - - const rootStyles = mergeClasses(stackItemClassNames.root, ...stackItemStyles, className); - - return
{children}
; -}; diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/__snapshots__/StackItemShim.test.tsx.snap b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/__snapshots__/StackItemShim.test.tsx.snap deleted file mode 100644 index f0495e263a67c4..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/__snapshots__/StackItemShim.test.tsx.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`StackItemShim renders a default state 1`] = ` -
-
- Default StackItemShim -
-
-`; diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/index.ts b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/index.ts deleted file mode 100644 index 96dee3d2cedf0d..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './StackItemShim'; diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/StackShim.test.tsx b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/StackShim.test.tsx deleted file mode 100644 index 79710387d455aa..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/StackShim.test.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { StackShim } from './StackShim'; -describe('StackShim', () => { - // TODO add more tests here, and create visual regression tests in /apps/vr-tests - - it('renders a default state', () => { - const result = render(Default StackShim); - expect(result.container).toMatchSnapshot(); - }); -}); diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/StackShim.tsx b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/StackShim.tsx deleted file mode 100644 index 47cb86bdb7a759..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/StackShim.tsx +++ /dev/null @@ -1,303 +0,0 @@ -import * as React from 'react'; - -import { IStackProps, IStackTokens, classNamesFunction, IStackItemProps } from '@fluentui/react'; -import { makeStyles, mergeClasses } from '@griffel/react'; -import { getChildrenGapStyles, StackShimStyles } from '../../stackUtils'; - -const stackClassNames = { - root: 'ms-Stack', - inner: 'ms-Stack-inner', -}; - -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(); - const justifyContentFlexStyles = useFlexJustifyContentStyles(); - const growFlexStyles: Record = useFlexGrowStyles(); - - const { - as: RootType = 'div', - verticalFill, - horizontal, - reversed, - grow, - wrap, - horizontalAlign, - verticalAlign, - disableShrink, - className, - } = props; - - const tokens: IStackTokens = { ...props.tokens }; - - let tokensRootStyles = {}; - let tokensInnerStyles = {}; - let childrenGapClassName; - - if (tokens) { - tokensRootStyles = { - padding: !wrap ? tokens.padding : undefined, - maxHeight: tokens.maxHeight, - maxWidth: tokens.maxWidth, - }; - - tokensInnerStyles = { - padding: wrap ? tokens.padding : undefined, - }; - - if (tokens.childrenGap) { - childrenGapClassName = getClassNames(getChildrenGapStyles, { - horizontal, - reversed, - tokens, - }); - } - } - - const stackStyles = [ - wrap ? styles.wrap : styles.root, - horizontal && styles.horizontal, - verticalFill && styles.verticalFill, - ]; - - const stackInnerStyles = [ - styles.inner, - horizontal && styles.horizontal, - (!tokens || !tokens.childrenGap) && styles.innerWidth, - ]; - - let stackChildren = React.Children.toArray(props.children); - if ( - stackChildren.length === 1 && - React.isValidElement(stackChildren[0]) && - stackChildren[0].type === React.Fragment - ) { - stackChildren = stackChildren[0].props.children; - } - - stackChildren = React.Children.map( - stackChildren as React.ReactElement[], - (child: React.ReactElement) => { - if (!child) { - return null; - } - - if (child.type && ((child as React.ReactElement).type as React.ComponentType).name === 'StackItemShim') { - const defaultItemProps: IStackItemProps = { - shrink: !disableShrink, - }; - - return React.cloneElement(child, { - ...defaultItemProps, - ...child.props, - }); - } - - return child; - }, - ); - - if (reversed) { - if (horizontal) { - stackStyles.push(styles.reversedHorizontal); - stackInnerStyles.push(styles.reversedHorizontal); - } else { - stackStyles.push(styles.reversedVertical); - stackInnerStyles.push(styles.reversedVertical); - } - } - - if (grow) { - const flexGrow = grow === true ? growFlexStyles[1] : growFlexStyles[grow]; - stackStyles.push(flexGrow); - } - - if (disableShrink) { - stackStyles.push(styles.disableShrink); - } - - if (horizontalAlign) { - if (horizontal) { - stackStyles.push(justifyContentFlexStyles[horizontalAlign]); - stackInnerStyles.push(justifyContentFlexStyles[horizontalAlign]); - } else { - stackStyles.push(alignItemsFlexStyles[horizontalAlign]); - stackInnerStyles.push(alignItemsFlexStyles[horizontalAlign]); - } - } - - if (verticalAlign) { - if (horizontal) { - stackStyles.push(alignItemsFlexStyles[verticalAlign]); - stackInnerStyles.push(alignItemsFlexStyles[verticalAlign]); - } else { - stackStyles.push(justifyContentFlexStyles[verticalAlign]); - stackInnerStyles.push(justifyContentFlexStyles[verticalAlign]); - } - } - - const rootClass = mergeClasses( - stackClassNames.root, - ...stackStyles, - childrenGapClassName && !wrap && childrenGapClassName.root, - className, - ); - - const innerClass = mergeClasses( - stackClassNames.inner, - ...stackInnerStyles, - childrenGapClassName && wrap && childrenGapClassName.inner, - ); - - return wrap ? ( - -
- {stackChildren} -
- - ) : ( - - {stackChildren} - - ); -}; diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/__snapshots__/StackShim.test.tsx.snap b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/__snapshots__/StackShim.test.tsx.snap deleted file mode 100644 index bf07bdd819b170..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/__snapshots__/StackShim.test.tsx.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`StackShim renders a default state 1`] = ` -
-
- Default StackShim -
-
-`; diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/index.ts b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/index.ts deleted file mode 100644 index 5a5c5463f61428..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './StackShim'; diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/index.ts b/packages/react-components-migration/react-stack-shim-v8-v9/src/index.ts deleted file mode 100644 index 2794abed91b7a2..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/src/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { StackShim } from './StackShim'; -export { StackItemShim } from './StackItemShim'; diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/stackUtils.ts b/packages/react-components-migration/react-stack-shim-v8-v9/src/stackUtils.ts deleted file mode 100644 index ccdcdad5ac6ef0..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/src/stackUtils.ts +++ /dev/null @@ -1,185 +0,0 @@ -import { getTheme, IStackProps, IStackTokens, IStyle, ITheme } from '@fluentui/react'; - -// Helper function that converts a themed spacing key (if given) to the corresponding themed spacing value. -const getThemedSpacing = (space: string, theme: ITheme): string => { - if (theme.spacing.hasOwnProperty(space)) { - return theme.spacing[space as keyof typeof theme.spacing]; - } - return space; -}; - -// Helper function that takes a gap as a string and converts it into a { value, unit } representation. -const getValueUnitGap = (gap: string): { value: number; unit: string } => { - const numericalPart = parseFloat(gap); - const numericalValue = isNaN(numericalPart) ? 0 : numericalPart; - const numericalString = isNaN(numericalPart) ? '' : numericalPart.toString(); - - const unitPart = gap.substring(numericalString.toString().length); - - return { - value: numericalValue, - unit: unitPart || 'px', - }; -}; - -/** - * Takes in a gap size in either a CSS-style format (e.g. 10 or "10px") - * or a key of a themed spacing value (e.g. "s1"). - * Returns the separate numerical value of the padding (e.g. 10) - * and the CSS unit (e.g. "px"). - */ -export const parseGap = ( - gap: IStackProps['gap'], - theme: ITheme, -): { rowGap: { value: number; unit: string }; columnGap: { value: number; unit: string } } => { - if (gap === undefined || gap === '') { - return { - rowGap: { - value: 0, - unit: 'px', - }, - columnGap: { - value: 0, - unit: 'px', - }, - }; - } - - if (typeof gap === 'number') { - return { - rowGap: { - value: gap, - unit: 'px', - }, - columnGap: { - value: gap, - unit: 'px', - }, - }; - } - - const splitGap = gap.split(' '); - - // If the array has more than two values, then return 0px. - if (splitGap.length > 2) { - return { - rowGap: { - value: 0, - unit: 'px', - }, - columnGap: { - value: 0, - unit: 'px', - }, - }; - } - - // If the array has two values, then parse each one. - if (splitGap.length === 2) { - return { - rowGap: getValueUnitGap(getThemedSpacing(splitGap[0], theme)), - columnGap: getValueUnitGap(getThemedSpacing(splitGap[1], theme)), - }; - } - - // Else, parse the numerical value and pass it as both the vertical and horizontal gap. - const calculatedGap = getValueUnitGap(getThemedSpacing(gap, theme)); - - return { - rowGap: calculatedGap, - columnGap: calculatedGap, - }; -}; - -/** - * Takes in a padding in a CSS-style format (e.g. 10, "10px", "10px 10px", etc.) - * where the separate padding values can also be the key of a themed spacing value - * (e.g. "s1 m", "10px l1 20px l2", etc.). - * Returns a CSS-style padding. - */ -export const parsePadding = (padding: number | string | undefined, theme: ITheme): number | string | undefined => { - if (padding === undefined || typeof padding === 'number' || padding === '') { - return padding; - } - - const paddingValues = padding.split(' '); - if (paddingValues.length < 2) { - return getThemedSpacing(padding, theme); - } - - return paddingValues.reduce((padding1: string, padding2: string) => { - return getThemedSpacing(padding1, theme) + ' ' + getThemedSpacing(padding2, theme); - }); -}; - -export interface StackShimStyles { - root?: IStyle; - inner?: IStyle; -} -/** - * - * getStyles function for Stack.tokens.childrenGap prop styling - */ -export const getChildrenGapStyles = (props: IStackProps): StackShimStyles => { - const theme = getTheme(); - - const { horizontal, reversed } = props; - const tokens: IStackTokens = { ...props.tokens }; - - const { rowGap, columnGap } = parseGap(tokens.childrenGap, theme); - const horizontalMargin = `${-0.5 * columnGap.value}${columnGap.unit}`; - const verticalMargin = `${-0.5 * rowGap.value}${rowGap.unit}`; - - return { - root: [ - reversed && - horizontal && { - '> *:not(:last-child)': { - marginLeft: `${columnGap.value}${columnGap.unit}`, - }, - }, - reversed && - !horizontal && { - '> *:not(:last-child)': { - marginTop: `${rowGap.value}${rowGap.unit}`, - }, - }, - !reversed && - horizontal && { - '> *:not(:first-child)': { - marginLeft: `${columnGap.value}${columnGap.unit}`, - }, - }, - !reversed && - !horizontal && { - '> *:not(:first-child)': { - marginTop: `${rowGap.value}${rowGap.unit}`, - }, - }, - ], - inner: [ - { - marginLeft: horizontalMargin, - marginRight: horizontalMargin, - marginTop: verticalMargin, - marginBottom: verticalMargin, - width: columnGap.value === 0 ? '100%' : `calc(100% + ${columnGap.value}${columnGap.unit})`, - '> *': { - margin: `${0.5 * rowGap.value}${rowGap.unit} ${0.5 * columnGap.value}${columnGap.unit}`, - }, - }, - horizontal && { - height: rowGap.value === 0 ? '100%' : `calc(100% + ${rowGap.value}${rowGap.unit})`, - '> *': { - maxWidth: columnGap.value === 0 ? '100%' : `calc(100% - ${columnGap.value}${columnGap.unit})`, - }, - }, - !horizontal && { - height: `calc(100% + ${rowGap.value}${rowGap.unit})`, - '> *': { - maxHeight: rowGap.value === 0 ? '100%' : `calc(100% - ${rowGap.value}${rowGap.unit})`, - }, - }, - ], - }; -}; diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/StackItemShimBestPractices.md b/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/StackItemShimBestPractices.md deleted file mode 100644 index 08ff8ddeeb5f86..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/StackItemShimBestPractices.md +++ /dev/null @@ -1,5 +0,0 @@ -## Best practices - -### Do - -### Don't diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/StackItemShimDefault.stories.tsx b/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/StackItemShimDefault.stories.tsx deleted file mode 100644 index a40bf8bc0f9197..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/StackItemShimDefault.stories.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import * as React from 'react'; -import { StackItemShim, StackItemShimProps } from '@fluentui/react-stack-shim-v8-v9'; - -export const Default = (props: Partial) => ; diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/StackItemShimDescription.md b/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/StackItemShimDescription.md deleted file mode 100644 index e69de29bb2d1d6..00000000000000 diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/index.stories.tsx b/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/index.stories.tsx deleted file mode 100644 index fb22e9f5e3ecbb..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/index.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { StackItemShim } from '@fluentui/react-stack-shim-v8-v9'; - -import descriptionMd from './StackItemShimDescription.md'; -import bestPracticesMd from './StackItemShimBestPractices.md'; - -export { Default } from './StackItemShimDefault.stories'; - -export default { - title: 'Preview Components/StackItemShim', - component: StackItemShim, - parameters: { - docs: { - description: { - component: [descriptionMd, bestPracticesMd].join('\n'), - }, - }, - }, -}; diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/StackShimBestPractices.md b/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/StackShimBestPractices.md deleted file mode 100644 index 08ff8ddeeb5f86..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/StackShimBestPractices.md +++ /dev/null @@ -1,5 +0,0 @@ -## Best practices - -### Do - -### Don't diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/StackShimDefault.stories.tsx b/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/StackShimDefault.stories.tsx deleted file mode 100644 index 8f5bb71a3cb98b..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/StackShimDefault.stories.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import * as React from 'react'; -import { StackShim, StackShimProps } from '@fluentui/react-stack-shim-v8-v9'; - -export const Default = (props: Partial) => ; diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/StackShimDescription.md b/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/StackShimDescription.md deleted file mode 100644 index e69de29bb2d1d6..00000000000000 diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/index.stories.tsx b/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/index.stories.tsx deleted file mode 100644 index 52ef2bd5585863..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/index.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { StackShim } from '@fluentui/react-stack-shim-v8-v9'; - -import descriptionMd from './StackShimDescription.md'; -import bestPracticesMd from './StackShimBestPractices.md'; - -export { Default } from './StackShimDefault.stories'; - -export default { - title: 'Preview Components/StackShim', - component: StackShim, - parameters: { - docs: { - description: { - component: [descriptionMd, bestPracticesMd].join('\n'), - }, - }, - }, -}; diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.json b/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.json deleted file mode 100644 index 1941a041d46c19..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "extends": "../../../tsconfig.base.json", - "compilerOptions": { - "target": "ES2019", - "noEmit": true, - "isolatedModules": true, - "importHelpers": true, - "jsx": "react", - "noUnusedLocals": true, - "preserveConstEnums": true - }, - "include": [], - "files": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - }, - { - "path": "./.storybook/tsconfig.json" - } - ] -} diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.lib.json b/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.lib.json deleted file mode 100644 index 7f94e04299ed85..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.lib.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "noEmit": false, - "lib": ["ES2019", "dom"], - "declaration": true, - "declarationDir": "../../../dist/out-tsc/types", - "outDir": "../../../dist/out-tsc", - "inlineSources": true, - "types": ["static-assets", "environment"] - }, - "exclude": [ - "./src/common/**", - "**/*.spec.ts", - "**/*.spec.tsx", - "**/*.test.ts", - "**/*.test.tsx", - "**/*.stories.ts", - "**/*.stories.tsx" - ], - "include": ["./src/**/*.ts", "./src/**/*.tsx"] -} diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.spec.json b/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.spec.json deleted file mode 100644 index 469fcba4d7ba75..00000000000000 --- a/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.spec.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "module": "CommonJS", - "outDir": "dist", - "types": ["jest", "node"] - }, - "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"] -} diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/.babelrc.json b/packages/react-components-migration/react-theme-shim-v8-v9/.babelrc.json deleted file mode 100644 index 40e01373083cee..00000000000000 --- a/packages/react-components-migration/react-theme-shim-v8-v9/.babelrc.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["@griffel"], - "plugins": ["annotate-pure-calls", "@babel/transform-react-pure-annotations"] -} diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/.eslintrc.json b/packages/react-components-migration/react-theme-shim-v8-v9/.eslintrc.json deleted file mode 100644 index ceea884c70dccc..00000000000000 --- a/packages/react-components-migration/react-theme-shim-v8-v9/.eslintrc.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "extends": ["plugin:@fluentui/eslint-plugin/react"], - "root": true -} diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/.npmignore b/packages/react-components-migration/react-theme-shim-v8-v9/.npmignore deleted file mode 100644 index 52d2a7273a151d..00000000000000 --- a/packages/react-components-migration/react-theme-shim-v8-v9/.npmignore +++ /dev/null @@ -1,29 +0,0 @@ -.storybook/ -.vscode/ -bundle-size/ -config/ -coverage/ -e2e/ -etc/ -node_modules/ -src/ -dist/types/ -temp/ -__fixtures__ -__mocks__ -__tests__ - -*.api.json -*.log -*.spec.* -*.stories.* -*.test.* -*.yml - -# config files -*config.* -*rc.* -.editorconfig -.eslint* -.git* -.prettierignore diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/.storybook/main.js b/packages/react-components-migration/react-theme-shim-v8-v9/.storybook/main.js deleted file mode 100644 index f57cfd09509e78..00000000000000 --- a/packages/react-components-migration/react-theme-shim-v8-v9/.storybook/main.js +++ /dev/null @@ -1,14 +0,0 @@ -const rootMain = require('../../../../.storybook/main'); - -module.exports = /** @type {Omit} */ ({ - ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], - addons: [...rootMain.addons], - webpackFinal: (config, options) => { - const localConfig = { ...rootMain.webpackFinal(config, options) }; - - // add your own webpack tweaks if needed - - return localConfig; - }, -}); diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/.storybook/preview.js b/packages/react-components-migration/react-theme-shim-v8-v9/.storybook/preview.js deleted file mode 100644 index 1939500a3d18c7..00000000000000 --- a/packages/react-components-migration/react-theme-shim-v8-v9/.storybook/preview.js +++ /dev/null @@ -1,7 +0,0 @@ -import * as rootPreview from '../../../../.storybook/preview'; - -/** @type {typeof rootPreview.decorators} */ -export const decorators = [...rootPreview.decorators]; - -/** @type {typeof rootPreview.parameters} */ -export const parameters = { ...rootPreview.parameters }; diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/.storybook/tsconfig.json b/packages/react-components-migration/react-theme-shim-v8-v9/.storybook/tsconfig.json deleted file mode 100644 index f9f60e1234ed49..00000000000000 --- a/packages/react-components-migration/react-theme-shim-v8-v9/.storybook/tsconfig.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "outDir": "", - "allowJs": true, - "checkJs": true, - "types": ["static-assets", "environment", "storybook__addons"] - }, - "include": ["../src/**/*.stories.ts", "../src/**/*.stories.tsx", "*.js"] -} diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/LICENSE b/packages/react-components-migration/react-theme-shim-v8-v9/LICENSE deleted file mode 100644 index 548985be092ab4..00000000000000 --- a/packages/react-components-migration/react-theme-shim-v8-v9/LICENSE +++ /dev/null @@ -1,15 +0,0 @@ -@fluentui/react-theme-shim-v8-v9 - -Copyright (c) Microsoft Corporation - -All rights reserved. - -MIT License - -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - -Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/README.md b/packages/react-components-migration/react-theme-shim-v8-v9/README.md deleted file mode 100644 index f2bb41b9bb527e..00000000000000 --- a/packages/react-components-migration/react-theme-shim-v8-v9/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# @fluentui/react-theme-shim-v8-v9 - -**React Theme Shim V8 V9 components for [Fluent UI React](https://react.fluentui.dev/)** - -These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release. diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/Spec.md b/packages/react-components-migration/react-theme-shim-v8-v9/Spec.md deleted file mode 100644 index 50c00808a47f4f..00000000000000 --- a/packages/react-components-migration/react-theme-shim-v8-v9/Spec.md +++ /dev/null @@ -1,63 +0,0 @@ -# @fluentui/react-theme-shim-v8-v9 Spec - -## Background - -_Description and use cases of this component_ - -## Prior Art - -_Include background research done for this component_ - -- _Link to Open UI research_ -- _Link to comparison of v7 and v0_ -- _Link to GitHub epic issue for the converged component_ - -## Sample Code - -_Provide some representative example code that uses the proposed API for the component_ - -## Variants - -_Describe visual or functional variants of this control, if applicable. For example, a slider could have a 2D variant._ - -## API - -_List the **Props** and **Slots** proposed for the component. Ideally this would just be a link to the component's `.types.ts` file_ - -## Structure - -- _**Public**_ -- _**Internal**_ -- _**DOM** - how the component will be rendered as HTML elements_ - -## Migration - -_Describe what will need to be done to upgrade from the existing implementations:_ - -- _Migration from v8_ -- _Migration from v0_ - -## Behaviors - -_Explain how the component will behave in use, including:_ - -- _Component States_ -- _Interaction_ - - _Keyboard_ - - _Cursor_ - - _Touch_ - - _Screen readers_ - -## Accessibility - -Base accessibility information is included in the design document. After the spec is filled and review, outcomes from it need to be communicated to design and incorporated in the design document. - -- Decide whether to use **native element** or folow **ARIA** and provide reasons -- Identify the **[ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/) pattern** and, if the component is listed there, follow its specification as possible. -- Identify accessibility **variants**, the `role` ([ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)) of the component, its `slots` and `aria-*` props. -- Describe the **keyboard navigation**: Tab Oder and Arrow Key Navigation. Describe any other keyboard **shortcuts** used -- Specify texts for **state change announcements** - [ARIA live regions - ](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) (number of available items in dropdown, error messages, confirmations, ...) -- Identify UI parts that appear on **hover or focus** and specify keyboard and screen reader interaction with them -- List cases when **focus** needs to be **trapped** in sections of the UI (for dialogs and popups or for hierarchical navigation) -- List cases when **focus** needs to be **moved programatically** (if parts of the UI are appearing/disappearing or other cases) diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/config/api-extractor.json b/packages/react-components-migration/react-theme-shim-v8-v9/config/api-extractor.json deleted file mode 100644 index a8c3d3240d101e..00000000000000 --- a/packages/react-components-migration/react-theme-shim-v8-v9/config/api-extractor.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", - "extends": "@fluentui/scripts/api-extractor/api-extractor.common.v-next.json", - "dtsRollup": { - "enabled": true, - "untrimmedFilePath": "", - "publicTrimmedFilePath": "/dist/index.d.ts" - }, - "mainEntryPointFilePath": "/../../../dist/out-tsc/types/packages/react-components-migration//src/index.d.ts" -} diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/config/tests.js b/packages/react-components-migration/react-theme-shim-v8-v9/config/tests.js deleted file mode 100644 index 2e211ae9e21420..00000000000000 --- a/packages/react-components-migration/react-theme-shim-v8-v9/config/tests.js +++ /dev/null @@ -1 +0,0 @@ -/** Jest test setup file. */ diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/etc/react-theme-shim-v8-v9.api.md b/packages/react-components-migration/react-theme-shim-v8-v9/etc/react-theme-shim-v8-v9.api.md deleted file mode 100644 index a5fab9af464005..00000000000000 --- a/packages/react-components-migration/react-theme-shim-v8-v9/etc/react-theme-shim-v8-v9.api.md +++ /dev/null @@ -1,158 +0,0 @@ -## API Report File for "@fluentui/react-theme-shim-v8-v9" - -> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). - -```ts - -import { BrandVariants } from '@fluentui/react-theme'; -import { IPalette } from '@fluentui/react'; -import { Theme } from '@fluentui/react-theme'; -import { Theme as Theme_2 } from '@fluentui/react'; -import { Theme as Theme_3 } from '@fluentui/react-components'; - -// @public (undocumented) -export type AlphaColors = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90; - -// @public (undocumented) -export const black = "#000000"; - -// @public (undocumented) -export const blackAlpha: Record; - -// @public (undocumented) -export const brandWeb: BrandVariants; - -// @public -export type ColorVariants = { - shade50: string; - shade40: string; - shade30: string; - shade20: string; - shade10: string; - primary: string; - tint10: string; - tint20: string; - tint30: string; - tint40: string; - tint50: string; - tint60: string; -}; - -// @public -export const createBrandVariants: (palette: IPalette, interpolation?: Interpolation) => BrandVariants; - -// @public -export const createv8Theme: (brandColors: BrandVariants, themeV9: Theme, isDarkTheme?: boolean, themeV8?: Theme_2 | undefined) => Theme_2; - -// @public -export const createv9Theme: (themeV8: Theme_2, baseThemeV9?: Theme_3 | undefined) => Theme_3; - -// @public -export type GlobalSharedColors = { - darkRed: ColorVariants; - burgundy: ColorVariants; - cranberry: ColorVariants; - red: ColorVariants; - darkOrange: ColorVariants; - bronze: ColorVariants; - pumpkin: ColorVariants; - orange: ColorVariants; - peach: ColorVariants; - marigold: ColorVariants; - yellow: ColorVariants; - gold: ColorVariants; - brass: ColorVariants; - brown: ColorVariants; - darkBrown: ColorVariants; - lime: ColorVariants; - forest: ColorVariants; - seafoam: ColorVariants; - lightGreen: ColorVariants; - green: ColorVariants; - darkGreen: ColorVariants; - lightTeal: ColorVariants; - teal: ColorVariants; - darkTeal: ColorVariants; - cyan: ColorVariants; - steel: ColorVariants; - lightBlue: ColorVariants; - blue: ColorVariants; - royalBlue: ColorVariants; - darkBlue: ColorVariants; - cornflower: ColorVariants; - navy: ColorVariants; - lavender: ColorVariants; - purple: ColorVariants; - darkPurple: ColorVariants; - orchid: ColorVariants; - grape: ColorVariants; - berry: ColorVariants; - lilac: ColorVariants; - pink: ColorVariants; - hotPink: ColorVariants; - magenta: ColorVariants; - plum: ColorVariants; - beige: ColorVariants; - mink: ColorVariants; - silver: ColorVariants; - platinum: ColorVariants; - anchor: ColorVariants; - charcoal: ColorVariants; -}; - -// @public (undocumented) -export const grey: Record; - -// @public (undocumented) -export const grey14Alpha: Record; - -// @public (undocumented) -export type Greys = 0 | 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 26 | 28 | 30 | 32 | 34 | 36 | 38 | 40 | 42 | 44 | 46 | 48 | 50 | 52 | 54 | 56 | 58 | 60 | 62 | 64 | 66 | 68 | 70 | 72 | 74 | 76 | 78 | 80 | 82 | 84 | 86 | 88 | 90 | 92 | 94 | 96 | 98 | 100; - -// @public (undocumented) -export const hcButtonFace = "#ffffff"; - -// @public (undocumented) -export const hcButtonText = "#000000"; - -// @public (undocumented) -export const hcCanvas = "#000000"; - -// @public (undocumented) -export const hcCanvasText = "#ffffff"; - -// @public (undocumented) -export const hcDisabled = "#3ff23f"; - -// @public (undocumented) -export const hcHighlight = "#1aebff"; - -// @public (undocumented) -export const hcHighlightText = "#000000"; - -// @public (undocumented) -export const hcHyperlink = "#ffff00"; - -// @public (undocumented) -export const sharedColors: GlobalSharedColors; - -// @public (undocumented) -export type TextAlignment = 'inherit' | 'initial' | 'revert' | 'unset' | 'center' | 'end' | 'start' | 'justify' | 'left' | 'match-parent' | 'right'; - -// @public (undocumented) -export type TextAlignments = { - start: TextAlignment; - center: TextAlignment; - end: TextAlignment; - justify: TextAlignment; -}; - -// @public (undocumented) -export const white = "#ffffff"; - -// @public (undocumented) -export const whiteAlpha: Record; - -// (No @packageDocumentation comment for this package) - -``` diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/jest.config.js b/packages/react-components-migration/react-theme-shim-v8-v9/jest.config.js deleted file mode 100644 index ddb37f75f680ad..00000000000000 --- a/packages/react-components-migration/react-theme-shim-v8-v9/jest.config.js +++ /dev/null @@ -1,21 +0,0 @@ -// @ts-check - -/** - * @type {import('@jest/types').Config.InitialOptions} - */ -module.exports = { - displayName: 'react-theme-shim-v8-v9', - preset: '../../../jest.preset.js', - globals: { - 'ts-jest': { - tsConfig: '/tsconfig.spec.json', - diagnostics: false, - }, - }, - transform: { - '^.+\\.tsx?$': 'ts-jest', - }, - coverageDirectory: './coverage', - setupFilesAfterEnv: ['./config/tests.js'], - snapshotSerializers: ['@griffel/jest-serializer'], -}; diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/just.config.ts b/packages/react-components-migration/react-theme-shim-v8-v9/just.config.ts deleted file mode 100644 index bcc7d9d264037c..00000000000000 --- a/packages/react-components-migration/react-theme-shim-v8-v9/just.config.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { preset } from '@fluentui/scripts'; - -preset(); diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/package.json b/packages/react-components-migration/react-theme-shim-v8-v9/package.json deleted file mode 100644 index 9522f38ff04f13..00000000000000 --- a/packages/react-components-migration/react-theme-shim-v8-v9/package.json +++ /dev/null @@ -1,54 +0,0 @@ -{ - "name": "@fluentui/react-theme-shim-v8-v9", - "version": "9.0.0-alpha.0", - "private": true, - "description": "Fluent UI React Theme shim to help migration from v8 to v9", - "main": "lib-commonjs/index.js", - "module": "lib/index.js", - "typings": "dist/index.d.ts", - "sideEffects": false, - "repository": { - "type": "git", - "url": "https://github.com/microsoft/fluentui" - }, - "license": "MIT", - "scripts": { - "build": "just-scripts build", - "clean": "just-scripts clean", - "code-style": "just-scripts code-style", - "just": "just-scripts", - "lint": "just-scripts lint", - "test": "jest --passWithNoTests", - "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor", - "type-check": "tsc -b tsconfig.json", - "storybook": "start-storybook", - "start": "yarn storybook" - }, - "devDependencies": { - "@fluentui/eslint-plugin": "*", - "@fluentui/react-conformance": "*", - "@fluentui/react-conformance-griffel": "9.0.0-beta.14", - "@fluentui/scripts": "^1.0.0" - }, - "dependencies": { - "@ctrl/tinycolor": "3.3.4", - "@fluentui/react": "^8.97.2", - "@fluentui/react-components": "^9.4.0", - "@fluentui/react-theme": "^9.1.0", - "@fluentui/react-utilities": "^9.1.0", - "@griffel/react": "^1.3.0", - "tslib": "^2.1.0" - }, - "peerDependencies": { - "@types/react": ">=16.8.0 <18.0.0", - "@types/react-dom": ">=16.8.0 <18.0.0", - "react": ">=16.8.0 <18.0.0", - "react-dom": ">=16.8.0 <18.0.0" - }, - "beachball": { - "disallowedChangeTypes": [ - "major", - "prerelease" - ] - } -} diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/src/index.ts b/packages/react-components-migration/react-theme-shim-v8-v9/src/index.ts deleted file mode 100644 index e8b9a4c0f30bb4..00000000000000 --- a/packages/react-components-migration/react-theme-shim-v8-v9/src/index.ts +++ /dev/null @@ -1,30 +0,0 @@ -export { createv8Theme } from './v8ThemeShim'; -export { createv9Theme } from './v9ThemeShim'; -export { createBrandVariants } from './v9BrandVariantsShim'; -export { - black, - blackAlpha, - brandWeb, - grey, - grey14Alpha, - hcButtonFace, - hcButtonText, - hcCanvas, - hcCanvasText, - hcDisabled, - hcHighlight, - hcHighlightText, - hcHyperlink, - sharedColors, - white, - whiteAlpha, -} from './themeDuplicates'; - -export type { - AlphaColors, - ColorVariants, - GlobalSharedColors, - Greys, - TextAlignment, - TextAlignments, -} from './themeDuplicates'; diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/src/themeDuplicates.ts b/packages/react-components-migration/react-theme-shim-v8-v9/src/themeDuplicates.ts deleted file mode 100644 index c42e73c24d0b04..00000000000000 --- a/packages/react-components-migration/react-theme-shim-v8-v9/src/themeDuplicates.ts +++ /dev/null @@ -1,1073 +0,0 @@ -/** - * These colors have been copied here from react-theme because they are not exported from that package. - * They are necessary to build the theme shims. - */ - -import { BrandVariants } from '@fluentui/react-theme'; - -/** - * Possible color variant values - */ -export type ColorVariants = { - shade50: string; - shade40: string; - shade30: string; - shade20: string; - shade10: string; - primary: string; - tint10: string; - tint20: string; - tint30: string; - tint40: string; - tint50: string; - tint60: string; -}; - -/** - * All the global shared colors and their shade/tint variants - */ -export type GlobalSharedColors = { - darkRed: ColorVariants; - burgundy: ColorVariants; - cranberry: ColorVariants; - red: ColorVariants; - darkOrange: ColorVariants; - bronze: ColorVariants; - pumpkin: ColorVariants; - orange: ColorVariants; - peach: ColorVariants; - marigold: ColorVariants; - yellow: ColorVariants; - gold: ColorVariants; - brass: ColorVariants; - brown: ColorVariants; - darkBrown: ColorVariants; - lime: ColorVariants; - forest: ColorVariants; - seafoam: ColorVariants; - lightGreen: ColorVariants; - green: ColorVariants; - darkGreen: ColorVariants; - lightTeal: ColorVariants; - teal: ColorVariants; - darkTeal: ColorVariants; - cyan: ColorVariants; - steel: ColorVariants; - lightBlue: ColorVariants; - blue: ColorVariants; - royalBlue: ColorVariants; - darkBlue: ColorVariants; - cornflower: ColorVariants; - navy: ColorVariants; - lavender: ColorVariants; - purple: ColorVariants; - darkPurple: ColorVariants; - orchid: ColorVariants; - grape: ColorVariants; - berry: ColorVariants; - lilac: ColorVariants; - pink: ColorVariants; - hotPink: ColorVariants; - magenta: ColorVariants; - plum: ColorVariants; - beige: ColorVariants; - mink: ColorVariants; - silver: ColorVariants; - platinum: ColorVariants; - anchor: ColorVariants; - charcoal: ColorVariants; -}; - -export type TextAlignment = - | 'inherit' - | 'initial' - | 'revert' - | 'unset' - | 'center' - | 'end' - | 'start' - | 'justify' - | 'left' - | 'match-parent' - | 'right'; - -export type TextAlignments = { - start: TextAlignment; - center: TextAlignment; - end: TextAlignment; - justify: TextAlignment; -}; - -export type Greys = - | 0 - | 2 - | 4 - | 6 - | 8 - | 10 - | 12 - | 14 - | 16 - | 18 - | 20 - | 22 - | 24 - | 26 - | 28 - | 30 - | 32 - | 34 - | 36 - | 38 - | 40 - | 42 - | 44 - | 46 - | 48 - | 50 - | 52 - | 54 - | 56 - | 58 - | 60 - | 62 - | 64 - | 66 - | 68 - | 70 - | 72 - | 74 - | 76 - | 78 - | 80 - | 82 - | 84 - | 86 - | 88 - | 90 - | 92 - | 94 - | 96 - | 98 - | 100; - -export type AlphaColors = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90; - -export const grey: Record = { - '0': '#000000', - '2': '#050505', - '4': '#0a0a0a', - '6': '#0f0f0f', - '8': '#141414', - '10': '#1a1a1a', - '12': '#1f1f1f', - '14': '#242424', - '16': '#292929', - '18': '#2e2e2e', - '20': '#333333', - '22': '#383838', - '24': '#3d3d3d', - '26': '#424242', - '28': '#474747', - '30': '#4d4d4d', - '32': '#525252', - '34': '#575757', - '36': '#5c5c5c', - '38': '#616161', - '40': '#666666', - '42': '#6b6b6b', - '44': '#707070', - '46': '#757575', - '48': '#7a7a7a', - '50': '#808080', - '52': '#858585', - '54': '#8a8a8a', - '56': '#8f8f8f', - '58': '#949494', - '60': '#999999', - '62': '#9e9e9e', - '64': '#a3a3a3', - '66': '#a8a8a8', - '68': '#adadad', - '70': '#b3b3b3', - '72': '#b8b8b8', - '74': '#bdbdbd', - '76': '#c2c2c2', - '78': '#c7c7c7', - '80': '#cccccc', - '82': '#d1d1d1', - '84': '#d6d6d6', - '86': '#dbdbdb', - '88': '#e0e0e0', - '90': '#e6e6e6', - '92': '#ebebeb', - '94': '#f0f0f0', - '96': '#f5f5f5', - '98': '#fafafa', - '100': '#ffffff', -}; - -export const whiteAlpha: Record = { - '5': 'rgba(255, 255, 255, 0.05)', - '10': 'rgba(255, 255, 255, 0.1)', - '20': 'rgba(255, 255, 255, 0.2)', - '30': 'rgba(255, 255, 255, 0.3)', - '40': 'rgba(255, 255, 255, 0.4)', - '50': 'rgba(255, 255, 255, 0.5)', - '60': 'rgba(255, 255, 255, 0.6)', - '70': 'rgba(255, 255, 255, 0.7)', - '80': 'rgba(255, 255, 255, 0.8)', - '90': 'rgba(255, 255, 255, 0.9)', -}; - -export const blackAlpha: Record = { - '5': 'rgba(0, 0, 0, 0.05)', - '10': 'rgba(0, 0, 0, 0.1)', - '20': 'rgba(0, 0, 0, 0.2)', - '30': 'rgba(0, 0, 0, 0.3)', - '40': 'rgba(0, 0, 0, 0.4)', - '50': 'rgba(0, 0, 0, 0.5)', - '60': 'rgba(0, 0, 0, 0.6)', - '70': 'rgba(0, 0, 0, 0.7)', - '80': 'rgba(0, 0, 0, 0.8)', - '90': 'rgba(0, 0, 0, 0.9)', -}; - -export const grey14Alpha: Record = { - '5': 'rgba(36, 36, 36, 0.05)', - '10': 'rgba(36, 36, 36, 0.1)', - '20': 'rgba(36, 36, 36, 0.2)', - '30': 'rgba(36, 36, 36, 0.3)', - '40': 'rgba(36, 36, 36, 0.4)', - '50': 'rgba(36, 36, 36, 0.5)', - '60': 'rgba(36, 36, 36, 0.6)', - '70': 'rgba(36, 36, 36, 0.7)', - '80': 'rgba(36, 36, 36, 0.8)', - '90': 'rgba(36, 36, 36, 0.9)', -}; - -export const white = '#ffffff'; - -export const black = '#000000'; - -export const hcHyperlink = '#ffff00'; - -export const hcHighlight = '#1aebff'; - -export const hcDisabled = '#3ff23f'; - -export const hcCanvas = '#000000'; - -export const hcCanvasText = '#ffffff'; - -export const hcHighlightText = '#000000'; - -export const hcButtonText = '#000000'; - -export const hcButtonFace = '#ffffff'; - -const darkRed: ColorVariants = { - shade50: '#130204', - shade40: '#230308', - shade30: '#420610', - shade20: '#590815', - shade10: '#690a19', - primary: '#750b1c', - tint10: '#861b2c', - tint20: '#962f3f', - tint30: '#ac4f5e', - tint40: '#d69ca5', - tint50: '#e9c7cd', - tint60: '#f9f0f2', -}; - -const burgundy: ColorVariants = { - shade50: '#1a0607', - shade40: '#310b0d', - shade30: '#5c1519', - shade20: '#7d1d21', - shade10: '#942228', - primary: '#a4262c', - tint10: '#af393e', - tint20: '#ba4d52', - tint30: '#c86c70', - tint40: '#e4afb2', - tint50: '#f0d3d4', - tint60: '#fbf4f4', -}; - -const cranberry: ColorVariants = { - shade50: '#200205', - shade40: '#3b0509', - shade30: '#6e0811', - shade20: '#960b18', - shade10: '#b10e1c', - primary: '#c50f1f', - tint10: '#cc2635', - tint20: '#d33f4c', - tint30: '#dc626d', - tint40: '#eeacb2', - tint50: '#f6d1d5', - tint60: '#fdf3f4', -}; - -const red: ColorVariants = { - shade50: '#210809', - shade40: '#3f1011', - shade30: '#751d1f', - shade20: '#9f282b', - shade10: '#bc2f32', - primary: '#d13438', - tint10: '#d7494c', - tint20: '#dc5e62', - tint30: '#e37d80', - tint40: '#f1bbbc', - tint50: '#f8dadb', - tint60: '#fdf6f6', -}; - -const darkOrange: ColorVariants = { - shade50: '#230900', - shade40: '#411200', - shade30: '#7a2101', - shade20: '#a62d01', - shade10: '#c43501', - primary: '#da3b01', - tint10: '#de501c', - tint20: '#e36537', - tint30: '#e9835e', - tint40: '#f4bfab', - tint50: '#f9dcd1', - tint60: '#fdf6f3', -}; - -const bronze: ColorVariants = { - shade50: '#1b0a01', - shade40: '#321303', - shade30: '#5e2405', - shade20: '#7f3107', - shade10: '#963a08', - primary: '#a74109', - tint10: '#b2521e', - tint20: '#bc6535', - tint30: '#ca8057', - tint40: '#e5bba4', - tint50: '#f1d9cc', - tint60: '#fbf5f2', -}; - -const pumpkin: ColorVariants = { - shade50: '#200d03', - shade40: '#3d1805', - shade30: '#712d09', - shade20: '#9a3d0c', - shade10: '#b6480e', - primary: '#ca5010', - tint10: '#d06228', - tint20: '#d77440', - tint30: '#df8e64', - tint40: '#efc4ad', - tint50: '#f7dfd2', - tint60: '#fdf7f4', -}; - -const orange: ColorVariants = { - shade50: '#271002', - shade40: '#4a1e04', - shade30: '#8a3707', - shade20: '#bc4b09', - shade10: '#de590b', - primary: '#f7630c', - tint10: '#f87528', - tint20: '#f98845', - tint30: '#faa06b', - tint40: '#fdcfb4', - tint50: '#fee5d7', - tint60: '#fff9f5', -}; - -const peach: ColorVariants = { - shade50: '#291600', - shade40: '#4d2a00', - shade30: '#8f4e00', - shade20: '#c26a00', - shade10: '#e67e00', - primary: '#ff8c00', - tint10: '#ff9a1f', - tint20: '#ffa83d', - tint30: '#ffba66', - tint40: '#ffddb3', - tint50: '#ffedd6', - tint60: '#fffaf5', -}; - -const marigold: ColorVariants = { - shade50: '#251a00', - shade40: '#463100', - shade30: '#835b00', - shade20: '#b27c00', - shade10: '#d39300', - primary: '#eaa300', - tint10: '#edad1c', - tint20: '#efb839', - tint30: '#f2c661', - tint40: '#f9e2ae', - tint50: '#fcefd3', - tint60: '#fefbf4', -}; - -const yellow: ColorVariants = { - primary: '#fde300', - shade10: '#e4cc00', - shade20: '#c0ad00', - shade30: '#817400', - shade40: '#4c4400', - shade50: '#282400', - tint10: '#fde61e', - tint20: '#fdea3d', - tint30: '#feee66', - tint40: '#fef7b2', - tint50: '#fffad6', - tint60: '#fffef5', -}; - -const gold: ColorVariants = { - shade50: '#1f1900', - shade40: '#3a2f00', - shade30: '#6c5700', - shade20: '#937700', - shade10: '#ae8c00', - primary: '#c19c00', - tint10: '#c8a718', - tint20: '#d0b232', - tint30: '#dac157', - tint40: '#ecdfa5', - tint50: '#f5eece', - tint60: '#fdfbf2', -}; - -const brass: ColorVariants = { - shade50: '#181202', - shade40: '#2e2103', - shade30: '#553e06', - shade20: '#745408', - shade10: '#89640a', - primary: '#986f0b', - tint10: '#a47d1e', - tint20: '#b18c34', - tint30: '#c1a256', - tint40: '#e0cea2', - tint50: '#efe4cb', - tint60: '#fbf8f2', -}; - -const brown: ColorVariants = { - shade50: '#170e07', - shade40: '#2b1a0e', - shade30: '#50301a', - shade20: '#6c4123', - shade10: '#804d29', - primary: '#8e562e', - tint10: '#9c663f', - tint20: '#a97652', - tint30: '#bb8f6f', - tint40: '#ddc3b0', - tint50: '#edded3', - tint60: '#faf7f4', -}; - -const darkBrown: ColorVariants = { - shade50: '#0c0704', - shade40: '#170c08', - shade30: '#2b1710', - shade20: '#3a1f15', - shade10: '#452519', - primary: '#4d291c', - tint10: '#623a2b', - tint20: '#784d3e', - tint30: '#946b5c', - tint40: '#caada3', - tint50: '#e3d2cb', - tint60: '#f8f3f2', -}; - -const lime: ColorVariants = { - shade50: '#121b06', - shade40: '#23330b', - shade30: '#405f14', - shade20: '#57811b', - shade10: '#689920', - primary: '#73aa24', - tint10: '#81b437', - tint20: '#90be4c', - tint30: '#a4cc6c', - tint40: '#cfe5af', - tint50: '#e5f1d3', - tint60: '#f8fcf4', -}; - -const forest: ColorVariants = { - shade50: '#0c1501', - shade40: '#162702', - shade30: '#294903', - shade20: '#376304', - shade10: '#427505', - primary: '#498205', - tint10: '#599116', - tint20: '#6ba02b', - tint30: '#85b44c', - tint40: '#bdd99b', - tint50: '#dbebc7', - tint60: '#f6faf0', -}; - -const seafoam: ColorVariants = { - shade50: '#002111', - shade40: '#003d20', - shade30: '#00723b', - shade20: '#009b51', - shade10: '#00b85f', - primary: '#00cc6a', - tint10: '#19d279', - tint20: '#34d889', - tint30: '#5ae0a0', - tint40: '#a8f0cd', - tint50: '#cff7e4', - tint60: '#f3fdf8', -}; - -const lightGreen: ColorVariants = { - shade50: '#031a02', - shade40: '#063004', - shade30: '#0b5a08', - shade20: '#0e7a0b', - shade10: '#11910d', - primary: '#13a10e', - tint10: '#27ac22', - tint20: '#3db838', - tint30: '#5ec75a', - tint40: '#a7e3a5', - tint50: '#cef0cd', - tint60: '#f2fbf2', -}; - -const green: ColorVariants = { - shade50: '#031403', - shade40: '#052505', - shade30: '#094509', - shade20: '#0c5e0c', - shade10: '#0e700e', - primary: '#107c10', - tint10: '#218c21', - tint20: '#359b35', - tint30: '#54b054', - tint40: '#9fd89f', - tint50: '#c9eac9', - tint60: '#f1faf1', -}; - -const darkGreen: ColorVariants = { - shade50: '#021102', - shade40: '#032003', - shade30: '#063b06', - shade20: '#085108', - shade10: '#0a5f0a', - primary: '#0b6a0b', - tint10: '#1a7c1a', - tint20: '#2d8e2d', - tint30: '#4da64d', - tint40: '#9ad29a', - tint50: '#c6e7c6', - tint60: '#f0f9f0', -}; - -const lightTeal: ColorVariants = { - shade50: '#001d1f', - shade40: '#00373a', - shade30: '#00666d', - shade20: '#008b94', - shade10: '#00a5af', - primary: '#00b7c3', - tint10: '#18bfca', - tint20: '#32c8d1', - tint30: '#58d3db', - tint40: '#a6e9ed', - tint50: '#cef3f5', - tint60: '#f2fcfd', -}; - -const teal: ColorVariants = { - shade50: '#001516', - shade40: '#012728', - shade30: '#02494c', - shade20: '#026467', - shade10: '#037679', - primary: '#038387', - tint10: '#159195', - tint20: '#2aa0a4', - tint30: '#4cb4b7', - tint40: '#9bd9db', - tint50: '#c7ebec', - tint60: '#f0fafa', -}; - -const darkTeal: ColorVariants = { - shade50: '#001010', - shade40: '#001f1f', - shade30: '#003939', - shade20: '#004e4e', - shade10: '#005c5c', - primary: '#006666', - tint10: '#0e7878', - tint20: '#218b8b', - tint30: '#41a3a3', - tint40: '#92d1d1', - tint50: '#c2e7e7', - tint60: '#eff9f9', -}; - -const cyan: ColorVariants = { - shade50: '#00181e', - shade40: '#002e38', - shade30: '#005669', - shade20: '#00748f', - shade10: '#008aa9', - primary: '#0099bc', - tint10: '#18a4c4', - tint20: '#31afcc', - tint30: '#56bfd7', - tint40: '#a4deeb', - tint50: '#cdedf4', - tint60: '#f2fafc', -}; - -const steel: ColorVariants = { - shade50: '#000f12', - shade40: '#001b22', - shade30: '#00333f', - shade20: '#004555', - shade10: '#005265', - primary: '#005b70', - tint10: '#0f6c81', - tint20: '#237d92', - tint30: '#4496a9', - tint40: '#94c8d4', - tint50: '#c3e1e8', - tint60: '#eff7f9', -}; - -const lightBlue: ColorVariants = { - shade50: '#091823', - shade40: '#112d42', - shade30: '#20547c', - shade20: '#2c72a8', - shade10: '#3487c7', - primary: '#3a96dd', - tint10: '#4fa1e1', - tint20: '#65ade5', - tint30: '#83bdeb', - tint40: '#bfddf5', - tint50: '#dcedfa', - tint60: '#f6fafe', -}; - -const blue: ColorVariants = { - shade50: '#001322', - shade40: '#002440', - shade30: '#004377', - shade20: '#005ba1', - shade10: '#006cbf', - primary: '#0078d4', - tint10: '#1a86d9', - tint20: '#3595de', - tint30: '#5caae5', - tint40: '#a9d3f2', - tint50: '#d0e7f8', - tint60: '#f3f9fd', -}; - -const royalBlue: ColorVariants = { - shade50: '#000c16', - shade40: '#00172a', - shade30: '#002c4e', - shade20: '#003b6a', - shade10: '#00467e', - primary: '#004e8c', - tint10: '#125e9a', - tint20: '#286fa8', - tint30: '#4a89ba', - tint40: '#9abfdc', - tint50: '#c7dced', - tint60: '#f0f6fa', -}; - -const darkBlue: ColorVariants = { - shade50: '#000910', - shade40: '#00111f', - shade30: '#002039', - shade20: '#002b4e', - shade10: '#00335c', - primary: '#003966', - tint10: '#0e4a78', - tint20: '#215c8b', - tint30: '#4178a3', - tint40: '#92b5d1', - tint50: '#c2d6e7', - tint60: '#eff4f9', -}; - -const cornflower: ColorVariants = { - shade50: '#0d1126', - shade40: '#182047', - shade30: '#2c3c85', - shade20: '#3c51b4', - shade10: '#4760d5', - primary: '#4f6bed', - tint10: '#637cef', - tint20: '#778df1', - tint30: '#93a4f4', - tint40: '#c8d1fa', - tint50: '#e1e6fc', - tint60: '#f7f9fe', -}; - -const navy: ColorVariants = { - shade50: '#00061d', - shade40: '#000c36', - shade30: '#001665', - shade20: '#001e89', - shade10: '#0023a2', - primary: '#0027b4', - tint10: '#173bbd', - tint20: '#3050c6', - tint30: '#546fd2', - tint40: '#a3b2e8', - tint50: '#ccd5f3', - tint60: '#f2f4fc', -}; - -const lavender: ColorVariants = { - shade50: '#120f25', - shade40: '#221d46', - shade30: '#3f3682', - shade20: '#5649b0', - shade10: '#6656d1', - primary: '#7160e8', - tint10: '#8172eb', - tint20: '#9184ee', - tint30: '#a79cf1', - tint40: '#d2ccf8', - tint50: '#e7e4fb', - tint60: '#f9f8fe', -}; - -const purple: ColorVariants = { - shade50: '#0f0717', - shade40: '#1c0e2b', - shade30: '#341a51', - shade20: '#46236e', - shade10: '#532982', - primary: '#5c2e91', - tint10: '#6b3f9e', - tint20: '#7c52ab', - tint30: '#9470bd', - tint40: '#c6b1de', - tint50: '#e0d3ed', - tint60: '#f7f4fb', -}; - -const darkPurple: ColorVariants = { - shade50: '#0a0411', - shade40: '#130820', - shade30: '#240f3c', - shade20: '#311552', - shade10: '#3a1861', - primary: '#401b6c', - tint10: '#512b7e', - tint20: '#633e8f', - tint30: '#7e5ca7', - tint40: '#b9a3d3', - tint50: '#d8cce7', - tint60: '#f5f2f9', -}; - -const orchid: ColorVariants = { - shade50: '#16101d', - shade40: '#281e37', - shade30: '#4c3867', - shade20: '#674c8c', - shade10: '#795aa6', - primary: '#8764b8', - tint10: '#9373c0', - tint20: '#a083c9', - tint30: '#b29ad4', - tint40: '#d7caea', - tint50: '#e9e2f4', - tint60: '#f9f8fc', -}; - -const grape: ColorVariants = { - shade50: '#160418', - shade40: '#29072e', - shade30: '#4c0d55', - shade20: '#671174', - shade10: '#7a1589', - primary: '#881798', - tint10: '#952aa4', - tint20: '#a33fb1', - tint30: '#b55fc1', - tint40: '#d9a7e0', - tint50: '#eaceef', - tint60: '#faf2fb', -}; - -const berry: ColorVariants = { - shade50: '#1f091d', - shade40: '#3a1136', - shade30: '#6d2064', - shade20: '#932b88', - shade10: '#af33a1', - primary: '#c239b3', - tint10: '#c94cbc', - tint20: '#d161c4', - tint30: '#da7ed0', - tint40: '#edbbe7', - tint50: '#f5daf2', - tint60: '#fdf5fc', -}; - -const lilac: ColorVariants = { - shade50: '#1c0b1f', - shade40: '#35153a', - shade30: '#63276d', - shade20: '#863593', - shade10: '#9f3faf', - primary: '#b146c2', - tint10: '#ba58c9', - tint20: '#c36bd1', - tint30: '#cf87da', - tint40: '#e6bfed', - tint50: '#f2dcf5', - tint60: '#fcf6fd', -}; - -const pink: ColorVariants = { - shade50: '#24091b', - shade40: '#441232', - shade30: '#80215d', - shade20: '#ad2d7e', - shade10: '#cd3595', - primary: '#e43ba6', - tint10: '#e750b0', - tint20: '#ea66ba', - tint30: '#ef85c8', - tint40: '#f7c0e3', - tint50: '#fbddf0', - tint60: '#fef6fb', -}; - -const hotPink: ColorVariants = { - shade50: '#240016', - shade40: '#44002a', - shade30: '#7f004e', - shade20: '#ad006a', - shade10: '#cc007e', - primary: '#e3008c', - tint10: '#e61c99', - tint20: '#ea38a6', - tint30: '#ee5fb7', - tint40: '#f7adda', - tint50: '#fbd2eb', - tint60: '#fef4fa', -}; - -const magenta: ColorVariants = { - shade50: '#1f0013', - shade40: '#390024', - shade30: '#6b0043', - shade20: '#91005a', - shade10: '#ac006b', - primary: '#bf0077', - tint10: '#c71885', - tint20: '#ce3293', - tint30: '#d957a8', - tint40: '#eca5d1', - tint50: '#f5cee6', - tint60: '#fcf2f9', -}; - -const plum: ColorVariants = { - shade50: '#13000c', - shade40: '#240017', - shade30: '#43002b', - shade20: '#5a003b', - shade10: '#6b0045', - primary: '#77004d', - tint10: '#87105d', - tint20: '#98246f', - tint30: '#ad4589', - tint40: '#d696c0', - tint50: '#e9c4dc', - tint60: '#faf0f6', -}; - -const beige: ColorVariants = { - shade50: '#141313', - shade40: '#252323', - shade30: '#444241', - shade20: '#5d5958', - shade10: '#6e6968', - primary: '#7a7574', - tint10: '#8a8584', - tint20: '#9a9594', - tint30: '#afabaa', - tint40: '#d7d4d4', - tint50: '#eae8e8', - tint60: '#faf9f9', -}; - -const mink: ColorVariants = { - shade50: '#0f0e0e', - shade40: '#1c1b1a', - shade30: '#343231', - shade20: '#474443', - shade10: '#54514f', - primary: '#5d5a58', - tint10: '#706d6b', - tint20: '#84817e', - tint30: '#9e9b99', - tint40: '#cecccb', - tint50: '#e5e4e3', - tint60: '#f8f8f8', -}; - -const silver: ColorVariants = { - shade50: '#151818', - shade40: '#282d2e', - shade30: '#4a5356', - shade20: '#657174', - shade10: '#78868a', - primary: '#859599', - tint10: '#92a1a5', - tint20: '#a0aeb1', - tint30: '#b3bfc2', - tint40: '#d8dfe0', - tint50: '#eaeeef', - tint60: '#fafbfb', -}; - -const platinum: ColorVariants = { - shade50: '#111314', - shade40: '#1f2426', - shade30: '#3b4447', - shade20: '#505c60', - shade10: '#5f6d71', - primary: '#69797e', - tint10: '#79898d', - tint20: '#89989d', - tint30: '#a0adb2', - tint40: '#cdd6d8', - tint50: '#e4e9ea', - tint60: '#f8f9fa', -}; - -const anchor: ColorVariants = { - shade50: '#090a0b', - shade40: '#111315', - shade30: '#202427', - shade20: '#2b3135', - shade10: '#333a3f', - primary: '#394146', - tint10: '#4d565c', - tint20: '#626c72', - tint30: '#808a90', - tint40: '#bcc3c7', - tint50: '#dbdfe1', - tint60: '#f6f7f8', -}; - -const charcoal: ColorVariants = { - shade50: '#090909', - shade40: '#111111', - shade30: '#202020', - shade20: '#2b2b2b', - shade10: '#333333', - primary: '#393939', - tint10: '#515151', - tint20: '#686868', - tint30: '#888888', - tint40: '#c4c4c4', - tint50: '#dfdfdf', - tint60: '#f7f7f7', -}; - -export const sharedColors: GlobalSharedColors = { - darkRed, - burgundy, - cranberry, - red, - darkOrange, - bronze, - pumpkin, - orange, - peach, - marigold, - yellow, - gold, - brass, - brown, - darkBrown, - lime, - forest, - seafoam, - lightGreen, - green, - darkGreen, - lightTeal, - teal, - darkTeal, - cyan, - steel, - lightBlue, - blue, - royalBlue, - darkBlue, - cornflower, - navy, - lavender, - purple, - darkPurple, - orchid, - grape, - berry, - lilac, - pink, - hotPink, - magenta, - plum, - beige, - mink, - silver, - platinum, - anchor, - charcoal, -}; - -export const brandWeb: BrandVariants = { - 10: `#061724`, - 20: `#082338`, - 30: `#0a2e4a`, - 40: `#0c3b5e`, - 50: `#0e4775`, - 60: `#0f548c`, - 70: `#115ea3`, - 80: `#0f6cbd`, - 90: `#2886de`, - 100: `#479ef5`, - 110: `#62abf5`, - 120: `#77b7f7`, - 130: `#96c6fa`, - 140: `#b4d6fa`, - 150: `#cfe4fa`, - 160: `#ebf3fc`, -}; diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/src/v8ThemeShim.ts b/packages/react-components-migration/react-theme-shim-v8-v9/src/v8ThemeShim.ts deleted file mode 100644 index a03f9d8780b335..00000000000000 --- a/packages/react-components-migration/react-theme-shim-v8-v9/src/v8ThemeShim.ts +++ /dev/null @@ -1,346 +0,0 @@ -import { - createTheme, - DefaultPalette, - IPalette, - Theme as ThemeV8, - ISemanticColors, - IFontStyles, - IFontWeight, - IEffects, -} from '@fluentui/react'; - -import { BrandVariants, Theme as ThemeV9 } from '@fluentui/react-theme'; - -import { black, blackAlpha, grey, sharedColors, white, whiteAlpha } from './themeDuplicates'; - -const mappedNeutrals = { - black: black, - blackTranslucent40: blackAlpha[40], - neutralDark: grey[8], - neutralPrimary: grey[14], - neutralPrimaryAlt: grey[22], - neutralSecondary: grey[36], - neutralSecondaryAlt: grey[52], - neutralTertiary: grey[62], - neutralTertiaryAlt: grey[78], - neutralQuaternary: grey[82], - neutralQuaternaryAlt: grey[88], - neutralLight: grey[92], - neutralLighter: grey[96], - neutralLighterAlt: grey[98], - white: white, - whiteTranslucent40: whiteAlpha[40], -}; - -const invertedMappedNeutrals = { - black: white, - blackTranslucent40: whiteAlpha[40], - neutralDark: grey[98], - neutralPrimary: grey[96], - neutralPrimaryAlt: grey[84], - neutralSecondary: grey[82], - neutralSecondaryAlt: grey[74], - neutralTertiary: grey[44], - neutralTertiaryAlt: grey[26], - neutralQuaternary: grey[24], - neutralQuaternaryAlt: grey[18], - neutralLight: grey[16], - neutralLighter: grey[14], - neutralLighterAlt: grey[10], - white: black, - whiteTranslucent40: blackAlpha[40], -}; - -const mappedSharedColors = { - yellowDark: sharedColors.marigold.shade10, - yellow: sharedColors.yellow.primary, - yellowLight: sharedColors.yellow.tint40, - orange: sharedColors.orange.primary, - orangeLight: sharedColors.orange.tint20, - orangeLighter: sharedColors.orange.tint40, - redDark: sharedColors.darkRed.primary, - red: sharedColors.red.primary, - magentaDark: sharedColors.magenta.shade30, - magenta: sharedColors.magenta.primary, - magentaLight: sharedColors.magenta.tint30, - purpleDark: sharedColors.darkPurple.primary, - purple: sharedColors.purple.primary, - purpleLight: sharedColors.purple.tint40, - blueDark: sharedColors.darkBlue.primary, - blueMid: sharedColors.royalBlue.primary, - blue: sharedColors.blue.primary, - blueLight: sharedColors.lightBlue.primary, - tealDark: sharedColors.darkTeal.primary, - teal: sharedColors.teal.primary, - tealLight: sharedColors.lightTeal.primary, - greenDark: sharedColors.darkGreen.primary, - green: sharedColors.green.primary, - greenLight: sharedColors.lightGreen.primary, -}; - -/** - * Creates a v8 palette given a brand ramp - */ -const mapPalette = (brandColors: BrandVariants, inverted: boolean): IPalette => { - const neutrals = inverted ? invertedMappedNeutrals : mappedNeutrals; - const brands = inverted - ? { - themeDarker: brandColors[110], - themeDark: brandColors[100], - themeDarkAlt: brandColors[100], - themePrimary: brandColors[90], - themeSecondary: brandColors[90], - themeTertiary: brandColors[60], - themeLight: brandColors[50], - themeLighter: brandColors[40], - themeLighterAlt: brandColors[30], - } - : { - themeDarker: brandColors[40], - themeDark: brandColors[60], - themeDarkAlt: brandColors[70], - themePrimary: brandColors[80], - themeSecondary: brandColors[90], - themeTertiary: brandColors[120], - themeLight: brandColors[140], - themeLighter: brandColors[150], - themeLighterAlt: brandColors[160], - }; - - return { - ...DefaultPalette, - ...neutrals, - accent: brands.themePrimary, - ...mappedSharedColors, - ...brands, - }; -}; - -/** - * Returns v9 theme colors overlaid on a base set of v8 semantic colors - */ -const mapSemanticColors = (baseColors: ISemanticColors, theme: ThemeV9): ISemanticColors => { - return { - ...baseColors, - accentButtonBackground: theme.colorBrandBackground, - accentButtonText: theme.colorNeutralForegroundOnBrand, - actionLink: theme.colorNeutralForeground1, - actionLinkHovered: theme.colorNeutralForeground1Hover, - // blockingBackground, - // blockingIcon, - bodyBackground: theme.colorNeutralBackground1, - bodyBackgroundChecked: theme.colorNeutralBackground1Selected, - bodyBackgroundHovered: theme.colorNeutralBackground1Hover, - bodyDivider: theme.colorNeutralStroke2, - bodyFrameBackground: theme.colorNeutralBackground1, - bodyFrameDivider: theme.colorNeutralStroke2, - bodyStandoutBackground: theme.colorNeutralBackground2, - bodySubtext: theme.colorNeutralForeground2, - bodyText: theme.colorNeutralForeground1, - bodyTextChecked: theme.colorNeutralForeground1Selected, - buttonBackground: theme.colorNeutralBackground1, - buttonBackgroundChecked: theme.colorNeutralBackground1Selected, - buttonBackgroundCheckedHovered: theme.colorNeutralBackground1Hover, - buttonBackgroundDisabled: theme.colorNeutralBackgroundDisabled, - buttonBackgroundHovered: theme.colorNeutralBackground1Hover, - buttonBackgroundPressed: theme.colorNeutralBackground1Pressed, - buttonBorder: theme.colorNeutralStroke1, - buttonBorderDisabled: theme.colorNeutralStrokeDisabled, - buttonText: theme.colorNeutralForeground1, - buttonTextChecked: theme.colorNeutralForeground1, - buttonTextCheckedHovered: theme.colorNeutralForeground1, - buttonTextDisabled: theme.colorNeutralForegroundDisabled, - buttonTextHovered: theme.colorNeutralForeground1, - buttonTextPressed: theme.colorNeutralForeground1, - cardShadow: theme.shadow4, - cardShadowHovered: theme.shadow8, - cardStandoutBackground: theme.colorNeutralBackground1, - defaultStateBackground: theme.colorNeutralBackground2, - disabledBackground: theme.colorNeutralBackgroundDisabled, - disabledBodySubtext: theme.colorNeutralForegroundDisabled, - disabledBodyText: theme.colorNeutralForegroundDisabled, - disabledBorder: theme.colorNeutralStrokeDisabled, - disabledSubtext: theme.colorNeutralForegroundDisabled, - disabledText: theme.colorNeutralForegroundDisabled, - // errorBackground, - // errorIcon, - // errorText: , - focusBorder: theme.colorStrokeFocus2, - // infoBackground, - // infoIcon, - inputBackground: theme.colorNeutralBackground1, - inputBackgroundChecked: theme.colorBrandBackground, - inputBackgroundCheckedHovered: theme.colorBrandBackgroundHover, - inputBorder: theme.colorNeutralStrokeAccessible, - inputBorderHovered: theme.colorNeutralStrokeAccessibleHover, - inputFocusBorderAlt: theme.colorBrandStroke1, - inputForegroundChecked: theme.colorNeutralForegroundOnBrand, - inputIcon: theme.colorNeutralForeground3, - inputIconDisabled: theme.colorNeutralForegroundDisabled, - inputIconHovered: theme.colorNeutralForeground3, - inputPlaceholderBackgroundChecked: theme.colorBrandBackgroundInvertedSelected, - inputPlaceholderText: theme.colorNeutralForeground4, - inputText: theme.colorNeutralForeground1, - inputTextHovered: theme.colorNeutralForeground1Hover, - link: theme.colorBrandForegroundLink, - linkHovered: theme.colorBrandForegroundLinkHover, - listBackground: theme.colorNeutralBackground1, - listHeaderBackgroundHovered: theme.colorNeutralBackground1Hover, - listHeaderBackgroundPressed: theme.colorNeutralBackground1Pressed, - listItemBackgroundChecked: theme.colorNeutralBackground1Selected, - listItemBackgroundCheckedHovered: theme.colorNeutralBackground1Selected, - listItemBackgroundHovered: theme.colorNeutralBackground1Hover, - listText: theme.colorNeutralForeground1, - listTextColor: theme.colorNeutralForeground1, - menuBackground: theme.colorNeutralBackground1, - menuDivider: theme.colorNeutralStroke2, - menuHeader: theme.colorNeutralForeground3, - menuIcon: theme.colorNeutralForeground1, - menuItemBackgroundChecked: theme.colorNeutralBackground1, - menuItemBackgroundHovered: theme.colorNeutralBackground1Hover, - menuItemBackgroundPressed: theme.colorNeutralBackground1Hover, - menuItemText: theme.colorNeutralForeground1, - menuItemTextHovered: theme.colorNeutralForeground1Hover, - messageLink: theme.colorBrandForegroundLink, - messageLinkHovered: theme.colorBrandForegroundLinkHover, - messageText: theme.colorNeutralForeground1, - primaryButtonBackground: theme.colorBrandBackground, - primaryButtonBackgroundDisabled: theme.colorNeutralBackgroundDisabled, - primaryButtonBackgroundHovered: theme.colorBrandBackgroundHover, - primaryButtonBackgroundPressed: theme.colorBrandBackgroundPressed, - primaryButtonBorder: theme.colorTransparentStroke, - primaryButtonText: theme.colorNeutralForegroundOnBrand, - primaryButtonTextDisabled: theme.colorNeutralForegroundDisabled, - primaryButtonTextHovered: theme.colorNeutralForegroundOnBrand, - primaryButtonTextPressed: theme.colorNeutralForegroundOnBrand, - // severeWarningBackground, - // severeWarningIcon, - // smallInputBorder, - // successBackground, - // successIcon, - // successText: , - // variantBorder, - // variantBorderHovered, - // warningBackground, - // warningHighlight, - // warningIcon, - // warningText: , - }; -}; - -/** - * Overlays v9 fonts on a set of base v8 fonts. - */ -const mapFonts = (baseFonts: IFontStyles, theme: ThemeV9): IFontStyles => { - return { - ...baseFonts, - tiny: { - ...baseFonts.tiny, - fontFamily: theme.fontFamilyBase, - fontSize: theme.fontSizeBase100, - fontWeight: theme.fontWeightRegular as IFontWeight, - }, - xSmall: { - ...baseFonts.xSmall, - fontFamily: theme.fontFamilyBase, - fontSize: theme.fontSizeBase100, - fontWeight: theme.fontWeightRegular as IFontWeight, - }, - small: { - ...baseFonts.small, - fontFamily: theme.fontFamilyBase, - fontSize: theme.fontSizeBase200, - fontWeight: theme.fontWeightRegular as IFontWeight, - }, - smallPlus: { - ...baseFonts.smallPlus, - fontFamily: theme.fontFamilyBase, - fontSize: theme.fontSizeBase200, - fontWeight: theme.fontWeightRegular as IFontWeight, - }, - medium: { - ...baseFonts.medium, - fontFamily: theme.fontFamilyBase, - fontSize: theme.fontSizeBase300, - fontWeight: theme.fontWeightRegular as IFontWeight, - }, - mediumPlus: { - ...baseFonts.mediumPlus, - fontFamily: theme.fontFamilyBase, - fontSize: theme.fontSizeBase400, - fontWeight: theme.fontWeightRegular as IFontWeight, - }, - large: { - ...baseFonts.large, - fontFamily: theme.fontFamilyBase, - fontSize: theme.fontSizeBase400, - fontWeight: theme.fontWeightRegular as IFontWeight, - }, - xLarge: { - ...baseFonts.xxLarge, - fontFamily: theme.fontFamilyBase, - fontSize: theme.fontSizeBase500, - fontWeight: theme.fontWeightSemibold as IFontWeight, - }, - xxLarge: { - ...baseFonts.xxLarge, - fontFamily: theme.fontFamilyBase, - fontSize: theme.fontSizeHero700, - fontWeight: theme.fontWeightSemibold as IFontWeight, - }, - superLarge: { - ...baseFonts.superLarge, - fontFamily: theme.fontFamilyBase, - fontSize: theme.fontSizeHero900, - fontWeight: theme.fontWeightSemibold as IFontWeight, - }, - mega: { - ...baseFonts.mega, - fontFamily: theme.fontFamilyBase, - fontSize: theme.fontSizeHero1000, - fontWeight: theme.fontWeightSemibold as IFontWeight, - }, - }; -}; - -/** - * Overlays v9 shadows and border radii on a base set of v8 effects. - */ -const mapEffects = (baseEffects: IEffects, theme: ThemeV9): IEffects => { - return { - ...baseEffects, - elevation4: theme.shadow4, - elevation8: theme.shadow8, - elevation16: theme.shadow16, - elevation64: theme.shadow64, - roundedCorner2: theme.borderRadiusSmall, - roundedCorner4: theme.borderRadiusMedium, - roundedCorner6: theme.borderRadiusLarge, - }; -}; - -/** - * Creates a v8 theme from v9 brand colora and theme. - * You can optionally pass a v8 base theme. - * Otherwise the default v8 theme is used. - * - * The v9 colors, fonts, and effects are applied on top of the v8 theme - * to allow v8 components to look as much like v9 components as possible. - */ -export const createv8Theme = ( - brandColors: BrandVariants, - themeV9: ThemeV9, - isDarkTheme: boolean = false, - themeV8?: ThemeV8, -): ThemeV8 => { - const baseTheme = themeV8 || createTheme({ isInverted: isDarkTheme }); - - return { - ...baseTheme, - palette: mapPalette(brandColors, isDarkTheme), - semanticColors: mapSemanticColors(baseTheme.semanticColors, themeV9), - fonts: mapFonts(baseTheme.fonts, themeV9), - effects: mapEffects(baseTheme.effects, themeV9), - isInverted: isDarkTheme || themeV8?.isInverted === true, - }; -}; diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/src/v9BrandVariantsShim.ts b/packages/react-components-migration/react-theme-shim-v8-v9/src/v9BrandVariantsShim.ts deleted file mode 100644 index 44e6fe9c39f862..00000000000000 --- a/packages/react-components-migration/react-theme-shim-v8-v9/src/v9BrandVariantsShim.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { IPalette } from '@fluentui/react'; -import { BrandVariants } from '@fluentui/react-theme'; -import { ColorInput, TinyColor } from '@ctrl/tinycolor'; - -/** - * A helper to mix colors using tiny color by an amount and get back a hex string. - */ -const mixColors = (colorA: ColorInput, colorB: ColorInput, amount?: number) => { - return new TinyColor(colorA).mix(new TinyColor(colorB), amount).toHexString(); -}; - -/** - * Creates a v9 brand ramp by pairwise mixing v8 palette colors. - */ -const mixByPairs = (palette: IPalette): BrandVariants => { - return { - 10: palette.themeDarker, - 20: mixColors(palette.themeDarker, palette.themeDark), - 30: palette.themeDark, - 40: mixColors(palette.themeDark, palette.themeDarkAlt), - 50: palette.themeDarkAlt, - 60: mixColors(palette.themeDarkAlt, palette.themePrimary), - 70: palette.themePrimary, - 80: mixColors(palette.themePrimary, palette.themeSecondary), - 90: palette.themeSecondary, - 100: mixColors(palette.themeSecondary, palette.themeTertiary), - 110: palette.themeTertiary, - 120: mixColors(palette.themeTertiary, palette.themeLight), - 130: palette.themeLight, - 140: mixColors(palette.themeLight, palette.themeLighter), - 150: palette.themeLighter, - 160: mixColors(palette.themeLighter, palette.themeLighterAlt), - }; -}; - -/** - * Creates a v9 brand ramp by mixing v8 palette colors - * using steps between themeDarker and themePrimary and - * between themePrimary and themeLighterAlt. - */ -const mixPrimaryAndEnds = (palette: IPalette): BrandVariants => { - return { - 10: palette.themeDarker, - 20: mixColors(palette.themeDarker, palette.themePrimary, 20), - 30: mixColors(palette.themeDarker, palette.themePrimary, 30), - 40: mixColors(palette.themeDarker, palette.themePrimary, 40), - 50: mixColors(palette.themeDarker, palette.themePrimary, 50), - 60: mixColors(palette.themeDarker, palette.themePrimary, 60), - 70: mixColors(palette.themeDarker, palette.themePrimary, 70), - 80: palette.themePrimary, - 90: mixColors(palette.themePrimary, palette.themeLighterAlt, 10), - 100: mixColors(palette.themePrimary, palette.themeLighterAlt, 20), - 110: mixColors(palette.themePrimary, palette.themeLighterAlt, 30), - 120: mixColors(palette.themePrimary, palette.themeLighterAlt, 40), - 130: mixColors(palette.themePrimary, palette.themeLighterAlt, 50), - 140: mixColors(palette.themePrimary, palette.themeLighterAlt, 60), - 150: mixColors(palette.themePrimary, palette.themeLighterAlt, 70), - 160: palette.themeLighterAlt, - }; -}; - -type Interpolation = 'pairs' | 'primaryAndEnds'; - -/** - * Creates v9 brand colors from a v8 palette using interpolation - * A v8 palette has nine colors and v9 has sixteen colors. - */ -export const createBrandVariants = (palette: IPalette, interpolation: Interpolation = 'pairs'): BrandVariants => { - switch (interpolation) { - case 'primaryAndEnds': - return mixPrimaryAndEnds(palette); - case 'pairs': - default: - return mixByPairs(palette); - } -}; diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/src/v9ThemeShim.ts b/packages/react-components-migration/react-theme-shim-v8-v9/src/v9ThemeShim.ts deleted file mode 100644 index 027d4879b2d1d1..00000000000000 --- a/packages/react-components-migration/react-theme-shim-v8-v9/src/v9ThemeShim.ts +++ /dev/null @@ -1,200 +0,0 @@ -import { IEffects, IPalette, Theme as ThemeV8 } from '@fluentui/react'; -import { - BorderRadiusTokens, - ColorTokens, - ShadowTokens, - Theme as ThemeV9, - webLightTheme, -} from '@fluentui/react-components'; -import { blackAlpha, whiteAlpha, grey } from './themeDuplicates'; - -/** - * Creates v9 color tokens from a v8 palette. - */ -const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => { - return { - colorNeutralForeground1: palette.neutralPrimary, - colorNeutralForeground1Hover: palette.neutralPrimary, - colorNeutralForeground1Pressed: palette.neutralPrimary, - colorNeutralForeground1Selected: palette.neutralPrimary, - colorNeutralForeground2: palette.neutralSecondary, - colorNeutralForeground2Hover: palette.neutralPrimary, - colorNeutralForeground2Pressed: palette.neutralPrimary, - colorNeutralForeground2Selected: palette.neutralPrimary, - colorNeutralForeground2BrandHover: palette.themePrimary, - colorNeutralForeground2BrandPressed: palette.themeDarkAlt, - colorNeutralForeground2BrandSelected: palette.themePrimary, - colorNeutralForeground3: palette.neutralTertiary, - colorNeutralForeground3Hover: palette.neutralSecondary, - colorNeutralForeground3Pressed: palette.neutralSecondary, - colorNeutralForeground3Selected: palette.neutralSecondary, - colorNeutralForeground3BrandHover: palette.themePrimary, - colorNeutralForeground3BrandPressed: palette.themeDarkAlt, - colorNeutralForeground3BrandSelected: palette.themePrimary, - colorNeutralForeground4: palette.neutralQuaternary, - colorNeutralForegroundDisabled: palette.neutralTertiaryAlt, - colorNeutralForegroundInvertedDisabled: whiteAlpha[40], - colorBrandForegroundLink: palette.themeDarkAlt, - colorBrandForegroundLinkHover: palette.themeDark, - colorBrandForegroundLinkPressed: palette.themeDarker, - colorBrandForegroundLinkSelected: palette.themeDarkAlt, - colorNeutralForeground2Link: palette.neutralSecondary, - colorNeutralForeground2LinkHover: palette.neutralPrimary, - colorNeutralForeground2LinkPressed: palette.neutralPrimary, - colorNeutralForeground2LinkSelected: palette.neutralPrimary, - colorCompoundBrandForeground1: palette.themePrimary, - colorCompoundBrandForeground1Hover: palette.themeDarkAlt, - colorCompoundBrandForeground1Pressed: palette.themeDark, - colorBrandForeground1: palette.themePrimary, - colorBrandForeground2: palette.themeDarkAlt, - colorNeutralForeground1Static: palette.neutralPrimary, - colorNeutralForegroundInverted: palette.white, - colorNeutralForegroundInvertedHover: palette.white, - colorNeutralForegroundInvertedPressed: palette.white, - colorNeutralForegroundInvertedSelected: palette.white, - colorNeutralForegroundOnBrand: palette.white, - colorNeutralForegroundStaticInverted: palette.white, - colorNeutralForegroundInvertedLink: palette.white, - colorNeutralForegroundInvertedLinkHover: palette.white, - colorNeutralForegroundInvertedLinkPressed: palette.white, - colorNeutralForegroundInvertedLinkSelected: palette.white, - colorNeutralForegroundInverted2: palette.white, - colorBrandForegroundInverted: palette.themeSecondary, - colorBrandForegroundInvertedHover: palette.themeTertiary, - colorBrandForegroundInvertedPressed: palette.themeSecondary, - colorBrandForegroundOnLight: palette.themePrimary, - colorBrandForegroundOnLightHover: palette.themeDarkAlt, - colorBrandForegroundOnLightPressed: palette.themeDark, - colorBrandForegroundOnLightSelected: palette.themeDark, - colorNeutralBackground1: palette.white, - colorNeutralBackground1Hover: palette.neutralLighter, - colorNeutralBackground1Pressed: palette.neutralQuaternaryAlt, - colorNeutralBackground1Selected: palette.neutralLight, - colorNeutralBackground2: palette.neutralLighterAlt, - colorNeutralBackground2Hover: palette.neutralLighter, - colorNeutralBackground2Pressed: palette.neutralQuaternaryAlt, - colorNeutralBackground2Selected: palette.neutralLight, - colorNeutralBackground3: palette.neutralLighter, - colorNeutralBackground3Hover: palette.neutralLight, - colorNeutralBackground3Pressed: palette.neutralQuaternary, - colorNeutralBackground3Selected: palette.neutralQuaternaryAlt, - colorNeutralBackground4: palette.neutralLighter, - colorNeutralBackground4Hover: palette.neutralLighterAlt, - colorNeutralBackground4Pressed: palette.neutralLighter, - colorNeutralBackground4Selected: palette.white, - colorNeutralBackground5: palette.neutralLight, - colorNeutralBackground5Hover: palette.neutralLighter, - colorNeutralBackground5Pressed: palette.neutralLighter, - colorNeutralBackground5Selected: palette.neutralLighterAlt, - colorNeutralBackground6: palette.neutralLight, - colorNeutralBackgroundStatic: grey[20], - colorNeutralBackgroundInverted: palette.neutralSecondary, - colorSubtleBackground: 'transparent', - colorSubtleBackgroundHover: palette.neutralLighter, - colorSubtleBackgroundPressed: palette.neutralQuaternaryAlt, - colorSubtleBackgroundSelected: palette.neutralLight, - colorSubtleBackgroundLightAlphaHover: inverted ? whiteAlpha[10] : whiteAlpha[80], - colorSubtleBackgroundLightAlphaPressed: inverted ? whiteAlpha[5] : whiteAlpha[50], - colorSubtleBackgroundLightAlphaSelected: 'transparent', - colorSubtleBackgroundInverted: 'transparent', - colorSubtleBackgroundInvertedHover: blackAlpha[10], - colorSubtleBackgroundInvertedPressed: blackAlpha[30], - colorSubtleBackgroundInvertedSelected: blackAlpha[20], - colorTransparentBackground: 'transparent', - colorTransparentBackgroundHover: 'transparent', - colorTransparentBackgroundPressed: 'transparent', - colorTransparentBackgroundSelected: 'transparent', - colorNeutralBackgroundDisabled: palette.neutralLighter, - colorNeutralBackgroundInvertedDisabled: whiteAlpha[10], - colorNeutralStencil1: palette.neutralLight, - colorNeutralStencil2: palette.neutralLighterAlt, - colorBackgroundOverlay: blackAlpha[10], - colorScrollbarOverlay: blackAlpha[50], - colorBrandBackground: palette.themePrimary, - colorBrandBackgroundHover: palette.themeDarkAlt, - colorBrandBackgroundPressed: palette.themeDarker, - colorBrandBackgroundSelected: palette.themeDark, - colorCompoundBrandBackground: palette.themePrimary, - colorCompoundBrandBackgroundHover: palette.themeDarkAlt, - colorCompoundBrandBackgroundPressed: palette.themeDark, - colorBrandBackgroundStatic: palette.themePrimary, - colorBrandBackground2: palette.themeLighterAlt, - colorBrandBackgroundInverted: palette.white, - colorBrandBackgroundInvertedHover: palette.themeLighterAlt, - colorBrandBackgroundInvertedPressed: palette.themeLight, - colorBrandBackgroundInvertedSelected: palette.themeLighter, - colorNeutralStrokeAccessible: palette.neutralSecondary, - colorNeutralStrokeAccessibleHover: palette.neutralSecondary, - colorNeutralStrokeAccessiblePressed: palette.neutralSecondary, - colorNeutralStrokeAccessibleSelected: palette.themePrimary, - colorNeutralStroke1: palette.neutralQuaternary, - colorNeutralStroke1Hover: palette.neutralTertiaryAlt, - colorNeutralStroke1Pressed: palette.neutralTertiaryAlt, - colorNeutralStroke1Selected: palette.neutralTertiaryAlt, - colorNeutralStroke2: palette.neutralQuaternaryAlt, - colorNeutralStroke3: palette.neutralLighter, - colorNeutralStrokeOnBrand: palette.white, - colorNeutralStrokeOnBrand2: palette.white, - colorNeutralStrokeOnBrand2Hover: palette.white, - colorNeutralStrokeOnBrand2Pressed: palette.white, - colorNeutralStrokeOnBrand2Selected: palette.white, - colorBrandStroke1: palette.themePrimary, - colorBrandStroke2: palette.themeLight, - colorCompoundBrandStroke: palette.themePrimary, - colorCompoundBrandStrokeHover: palette.themeDarkAlt, - colorCompoundBrandStrokePressed: palette.themeDark, - colorNeutralStrokeDisabled: palette.neutralQuaternaryAlt, - colorNeutralStrokeInvertedDisabled: whiteAlpha[40], - colorTransparentStroke: 'transparent', - colorTransparentStrokeInteractive: 'transparent', - colorTransparentStrokeDisabled: 'transparent', - colorStrokeFocus1: palette.white, - colorStrokeFocus2: palette.black, - colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)', - colorNeutralShadowKey: 'rgba(0,0,0,0.14)', - colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.06)', - colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.07)', - colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.20)', - colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.24)', - colorBrandShadowAmbient: 'rgba(0,0,0,0.30)', - colorBrandShadowKey: 'rgba(0,0,0,0.25)', - }; -}; - -/** - * Creates v9 shadow tokens from v8 effects. - */ -const mapShadowTokens = (effects: IEffects): Partial => { - return { - shadow4: effects.elevation4, - shadow8: effects.elevation8, - shadow16: effects.elevation16, - shadow64: effects.elevation64, - }; -}; - -/** - * Creates v9 border radius tokens from v8 effects - */ -const mapBorderRadiusTokens = (effects: IEffects): Partial => { - return { - borderRadiusSmall: effects.roundedCorner2, - borderRadiusMedium: effects.roundedCorner4, - borderRadiusLarge: effects.roundedCorner6, - }; -}; - -/** - * Creates a v9 theme from a v8 theme. - * You can optional pass a base v9 theme; otherwise webLightTheme is used. - */ -export const createv9Theme = (themeV8: ThemeV8, baseThemeV9?: ThemeV9): ThemeV9 => { - const baseTheme = baseThemeV9 ?? webLightTheme; - - return { - ...baseTheme, - ...mapAliasColors(themeV8.palette, themeV8.isInverted), - ...mapShadowTokens(themeV8.effects), - ...mapBorderRadiusTokens(themeV8.effects), - }; -}; diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.json b/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.json deleted file mode 100644 index 1941a041d46c19..00000000000000 --- a/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "extends": "../../../tsconfig.base.json", - "compilerOptions": { - "target": "ES2019", - "noEmit": true, - "isolatedModules": true, - "importHelpers": true, - "jsx": "react", - "noUnusedLocals": true, - "preserveConstEnums": true - }, - "include": [], - "files": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - }, - { - "path": "./.storybook/tsconfig.json" - } - ] -} diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.lib.json b/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.lib.json deleted file mode 100644 index 7f94e04299ed85..00000000000000 --- a/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.lib.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "noEmit": false, - "lib": ["ES2019", "dom"], - "declaration": true, - "declarationDir": "../../../dist/out-tsc/types", - "outDir": "../../../dist/out-tsc", - "inlineSources": true, - "types": ["static-assets", "environment"] - }, - "exclude": [ - "./src/common/**", - "**/*.spec.ts", - "**/*.spec.tsx", - "**/*.test.ts", - "**/*.test.tsx", - "**/*.stories.ts", - "**/*.stories.tsx" - ], - "include": ["./src/**/*.ts", "./src/**/*.tsx"] -} diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.spec.json b/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.spec.json deleted file mode 100644 index 469fcba4d7ba75..00000000000000 --- a/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.spec.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "module": "CommonJS", - "outDir": "dist", - "types": ["jest", "node"] - }, - "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"] -} diff --git a/tsconfig.base.json b/tsconfig.base.json index d3fa2519010353..ea392c8e0eb006 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -25,7 +25,6 @@ "@fluentui/react-avatar-context": ["packages/react-components/react-avatar-context/src/index.ts"], "@fluentui/react-badge": ["packages/react-components/react-badge/src/index.ts"], "@fluentui/react-button": ["packages/react-components/react-button/src/index.ts"], - "@fluentui/react-button-shim-v8-v9": ["packages/react-components-migration/react-button-shim-v8-v9/src/index.ts"], "@fluentui/react-card": ["packages/react-components/react-card/src/index.ts"], "@fluentui/react-checkbox": ["packages/react-components/react-checkbox/src/index.ts"], "@fluentui/react-combobox": ["packages/react-components/react-combobox/src/index.ts"], @@ -44,7 +43,6 @@ "@fluentui/react-label": ["packages/react-components/react-label/src/index.ts"], "@fluentui/react-link": ["packages/react-components/react-link/src/index.ts"], "@fluentui/react-menu": ["packages/react-components/react-menu/src/index.ts"], - "@fluentui/react-menu-shim-v8-v9": ["packages/react-components-migration/react-menu-shim-v8-v9/src/index.ts"], "@fluentui/react-overflow": ["packages/react-components/react-overflow/src/index.ts"], "@fluentui/react-persona": ["packages/react-components/react-persona/src/index.ts"], "@fluentui/react-popover": ["packages/react-components/react-popover/src/index.ts"], @@ -60,7 +58,6 @@ "@fluentui/react-slider": ["packages/react-components/react-slider/src/index.ts"], "@fluentui/react-spinbutton": ["packages/react-components/react-spinbutton/src/index.ts"], "@fluentui/react-spinner": ["packages/react-components/react-spinner/src/index.ts"], - "@fluentui/react-stack-shim-v8-v9": ["packages/react-components-migration/react-stack-shim-v8-v9/src/index.ts"], "@fluentui/react-storybook": ["packages/react-components/react-storybook/src/index.ts"], "@fluentui/react-storybook-addon": ["packages/react-components/react-storybook-addon/src/index.ts"], "@fluentui/react-switch": ["packages/react-components/react-switch/src/index.ts"], @@ -71,7 +68,6 @@ "@fluentui/react-textarea": ["packages/react-components/react-textarea/src/index.ts"], "@fluentui/react-theme": ["packages/react-components/react-theme/src/index.ts"], "@fluentui/react-theme-sass": ["packages/react-components/react-theme-sass/src/index.ts"], - "@fluentui/react-theme-shim-v8-v9": ["packages/react-components-migration/react-theme-shim-v8-v9/src/index.ts"], "@fluentui/react-toolbar": ["packages/react-components/react-toolbar/src/index.ts"], "@fluentui/react-tooltip": ["packages/react-components/react-tooltip/src/index.ts"], "@fluentui/react-utilities": ["packages/react-components/react-utilities/src/index.ts"], diff --git a/workspace.json b/workspace.json index 2ef46916162eb2..18214f4fd8f52d 100644 --- a/workspace.json +++ b/workspace.json @@ -338,13 +338,6 @@ "tags": ["vNext", "platform:web"], "implicitDependencies": [] }, - "@fluentui/react-button-shim-v8-v9": { - "root": "packages/react-components-migration/react-button-shim-v8-v9", - "projectType": "library", - "implicitDependencies": [], - "sourceRoot": "packages/react-components-migration/react-button-shim-v8-v9/src", - "tags": ["vNext", "platform:web"] - }, "@fluentui/react-card": { "root": "packages/react-components/react-card", "projectType": "library", @@ -540,13 +533,6 @@ "tags": ["vNext", "platform:web"], "implicitDependencies": [] }, - "@fluentui/react-menu-shim-v8-v9": { - "root": "packages/react-components-migration/react-menu-shim-v8-v9", - "projectType": "library", - "implicitDependencies": [], - "sourceRoot": "packages/react-components-migration/react-menu-shim-v8-v9/src", - "tags": ["vNext", "platform:web"] - }, "@fluentui/react-monaco-editor": { "root": "packages/react-monaco-editor", "projectType": "library", @@ -693,13 +679,6 @@ "sourceRoot": "packages/react-components/react-spinner/src", "tags": ["vNext", "platform:web"] }, - "@fluentui/react-stack-shim-v8-v9": { - "root": "packages/react-components-migration/react-stack-shim-v8-v9", - "projectType": "library", - "implicitDependencies": [], - "sourceRoot": "packages/react-components-migration/react-stack-shim-v8-v9/src", - "tags": ["vNext", "platform:web"] - }, "@fluentui/react-storybook": { "root": "packages/react-components/react-storybook", "projectType": "library", @@ -776,13 +755,6 @@ "sourceRoot": "packages/react-components/react-theme-sass/src", "tags": ["vNext", "platform:web"] }, - "@fluentui/react-theme-shim-v8-v9": { - "root": "packages/react-components-migration/react-theme-shim-v8-v9", - "projectType": "library", - "implicitDependencies": [], - "sourceRoot": "packages/react-components-migration/react-theme-shim-v8-v9/src", - "tags": ["vNext", "platform:web"] - }, "@fluentui/react-toolbar": { "root": "packages/react-components/react-toolbar", "projectType": "library", From 39d3a79d7bcdc29d3b15864e08a9b80a5700c424 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Wed, 5 Oct 2022 16:58:35 -0700 Subject: [PATCH 03/23] fix: Detailslist hides columns even with horizontal scroll, CustomColumns example does not hide all columns at small screens (#24959) --- ...ui-react-c1711406-0feb-4e85-8e43-a143f1bcb3ec.json | 7 +++++++ .../DetailsList/DetailsList.CustomColumns.Example.tsx | 4 +++- .../src/components/DetailsList/DetailsList.base.tsx | 11 ++--------- 3 files changed, 12 insertions(+), 10 deletions(-) create mode 100644 change/@fluentui-react-c1711406-0feb-4e85-8e43-a143f1bcb3ec.json diff --git a/change/@fluentui-react-c1711406-0feb-4e85-8e43-a143f1bcb3ec.json b/change/@fluentui-react-c1711406-0feb-4e85-8e43-a143f1bcb3ec.json new file mode 100644 index 00000000000000..7eb30cb6abf3d8 --- /dev/null +++ b/change/@fluentui-react-c1711406-0feb-4e85-8e43-a143f1bcb3ec.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "fix: DetailsList should collapse columns even with horizontal scroll, and the CustomColumns example should not hide all columns", + "packageName": "@fluentui/react", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-examples/src/react/DetailsList/DetailsList.CustomColumns.Example.tsx b/packages/react-examples/src/react/DetailsList/DetailsList.CustomColumns.Example.tsx index 2ca9bbe5c3937c..9599771b9020ba 100644 --- a/packages/react-examples/src/react/DetailsList/DetailsList.CustomColumns.Example.tsx +++ b/packages/react-examples/src/react/DetailsList/DetailsList.CustomColumns.Example.tsx @@ -78,10 +78,12 @@ export class DetailsListCustomColumnsExample extends React.Component<{}, IDetail thumbnailColumn.ariaLabel = 'Thumbnail'; thumbnailColumn.onColumnClick = undefined; - //indicate that all columns except thumbnail column can be sorted + // Indicate that all columns except thumbnail column can be sorted, + // and only the description colum should disappear at small screen sizes columns.forEach((column: IColumn) => { if (column.name) { column.showSortIconWhenUnsorted = true; + column.isCollapsible = column.name === 'description'; } }); diff --git a/packages/react/src/components/DetailsList/DetailsList.base.tsx b/packages/react/src/components/DetailsList/DetailsList.base.tsx index bfcb9b5208eebd..343c553278dc7f 100644 --- a/packages/react/src/components/DetailsList/DetailsList.base.tsx +++ b/packages/react/src/components/DetailsList/DetailsList.base.tsx @@ -1303,12 +1303,11 @@ export class DetailsListBase extends React.Component { const baseColumn = { @@ -1321,17 +1320,12 @@ export class DetailsListBase extends React.Component availableWidth) { + if (skipViewportMeasures) { return adjustedColumns; } @@ -1512,7 +1506,6 @@ export function buildColumns( fieldName: propName, minWidth: MIN_COLUMN_WIDTH, maxWidth: 300, - isCollapsable: !!columns.length, isCollapsible: !!columns.length, isMultiline: isMultiline === undefined ? false : isMultiline, isSorted: sortedColumnKey === propName, From 2484ba157b11028249ebd3b091ed4808ff7497e3 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Thu, 6 Oct 2022 10:56:00 +0200 Subject: [PATCH 04/23] fix(scripts): don't run publish if web-components are affected (#25095) * fix(scripts): don't run publish if web-components are affected --- scripts/monorepo/getAllPackageInfo.js | 4 +- scripts/monorepo/getAllPackageInfo.spec.ts | 21 +++ scripts/monorepo/runPublished.js | 143 +++++++++++++------- scripts/monorepo/runPublished.spec.ts | 144 +++++++++++++++++++++ scripts/monorepo/tsconfig.json | 2 +- 5 files changed, 262 insertions(+), 52 deletions(-) create mode 100644 scripts/monorepo/getAllPackageInfo.spec.ts create mode 100644 scripts/monorepo/runPublished.spec.ts diff --git a/scripts/monorepo/getAllPackageInfo.js b/scripts/monorepo/getAllPackageInfo.js index 2969aec5a486e1..69760d15a66278 100644 --- a/scripts/monorepo/getAllPackageInfo.js +++ b/scripts/monorepo/getAllPackageInfo.js @@ -3,7 +3,7 @@ const path = require('path'); const lernaAlias = require('lerna-alias'); const findGitRoot = require('./findGitRoot'); -/** @type {import('./index').AllPackageInfo} */ +/** @type {import('./').AllPackageInfo} */ let packageInfo; /** * @type {string} @@ -11,7 +11,7 @@ let packageInfo; let cwdForPackageInfo; /** - * @returns {import('./index').AllPackageInfo} + * @returns {typeof packageInfo} */ function getAllPackageInfo() { if (packageInfo && cwdForPackageInfo === process.cwd()) { diff --git a/scripts/monorepo/getAllPackageInfo.spec.ts b/scripts/monorepo/getAllPackageInfo.spec.ts new file mode 100644 index 00000000000000..3c7bf2be9027e8 --- /dev/null +++ b/scripts/monorepo/getAllPackageInfo.spec.ts @@ -0,0 +1,21 @@ +import * as path from 'path'; +import getAllPackageInfo from './getAllPackageInfo'; + +describe(`#getAllPackageinfo`, () => { + it(`should return workspace packages record with metadata as values`, () => { + const allPackages = getAllPackageInfo(); + const entries = Object.entries(allPackages); + const [packageName, packageMetadata] = entries[0]; + + expect(allPackages['@fluentui/noop']).toBe(undefined); + expect(packageName).toEqual(expect.stringMatching(/^@fluentui\/[a-z-]+/)); + expect(packageMetadata).toEqual({ + packagePath: expect.any(String), + packageJson: expect.objectContaining({ + name: expect.any(String), + version: expect.any(String), + }), + }); + expect(path.isAbsolute(packageMetadata.packagePath)).toBe(false); + }); +}); diff --git a/scripts/monorepo/runPublished.js b/scripts/monorepo/runPublished.js index 8a1fe2798dbd81..505328d511a3fa 100644 --- a/scripts/monorepo/runPublished.js +++ b/scripts/monorepo/runPublished.js @@ -3,64 +3,109 @@ const getAllPackageInfo = require('./getAllPackageInfo'); const isConvergedPackage = require('./isConvergedPackage'); const lageBin = require.resolve('lage/bin/lage.js'); -const argv = process.argv.slice(2); +/** + * @typedef {{argv:string[]; workspacePackagesMetadata:ReturnType}} Options + */ -if (argv.length < 1) { - console.log(`Usage: +if (require.main === module) { + const argv = process.argv.slice(2); + main({ argv, workspacePackagesMetadata: getAllPackageInfo() }); +} + +module.exports = main; + +/** + * + * @param {Options} options + */ +function main(options) { + if (process.env.NODE_ENV !== 'test') { + throw new Error('This is not supposed to be used as API only via direct node execution'); + } + if (!assertArgs(options.argv)) { + return; + } + + const lageArgs = getLageArgs(options); + + const result = spawnSync(process.execPath, [lageBin, ...lageArgs], { + stdio: 'inherit', + maxBuffer: 500 * 1024 * 1024, + }); + + process.exit(result.status ?? undefined); +} + +/** + * + * @param {string[]} args + */ +function assertArgs(args) { + if (args.length < 1) { + console.log(`Usage: yarn run:published