From 59f642fc3318a79925198ae538a5b3e057f85a72 Mon Sep 17 00:00:00 2001 From: GeoffCoxMSFT Date: Thu, 6 Oct 2022 10:00:56 -0700 Subject: [PATCH 01/22] Move button and stack stories into migration shim component --- .github/CODEOWNERS | 1 + apps/public-docsite-v9/.storybook/main.js | 1 + .../{Button => }/Button.stories.mdx | 16 - .../Button/ActionButtonShimExample.tsx | 22 - .../Components/Button/ButtonShimExamples.tsx | 54 - .../Button/CommandButtonShimExample.tsx | 22 - .../Button/CompoundButtonShimExample.tsx | 18 - .../Button/DefaultButtonShimExample.tsx | 18 - .../Button/PrimaryButtonShimExample.tsx | 18 - .../src/shims/ButtonShim.tsx | 174 --- packages/react-migration-v8-v9/.babelrc.json | 4 + packages/react-migration-v8-v9/.eslintrc.json | 4 + packages/react-migration-v8-v9/.npmignore | 29 + packages/react-migration-v8-v9/LICENSE | 15 + packages/react-migration-v8-v9/README.md | 5 + packages/react-migration-v8-v9/Spec.md | 63 + .../config/api-extractor.json | 10 + .../react-migration-v8-v9/config/tests.js | 1 + .../etc/react-migration-v8-v9.api.md | 15 + packages/react-migration-v8-v9/jest.config.js | 9 + packages/react-migration-v8-v9/just.config.ts | 3 + packages/react-migration-v8-v9/package.json | 61 + .../components/Button/ActionButtonShim.tsx | 23 + .../src/components/Button/ButtonShim.tsx | 24 + .../components/Button/CommandButtonShim.tsx | 4 + .../components/Button/CompoundButtonShim.tsx | 26 + .../components/Button/DefaultButtonShim.tsx | 14 + .../src/components/Button/MenuButtonShim.tsx | 39 + .../components/Button/PrimaryButtonShim.tsx | 13 + .../components/Button/ToggleButtonShim.tsx | 27 + .../src/components/Button/index.ts | 9 + .../src/components/Button/shimButtonProps.tsx | 35 + .../src/components/Menu}/MenuShim.tsx | 42 +- .../src/components/Menu/index.ts | 2 + .../src/components/Menu/shimMenuProps.tsx | 38 + .../src/components/Stack}/StackItemShim.tsx | 0 .../src/components/Stack}/StackShim.tsx | 4 +- .../src/components/Stack}/index.ts | 2 +- .../src/components/Stack}/stackUtils.ts | 4 +- .../src/components/Theme/index.ts | 4 + .../src/components/Theme/themeDuplicates.ts | 1073 +++++++++++++++++ .../src/components/Theme/v8ThemeShim.ts | 346 ++++++ .../components/Theme/v9BrandVariantsShim.ts | 76 ++ .../src/components/Theme/v9ThemeShim.ts | 200 +++ packages/react-migration-v8-v9/src/index.ts | 46 + .../stories/ActionButtonShim/Description.md | 1 + .../ActionButtonShim/index.stories.tsx | 62 + .../stories/CommandButtonShim/Description.md | 1 + .../CommandButtonShim/index.stories.tsx | 60 + .../stories/CompoundButtonShim/Description.md | 1 + .../CompoundButtonShim/index.stories.tsx | 62 + .../stories/DefaultButtonShim/Description.md | 1 + .../src/stories/DefaultButtonShim/index.tsx | 56 + .../src/stories/MenuButtonShim/Description.md | 1 + .../stories/MenuButtonShim/index.stories.tsx | 62 +- .../stories/PrimaryButtonShim/Description.md | 1 + .../PrimaryButtonShim/index.stories.tsx | 56 + .../src/stories/Stack/Description.md | 3 + .../src/stories/Stack/index.stories.tsx | 31 +- .../stories/ToggleButtonShim/Description.md | 1 + .../ToggleButtonShim/index.stories.tsx | 51 +- packages/react-migration-v8-v9/tsconfig.json | 22 + .../react-migration-v8-v9/tsconfig.lib.json | 22 + .../react-migration-v8-v9/tsconfig.spec.json | 9 + tsconfig.base.json | 1 + workspace.json | 6 + 66 files changed, 2706 insertions(+), 418 deletions(-) rename apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/{Button => }/Button.stories.mdx (86%) delete mode 100644 apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/ActionButtonShimExample.tsx delete mode 100644 apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/ButtonShimExamples.tsx delete mode 100644 apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/CommandButtonShimExample.tsx delete mode 100644 apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/CompoundButtonShimExample.tsx delete mode 100644 apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/DefaultButtonShimExample.tsx delete mode 100644 apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/PrimaryButtonShimExample.tsx delete mode 100644 apps/public-docsite-v9/src/shims/ButtonShim.tsx create mode 100644 packages/react-migration-v8-v9/.babelrc.json create mode 100644 packages/react-migration-v8-v9/.eslintrc.json create mode 100644 packages/react-migration-v8-v9/.npmignore create mode 100644 packages/react-migration-v8-v9/LICENSE create mode 100644 packages/react-migration-v8-v9/README.md create mode 100644 packages/react-migration-v8-v9/Spec.md create mode 100644 packages/react-migration-v8-v9/config/api-extractor.json create mode 100644 packages/react-migration-v8-v9/config/tests.js create mode 100644 packages/react-migration-v8-v9/etc/react-migration-v8-v9.api.md create mode 100644 packages/react-migration-v8-v9/jest.config.js create mode 100644 packages/react-migration-v8-v9/just.config.ts create mode 100644 packages/react-migration-v8-v9/package.json create mode 100644 packages/react-migration-v8-v9/src/components/Button/ActionButtonShim.tsx create mode 100644 packages/react-migration-v8-v9/src/components/Button/ButtonShim.tsx create mode 100644 packages/react-migration-v8-v9/src/components/Button/CommandButtonShim.tsx create mode 100644 packages/react-migration-v8-v9/src/components/Button/CompoundButtonShim.tsx create mode 100644 packages/react-migration-v8-v9/src/components/Button/DefaultButtonShim.tsx create mode 100644 packages/react-migration-v8-v9/src/components/Button/MenuButtonShim.tsx create mode 100644 packages/react-migration-v8-v9/src/components/Button/PrimaryButtonShim.tsx create mode 100644 packages/react-migration-v8-v9/src/components/Button/ToggleButtonShim.tsx create mode 100644 packages/react-migration-v8-v9/src/components/Button/index.ts create mode 100644 packages/react-migration-v8-v9/src/components/Button/shimButtonProps.tsx rename {apps/public-docsite-v9/src/shims => packages/react-migration-v8-v9/src/components/Menu}/MenuShim.tsx (61%) create mode 100644 packages/react-migration-v8-v9/src/components/Menu/index.ts create mode 100644 packages/react-migration-v8-v9/src/components/Menu/shimMenuProps.tsx rename {apps/public-docsite-v9/src/shims/StackShim => packages/react-migration-v8-v9/src/components/Stack}/StackItemShim.tsx (100%) rename {apps/public-docsite-v9/src/shims/StackShim => packages/react-migration-v8-v9/src/components/Stack}/StackShim.tsx (97%) rename {apps/public-docsite-v9/src/shims/StackShim => packages/react-migration-v8-v9/src/components/Stack}/index.ts (100%) rename {apps/public-docsite-v9/src/shims/StackShim => packages/react-migration-v8-v9/src/components/Stack}/stackUtils.ts (97%) create mode 100644 packages/react-migration-v8-v9/src/components/Theme/index.ts create mode 100644 packages/react-migration-v8-v9/src/components/Theme/themeDuplicates.ts create mode 100644 packages/react-migration-v8-v9/src/components/Theme/v8ThemeShim.ts create mode 100644 packages/react-migration-v8-v9/src/components/Theme/v9BrandVariantsShim.ts create mode 100644 packages/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts create mode 100644 packages/react-migration-v8-v9/src/index.ts create mode 100644 packages/react-migration-v8-v9/src/stories/ActionButtonShim/Description.md create mode 100644 packages/react-migration-v8-v9/src/stories/ActionButtonShim/index.stories.tsx create mode 100644 packages/react-migration-v8-v9/src/stories/CommandButtonShim/Description.md create mode 100644 packages/react-migration-v8-v9/src/stories/CommandButtonShim/index.stories.tsx create mode 100644 packages/react-migration-v8-v9/src/stories/CompoundButtonShim/Description.md create mode 100644 packages/react-migration-v8-v9/src/stories/CompoundButtonShim/index.stories.tsx create mode 100644 packages/react-migration-v8-v9/src/stories/DefaultButtonShim/Description.md create mode 100644 packages/react-migration-v8-v9/src/stories/DefaultButtonShim/index.tsx create mode 100644 packages/react-migration-v8-v9/src/stories/MenuButtonShim/Description.md rename apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/MenuButtonShimExample.tsx => packages/react-migration-v8-v9/src/stories/MenuButtonShim/index.stories.tsx (81%) create mode 100644 packages/react-migration-v8-v9/src/stories/PrimaryButtonShim/Description.md create mode 100644 packages/react-migration-v8-v9/src/stories/PrimaryButtonShim/index.stories.tsx create mode 100644 packages/react-migration-v8-v9/src/stories/Stack/Description.md rename apps/public-docsite-v9/src/stories/StackShim.stories.tsx => packages/react-migration-v8-v9/src/stories/Stack/index.stories.tsx (93%) create mode 100644 packages/react-migration-v8-v9/src/stories/ToggleButtonShim/Description.md rename apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/ToggleButtonShimExample.tsx => packages/react-migration-v8-v9/src/stories/ToggleButtonShim/index.stories.tsx (50%) create mode 100644 packages/react-migration-v8-v9/tsconfig.json create mode 100644 packages/react-migration-v8-v9/tsconfig.lib.json create mode 100644 packages/react-migration-v8-v9/tsconfig.spec.json diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 49a1f52e38f48..72b9156562868 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -174,6 +174,7 @@ packages/react-components/react-progress @microsoft/cxe-red @tomi-msft packages/react-components/react-persona @microsoft/cxe-red @sopranopillow packages/react-components/react-avatar-context @microsoft/teams-prg packages/react-components/react-infobutton @microsoft/cxe-red @sopranopillow +packages/react-migration-v8-v9 @microsoft/cxe-coastal @geoffcoxmsft # <%= NX-CODEOWNER-PLACEHOLDER %> diff --git a/apps/public-docsite-v9/.storybook/main.js b/apps/public-docsite-v9/.storybook/main.js index b1cec15df3610..a9ba66ecd41ff 100644 --- a/apps/public-docsite-v9/.storybook/main.js +++ b/apps/public-docsite-v9/.storybook/main.js @@ -8,6 +8,7 @@ module.exports = /** @type {Omit @@ -71,18 +70,3 @@ To migrate a button replace the v8 usage with the corresponding v9 button varian | theme | (use FluentProvider) | | toggle | (use ToggleButton) | | uniqueId | HTML key | - -## Button Shims - -The button shim components accept v8 `IButtonProps` and render v9 buttons. -Shims are useful when you have a large number of usage instances, want to render v9 components, and do not have time -or resources to update every instance. - -Prefer to migrate your code to use v9 buttons if possible rather than take a use shims. -Shim depend on both v8 and v9 so may prevent bundle size optimizations. - -You can find the button shims in the Fluent UI React repository here [apps/public-docsite-v9/src/shims/ButtonShim.tsx](https://github.com/microsoft/fluentui/blob/master/apps/public-docsite-v9/src/shims/ButtonShim.tsx) - - - - diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/ActionButtonShimExample.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/ActionButtonShimExample.tsx deleted file mode 100644 index cecc63c686ab4..0000000000000 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/ActionButtonShimExample.tsx +++ /dev/null @@ -1,22 +0,0 @@ -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'; - -const addIcon: IIconProps = { iconName: 'Add' }; - -export const ActionButtonShimExample = (props: IButtonProps) => { - return ( - <> - Action - - Action - - - - - - ); -}; diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/ButtonShimExamples.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/ButtonShimExamples.tsx deleted file mode 100644 index a3d691324a7ba..0000000000000 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/ButtonShimExamples.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import * as React from 'react'; -import { makeStyles, shorthands } from '@fluentui/react-components'; -import { ActionButtonShimExample } from './ActionButtonShimExample'; -import { CommandButtonShimExample } from './CommandButtonShimExample'; -import { CompoundButtonShimExample } from './CompoundButtonShimExample'; -import { DefaultButtonShimExample } from './DefaultButtonShimExample'; -import { MenuButtonShimExample } from './MenuButtonShimExample'; -import { PrimaryButtonShimExample } from './PrimaryButtonShimExample'; -import { ToggleButtonShimExample } from './ToggleButtonShimExample'; - -const useStyles = makeStyles({ - root: { - display: 'grid', - gridTemplateColumns: 'auto auto auto auto', - gridTemplateRows: 'repeat(7, 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 ButtonShimExamples = () => { - const styles = useStyles(); - - return ( -
-

