Add shims to migration

.github/actions/build-to/action.yml

@@ -0,0 +1,35 @@
+name: 'Build workspaces'
+description: 'Runs the build command for specific workspaces.'
+inputs:
+  # Because Github Actions doesn't support arrays as inputs we need to pass the workspaces as a string and split them
+  # by spaces https://github.com/community/community/discussions/11692
+  workspaces:
+    required: true
+    description: 'The workspaces you want to build. This parameter accepts multiple workspaces separated by a space.'
+  # This is based on the backfill cache provider options: https://github.com/microsoft/backfill#set-up-remote-cache
+  backfill-cache-provider:
+    required: false
+    description: 'The backfill cache provider'
+    default: 'azure-blob'
+  # Depending on the chosen cache provider there are multiple types of available options. In our case we use Azure Blob
+  # Storage. https://github.com/microsoft/backfill#microsoft-azure-blob-storage
+  backfill-cache-provider-options:
+    required: false
+    description: 'The backfill cache provider options'
+  # Flag to toggle backfill remote caching on / off
+  lage-write-remote-cache:
+    required: true
+    description: 'Whether to write to the remote cache'
+    default: 'true'
+
+runs:
+  using: 'composite'
+  steps:
+    - name: build package dependency tree (scripts:build)
+      working-directory: .
+      shell: bash
+      run: yarn build --to ${{ inputs.workspaces }}
+      env:
+        BACKFILL_CACHE_PROVIDER: ${{ inputs.backfill-cache-provider }}
+        BACKFILL_CACHE_PROVIDER_OPTIONS: ${{ inputs.backfill-cache-provider-options }}
+        LAGE_WRITE_REMOTE_CACHE: ${{ inputs.lage-write-remote-cache }}

.github/workflows/docsite-publish-chromatic.yml

@@ -44,7 +44,10 @@ jobs:
         run: yarn install --frozen-lockfile
 
       - name: Build dependencies
-        run: yarn build --to @fluentui/public-docsite-v9
+        uses: ./.github/actions/build-to
+        with:
+          workspaces: '@fluentui/public-docsite-v9'
+          backfill-cache-provider-options: ${{ secrets.BACKFILL_CACHE_PROVIDER_OPTIONS }}
 
       - name: Publish to Chromatic
         run: yarn workspace @fluentui/public-docsite-v9 chromatic

.github/workflows/docsite-publish-ghpages.yml

@@ -44,7 +44,10 @@ jobs:
         run: yarn install --frozen-lockfile
 
       - name: Build dependencies
-        run: yarn build --to @fluentui/public-docsite-v9
+        uses: ./.github/actions/build-to
+        with:
+          workspaces: '@fluentui/public-docsite-v9'
+          backfill-cache-provider-options: ${{ secrets.BACKFILL_CACHE_PROVIDER_OPTIONS }}
 
       - name: Build storybook
         run: yarn workspace @fluentui/public-docsite-v9 build-storybook

apps/perf-test/package.json

@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@fluentui/example-data": "^8.4.2",
-    "@fluentui/react": "^8.96.3",
+    "@fluentui/react": "^8.97.1",
     "@fluentui/scripts": "^1.0.0",
     "@microsoft/load-themed-styles": "^1.10.26",
     "flamegrill": "0.2.0",

apps/public-docsite-resources/package.json

@@ -32,15 +32,15 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react": "^8.96.3",
+    "@fluentui/react": "^8.97.1",
     "@fluentui/react-examples": "^8.34.4",
     "@microsoft/load-themed-styles": "^1.10.26",
-    "@fluentui/azure-themes": "^8.5.5",
-    "@fluentui/react-docsite-components": "^8.10.5",
-    "@fluentui/font-icons-mdl2": "^8.4.13",
+    "@fluentui/azure-themes": "^8.5.7",
+    "@fluentui/react-docsite-components": "^8.10.7",
+    "@fluentui/font-icons-mdl2": "^8.5.0",
     "@fluentui/set-version": "^8.2.2",
-    "@fluentui/theme-samples": "^8.7.5",
-    "@fluentui/react-monaco-editor": "^1.7.5",
+    "@fluentui/theme-samples": "^8.7.7",
+    "@fluentui/react-monaco-editor": "^1.7.7",
     "office-ui-fabric-core": "^11.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",

apps/public-docsite-v9/package.json

@@ -21,10 +21,14 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react": "^8.96.3",
+    "@fluentui/react": "^8.97.1",
     "@fluentui/scripts": "^1.0.0",
     "@fluentui/storybook": "^1.0.0",
+    "@fluentui/react-button-shim-v8-v9": "9.0.0-alpha.0",
     "@fluentui/react-components": "^9.3.2",
