=> {
+ 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-migration-v8-v9/src/index.ts b/packages/react-migration-v8-v9/src/index.ts
new file mode 100644
index 00000000000000..bad8d52bc8343c
--- /dev/null
+++ b/packages/react-migration-v8-v9/src/index.ts
@@ -0,0 +1,46 @@
+export {
+ ActionButtonShim,
+ ButtonShim,
+ CommandButtonShim,
+ CompoundButtonShim,
+ DefaultButtonShim,
+ MenuButtonShim,
+ PrimaryButtonShim,
+ shimButtonProps,
+ ToggleButtonShim,
+} from './components/Button/index';
+
+export { MenuItemShim, shimMenuProps } from './components/Menu/index';
+
+export { StackItemShim, StackShim } from './components/Stack/index';
+
+export {
+ black,
+ blackAlpha,
+ brandWeb,
+ createBrandVariants,
+ createv8Theme,
+ createv9Theme,
+ grey,
+ grey14Alpha,
+ hcButtonFace,
+ hcButtonText,
+ hcCanvas,
+ hcCanvasText,
+ hcDisabled,
+ hcHighlight,
+ hcHighlightText,
+ hcHyperlink,
+ sharedColors,
+ white,
+ whiteAlpha,
+} from './components/Theme/index';
+
+export type {
+ AlphaColors,
+ ColorVariants,
+ GlobalSharedColors,
+ Greys,
+ TextAlignment,
+ TextAlignments,
+} from './components/Theme/index';
diff --git a/packages/react-migration-v8-v9/src/stories/ActionButtonShim/Description.md b/packages/react-migration-v8-v9/src/stories/ActionButtonShim/Description.md
new file mode 100644
index 00000000000000..730bd7ad9e986f
--- /dev/null
+++ b/packages/react-migration-v8-v9/src/stories/ActionButtonShim/Description.md
@@ -0,0 +1 @@
+The ActionButtonShim component accepts the same props as a v8 ActionButton and renders a v9 Button.
diff --git a/packages/react-migration-v8-v9/src/stories/ActionButtonShim/index.stories.tsx b/packages/react-migration-v8-v9/src/stories/ActionButtonShim/index.stories.tsx
new file mode 100644
index 00000000000000..710a2a9c3cf1fe
--- /dev/null
+++ b/packages/react-migration-v8-v9/src/stories/ActionButtonShim/index.stories.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+
+import descriptionMd from './Description.md';
+
+import { ActionButton, Icon, initializeIcons } from '@fluentui/react';
+import type { IIconProps } from '@fluentui/react';
+import { FluentProvider, Button, webLightTheme, makeStyles, shorthands } from '@fluentui/react-components';
+import { ActionButtonShim } from '../../components/Button/index';
+
+initializeIcons();
+
+const useStyles = makeStyles({
+ root: {
+ display: 'grid',
+ gridTemplateColumns: 'auto auto auto',
+ gridTemplateRows: '1fr',
+ width: 'fit-content',
+ alignContent: 'center',
+ alignItems: 'center',
+ justifyItems: 'center',
+ columnGap: '10px',
+ rowGap: '10px',
+ },
+ componentName: {
+ justifySelf: 'end',
+ ...shorthands.margin(0, '10px', 0, 0),
+ },
+});
+
+const addIcon: IIconProps = { iconName: 'Add' };
+
+export const Default = () => {
+ const styles = useStyles();
+
+ return (
+
+
v8
+
shim
+
v9
+
Action
+
+ Action
+
+
+ }>
+ Action
+
+
+
+
v8
+ shim
+ v9
+ Command
+
+ Command
+
+
+ }>
+ Command
+
+
+
+ );
+};
+
+export default {
+ title: 'Migration Shims/Button/CommandButtonShim',
+ component: CommandButtonShim,
+ parameters: {
+ docs: {
+ description: {
+ component: [descriptionMd].join('\n'),
+ },
+ },
+ },
+};
diff --git a/packages/react-migration-v8-v9/src/stories/CompoundButtonShim/Description.md b/packages/react-migration-v8-v9/src/stories/CompoundButtonShim/Description.md
new file mode 100644
index 00000000000000..2e29a7a34226fd
--- /dev/null
+++ b/packages/react-migration-v8-v9/src/stories/CompoundButtonShim/Description.md
@@ -0,0 +1 @@
+The CompoundButtonShim component accepts the same props as a v8 CompoundButton and renders a v9 CompoundButton.
diff --git a/packages/react-migration-v8-v9/src/stories/CompoundButtonShim/index.stories.tsx b/packages/react-migration-v8-v9/src/stories/CompoundButtonShim/index.stories.tsx
new file mode 100644
index 00000000000000..25ae5c922b00b8
--- /dev/null
+++ b/packages/react-migration-v8-v9/src/stories/CompoundButtonShim/index.stories.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+import descriptionMd from './Description.md';
+
+import { CompoundButton as CompoundButtonV8 } from '@fluentui/react';
+import {
+ CompoundButton as CompoundButtonV9,
+ webLightTheme,
+ FluentProvider,
+ makeStyles,
+ shorthands,
+} from '@fluentui/react-components';
+import { CompoundButtonShim } from '../../components/Button/index';
+
+const useStyles = makeStyles({
+ root: {
+ display: 'grid',
+ gridTemplateColumns: 'auto auto auto',
+ gridTemplateRows: '1fr',
+ width: 'fit-content',
+ alignContent: 'center',
+ alignItems: 'center',
+ justifyItems: 'center',
+ columnGap: '10px',
+ rowGap: '10px',
+ },
+ componentName: {
+ justifySelf: 'end',
+ ...shorthands.margin(0, '10px', 0, 0),
+ },
+});
+
+export const Default = () => {
+ const styles = useStyles();
+
+ return (
+
+
v8
+ shim
+ v9
+ Compound
+
+ Compound
+
+
+ Compound
+
+
+ );
+};
+
+export default {
+ title: 'Migration Shims/Button/CompoundButtonShim',
+ component: CompoundButtonShim,
+ parameters: {
+ docs: {
+ description: {
+ component: [descriptionMd].join('\n'),
+ },
+ },
+ },
+};
diff --git a/packages/react-migration-v8-v9/src/stories/DefaultButtonShim/Description.md b/packages/react-migration-v8-v9/src/stories/DefaultButtonShim/Description.md
new file mode 100644
index 00000000000000..85f4f38aca9b33
--- /dev/null
+++ b/packages/react-migration-v8-v9/src/stories/DefaultButtonShim/Description.md
@@ -0,0 +1 @@
+The DefaultButtonShim component accepts the same props as a v8 DefaultButton and renders a v9 Button.
diff --git a/packages/react-migration-v8-v9/src/stories/DefaultButtonShim/index.tsx b/packages/react-migration-v8-v9/src/stories/DefaultButtonShim/index.tsx
new file mode 100644
index 00000000000000..8844dbf68e32f4
--- /dev/null
+++ b/packages/react-migration-v8-v9/src/stories/DefaultButtonShim/index.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+import descriptionMd from './Description.md';
+
+import { DefaultButton } from '@fluentui/react';
+import { FluentProvider, Button, webLightTheme, makeStyles, shorthands } from '@fluentui/react-components';
+import { DefaultButtonShim } from '../../components/Button/index';
+
+const useStyles = makeStyles({
+ root: {
+ display: 'grid',
+ gridTemplateColumns: 'auto auto auto',
+ gridTemplateRows: '1fr',
+ width: 'fit-content',
+ alignContent: 'center',
+ alignItems: 'center',
+ justifyItems: 'center',
+ columnGap: '10px',
+ rowGap: '10px',
+ },
+ componentName: {
+ justifySelf: 'end',
+ ...shorthands.margin(0, '10px', 0, 0),
+ },
+});
+
+export const Default = () => {
+ const styles = useStyles();
+
+ return (
+
+
v8
+ DefaultButtonShim
+ v9
+ Default
+
+ Default
+
+
+
+
+
+ );
+};
+
+export default {
+ title: 'Migration Shims/Button/DefaultButtonShim',
+ component: DefaultButtonShim,
+ parameters: {
+ docs: {
+ description: {
+ component: [descriptionMd].join('\n'),
+ },
+ },
+ },
+};
diff --git a/packages/react-migration-v8-v9/src/stories/MenuButtonShim/Description.md b/packages/react-migration-v8-v9/src/stories/MenuButtonShim/Description.md
new file mode 100644
index 00000000000000..4aceb0bb481836
--- /dev/null
+++ b/packages/react-migration-v8-v9/src/stories/MenuButtonShim/Description.md
@@ -0,0 +1 @@
+The MenuButtonShim component accepts the same props as a v8 DefaultButton with menuProps and renders a v9 MenuButton.
diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/MenuButtonShimExample.tsx b/packages/react-migration-v8-v9/src/stories/MenuButtonShim/index.stories.tsx
similarity index 78%
rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/MenuButtonShimExample.tsx
rename to packages/react-migration-v8-v9/src/stories/MenuButtonShim/index.stories.tsx
index b871e67af5a023..64f0b16160d230 100644
--- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/MenuButtonShimExample.tsx
+++ b/packages/react-migration-v8-v9/src/stories/MenuButtonShim/index.stories.tsx
@@ -1,33 +1,53 @@
-/* eslint-disable no-alert */
import * as React from 'react';
+
+import descriptionMd from './Description.md';
+
+import { ContextualMenuItemType, DefaultButton, Icon, initializeIcons } from '@fluentui/react';
+import type { IContextualMenuItem, IContextualMenuProps, IIconProps } from '@fluentui/react';
import {
- ContextualMenuItemType,
- DefaultButton,
- Icon,
- IContextualMenuItem,
- IContextualMenuProps,
- IIconProps,
-} from '@fluentui/react';
-import {
- webLightTheme,
FluentProvider,
+ webLightTheme,
+ makeStyles,
+ shorthands,
Menu,
- MenuTrigger,
MenuButton,
- MenuPopover,
- MenuList,
- MenuItem,
MenuDivider,
+ MenuItem,
MenuItemCheckbox,
+ MenuList,
+ MenuPopover,
+ MenuTrigger,
} from '@fluentui/react-components';
-import { MenuButtonShim } from '../../../../../shims/ButtonShim';
+import { MenuButtonShim } from '../../components/Button/index';
+
+initializeIcons();
+
+const useStyles = makeStyles({
+ root: {
+ display: 'grid',
+ gridTemplateColumns: 'auto auto auto',
+ gridTemplateRows: '1fr',
+ width: 'fit-content',
+ alignContent: 'center',
+ alignItems: 'center',
+ justifyItems: 'center',
+ columnGap: '10px',
+ rowGap: '10px',
+ },
+ componentName: {
+ justifySelf: 'end',
+ ...shorthands.margin(0, '10px', 0, 0),
+ },
+});
const addIcon: IIconProps = { iconName: 'Add' };
const mailIcon: IIconProps = { iconName: 'Mail' };
const calendarIcon: IIconProps = { iconName: 'Calendar' };
const shareIcon: IIconProps = { iconName: 'Share', style: { color: 'salmon' } };
-export const MenuButtonShimExample = () => {
+export const Default = () => {
+ const styles = useStyles();
+
const [selection, setSelection] = React.useState<{ [key: string]: boolean }>({});
const onToggleSelect = React.useCallback(
@@ -116,7 +136,10 @@ export const MenuButtonShimExample = () => {
};
return (
- <>
+
+
v8
+ shim
+ v9
@@ -153,6 +176,18 @@ export const MenuButtonShimExample = () => {
-
+
);
};
+
+export default {
+ title: 'Migration Shims/Button/MenuButtonShim',
+ component: MenuButtonShim,
+ parameters: {
+ docs: {
+ description: {
+ component: [descriptionMd].join('\n'),
+ },
+ },
+ },
+};
diff --git a/packages/react-migration-v8-v9/src/stories/PrimaryButtonShim/Description.md b/packages/react-migration-v8-v9/src/stories/PrimaryButtonShim/Description.md
new file mode 100644
index 00000000000000..1dbebd59b5ad2d
--- /dev/null
+++ b/packages/react-migration-v8-v9/src/stories/PrimaryButtonShim/Description.md
@@ -0,0 +1 @@
+The PrimaryButtonShim component accepts the same props as a v8 PrimaryButton and renders a v9 Button.
diff --git a/packages/react-migration-v8-v9/src/stories/PrimaryButtonShim/index.stories.tsx b/packages/react-migration-v8-v9/src/stories/PrimaryButtonShim/index.stories.tsx
new file mode 100644
index 00000000000000..5900bb6a9bb42e
--- /dev/null
+++ b/packages/react-migration-v8-v9/src/stories/PrimaryButtonShim/index.stories.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+import descriptionMd from './Description.md';
+
+import { PrimaryButton } from '@fluentui/react';
+import { FluentProvider, Button, webLightTheme, makeStyles, shorthands } from '@fluentui/react-components';
+import { PrimaryButtonShim } from '../../components/Button/index';
+
+const useStyles = makeStyles({
+ root: {
+ display: 'grid',
+ gridTemplateColumns: 'auto auto auto',
+ gridTemplateRows: '1fr',
+ width: 'fit-content',
+ alignContent: 'center',
+ alignItems: 'center',
+ justifyItems: 'center',
+ columnGap: '10px',
+ rowGap: '10px',
+ },
+ componentName: {
+ justifySelf: 'end',
+ ...shorthands.margin(0, '10px', 0, 0),
+ },
+});
+
+export const Default = () => {
+ const styles = useStyles();
+
+ return (
+
+
v8
+
shim
+
v9
+
Primary
+
+ Primary
+
+
+
+
+
-
-
- ),
- ],
-} as Meta;
+ title: 'Migration Shims/StackShim',
+ component: StackShim,
+ parameters: {
+ docs: {
+ description: {
+ component: [descriptionMd].join('\n'),
+ },
+ },
+ },
+};
diff --git a/packages/react-migration-v8-v9/src/stories/ToggleButtonShim/Description.md b/packages/react-migration-v8-v9/src/stories/ToggleButtonShim/Description.md
new file mode 100644
index 00000000000000..596353ef214b90
--- /dev/null
+++ b/packages/react-migration-v8-v9/src/stories/ToggleButtonShim/Description.md
@@ -0,0 +1 @@
+The ToggleButtonShim component accepts the same props as a v8 DefaultButton with the toggle prop set and renders a v9 ToggleButton.
diff --git a/packages/react-migration-v8-v9/src/stories/ToggleButtonShim/index.stories.tsx b/packages/react-migration-v8-v9/src/stories/ToggleButtonShim/index.stories.tsx
new file mode 100644
index 00000000000000..d03b566ef080b0
--- /dev/null
+++ b/packages/react-migration-v8-v9/src/stories/ToggleButtonShim/index.stories.tsx
@@ -0,0 +1,84 @@
+import * as React from 'react';
+
+import descriptionMd from './Description.md';
+
+import { DefaultButton, Icon, initializeIcons } from '@fluentui/react';
+import type { IIconProps } from '@fluentui/react';
+import { FluentProvider, webLightTheme, makeStyles, shorthands, ToggleButton } from '@fluentui/react-components';
+import { ToggleButtonShim } from '../../components/Button/index';
+
+initializeIcons();
+
+const useStyles = makeStyles({
+ root: {
+ display: 'grid',
+ gridTemplateColumns: 'auto auto auto',
+ gridTemplateRows: '1fr',
+ width: 'fit-content',
+ alignContent: 'center',
+ alignItems: 'center',
+ justifyItems: 'center',
+ columnGap: '10px',
+ rowGap: '10px',
+ },
+ componentName: {
+ justifySelf: 'end',
+ ...shorthands.margin(0, '10px', 0, 0),
+ },
+});
+
+const volume0Icon: IIconProps = { iconName: 'Volume0' };
+const volume3Icon: IIconProps = { iconName: 'Volume3' };
+
+export const Default = () => {
+ const styles = useStyles();
+
+ const [muted1, setMuted1] = React.useState(false);
+ const [muted2, setMuted2] = React.useState(false);
+ const [muted3, setMuted3] = React.useState(false);
+
+ return (
+
+
v8
+ shim
+ v9
+ setMuted1(!muted1)}
+ />
+
+ setMuted2(!muted2)}
+ />
+
+
+ : }
+ onClick={() => setMuted3(!muted3)}
+ >
+ Toggle
+
+
+
+ );
+};
+
+export default {
+ title: 'Migration Shims/Button/ToggleButtonShim',
+ component: ToggleButtonShim,
+ parameters: {
+ docs: {
+ description: {
+ component: [descriptionMd].join('\n'),
+ },
+ },
+ },
+};
diff --git a/packages/react-migration-v8-v9/tsconfig.json b/packages/react-migration-v8-v9/tsconfig.json
new file mode 100644
index 00000000000000..affceae1828ae1
--- /dev/null
+++ b/packages/react-migration-v8-v9/tsconfig.json
@@ -0,0 +1,25 @@
+{
+ "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-migration-v8-v9/tsconfig.lib.json b/packages/react-migration-v8-v9/tsconfig.lib.json
new file mode 100644
index 00000000000000..978cb985cd5e4a
--- /dev/null
+++ b/packages/react-migration-v8-v9/tsconfig.lib.json
@@ -0,0 +1,22 @@
+{
+ "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-migration-v8-v9/tsconfig.spec.json b/packages/react-migration-v8-v9/tsconfig.spec.json
new file mode 100644
index 00000000000000..469fcba4d7ba75
--- /dev/null
+++ b/packages/react-migration-v8-v9/tsconfig.spec.json
@@ -0,0 +1,9 @@
+{
+ "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 ea392c8e0eb006..fc516cd2d6cdd9 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -43,6 +43,7 @@
"@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-migration-v8-v9": ["packages/react-migration-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"],
diff --git a/workspace.json b/workspace.json
index 18214f4fd8f52d..fc529b32feab69 100644
--- a/workspace.json
+++ b/workspace.json
@@ -533,6 +533,12 @@
"tags": ["vNext", "platform:web"],
"implicitDependencies": []
},
+ "@fluentui/react-migration-v8-v9": {
+ "root": "packages/react-migration-v8-v9",
+ "projectType": "library",
+ "implicitDependencies": [],
+ "sourceRoot": "packages/react-migration-v8-v9/src"
+ },
"@fluentui/react-monaco-editor": {
"root": "packages/react-monaco-editor",
"projectType": "library",