Component

-

v8

-

shim

-

v9

-
ActionButton
- -
DefaultButton
- -
CommandButton
- -
CompoundButton
- -
MenuButton
- -
PrimaryButton
- -
ToggleButton
- -
- ); -}; diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/CommandButtonShimExample.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/CommandButtonShimExample.tsx deleted file mode 100644 index dc1aa9c086a28..0000000000000 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/CommandButtonShimExample.tsx +++ /dev/null @@ -1,22 +0,0 @@ -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'; - -const addIcon: IIconProps = { iconName: 'Add' }; - -export const CommandButtonShimExample = (props: IButtonProps) => { - return ( - <> - Command - - Command - - - - - - ); -}; diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/CompoundButtonShimExample.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/CompoundButtonShimExample.tsx deleted file mode 100644 index cd734bd378ab0..0000000000000 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/CompoundButtonShimExample.tsx +++ /dev/null @@ -1,18 +0,0 @@ -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'; - -export const CompoundButtonShimExample = (props: IButtonProps) => { - return ( - <> - Compound - - Compound - - - Compound - - - ); -}; diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/DefaultButtonShimExample.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/DefaultButtonShimExample.tsx deleted file mode 100644 index 80e0557367a6b..0000000000000 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/DefaultButtonShimExample.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react'; -import { DefaultButton, IButtonProps } from '@fluentui/react'; -import { Button, webLightTheme, FluentProvider } from '@fluentui/react-components'; -import { DefaultButtonShim } from '../../../../../shims/ButtonShim'; - -export const DefaultButtonShimExample = (props: IButtonProps) => { - return ( - <> - Default - - Default - - - - - - ); -}; diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/PrimaryButtonShimExample.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/PrimaryButtonShimExample.tsx deleted file mode 100644 index 372bc892a59d9..0000000000000 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/PrimaryButtonShimExample.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react'; -import { PrimaryButton, IButtonProps } from '@fluentui/react'; -import { Button, webLightTheme, FluentProvider } from '@fluentui/react-components'; -import { PrimaryButtonShim } from '../../../../../shims/ButtonShim'; - -export const PrimaryButtonShimExample = (props: IButtonProps) => { - return ( - <> - Primary - - Primary - - - - - - ); -}; diff --git a/apps/public-docsite-v9/src/shims/ButtonShim.tsx b/apps/public-docsite-v9/src/shims/ButtonShim.tsx deleted file mode 100644 index 6f3f011c42098..0000000000000 --- a/apps/public-docsite-v9/src/shims/ButtonShim.tsx +++ /dev/null @@ -1,174 +0,0 @@ -import * as React from 'react'; - -import { IBaseButtonProps, IButtonProps, Icon } from '@fluentui/react'; - -import { - Button, - ButtonProps, - CompoundButton, - CompoundButtonProps, - Menu, - MenuButton, - MenuButtonProps, - MenuList, - MenuPopover, - MenuTrigger, - ToggleButton, - ToggleButtonProps, -} from '@fluentui/react-components'; -import { MenuItemShim, shimMenuProps } from './MenuShim'; - -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; -}; - -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 + + + ); +}; + +export default { + title: 'Migration Shims/Button/ActionButtonShim', + component: ActionButtonShim, + parameters: { + docs: { + description: { + component: [descriptionMd].join('\n'), + }, + }, + }, +}; diff --git a/packages/react-migration-v8-v9/src/stories/CommandButtonShim/Description.md b/packages/react-migration-v8-v9/src/stories/CommandButtonShim/Description.md new file mode 100644 index 0000000000000..85f4f38aca9b3 --- /dev/null +++ b/packages/react-migration-v8-v9/src/stories/CommandButtonShim/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/CommandButtonShim/index.stories.tsx b/packages/react-migration-v8-v9/src/stories/CommandButtonShim/index.stories.tsx new file mode 100644 index 0000000000000..22027b3a6b1c5 --- /dev/null +++ b/packages/react-migration-v8-v9/src/stories/CommandButtonShim/index.stories.tsx @@ -0,0 +1,60 @@ +import * as React from 'react'; + +import descriptionMd from './Description.md'; + +import { CommandButton, Icon, IIconProps } from '@fluentui/react'; +import { FluentProvider, Button, webLightTheme, makeStyles, shorthands } from '@fluentui/react-components'; +import { CommandButtonShim } from '../../components/Button'; + +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

