ContextualMenu: Migrate existing ContextualMenu code to react-next

packages/react-next/etc/react-next.api.md

@@ -6,8 +6,8 @@
 
 import { ComposePreparedOptions } from '@fluentui/react-compose';
 import { IBaseProps } from 'office-ui-fabric-react/lib/Utilities';
-import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
-import { IButtonStyles } from 'office-ui-fabric-react/lib/Button';
+import { IButtonProps } from '@fluentui/react-next/lib/compat/Button';
+import { IButtonStyles } from '@fluentui/react-next/lib/compat/Button';
 import { ICalloutContentStyleProps } from 'office-ui-fabric-react/lib/Callout';
 import { ICalloutContentStyles } from 'office-ui-fabric-react';
 import { ICalloutProps } from 'office-ui-fabric-react/lib/Callout';

packages/react-next/src/components/ContextualMenu/ContextualMenu.test.tsx

@@ -11,7 +11,7 @@ import { ContextualMenu } from './ContextualMenu';
 import { canAnyMenuItemsCheck } from './ContextualMenu.base';
 import { IContextualMenuItem, ContextualMenuItemType } from './ContextualMenu.types';
 import { IContextualMenuRenderItem, IContextualMenuItemStyles } from './ContextualMenuItem.types';
-import { DefaultButton, IButton } from '@fluentui/react-next/lib/Button';
+import { DefaultButton, IButton } from '@fluentui/react-next/lib/compat/Button';
 
 describe('ContextualMenu', () => {
   afterEach(() => {

packages/react-next/src/components/ContextualMenu/ContextualMenu.types.ts

@@ -4,7 +4,7 @@ import { IFocusZoneProps } from '../../FocusZone';
 import { IIconProps } from '@fluentui/react-next/lib/Icon';
 import { ICalloutProps, ICalloutContentStyleProps, Target } from '../../Callout';
 import { ITheme, IStyle } from '../../Styling';
-import { IButtonStyles } from '../../Button';
+import { IButtonStyles } from '@fluentui/react-next/lib/compat/Button';
 import { IRefObject, IBaseProps, IRectangle, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities';
 import { IWithResponsiveModeState } from 'office-ui-fabric-react/lib/utilities/decorators/withResponsiveMode';
 import { IContextualMenuClassNames, IMenuItemClassNames } from './ContextualMenu.classNames';

packages/react-next/src/components/ContextualMenu/ContextualMenuItem.types.ts

@@ -3,7 +3,7 @@ import { IContextualMenuItem } from './ContextualMenu.types';
 import { IMenuItemClassNames } from './ContextualMenu.classNames';
 import { IStyle, ITheme } from '../../Styling';
 import { IRefObject, IStyleFunctionOrObject } from '../../Utilities';
-import { IButtonStyles } from '../../Button';
+import { IButtonStyles } from '@fluentui/react-next/lib/compat/Button';
 
 /**
  * {@docCategory ContextualMenu}

packages/react-next/src/components/ContextualMenu/examples/ContextualMenu.Checkmarks.Example.tsx

@@ -3,9 +3,9 @@ import {
   ContextualMenuItemType,
   IContextualMenuItem,
   IContextualMenuProps,
-  DefaultButton,
   DirectionalHint,
 } from '@fluentui/react-next';
+import { DefaultButton } from '@fluentui/react-next/lib/compat/Button';
 
 const keys: string[] = [
   'newItem',

packages/react-next/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuItem.Example.tsx

@@ -5,7 +5,7 @@ import {
   IContextualMenuItem,
   IContextualMenuItemProps,
 } from '@fluentui/react-next/lib/ContextualMenu';
-import { DefaultButton } from '@fluentui/react-next/lib/Button';
+import { DefaultButton } from '@fluentui/react-next/lib/compat/Button';
 
 export const ContextualMenuWithCustomMenuItemExample: React.FunctionComponent = () => {
   const menuProps: IContextualMenuProps = React.useMemo(

packages/react-next/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuList.Example.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useConstCallback } from '@uifabric/react-hooks';
-import { DefaultButton } from '@fluentui/react-next/lib/Button';
+import { DefaultButton } from '@fluentui/react-next/lib/compat/Button';
 import { ISearchBoxStyles, SearchBox } from '@fluentui/react-next/lib/SearchBox';
 import { Icon } from '@fluentui/react-next/lib/Icon';
 import { IContextualMenuListProps, IContextualMenuItem } from '@fluentui/react-next/lib/ContextualMenu';

packages/react-next/src/components/ContextualMenu/examples/ContextualMenu.Customization.Example.tsx

@@ -4,11 +4,10 @@ import {
   IContextualMenuProps,
   IContextualMenuItem,
   DirectionalHint,
-  DefaultButton,
-  IconButton,
   FocusZoneDirection,
 } from '@fluentui/react-next';
 import './ContextualMenuExample.scss';
+import { DefaultButton, IconButton } from '@fluentui/react-next/lib/compat/Button';
 
 export const ContextualMenuCustomizationExample: React.FunctionComponent = () => {
   return <DefaultButton className="ContextualMenuButton3" text="Click for ContextualMenu" menuProps={menuProps} />;

packages/react-next/src/components/ContextualMenu/examples/ContextualMenu.CustomizationWithNoWrap.Example.tsx

@@ -4,12 +4,10 @@ import {
   IContextualMenuProps,
   IContextualMenuItem,
   DirectionalHint,
-  DefaultButton,
-  IconButton,
   FocusZoneDirection,
-  IButtonProps,
 } from '@fluentui/react-next';
 import './ContextualMenuExample.scss';
+import { DefaultButton, IconButton, IButtonProps } from '@fluentui/react-next/lib/compat/Button';
 
 export const ContextualMenuCustomizationWithNoWrapExample: React.FunctionComponent = () => {
   return <DefaultButton className="ContextualMenuButton3" text="Click for ContextualMenu" menuProps={menuProps} />;

packages/react-next/src/components/ContextualMenu/examples/ContextualMenu.Default.Example.tsx

@@ -4,7 +4,7 @@ import {
   IContextualMenuProps,
   IContextualMenuItem,
 } from '@fluentui/react-next/lib/ContextualMenu';
-import { DefaultButton } from '@fluentui/react-next/lib/Button';
+import { DefaultButton } from '@fluentui/react-next/lib/compat/Button';
 
 export const ContextualMenuDefaultExample: React.FunctionComponent = () => {
   return <DefaultButton text="Click for ContextualMenu" menuProps={menuProps} />;

packages/react-next/src/components/ContextualMenu/examples/ContextualMenu.Directional.Example.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useConstCallback } from '@uifabric/react-hooks';
-import { DefaultButton } from '@fluentui/react-next/lib/Button';
+import { DefaultButton } from '@fluentui/react-next/lib/compat/Button';
 import { Checkbox, ICheckboxStyles } from '@fluentui/react-next/lib/Checkbox';
 import {
   ContextualMenuItemType,

packages/react-next/src/components/ContextualMenu/examples/ContextualMenu.Header.Example.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DefaultButton } from '@fluentui/react-next/lib/Button';
+import { DefaultButton } from '@fluentui/react-next/lib/compat/Button';
 import {
   ContextualMenuItemType,
   IContextualMenuProps,

packages/react-next/src/components/ContextualMenu/examples/ContextualMenu.Icon.Example.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useConst, useConstCallback } from '@uifabric/react-hooks';
-import { DefaultButton } from '@fluentui/react-next/lib/Button';
+import { DefaultButton } from '@fluentui/react-next/lib/compat/Button';
 import { Callout } from '@fluentui/react-next/lib/Callout';
 import {
   ContextualMenuItemType,

packages/react-next/src/components/ContextualMenu/examples/ContextualMenu.Icon.SecondaryText.Example.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DefaultButton } from '@fluentui/react-next/lib/Button';
+import { DefaultButton } from '@fluentui/react-next/lib/compat/Button';
 import { IContextualMenuProps, IContextualMenuItem } from '@fluentui/react-next/lib/ContextualMenu';
 
 export const ContextualMenuIconSecondaryTextExample: React.FunctionComponent = () => {

packages/react-next/src/components/ContextualMenu/examples/ContextualMenu.Persisted.Example.tsx

@@ -4,7 +4,7 @@ import {
   IContextualMenuProps,
   IContextualMenuItem,
 } from '@fluentui/react-next/lib/ContextualMenu';
-import { DefaultButton } from '@fluentui/react-next/lib/Button';
+import { DefaultButton } from '@fluentui/react-next/lib/compat/Button';
 
 export const ContextualMenuPersistedExample: React.FunctionComponent = () => {
   return <DefaultButton text="Click for ContextualMenu" persistMenu={true} menuProps={menuProps} />;

packages/react-next/src/components/ContextualMenu/examples/ContextualMenu.ScrollBar.Example.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { IContextualMenuProps, IContextualMenuItem, DirectionalHint, DefaultButton } from '@fluentui/react-next';
+import { IContextualMenuProps, IContextualMenuItem, DirectionalHint } from '@fluentui/react-next';
+import { DefaultButton } from '@fluentui/react-next/lib/compat/Button';
 
 export const ContextualMenuWithScrollBarExample: React.FunctionComponent = () => {
   return <DefaultButton text="Click for ContextualMenu" menuProps={menuProps} />;

packages/react-next/src/components/ContextualMenu/examples/ContextualMenu.Section.Example.tsx

@@ -4,7 +4,7 @@ import {
   IContextualMenuProps,
   IContextualMenuItem,
 } from '@fluentui/react-next/lib/ContextualMenu';
-import { DefaultButton } from '@fluentui/react-next/lib/Button';
+import { DefaultButton } from '@fluentui/react-next/lib/compat/Button';
 
 export const ContextualMenuSectionExample: React.FunctionComponent = () => {
   return <DefaultButton text="Click for ContextualMenu" menuProps={menuProps} />;

packages/react-next/src/components/ContextualMenu/examples/ContextualMenu.Submenu.Example.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useConstCallback } from '@uifabric/react-hooks';
-import { DefaultButton } from '@fluentui/react-next/lib/Button';
+import { DefaultButton } from '@fluentui/react-next/lib/compat/Button';
 import { IContextualMenuProps, IContextualMenuItem } from '@fluentui/react-next/lib/ContextualMenu';
 import { TextField, ITextFieldStyles } from '@fluentui/react-next/lib/TextField';
 

packages/react-next/src/components/SpinButton/SpinButton.types.ts

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Position } from 'office-ui-fabric-react/lib/utilities/positioning';
-import { IButtonStyles } from '@fluentui/react-next/lib/compat/Button';
+import { IButtonStyles, IButtonProps } from '@fluentui/react-next/lib/compat/Button';
 import { IIconProps } from '../../Icon';
 import { ITheme, IStyle } from '../../Styling';
 import { ISpinButtonClassNames } from './SpinButton.classNames';
 import { KeyboardSpinDirection } from './SpinButton';
-import { IButtonStyles, IButtonProps } from '../../Button';
 import { IKeytipProps } from '../../Keytip';
 import { IRefObject } from '../../Utilities';