+    "@fluentui/react-menu-shim-v8-v9": "9.0.0-alpha.0",
+    "@fluentui/react-stack-shim-v8-v9": "9.0.0-alpha.0",
+    "@fluentui/react-theme-shim-v8-v9": "^9.0.0-alpha.0",
     "@fluentui/react-storybook-addon": "^9.0.0-rc.1",
     "@fluentui/react-theme": "^9.1.0",
     "@griffel/react": "^1.3.0",

apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/ActionButtonShimExample.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ActionButton, IButtonProps, Icon, IIconProps } from '@fluentui/react';
 import { Button, webLightTheme, FluentProvider } from '@fluentui/react-components';
-import { ActionButtonShim } from '../../../../../shims/ButtonShim';
+import { ActionButtonShim } from '@fluentui/react-button-shim-v8-v9';
 
 const addIcon: IIconProps = { iconName: 'Add' };
 

apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/CommandButtonShimExample.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { CommandButton, IButtonProps, Icon, IIconProps } from '@fluentui/react';
 import { Button, webLightTheme, FluentProvider } from '@fluentui/react-components';
-import { CommandButtonShim } from '../../../../../shims/ButtonShim';
+import { CommandButtonShim } from '@fluentui/react-button-shim-v8-v9';
 
 const addIcon: IIconProps = { iconName: 'Add' };
 

apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/CompoundButtonShimExample.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { CompoundButton as CompoundButtonV8, IButtonProps } from '@fluentui/react';
 import { CompoundButton as CompoundButtonV9, webLightTheme, FluentProvider } from '@fluentui/react-components';
-import { CompoundButtonShim } from '../../../../../shims/ButtonShim';
+import { CompoundButtonShim } from '@fluentui/react-button-shim-v8-v9';
 
 export const CompoundButtonShimExample = (props: IButtonProps) => {
   return (

apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/DefaultButtonShimExample.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DefaultButton, IButtonProps } from '@fluentui/react';
 import { Button, webLightTheme, FluentProvider } from '@fluentui/react-components';
-import { DefaultButtonShim } from '../../../../../shims/ButtonShim';
+import { DefaultButtonShim } from '@fluentui/react-button-shim-v8-v9';
 
 export const DefaultButtonShimExample = (props: IButtonProps) => {
   return (

apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/MenuButtonShimExample.tsx

@@ -20,7 +20,7 @@ import {
   MenuDivider,
   MenuItemCheckbox,
 } from '@fluentui/react-components';
-import { MenuButtonShim } from '../../../../../shims/ButtonShim';
+import { MenuButtonShim } from '@fluentui/react-button-shim-v8-v9';
 
 const addIcon: IIconProps = { iconName: 'Add' };
 const mailIcon: IIconProps = { iconName: 'Mail' };

apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/PrimaryButtonShimExample.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PrimaryButton, IButtonProps } from '@fluentui/react';
 import { Button, webLightTheme, FluentProvider } from '@fluentui/react-components';
-import { PrimaryButtonShim } from '../../../../../shims/ButtonShim';
+import { PrimaryButtonShim } from '@fluentui/react-button-shim-v8-v9';
 
 export const PrimaryButtonShimExample = (props: IButtonProps) => {
   return (

apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/ToggleButtonShimExample.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { DefaultButton, IButtonProps, Icon, IIconProps, initializeIcons } from '@fluentui/react';
 import { webLightTheme, FluentProvider, ToggleButton } from '@fluentui/react-components';
-import { ToggleButtonShim } from '../../../../../shims/ButtonShim';
+import { ToggleButtonShim } from '@fluentui/react-button-shim-v8-v9';
 
 initializeIcons();
 

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

@@ -1,14 +1,6 @@
 import { colorMap } from './colorMap';
 import { ColorInfo, ColorKind } from './types';
-import {
-  black,
-  blackAlpha,
-  brandWeb,
-  grey,
-  sharedColors,
-  white,
-  whiteAlpha,
-} from '../../../../shims/ThemeShim/themeDuplicates';
+import { black, blackAlpha, brandWeb, grey, sharedColors, white, whiteAlpha } from '@fluentui/react-theme-shim-v8-v9';
 import { DefaultPalette } from '@fluentui/react';
 
 const palettePrefix = 'palette.';

apps/public-docsite-v9/src/stories/StackShim.stories.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Meta } from '@storybook/react';
 import { Button, makeStyles } from '@fluentui/react-components';
 import { Checkbox, Dropdown, IDropdownOption, DropdownMenuItemType, Stack, TextField } from '@fluentui/react';
-import { StackShim, StackItemShim } from '../shims/StackShim/index';
+import { StackShim, StackItemShim } from '@fluentui/react-stack-shim-v8-v9';
 
 const horizontalAlignOptions: IDropdownOption[] = [
   {