+ 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 0000000000000..2e29a7a34226f --- /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 0000000000000..2bda09064cc10 --- /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'; + +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 0000000000000..85f4f38aca9b3 --- /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 0000000000000..1694ea6a316d5 --- /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'; + +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 0000000000000..4aceb0bb48183 --- /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 81% 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 b871e67af5a02..ebc4c5ae9dda5 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,5 +1,7 @@ -/* eslint-disable no-alert */ import * as React from 'react'; + +import descriptionMd from './Description.md'; + import { ContextualMenuItemType, DefaultButton, @@ -7,27 +9,52 @@ import { IContextualMenuItem, IContextualMenuProps, IIconProps, + initializeIcons, } 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'; + +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 +143,10 @@ export const MenuButtonShimExample = () => { }; return ( - <> +
+

v8

+

shim

+

v9

@@ -153,6 +183,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 0000000000000..1dbebd59b5ad2 --- /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 0000000000000..28eedb8600608 --- /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'; + +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 + + + + +
+ ); +}; + +export default { + title: 'Migration Shims/Button/PrimaryButtonShim', + component: PrimaryButtonShim, + parameters: { + docs: { + description: { + component: [descriptionMd].join('\n'), + }, + }, + }, +}; diff --git a/packages/react-migration-v8-v9/src/stories/Stack/Description.md b/packages/react-migration-v8-v9/src/stories/Stack/Description.md new file mode 100644 index 0000000000000..a721f4a26ba38 --- /dev/null +++ b/packages/react-migration-v8-v9/src/stories/Stack/Description.md @@ -0,0 +1,3 @@ +The StackShim and StackItemShim accept the same props a v8 Stack and StackItem and render equivalent HTML and stylings to provide layout using CSS flexbox. + +The Stack and StackItem components are not included in v9. Providing components that expose equivalent layout properties as CSS flexbox required learning another set of props without adding signficant value. diff --git a/apps/public-docsite-v9/src/stories/StackShim.stories.tsx b/packages/react-migration-v8-v9/src/stories/Stack/index.stories.tsx similarity index 93% rename from apps/public-docsite-v9/src/stories/StackShim.stories.tsx rename to packages/react-migration-v8-v9/src/stories/Stack/index.stories.tsx index ecc37b3a5e8df..d41f616b4f8d2 100644 --- a/apps/public-docsite-v9/src/stories/StackShim.stories.tsx +++ b/packages/react-migration-v8-v9/src/stories/Stack/index.stories.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; -import { Meta } from '@storybook/react'; -import { Button, makeStyles } from '@fluentui/react-components'; +import { 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 '../../components/Stack'; + +import descriptionMd from './Description.md'; const horizontalAlignOptions: IDropdownOption[] = [ { @@ -53,7 +54,7 @@ const useCustomStyles = makeStyles({ }, }); -export const StackShimStory = () => { +export const Playground = () => { const [state, setState] = React.useState({ verticalFill: false, horizontal: false, @@ -68,7 +69,7 @@ export const StackShimStory = () => { const [childrenGapToken, setChildrenGapToken] = React.useState('10'); const [paddingToken, setPaddingToken] = React.useState('10px'); - const onCheckboxChange = (ev: React.ChangeEvent, checked?: boolean) => { + const onCheckboxChange = (ev?: React.FormEvent, checked?: boolean) => { const { name } = ev.target; setState({ ...state, [name]: checked }); @@ -209,13 +210,13 @@ export const StackShimStory = () => { }; export default { - title: 'Concepts/Migration/from v8/Shims/Stack', - component: Button, - decorators: [ - Story => ( -
- -
- ), - ], -} 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 0000000000000..596353ef214b9 --- /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/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/ToggleButtonShimExample.tsx b/packages/react-migration-v8-v9/src/stories/ToggleButtonShim/index.stories.tsx similarity index 50% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/ToggleButtonShimExample.tsx rename to packages/react-migration-v8-v9/src/stories/ToggleButtonShim/index.stories.tsx index 3f6f02eb2b35e..c725faf8fca0a 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/ToggleButtonShimExample.tsx +++ b/packages/react-migration-v8-v9/src/stories/ToggleButtonShim/index.stories.tsx @@ -1,21 +1,46 @@ -/* eslint-disable react/jsx-no-bind */ 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 descriptionMd from './Description.md'; + +import { DefaultButton, Icon, IIconProps, initializeIcons } from '@fluentui/react'; +import { FluentProvider, webLightTheme, makeStyles, shorthands, ToggleButton } from '@fluentui/react-components'; +import { ToggleButtonShim } from '../../components/Button'; 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 ToggleButtonShimExample = (props: IButtonProps) => { +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

{ 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 0000000000000..8dff38e64b031 --- /dev/null +++ b/packages/react-migration-v8-v9/tsconfig.json @@ -0,0 +1,22 @@ +{ + "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" + } + ] +} 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 0000000000000..7f94e04299ed8 --- /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 0000000000000..469fcba4d7ba7 --- /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 ea392c8e0eb00..fc516cd2d6cdd 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 18214f4fd8f52..fc529b32feab6 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", From f376b0da10d4838a4c45540db416e5ac5037cae2 Mon Sep 17 00:00:00 2001 From: "Geoff Cox (Microsoft)" Date: Thu, 6 Oct 2022 13:26:50 -0700 Subject: [PATCH 02/22] Update packages/react-migration-v8-v9/src/components/Button/ActionButtonShim.tsx Co-authored-by: Makoto Morimoto --- .../src/components/Button/ActionButtonShim.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-migration-v8-v9/src/components/Button/ActionButtonShim.tsx b/packages/react-migration-v8-v9/src/components/Button/ActionButtonShim.tsx index fb4f6e919d223..d4bd62a530e4b 100644 --- a/packages/react-migration-v8-v9/src/components/Button/ActionButtonShim.tsx +++ b/packages/react-migration-v8-v9/src/components/Button/ActionButtonShim.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IButtonProps } from '@fluentui/react'; +import type { IButtonProps } from '@fluentui/react'; import { Button } from '@fluentui/react-components'; From 06f5100c7f1d897fb24a49b03a71056c9d3a69fc Mon Sep 17 00:00:00 2001 From: "Geoff Cox (Microsoft)" Date: Thu, 6 Oct 2022 13:27:00 -0700 Subject: [PATCH 03/22] Update packages/react-migration-v8-v9/src/components/Button/ButtonShim.tsx Co-authored-by: Makoto Morimoto --- .../react-migration-v8-v9/src/components/Button/ButtonShim.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-migration-v8-v9/src/components/Button/ButtonShim.tsx b/packages/react-migration-v8-v9/src/components/Button/ButtonShim.tsx index 40b7d021c2959..148dc9ff9a9df 100644 --- a/packages/react-migration-v8-v9/src/components/Button/ButtonShim.tsx +++ b/packages/react-migration-v8-v9/src/components/Button/ButtonShim.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IBaseButtonProps } from '@fluentui/react'; +import type { IBaseButtonProps } from '@fluentui/react'; import { Button } from '@fluentui/react-components'; From 1ec524f4d9c32aa714fdb20cdee0f51923ec14f9 Mon Sep 17 00:00:00 2001 From: "Geoff Cox (Microsoft)" Date: Thu, 6 Oct 2022 13:27:23 -0700 Subject: [PATCH 04/22] Update packages/react-migration-v8-v9/src/components/Button/CompoundButtonShim.tsx Co-authored-by: Makoto Morimoto --- .../src/components/Button/CompoundButtonShim.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react-migration-v8-v9/src/components/Button/CompoundButtonShim.tsx b/packages/react-migration-v8-v9/src/components/Button/CompoundButtonShim.tsx index 651cdc696966c..b69958a3eb889 100644 --- a/packages/react-migration-v8-v9/src/components/Button/CompoundButtonShim.tsx +++ b/packages/react-migration-v8-v9/src/components/Button/CompoundButtonShim.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; -import { IButtonProps } from '@fluentui/react'; +import type { IButtonProps } from '@fluentui/react'; -import { CompoundButton, CompoundButtonProps } from '@fluentui/react-components'; +import { CompoundButton } from '@fluentui/react-components'; +import type { CompoundButtonProps } from '@fluentui/react-components'; import { shimButtonProps } from './shimButtonProps'; From e9afb45451e2d3f52376ad56d38cea6a10424af6 Mon Sep 17 00:00:00 2001 From: "Geoff Cox (Microsoft)" Date: Thu, 6 Oct 2022 13:27:44 -0700 Subject: [PATCH 05/22] Update packages/react-migration-v8-v9/src/components/Button/DefaultButtonShim.tsx Co-authored-by: Makoto Morimoto --- .../src/components/Button/DefaultButtonShim.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-migration-v8-v9/src/components/Button/DefaultButtonShim.tsx b/packages/react-migration-v8-v9/src/components/Button/DefaultButtonShim.tsx index 374fe118b4a08..7aed66be4d59e 100644 --- a/packages/react-migration-v8-v9/src/components/Button/DefaultButtonShim.tsx +++ b/packages/react-migration-v8-v9/src/components/Button/DefaultButtonShim.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IButtonProps } from '@fluentui/react'; +import type { IButtonProps } from '@fluentui/react'; import { ButtonShim } from './ButtonShim'; From d22c8ca3426b051bd20ace5ac387ed4df764fbe5 Mon Sep 17 00:00:00 2001 From: "Geoff Cox (Microsoft)" Date: Thu, 6 Oct 2022 13:27:53 -0700 Subject: [PATCH 06/22] Update packages/react-migration-v8-v9/src/stories/ActionButtonShim/index.stories.tsx Co-authored-by: Makoto Morimoto --- .../src/stories/ActionButtonShim/index.stories.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 index f3658a02d7dfa..824c887af8cd2 100644 --- a/packages/react-migration-v8-v9/src/stories/ActionButtonShim/index.stories.tsx +++ b/packages/react-migration-v8-v9/src/stories/ActionButtonShim/index.stories.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import descriptionMd from './Description.md'; -import { ActionButton, Icon, IIconProps, initializeIcons } from '@fluentui/react'; +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'; From 7451ec7e5cf12469d4cca7922dad667e0f056896 Mon Sep 17 00:00:00 2001 From: "Geoff Cox (Microsoft)" Date: Thu, 6 Oct 2022 13:28:03 -0700 Subject: [PATCH 07/22] Update packages/react-migration-v8-v9/src/stories/CommandButtonShim/index.stories.tsx Co-authored-by: Makoto Morimoto --- .../src/stories/CommandButtonShim/index.stories.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-migration-v8-v9/src/stories/CommandButtonShim/index.stories.tsx b/packages/react-migration-v8-v9/src/stories/CommandButtonShim/index.stories.tsx index 22027b3a6b1c5..5a9655ca09706 100644 --- a/packages/react-migration-v8-v9/src/stories/CommandButtonShim/index.stories.tsx +++ b/packages/react-migration-v8-v9/src/stories/CommandButtonShim/index.stories.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import descriptionMd from './Description.md'; -import { CommandButton, Icon, IIconProps } from '@fluentui/react'; +import { CommandButton, Icon } from '@fluentui/react'; +import type { IIconProps } from '@fluentui/react'; import { FluentProvider, Button, webLightTheme, makeStyles, shorthands } from '@fluentui/react-components'; import { CommandButtonShim } from '../../components/Button'; From 22d6dfc3b487f813e5ddd52cecb757b60596e82e Mon Sep 17 00:00:00 2001 From: "Geoff Cox (Microsoft)" Date: Thu, 6 Oct 2022 13:28:13 -0700 Subject: [PATCH 08/22] Update packages/react-migration-v8-v9/src/stories/MenuButtonShim/index.stories.tsx Co-authored-by: Makoto Morimoto --- .../src/stories/MenuButtonShim/index.stories.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/react-migration-v8-v9/src/stories/MenuButtonShim/index.stories.tsx b/packages/react-migration-v8-v9/src/stories/MenuButtonShim/index.stories.tsx index ebc4c5ae9dda5..90a5340ff7125 100644 --- a/packages/react-migration-v8-v9/src/stories/MenuButtonShim/index.stories.tsx +++ b/packages/react-migration-v8-v9/src/stories/MenuButtonShim/index.stories.tsx @@ -2,15 +2,8 @@ import * as React from 'react'; import descriptionMd from './Description.md'; -import { - ContextualMenuItemType, - DefaultButton, - Icon, - IContextualMenuItem, - IContextualMenuProps, - IIconProps, - initializeIcons, -} from '@fluentui/react'; +import { ContextualMenuItemType, DefaultButton, Icon, initializeIcons } from '@fluentui/react'; +import type { IContextualMenuItem, IContextualMenuProps, IIconProps } from '@fluentui/react'; import { FluentProvider, webLightTheme, From 8e440b3c5c7efa35c1ba7947042cec296cb9df84 Mon Sep 17 00:00:00 2001 From: "Geoff Cox (Microsoft)" Date: Thu, 6 Oct 2022 13:28:20 -0700 Subject: [PATCH 09/22] Update packages/react-migration-v8-v9/src/stories/ToggleButtonShim/index.stories.tsx Co-authored-by: Makoto Morimoto --- .../src/stories/ToggleButtonShim/index.stories.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 index c725faf8fca0a..536855ef6c638 100644 --- a/packages/react-migration-v8-v9/src/stories/ToggleButtonShim/index.stories.tsx +++ b/packages/react-migration-v8-v9/src/stories/ToggleButtonShim/index.stories.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import descriptionMd from './Description.md'; -import { DefaultButton, Icon, IIconProps, initializeIcons } from '@fluentui/react'; +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'; From 7da6a48b2300d72d20765addf757b09ec57d211c Mon Sep 17 00:00:00 2001 From: "Geoff Cox (Microsoft)" Date: Thu, 6 Oct 2022 13:28:29 -0700 Subject: [PATCH 10/22] Update packages/react-migration-v8-v9/src/stories/Stack/index.stories.tsx Co-authored-by: Makoto Morimoto --- .../react-migration-v8-v9/src/stories/Stack/index.stories.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-migration-v8-v9/src/stories/Stack/index.stories.tsx b/packages/react-migration-v8-v9/src/stories/Stack/index.stories.tsx index d41f616b4f8d2..742c386902e01 100644 --- a/packages/react-migration-v8-v9/src/stories/Stack/index.stories.tsx +++ b/packages/react-migration-v8-v9/src/stories/Stack/index.stories.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { makeStyles } from '@fluentui/react-components'; -import { Checkbox, Dropdown, IDropdownOption, DropdownMenuItemType, Stack, TextField } from '@fluentui/react'; +import { Checkbox, Dropdown, DropdownMenuItemType, Stack, TextField } from '@fluentui/react'; +import type { IDropdownOption } from '@fluentui/react'; import { StackShim, StackItemShim } from '../../components/Stack'; import descriptionMd from './Description.md'; From e0db35552e302c1101e6dd1c265639c50d0a8e22 Mon Sep 17 00:00:00 2001 From: GeoffCoxMSFT Date: Thu, 6 Oct 2022 13:34:28 -0700 Subject: [PATCH 11/22] Improved readme --- packages/react-migration-v8-v9/README.md | 8 ++- packages/react-migration-v8-v9/Spec.md | 63 ------------------------ 2 files changed, 6 insertions(+), 65 deletions(-) delete mode 100644 packages/react-migration-v8-v9/Spec.md diff --git a/packages/react-migration-v8-v9/README.md b/packages/react-migration-v8-v9/README.md index 90dc84dd353d2..3dd25fd7342a1 100644 --- a/packages/react-migration-v8-v9/README.md +++ b/packages/react-migration-v8-v9/README.md @@ -1,5 +1,9 @@ # @fluentui/react-migration-v8-v9 -**React Migration V8 V9 components for [Fluent UI React](https://react.fluentui.dev/)** +**React Migration v8 to v9 [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. +This package contains component shims that provide the props interface of a v8 component and render a v9 component. + +Our recommendation is to avoid using shims and instead migrate from using v8 components to using v9 components in your codebase. Shims provide a convienient way to start migrating to v9 while defering the cost of updating a multitude of call points. + +Shims depend on both v8 and v9, so carefully consider the impact using a shim may have on bundle size and render performance vs. migrating to v9 directly. diff --git a/packages/react-migration-v8-v9/Spec.md b/packages/react-migration-v8-v9/Spec.md deleted file mode 100644 index d4daad450d22f..0000000000000 --- a/packages/react-migration-v8-v9/Spec.md +++ /dev/null @@ -1,63 +0,0 @@ -# @fluentui/react-migration-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) From 2c0258a2300bd6be7c0558eae3a559010c2a78dc Mon Sep 17 00:00:00 2001 From: "Geoff Cox (Microsoft)" Date: Thu, 6 Oct 2022 13:35:01 -0700 Subject: [PATCH 12/22] Update packages/react-migration-v8-v9/src/components/Button/MenuButtonShim.tsx Co-authored-by: Makoto Morimoto --- .../src/components/Button/MenuButtonShim.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-migration-v8-v9/src/components/Button/MenuButtonShim.tsx b/packages/react-migration-v8-v9/src/components/Button/MenuButtonShim.tsx index 273d0e3ac4412..71571be787fab 100644 --- a/packages/react-migration-v8-v9/src/components/Button/MenuButtonShim.tsx +++ b/packages/react-migration-v8-v9/src/components/Button/MenuButtonShim.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IButtonProps } from '@fluentui/react'; +import type { IButtonProps } from '@fluentui/react'; import { MenuButton, MenuButtonProps, Menu, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-components'; import { MenuItemShim, shimMenuProps } from '../Menu'; From cd4478526f090403876c029e7bf7517542dcff7e Mon Sep 17 00:00:00 2001 From: "Geoff Cox (Microsoft)" Date: Thu, 6 Oct 2022 13:38:08 -0700 Subject: [PATCH 13/22] Apply suggestions from code review Co-authored-by: Makoto Morimoto --- .../src/components/Button/MenuButtonShim.tsx | 3 ++- .../src/components/Button/PrimaryButtonShim.tsx | 2 +- .../src/components/Button/ToggleButtonShim.tsx | 3 ++- .../src/components/Button/shimButtonProps.tsx | 5 +++-- .../src/components/Theme/v9BrandVariantsShim.ts | 5 +++-- .../src/components/Theme/v9ThemeShim.ts | 12 ++++-------- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/react-migration-v8-v9/src/components/Button/MenuButtonShim.tsx b/packages/react-migration-v8-v9/src/components/Button/MenuButtonShim.tsx index 71571be787fab..92560f4a236c6 100644 --- a/packages/react-migration-v8-v9/src/components/Button/MenuButtonShim.tsx +++ b/packages/react-migration-v8-v9/src/components/Button/MenuButtonShim.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import type { IButtonProps } from '@fluentui/react'; -import { MenuButton, MenuButtonProps, Menu, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-components'; +import { MenuButton, Menu, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-components'; +import type { MenuButtonProps } from '@fluentui/react-components'; import { MenuItemShim, shimMenuProps } from '../Menu'; import { shimButtonProps } from './shimButtonProps'; diff --git a/packages/react-migration-v8-v9/src/components/Button/PrimaryButtonShim.tsx b/packages/react-migration-v8-v9/src/components/Button/PrimaryButtonShim.tsx index 73908d6c72559..58b1512bf4ccf 100644 --- a/packages/react-migration-v8-v9/src/components/Button/PrimaryButtonShim.tsx +++ b/packages/react-migration-v8-v9/src/components/Button/PrimaryButtonShim.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IButtonProps } from '@fluentui/react'; +import type { IButtonProps } from '@fluentui/react'; import { ButtonShim } from './ButtonShim'; /** diff --git a/packages/react-migration-v8-v9/src/components/Button/ToggleButtonShim.tsx b/packages/react-migration-v8-v9/src/components/Button/ToggleButtonShim.tsx index 3bfef04fa3578..afeb3b9d7ba5d 100644 --- a/packages/react-migration-v8-v9/src/components/Button/ToggleButtonShim.tsx +++ b/packages/react-migration-v8-v9/src/components/Button/ToggleButtonShim.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import { IButtonProps } from '@fluentui/react'; -import { ToggleButton, ToggleButtonProps } from '@fluentui/react-components'; +import { ToggleButtonProps } from '@fluentui/react-components'; +import type { ToggleButtonProps } from '@fluentui/react-components'; import { shimButtonProps } from './shimButtonProps'; diff --git a/packages/react-migration-v8-v9/src/components/Button/shimButtonProps.tsx b/packages/react-migration-v8-v9/src/components/Button/shimButtonProps.tsx index eea1acdf42210..6c1cd1cfeef3b 100644 --- a/packages/react-migration-v8-v9/src/components/Button/shimButtonProps.tsx +++ b/packages/react-migration-v8-v9/src/components/Button/shimButtonProps.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; -import { IBaseButtonProps, Icon } from '@fluentui/react'; +import { Icon } from '@fluentui/react'; +import type { IBaseButtonProps } from '@fluentui/react'; -import { ButtonProps } from '@fluentui/react-components'; +import type { ButtonProps } from '@fluentui/react-components'; export const shimButtonProps = (props: IBaseButtonProps & React.RefAttributes): ButtonProps => { //TODO: Icon shim. This still renders the v8 icon. diff --git a/packages/react-migration-v8-v9/src/components/Theme/v9BrandVariantsShim.ts b/packages/react-migration-v8-v9/src/components/Theme/v9BrandVariantsShim.ts index 7a7bfc7042fec..c385207190332 100644 --- a/packages/react-migration-v8-v9/src/components/Theme/v9BrandVariantsShim.ts +++ b/packages/react-migration-v8-v9/src/components/Theme/v9BrandVariantsShim.ts @@ -1,6 +1,7 @@ import { IPalette } from '@fluentui/react'; -import { BrandVariants } from '@fluentui/react-components'; -import { ColorInput, TinyColor } from '@ctrl/tinycolor'; +import type { BrandVariants } from '@fluentui/react-components'; +import { TinyColor } from '@ctrl/tinycolor'; +import type { ColorInput } from '@ctrl/tinycolor'; /** * A helper to mix colors using tiny color by an amount and get back a hex string. diff --git a/packages/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts b/packages/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts index 027d4879b2d1d..7ea1230812deb 100644 --- a/packages/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts +++ b/packages/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts @@ -1,11 +1,7 @@ -import { IEffects, IPalette, Theme as ThemeV8 } from '@fluentui/react'; -import { - BorderRadiusTokens, - ColorTokens, - ShadowTokens, - Theme as ThemeV9, - webLightTheme, -} from '@fluentui/react-components'; +import { Theme as ThemeV8 } from '@fluentui/react'; +import type { IEffects, IPalette } from '@fluentui/react'; +import { Theme as ThemeV9, webLightTheme } from '@fluentui/react-components'; +import type { BorderRadiusTokens, ColorTokens, ShadowTokens } from '@fluentui/react-components'; import { blackAlpha, whiteAlpha, grey } from './themeDuplicates'; /** From 0cf338263961dba6efbeac34a1ef8276046aeab0 Mon Sep 17 00:00:00 2001 From: "Geoff Cox (Microsoft)" Date: Thu, 6 Oct 2022 13:39:17 -0700 Subject: [PATCH 14/22] Apply suggestions from code review Co-authored-by: Makoto Morimoto --- .../src/components/Button/ToggleButtonShim.tsx | 2 +- .../src/components/Menu/shimMenuProps.tsx | 2 +- .../src/components/Stack/StackShim.tsx | 6 ++++-- .../src/components/Theme/v8ThemeShim.ts | 6 ++---- .../src/components/Theme/v9BrandVariantsShim.ts | 2 +- 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/react-migration-v8-v9/src/components/Button/ToggleButtonShim.tsx b/packages/react-migration-v8-v9/src/components/Button/ToggleButtonShim.tsx index afeb3b9d7ba5d..a27dd7b243c9f 100644 --- a/packages/react-migration-v8-v9/src/components/Button/ToggleButtonShim.tsx +++ b/packages/react-migration-v8-v9/src/components/Button/ToggleButtonShim.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IButtonProps } from '@fluentui/react'; +import type { IButtonProps } from '@fluentui/react'; import { ToggleButtonProps } from '@fluentui/react-components'; import type { ToggleButtonProps } from '@fluentui/react-components'; diff --git a/packages/react-migration-v8-v9/src/components/Menu/shimMenuProps.tsx b/packages/react-migration-v8-v9/src/components/Menu/shimMenuProps.tsx index 65e858cf86679..418750f440d3f 100644 --- a/packages/react-migration-v8-v9/src/components/Menu/shimMenuProps.tsx +++ b/packages/react-migration-v8-v9/src/components/Menu/shimMenuProps.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { IContextualMenuItem, IContextualMenuProps, Icon } from '@fluentui/react'; -import { MenuItemProps, MenuGroupHeaderProps, MenuItemCheckboxProps, MenuProps } from '@fluentui/react-menu'; +import type { MenuItemProps, MenuGroupHeaderProps, MenuItemCheckboxProps, MenuProps } from '@fluentui/react-menu'; export const shimMenuProps = (props: IContextualMenuProps): Partial => { return { diff --git a/packages/react-migration-v8-v9/src/components/Stack/StackShim.tsx b/packages/react-migration-v8-v9/src/components/Stack/StackShim.tsx index 5b0933ea4fa08..3c11e75b38c6e 100644 --- a/packages/react-migration-v8-v9/src/components/Stack/StackShim.tsx +++ b/packages/react-migration-v8-v9/src/components/Stack/StackShim.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; -import { IStackProps, IStackTokens, classNamesFunction, IStackItemProps } from '@fluentui/react'; +import { classNamesFunction } from '@fluentui/react'; +import type { IStackProps, IStackTokens, IStackItemProps } from '@fluentui/react'; import { makeStyles, mergeClasses } from '@griffel/react'; -import { getChildrenGapStyles, StackShimStyles } from './stackUtils'; +import { getChildrenGapStyles } from './stackUtils'; +import type { StackShimStyles } from './stackUtils'; const stackClassNames = { root: 'ms-Stack', diff --git a/packages/react-migration-v8-v9/src/components/Theme/v8ThemeShim.ts b/packages/react-migration-v8-v9/src/components/Theme/v8ThemeShim.ts index 8fbb261699d74..6d81719b0f957 100644 --- a/packages/react-migration-v8-v9/src/components/Theme/v8ThemeShim.ts +++ b/packages/react-migration-v8-v9/src/components/Theme/v8ThemeShim.ts @@ -1,8 +1,6 @@ -import { - createTheme, - DefaultPalette, +import { createTheme, DefaultPalette, Theme as ThemeV8 } from '@fluentui/react'; +import type { IPalette, - Theme as ThemeV8, ISemanticColors, IFontStyles, IFontWeight, diff --git a/packages/react-migration-v8-v9/src/components/Theme/v9BrandVariantsShim.ts b/packages/react-migration-v8-v9/src/components/Theme/v9BrandVariantsShim.ts index c385207190332..ea72fa4e3ae39 100644 --- a/packages/react-migration-v8-v9/src/components/Theme/v9BrandVariantsShim.ts +++ b/packages/react-migration-v8-v9/src/components/Theme/v9BrandVariantsShim.ts @@ -1,4 +1,4 @@ -import { IPalette } from '@fluentui/react'; +import type { IPalette } from '@fluentui/react'; import type { BrandVariants } from '@fluentui/react-components'; import { TinyColor } from '@ctrl/tinycolor'; import type { ColorInput } from '@ctrl/tinycolor'; From 2e3bc2976bb819ada9ae4a5c449f1b370bc61266 Mon Sep 17 00:00:00 2001 From: "Geoff Cox (Microsoft)" Date: Thu, 6 Oct 2022 13:40:00 -0700 Subject: [PATCH 15/22] Apply suggestions from code review Co-authored-by: Makoto Morimoto --- .../react-migration-v8-v9/src/components/Menu/MenuShim.tsx | 3 ++- .../src/components/Menu/shimMenuProps.tsx | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react-migration-v8-v9/src/components/Menu/MenuShim.tsx b/packages/react-migration-v8-v9/src/components/Menu/MenuShim.tsx index 2d53cc39a42f7..ffd58e2200c07 100644 --- a/packages/react-migration-v8-v9/src/components/Menu/MenuShim.tsx +++ b/packages/react-migration-v8-v9/src/components/Menu/MenuShim.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; -import { ContextualMenuItemType, IContextualMenuItem } from '@fluentui/react'; +import { ContextualMenuItemType } from '@fluentui/react'; +import type { IContextualMenuItem } from '@fluentui/react'; import { MenuItem, MenuDivider, diff --git a/packages/react-migration-v8-v9/src/components/Menu/shimMenuProps.tsx b/packages/react-migration-v8-v9/src/components/Menu/shimMenuProps.tsx index 418750f440d3f..4a0b485832851 100644 --- a/packages/react-migration-v8-v9/src/components/Menu/shimMenuProps.tsx +++ b/packages/react-migration-v8-v9/src/components/Menu/shimMenuProps.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; -import { IContextualMenuItem, IContextualMenuProps, Icon } from '@fluentui/react'; +import { Icon } from '@fluentui/react'; +import type { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react'; import type { MenuItemProps, MenuGroupHeaderProps, MenuItemCheckboxProps, MenuProps } from '@fluentui/react-menu'; export const shimMenuProps = (props: IContextualMenuProps): Partial => { From 87557199700cf9501fcb2fb0edbf277687ed8da0 Mon Sep 17 00:00:00 2001 From: "Geoff Cox (Microsoft)" Date: Thu, 6 Oct 2022 13:40:32 -0700 Subject: [PATCH 16/22] Update packages/react-migration-v8-v9/src/components/Theme/themeDuplicates.ts Co-authored-by: Makoto Morimoto --- .../src/components/Theme/themeDuplicates.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-migration-v8-v9/src/components/Theme/themeDuplicates.ts b/packages/react-migration-v8-v9/src/components/Theme/themeDuplicates.ts index 4f0c1bbff6c93..7b9a0eb9078b9 100644 --- a/packages/react-migration-v8-v9/src/components/Theme/themeDuplicates.ts +++ b/packages/react-migration-v8-v9/src/components/Theme/themeDuplicates.ts @@ -3,7 +3,7 @@ * They are necessary to build the theme shims. */ -import { BrandVariants } from '@fluentui/react-components'; +import type { BrandVariants } from '@fluentui/react-components'; /** * Possible color variant values From b12a235549a481d86e7b6749892691456d75c245 Mon Sep 17 00:00:00 2001 From: GeoffCoxMSFT Date: Thu, 6 Oct 2022 15:28:56 -0700 Subject: [PATCH 17/22] Fix typo from committed suggestion --- .../src/components/Button/ToggleButtonShim.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-migration-v8-v9/src/components/Button/ToggleButtonShim.tsx b/packages/react-migration-v8-v9/src/components/Button/ToggleButtonShim.tsx index a27dd7b243c9f..d429719146e78 100644 --- a/packages/react-migration-v8-v9/src/components/Button/ToggleButtonShim.tsx +++ b/packages/react-migration-v8-v9/src/components/Button/ToggleButtonShim.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import type { IButtonProps } from '@fluentui/react'; -import { ToggleButtonProps } from '@fluentui/react-components'; +import { ToggleButton } from '@fluentui/react-components'; import type { ToggleButtonProps } from '@fluentui/react-components'; import { shimButtonProps } from './shimButtonProps'; From a6c7924cb1c34e7ae2aca70d02f74c40fce92030 Mon Sep 17 00:00:00 2001 From: GeoffCoxMSFT Date: Thu, 6 Oct 2022 15:52:27 -0700 Subject: [PATCH 18/22] PR build fixes --- packages/react-migration-v8-v9/config/api-extractor.json | 2 +- .../src/components/Theme/v8ThemeShim.ts | 8 +------- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/react-migration-v8-v9/config/api-extractor.json b/packages/react-migration-v8-v9/config/api-extractor.json index 3692d07f542eb..e538acb09dd2f 100644 --- a/packages/react-migration-v8-v9/config/api-extractor.json +++ b/packages/react-migration-v8-v9/config/api-extractor.json @@ -6,5 +6,5 @@ "untrimmedFilePath": "", "publicTrimmedFilePath": "/dist/index.d.ts" }, - "mainEntryPointFilePath": "/../../dist/out-tsc/types/packages/react-migration-v8-v9/src/index.d.ts" + "mainEntryPointFilePath": "../../dist/out-tsc/types/packages/react-migration-v8-v9/src/index.d.ts" } diff --git a/packages/react-migration-v8-v9/src/components/Theme/v8ThemeShim.ts b/packages/react-migration-v8-v9/src/components/Theme/v8ThemeShim.ts index 6d81719b0f957..52988df92e6d7 100644 --- a/packages/react-migration-v8-v9/src/components/Theme/v8ThemeShim.ts +++ b/packages/react-migration-v8-v9/src/components/Theme/v8ThemeShim.ts @@ -1,11 +1,5 @@ import { createTheme, DefaultPalette, Theme as ThemeV8 } from '@fluentui/react'; -import type { - IPalette, - ISemanticColors, - IFontStyles, - IFontWeight, - IEffects, -} from '@fluentui/react'; +import type { IPalette, ISemanticColors, IFontStyles, IFontWeight, IEffects } from '@fluentui/react'; import { BrandVariants, Theme as ThemeV9 } from '@fluentui/react-components'; From a0c882815ccda67313ee959b35b4ffcd19f050f9 Mon Sep 17 00:00:00 2001 From: GeoffCoxMSFT Date: Thu, 6 Oct 2022 16:15:51 -0700 Subject: [PATCH 19/22] trying to fix in ci build --- packages/react-migration-v8-v9/config/api-extractor.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-migration-v8-v9/config/api-extractor.json b/packages/react-migration-v8-v9/config/api-extractor.json index e538acb09dd2f..9045960775e52 100644 --- a/packages/react-migration-v8-v9/config/api-extractor.json +++ b/packages/react-migration-v8-v9/config/api-extractor.json @@ -6,5 +6,5 @@ "untrimmedFilePath": "", "publicTrimmedFilePath": "/dist/index.d.ts" }, - "mainEntryPointFilePath": "../../dist/out-tsc/types/packages/react-migration-v8-v9/src/index.d.ts" + "mainEntryPointFilePath": "/../../dist/out-tsc/types/packages//src/index.d.ts" } From de2f58c687286b16c6add76f20f19df6dde456e3 Mon Sep 17 00:00:00 2001 From: Geoff Cox Date: Fri, 7 Oct 2022 09:49:47 -0700 Subject: [PATCH 20/22] Fixing types path for api extraction --- .../etc/react-migration-v8-v9.api.md | 193 +++++++++++++++++- .../react-migration-v8-v9/tsconfig.lib.json | 4 +- 2 files changed, 194 insertions(+), 3 deletions(-) diff --git a/packages/react-migration-v8-v9/etc/react-migration-v8-v9.api.md b/packages/react-migration-v8-v9/etc/react-migration-v8-v9.api.md index e263282fa20bf..e45c1b88a80ae 100644 --- a/packages/react-migration-v8-v9/etc/react-migration-v8-v9.api.md +++ b/packages/react-migration-v8-v9/etc/react-migration-v8-v9.api.md @@ -4,12 +4,203 @@ ```ts -import { IBaseButtonProps } from '@fluentui/react'; +/// + +import { BrandVariants } from '@fluentui/react-components'; +import type { ButtonProps } from '@fluentui/react-components'; +import type { IBaseButtonProps } from '@fluentui/react'; +import type { IButtonProps } from '@fluentui/react'; +import type { IContextualMenuItem } from '@fluentui/react'; +import type { IContextualMenuProps } from '@fluentui/react'; +import type { IPalette } from '@fluentui/react'; +import { IStackItemProps } from '@fluentui/react'; +import type { IStackProps } from '@fluentui/react'; +import type { MenuProps } from '@fluentui/react-menu'; import * as React_2 from 'react'; +import { Theme } from '@fluentui/react-components'; +import { Theme as Theme_2 } from '@fluentui/react'; + +// @public +const ActionButtonShim: React_2.ForwardRefExoticComponent>; +export { ActionButtonShim } +export { ActionButtonShim as CommandButtonShim } + +// @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 (undocumented) export const ButtonShim: React_2.ForwardRefExoticComponent>; +// @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 CompoundButtonShim: React_2.ForwardRefExoticComponent>; + +// @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 | undefined) => Theme; + +// @public +export const DefaultButtonShim: React_2.ForwardRefExoticComponent>; + +// @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 MenuButtonShim: React_2.ForwardRefExoticComponent>; + +// @public (undocumented) +export const MenuItemShim: (props: IContextualMenuItem) => JSX.Element; + +// @public +export const PrimaryButtonShim: React_2.ForwardRefExoticComponent>; + +// @public (undocumented) +export const sharedColors: GlobalSharedColors; + +// @public (undocumented) +export const shimButtonProps: (props: IBaseButtonProps & React_2.RefAttributes) => ButtonProps; + +// @public (undocumented) +export const shimMenuProps: (props: IContextualMenuProps) => Partial; + +// @public (undocumented) +export const StackItemShim: (props: IStackItemProps) => JSX.Element; + +// @public (undocumented) +export const StackShim: (props: IStackProps) => JSX.Element; + +// @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 +export const ToggleButtonShim: React_2.ForwardRefExoticComponent>; + +// @public (undocumented) +export const white = "#ffffff"; + +// @public (undocumented) +export const whiteAlpha: Record; + // (No @packageDocumentation comment for this package) ``` diff --git a/packages/react-migration-v8-v9/tsconfig.lib.json b/packages/react-migration-v8-v9/tsconfig.lib.json index 7f94e04299ed8..978cb985cd5e4 100644 --- a/packages/react-migration-v8-v9/tsconfig.lib.json +++ b/packages/react-migration-v8-v9/tsconfig.lib.json @@ -4,8 +4,8 @@ "noEmit": false, "lib": ["ES2019", "dom"], "declaration": true, - "declarationDir": "../../../dist/out-tsc/types", - "outDir": "../../../dist/out-tsc", + "declarationDir": "../../dist/out-tsc/types", + "outDir": "../../dist/out-tsc", "inlineSources": true, "types": ["static-assets", "environment"] }, From 52ddd5a5ffcabc23c1730b5656d329f61406b2f1 Mon Sep 17 00:00:00 2001 From: Geoff Cox Date: Fri, 7 Oct 2022 10:47:47 -0700 Subject: [PATCH 21/22] Fixed lint issues with imports --- .../src/components/Button/MenuButtonShim.tsx | 2 +- .../src/components/Theme/v8ThemeShim.ts | 4 ++-- packages/react-migration-v8-v9/src/index.ts | 10 +++++----- .../src/stories/ActionButtonShim/index.stories.tsx | 2 +- .../src/stories/CommandButtonShim/index.stories.tsx | 2 +- .../src/stories/CompoundButtonShim/index.stories.tsx | 2 +- .../src/stories/DefaultButtonShim/index.tsx | 2 +- .../src/stories/MenuButtonShim/index.stories.tsx | 2 +- .../src/stories/PrimaryButtonShim/index.stories.tsx | 2 +- .../src/stories/Stack/index.stories.tsx | 2 +- .../src/stories/ToggleButtonShim/index.stories.tsx | 2 +- 11 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/react-migration-v8-v9/src/components/Button/MenuButtonShim.tsx b/packages/react-migration-v8-v9/src/components/Button/MenuButtonShim.tsx index 92560f4a236c6..3fbe57f7cffca 100644 --- a/packages/react-migration-v8-v9/src/components/Button/MenuButtonShim.tsx +++ b/packages/react-migration-v8-v9/src/components/Button/MenuButtonShim.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import type { IButtonProps } from '@fluentui/react'; import { MenuButton, Menu, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-components'; import type { MenuButtonProps } from '@fluentui/react-components'; -import { MenuItemShim, shimMenuProps } from '../Menu'; +import { MenuItemShim, shimMenuProps } from '../Menu/index'; import { shimButtonProps } from './shimButtonProps'; diff --git a/packages/react-migration-v8-v9/src/components/Theme/v8ThemeShim.ts b/packages/react-migration-v8-v9/src/components/Theme/v8ThemeShim.ts index 52988df92e6d7..78344e72a4c99 100644 --- a/packages/react-migration-v8-v9/src/components/Theme/v8ThemeShim.ts +++ b/packages/react-migration-v8-v9/src/components/Theme/v8ThemeShim.ts @@ -1,5 +1,5 @@ -import { createTheme, DefaultPalette, Theme as ThemeV8 } from '@fluentui/react'; -import type { IPalette, ISemanticColors, IFontStyles, IFontWeight, IEffects } from '@fluentui/react'; +import { createTheme, DefaultPalette } from '@fluentui/react'; +import type { IPalette, ISemanticColors, IFontStyles, IFontWeight, IEffects, Theme as ThemeV8 } from '@fluentui/react'; import { BrandVariants, Theme as ThemeV9 } from '@fluentui/react-components'; diff --git a/packages/react-migration-v8-v9/src/index.ts b/packages/react-migration-v8-v9/src/index.ts index 11793b3d0f9c8..bad8d52bc8343 100644 --- a/packages/react-migration-v8-v9/src/index.ts +++ b/packages/react-migration-v8-v9/src/index.ts @@ -8,11 +8,11 @@ export { PrimaryButtonShim, shimButtonProps, ToggleButtonShim, -} from './components/Button'; +} from './components/Button/index'; -export { MenuItemShim, shimMenuProps } from './components/Menu'; +export { MenuItemShim, shimMenuProps } from './components/Menu/index'; -export { StackItemShim, StackShim } from './components/Stack'; +export { StackItemShim, StackShim } from './components/Stack/index'; export { black, @@ -34,7 +34,7 @@ export { sharedColors, white, whiteAlpha, -} from './components/Theme'; +} from './components/Theme/index'; export type { AlphaColors, @@ -43,4 +43,4 @@ export type { Greys, TextAlignment, TextAlignments, -} from './components/Theme'; +} from './components/Theme/index'; 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 index 824c887af8cd2..710a2a9c3cf1f 100644 --- a/packages/react-migration-v8-v9/src/stories/ActionButtonShim/index.stories.tsx +++ b/packages/react-migration-v8-v9/src/stories/ActionButtonShim/index.stories.tsx @@ -5,7 +5,7 @@ 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'; +import { ActionButtonShim } from '../../components/Button/index'; initializeIcons(); diff --git a/packages/react-migration-v8-v9/src/stories/CommandButtonShim/index.stories.tsx b/packages/react-migration-v8-v9/src/stories/CommandButtonShim/index.stories.tsx index 5a9655ca09706..f38b6e67bf204 100644 --- a/packages/react-migration-v8-v9/src/stories/CommandButtonShim/index.stories.tsx +++ b/packages/react-migration-v8-v9/src/stories/CommandButtonShim/index.stories.tsx @@ -5,7 +5,7 @@ import descriptionMd from './Description.md'; import { CommandButton, Icon } from '@fluentui/react'; import type { IIconProps } from '@fluentui/react'; import { FluentProvider, Button, webLightTheme, makeStyles, shorthands } from '@fluentui/react-components'; -import { CommandButtonShim } from '../../components/Button'; +import { CommandButtonShim } from '../../components/Button/index'; const useStyles = makeStyles({ root: { 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 index 2bda09064cc10..25ae5c922b00b 100644 --- a/packages/react-migration-v8-v9/src/stories/CompoundButtonShim/index.stories.tsx +++ b/packages/react-migration-v8-v9/src/stories/CompoundButtonShim/index.stories.tsx @@ -10,7 +10,7 @@ import { makeStyles, shorthands, } from '@fluentui/react-components'; -import { CompoundButtonShim } from '../../components/Button'; +import { CompoundButtonShim } from '../../components/Button/index'; const useStyles = makeStyles({ root: { diff --git a/packages/react-migration-v8-v9/src/stories/DefaultButtonShim/index.tsx b/packages/react-migration-v8-v9/src/stories/DefaultButtonShim/index.tsx index 1694ea6a316d5..8844dbf68e32f 100644 --- a/packages/react-migration-v8-v9/src/stories/DefaultButtonShim/index.tsx +++ b/packages/react-migration-v8-v9/src/stories/DefaultButtonShim/index.tsx @@ -4,7 +4,7 @@ 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'; +import { DefaultButtonShim } from '../../components/Button/index'; const useStyles = makeStyles({ root: { diff --git a/packages/react-migration-v8-v9/src/stories/MenuButtonShim/index.stories.tsx b/packages/react-migration-v8-v9/src/stories/MenuButtonShim/index.stories.tsx index 90a5340ff7125..64f0b16160d23 100644 --- a/packages/react-migration-v8-v9/src/stories/MenuButtonShim/index.stories.tsx +++ b/packages/react-migration-v8-v9/src/stories/MenuButtonShim/index.stories.tsx @@ -18,7 +18,7 @@ import { MenuPopover, MenuTrigger, } from '@fluentui/react-components'; -import { MenuButtonShim } from '../../components/Button'; +import { MenuButtonShim } from '../../components/Button/index'; initializeIcons(); 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 index 28eedb8600608..5900bb6a9bb42 100644 --- a/packages/react-migration-v8-v9/src/stories/PrimaryButtonShim/index.stories.tsx +++ b/packages/react-migration-v8-v9/src/stories/PrimaryButtonShim/index.stories.tsx @@ -4,7 +4,7 @@ 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'; +import { PrimaryButtonShim } from '../../components/Button/index'; const useStyles = makeStyles({ root: { diff --git a/packages/react-migration-v8-v9/src/stories/Stack/index.stories.tsx b/packages/react-migration-v8-v9/src/stories/Stack/index.stories.tsx index 742c386902e01..429a348ae3e8e 100644 --- a/packages/react-migration-v8-v9/src/stories/Stack/index.stories.tsx +++ b/packages/react-migration-v8-v9/src/stories/Stack/index.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { makeStyles } from '@fluentui/react-components'; import { Checkbox, Dropdown, DropdownMenuItemType, Stack, TextField } from '@fluentui/react'; import type { IDropdownOption } from '@fluentui/react'; -import { StackShim, StackItemShim } from '../../components/Stack'; +import { StackShim, StackItemShim } from '../../components/Stack/index'; import descriptionMd from './Description.md'; 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 index 536855ef6c638..d03b566ef080b 100644 --- a/packages/react-migration-v8-v9/src/stories/ToggleButtonShim/index.stories.tsx +++ b/packages/react-migration-v8-v9/src/stories/ToggleButtonShim/index.stories.tsx @@ -5,7 +5,7 @@ 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'; +import { ToggleButtonShim } from '../../components/Button/index'; initializeIcons(); From 4b399107d997f0720b104b15dc4c7951770f5e61 Mon Sep 17 00:00:00 2001 From: Geoff Cox Date: Fri, 7 Oct 2022 12:31:09 -0700 Subject: [PATCH 22/22] More lint fixes --- packages/react-migration-v8-v9/.storybook/main.js | 14 ++++++++++++++ .../react-migration-v8-v9/.storybook/preview.js | 7 +++++++ .../react-migration-v8-v9/.storybook/tsconfig.json | 10 ++++++++++ .../src/components/Button/shimButtonProps.tsx | 2 +- .../src/components/Menu/MenuShim.tsx | 2 +- .../src/components/Theme/v8ThemeShim.ts | 4 ++-- packages/react-migration-v8-v9/tsconfig.json | 3 +++ 7 files changed, 38 insertions(+), 4 deletions(-) create mode 100644 packages/react-migration-v8-v9/.storybook/main.js create mode 100644 packages/react-migration-v8-v9/.storybook/preview.js create mode 100644 packages/react-migration-v8-v9/.storybook/tsconfig.json diff --git a/packages/react-migration-v8-v9/.storybook/main.js b/packages/react-migration-v8-v9/.storybook/main.js new file mode 100644 index 0000000000000..a72b1c826be07 --- /dev/null +++ b/packages/react-migration-v8-v9/.storybook/main.js @@ -0,0 +1,14 @@ +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-migration-v8-v9/.storybook/preview.js b/packages/react-migration-v8-v9/.storybook/preview.js new file mode 100644 index 0000000000000..10fd98d02c945 --- /dev/null +++ b/packages/react-migration-v8-v9/.storybook/preview.js @@ -0,0 +1,7 @@ +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-migration-v8-v9/.storybook/tsconfig.json b/packages/react-migration-v8-v9/.storybook/tsconfig.json new file mode 100644 index 0000000000000..f9f60e1234ed4 --- /dev/null +++ b/packages/react-migration-v8-v9/.storybook/tsconfig.json @@ -0,0 +1,10 @@ +{ + "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-migration-v8-v9/src/components/Button/shimButtonProps.tsx b/packages/react-migration-v8-v9/src/components/Button/shimButtonProps.tsx index 6c1cd1cfeef3b..3622f0fbc90f7 100644 --- a/packages/react-migration-v8-v9/src/components/Button/shimButtonProps.tsx +++ b/packages/react-migration-v8-v9/src/components/Button/shimButtonProps.tsx @@ -20,7 +20,7 @@ export const shimButtonProps = (props: IBaseButtonProps & React.RefAttributes