Migrate Button V2 to component folder (microsoft#1383)

### Platforms Impacted
- [x] iOS
- [x] macOS
- [x] win32 (Office)
- [x] windows
- [x] android

### Description of changes=

This PR moves the experimental button into the component button, as we are close to finishing the Button for V2. This PR will NOT be committed until messaging and the component has had final sign off from @ejlayne.

NOTE: It may be easier to review this commit-by-commit than all at once.

1. Old Button component is moved under a deprecated folder.
2. All experimental button files have been moved to the button package. The experimental button has been (temporarily) exported as `ButtonV2` to avoid name clashing with the already existing `Button`.
3. The experimental-button package now just reexports what it used to have from the button package. This is to minimize dropping changes we make to the V2 Button while migrating, and not have duplicate code.
4. Added deprecation messages to the experimental package and the old Button component:
    - Experimental package will have the message "The @fluentui-react-native/exprimental-button package is deprecated. The contents of this package have been moved to @fluentui-react-native/button. If you need to use the Button component from this package, please use ButtonV2 from @fluentui-react-native/button."
    - The old Button components will show in intellisense "This component is deprecated in favor of ButtonV2. This Button will be removed when the package moves to 1.0.0. At that point, ButtonV2 will be renamed to Button. Please see MIGRATION.md for details on how to move to the new Button."
5. I removed default exports for each control as I was worried that they would clash. This does not affect what gets exported from the package.
6. Merged the Button test pages for both buttons to one page. The old Button tests are now at the bottom of the Button test page. E2E tests have not been merged as I can't specify a test to look for more than two components.

### Verification

Verified that deprecation message only shows on debug, not release bundle
Verified that Button still loads out of experimental button. One test still pulls the button from the experimental-button package to ensure that it hasn't been broken.
Verified that deprecation intellisense shows up.
Verified that old Button is not affected via test page.
Verified E2E tests run on both versions of the button.

### Pull request checklist

This PR has considered (when applicable):
- [x] Automated Tests
- [x] Documentation and examples
- [ ] Keyboard Accessibility
- [ ] Voiceover
- [ ] Internationalization and Right-to-left Layouts

apps/fluent-tester/src/E2E/Button/pages/ButtonPageObject.macos.ts

@@ -1,7 +1,7 @@
 import {
   BUTTON_TESTPAGE,
-  BUTTON_TEST_COMPONENT,
-  BUTTON_NO_A11Y_LABEL_COMPONENT,
+  BUTTON_TEST_COMPONENT_DEPRECATED,
+  BUTTON_NO_A11Y_LABEL_COMPONENT_DEPRECATED,
   HOMEPAGE_BUTTON_BUTTON,
 } from '../../../FluentTester/TestComponents/Button/consts';
 import { BasePage, By } from '../../common/BasePage.macos';
@@ -19,11 +19,11 @@ class ButtonPageObject extends BasePage {
   }
 
   get _primaryComponent() {
-    return By(BUTTON_TEST_COMPONENT);
+    return By(BUTTON_TEST_COMPONENT_DEPRECATED);
   }
 
   get _secondaryComponent() {
-    return By(BUTTON_NO_A11Y_LABEL_COMPONENT);
+    return By(BUTTON_NO_A11Y_LABEL_COMPONENT_DEPRECATED);
   }
 
   get _pageButton() {

apps/fluent-tester/src/E2E/Button/pages/ButtonPageObject.ts

@@ -1,9 +1,9 @@
 import {
   BUTTON_TESTPAGE,
-  BUTTON_TEST_COMPONENT,
-  BUTTON_NO_A11Y_LABEL_COMPONENT,
+  BUTTON_TEST_COMPONENT_DEPRECATED,
+  BUTTON_NO_A11Y_LABEL_COMPONENT_DEPRECATED,
   HOMEPAGE_BUTTON_BUTTON,
-  BUTTON_ON_PRESS,
+  BUTTON_ON_PRESS_DEPRECATED,
 } from '../../../FluentTester/TestComponents/Button/consts';
 import { BasePage, By } from '../../common/BasePage.win';
 
@@ -18,7 +18,7 @@ class ButtonPageObject extends BasePage {
   /**************** UI Element Interaction Methods ******************/
   /******************************************************************/
   didOnClickCallbackFire(): boolean {
-    const callbackText = By(BUTTON_ON_PRESS);
+    const callbackText = By(BUTTON_ON_PRESS_DEPRECATED);
     browser.waitUntil(
       () => {
         return callbackText.isDisplayed();
@@ -58,11 +58,11 @@ class ButtonPageObject extends BasePage {
   }
 
   get _primaryComponent() {
-    return By(BUTTON_TEST_COMPONENT);
+    return By(BUTTON_TEST_COMPONENT_DEPRECATED);
   }
 
   get _secondaryComponent() {
-    return By(BUTTON_NO_A11Y_LABEL_COMPONENT);
+    return By(BUTTON_NO_A11Y_LABEL_COMPONENT_DEPRECATED);
   }
 
   get _pageButton() {

apps/fluent-tester/src/E2E/Button/specs/Button.spec.win.ts

@@ -2,7 +2,10 @@ import NavigateAppPage from '../../common/NavigateAppPage.win';
 import ButtonPageObject, { ButtonSelector } from '../pages/ButtonPageObject';
 import { ComponentSelector } from '../../common/BasePage.win';
 import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, BUTTON_A11Y_ROLE, Keys } from '../../common/consts';
-import { BUTTON_ACCESSIBILITY_LABEL, BUTTON_TEST_COMPONENT_LABEL } from '../../../FluentTester/TestComponents/Button/consts';
+import {
+  BUTTON_ACCESSIBILITY_LABEL_DEPRECATED,
+  BUTTON_TEST_COMPONENT_LABEL_DEPRECATED,
+} from '../../../FluentTester/TestComponents/Button/consts';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Button Testing Initialization', function () {
@@ -38,12 +41,12 @@ describe('Button Accessibility Testing', () => {
   });
 
   it('Button - Set accessibilityLabel', () => {
-    expect(ButtonPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(BUTTON_ACCESSIBILITY_LABEL);
+    expect(ButtonPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(BUTTON_ACCESSIBILITY_LABEL_DEPRECATED);
     expect(ButtonPageObject.didAssertPopup()).toBeFalsy(ButtonPageObject.ERRORMESSAGE_ASSERT);
   });
 
   it('Button - Do not set accessibilityLabel -> Default to Button label', () => {
-    expect(ButtonPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(BUTTON_TEST_COMPONENT_LABEL);
+    expect(ButtonPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(BUTTON_TEST_COMPONENT_LABEL_DEPRECATED);
     expect(ButtonPageObject.didAssertPopup()).toBeFalsy(ButtonPageObject.ERRORMESSAGE_ASSERT);
   });
 });

apps/fluent-tester/src/E2E/ButtonExperimental/pages/ButtonExperimentalPageObject.ts

@@ -1,33 +1,33 @@
 import {
-  EXPERIMENTAL_BUTTON_TEST_PAGE,
-  BUTTONEXPERIMENTAL_TEST_COMPONENT,
-  BUTTONEXPERIMENTAL_NO_A11Y_LABEL_COMPONENT,
-  HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL,
-} from '../../../FluentTester/TestComponents/ButtonExperimental/consts';
+  BUTTON_TESTPAGE,
+  BUTTON_TEST_COMPONENT,
+  BUTTON_NO_A11Y_LABEL_COMPONENT,
+  HOMEPAGE_BUTTON_BUTTON,
+} from '../../../FluentTester/TestComponents/Button/consts';
 import { BasePage, By } from '../../common/BasePage.win';
 
 class ButtonExperimentalPageObject extends BasePage {
   /*****************************************/
   /**************** Getters ****************/
   /*****************************************/
   get _testPage() {
-    return By(EXPERIMENTAL_BUTTON_TEST_PAGE);
+    return By(BUTTON_TESTPAGE);
   }
 
   get _pageName() {
-    return EXPERIMENTAL_BUTTON_TEST_PAGE;
+    return BUTTON_TESTPAGE;
   }
 
   get _primaryComponent() {
-    return By(BUTTONEXPERIMENTAL_TEST_COMPONENT);
+    return By(BUTTON_TEST_COMPONENT);
   }
 
   get _secondaryComponent() {
-    return By(BUTTONEXPERIMENTAL_NO_A11Y_LABEL_COMPONENT);
+    return By(BUTTON_NO_A11Y_LABEL_COMPONENT);
   }
 
   get _pageButton() {
-    return By(HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL);
+    return By(HOMEPAGE_BUTTON_BUTTON);
   }
 }
 

apps/fluent-tester/src/E2E/ButtonExperimental/specs/ButtonExperimental.spec.win.ts

@@ -2,10 +2,7 @@ import NavigateAppPage from '../../common/NavigateAppPage.win';
 import ButtonExperimentalPageObject from '../pages/ButtonExperimentalPageObject';
 import { ComponentSelector } from '../../common/BasePage.win';
 import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, BUTTON_A11Y_ROLE } from '../../common/consts';
-import {
-  BUTTONEXPERIMENTAL_ACCESSIBILITY_LABEL,
-  BUTTONEXPERIMENTAL_TEST_COMPONENT_LABEL,
-} from '../../../FluentTester/TestComponents/ButtonExperimental/consts';
+import { BUTTON_ACCESSIBILITY_LABEL, BUTTON_TEST_COMPONENT_LABEL } from '../../../FluentTester/TestComponents/Button/consts';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Experimental Button Testing Initialization', function () {
@@ -20,7 +17,7 @@ describe('Experimental Button Testing Initialization', function () {
     ButtonExperimentalPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
 
     /* Click on component button to navigate to test page */
-    NavigateAppPage.clickAndGoToExperimentalButtonPage();
+    NavigateAppPage.clickAndGoToButtonPage();
     ButtonExperimentalPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
 
     expect(ButtonExperimentalPageObject.isPageLoaded()).toBeTruthy(ButtonExperimentalPageObject.ERRORMESSAGE_PAGELOAD);
@@ -41,17 +38,15 @@ describe('Experimental Button Accessibility Testing', () => {
     ButtonExperimentalPageObject.scrollToTestElement();
     ButtonExperimentalPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
 
-    expect(ButtonExperimentalPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(BUTTONEXPERIMENTAL_ACCESSIBILITY_LABEL);
+    expect(ButtonExperimentalPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(BUTTON_ACCESSIBILITY_LABEL);
     expect(ButtonExperimentalPageObject.didAssertPopup()).toBeFalsy(ButtonExperimentalPageObject.ERRORMESSAGE_ASSERT);
   });
 
   it('Experimental Button - Do not set accessibilityLabel -> Default to Button label', () => {
     ButtonExperimentalPageObject.scrollToTestElement();
     ButtonExperimentalPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
 
-    expect(ButtonExperimentalPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(
-      BUTTONEXPERIMENTAL_TEST_COMPONENT_LABEL,
-    );
+    expect(ButtonExperimentalPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(BUTTON_TEST_COMPONENT_LABEL);
     expect(ButtonExperimentalPageObject.didAssertPopup()).toBeFalsy(ButtonExperimentalPageObject.ERRORMESSAGE_ASSERT);
   });
 });

apps/fluent-tester/src/E2E/common/NavigateAppPage.win.ts

@@ -2,7 +2,6 @@ import { HOMEPAGE_ACTIVITY_INDICATOR_BUTTON } from '../../FluentTester/TestCompo
 import { HOMEPAGE_CHECKBOX_BUTTON } from '../../FluentTester/TestComponents/Checkbox/consts';
 import { HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON } from '../../FluentTester/TestComponents/CheckboxExperimental/consts';
 import { HOMEPAGE_BUTTON_BUTTON } from '../../FluentTester/TestComponents/Button/consts';
-import { HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL } from '../../FluentTester/TestComponents/ButtonExperimental/consts';
 import { HOMEPAGE_CALLOUT_BUTTON } from '../../FluentTester/TestComponents/Callout/consts';
 import { HOMEPAGE_CONTEXTUALMENU_BUTTON } from '../../FluentTester/TestComponents/ContextualMenu/consts';
 import { HOMEPAGE_EXPERIMENTAL_TABS_BUTTON } from '../../FluentTester/TestComponents/TabsExperimental/consts';
@@ -124,10 +123,6 @@ class NavigateAppPage extends BasePage {
     this.tokensPage.click();
   }
 
-  clickAndGoToExperimentalButtonPage() {
-    this.experimentalButtonPage.click();
-  }
-
   clickAndGoToExperimentalTabsPage() {
     this.experimentalTabsPage.click();
   }
@@ -236,10 +231,6 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_TOKEN_BUTTON);
   }
 
-  private get experimentalButtonPage() {
-    return By(HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL);
-  }
-
   private get experimentalTabsPage() {
     return By(HOMEPAGE_EXPERIMENTAL_TABS_BUTTON);
   }

apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ButtonHOCTestSection.tsx → apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonHOCTestSection.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@fluentui-react-native/experimental-button';
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import { Text } from '@fluentui-react-native/experimental-text';
 import { Icon } from '@fluentui-react-native/icon';
 import * as React from 'react';

apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ButtonIconTestSection.tsx → apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonIconTestSection.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@fluentui-react-native/experimental-button';
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import * as React from 'react';
 import { Platform, View, StyleSheet } from 'react-native';
 import { commonTestStyles, stackStyle } from '../Common/styles';

apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ButtonShapeTestSection.tsx → apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonShapeTestSection.tsx

@@ -1,4 +1,4 @@
-import { Button, CompoundButton } from '@fluentui-react-native/experimental-button';
+import { ButtonV1 as Button, CompoundButton } from '@fluentui-react-native/button';
 import * as React from 'react';
 import { View } from 'react-native';
 import { commonTestStyles, stackStyle } from '../Common/styles';

apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ButtonSizeTestSection.tsx → apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonSizeTestSection.tsx

@@ -1,4 +1,4 @@
-import { Button, CompoundButton } from '@fluentui-react-native/experimental-button';
+import { ButtonV1 as Button, CompoundButton } from '@fluentui-react-native/button';
 import { SvgIconProps } from '@fluentui-react-native/icon';
 import * as React from 'react';
 import { Platform, View } from 'react-native';

apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonTest.tsx

@@ -1,23 +1,58 @@
 import * as React from 'react';
-import { ButtonFocusTest } from './ButtonFocusTest';
-import { ButtonIconTest } from './ButtonIconTest';
+import { ButtonFocusTest_deprecated } from './deprecated/ButtonFocusTest';
+import { ButtonIconTest_deprecated } from './deprecated/ButtonIconTest';
 import { BUTTON_TESTPAGE } from './consts';
-import { E2EButtonTest } from './E2EButtonTest';
+import { E2EButtonTest_deprecated } from './deprecated/E2EButtonTest';
 import { Test, TestSection, PlatformStatus } from '../Test';
+import { ButtonVariantTest } from './ButtonVariantTestSection';
+import { ToggleButtonTest } from './ToggleButtonTestSection';
+import { ButtonIconTest } from '../Button/ButtonIconTestSection';
+import { ButtonSizeTest } from './ButtonSizeTestSection';
+import { ButtonShapeTest } from './ButtonShapeTestSection';
+import { E2EButtonExperimentalTest } from './E2EButtonTest';
+import { ButtonHOCTest } from '../Button/ButtonHOCTestSection';
 
 const buttonSections: TestSection[] = [
   {
-    name: 'Basic Button',
+    name: 'Button Variants',
     testID: BUTTON_TESTPAGE,
-    component: ButtonFocusTest,
+    component: ButtonVariantTest,
+  },
+  {
+    name: 'Button Shape',
+    component: ButtonShapeTest,
   },
   {
     name: 'Icon Button',
     component: ButtonIconTest,
   },
+  {
+    name: 'Toggle Button',
+    component: ToggleButtonTest,
+  },
+  {
+    name: 'Sizes',
+    component: ButtonSizeTest,
+  },
+  {
+    name: 'Customize, Compose, and Ref',
+    component: ButtonHOCTest,
+  },
   {
     name: 'E2E Button Testing',
-    component: E2EButtonTest,
+    component: E2EButtonExperimentalTest,
+  },
+  {
+    name: 'Deprecated Basic Button',
+    component: ButtonFocusTest_deprecated,
+  },
+  {
+    name: 'Deprecated Icon Button',
+    component: ButtonIconTest_deprecated,
+  },
+  {
+    name: 'Deprecated E2E Button Testing',
+    component: E2EButtonTest_deprecated,
   },
 ];
 
@@ -26,7 +61,7 @@ export const ButtonTest: React.FunctionComponent = () => {
     win32Status: 'Beta',
     uwpStatus: 'Experimental',
     iosStatus: 'Experimental',
-    macosStatus: 'Experimental',
+    macosStatus: 'Beta',
     androidStatus: 'Backlog',
   };
 

apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ButtonVariantTestSection.tsx → apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonVariantTestSection.tsx

@@ -5,6 +5,7 @@ import { commonTestStyles, stackStyle } from '../Common/styles';
 import { SvgIconProps } from '@fluentui-react-native/icon';
 import TestSvg from './test.svg';
 
+// Test also pulls button from deprecated package to ensure it's still working
 export const ButtonVariantTest: React.FunctionComponent = () => {
   const svgProps: SvgIconProps = {
     src: TestSvg,

apps/fluent-tester/src/FluentTester/TestComponents/Button/E2EButtonTest.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-import { Button, Text } from '@fluentui/react-native';
+import { Text } from '@fluentui/react-native';
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import { Stack } from '@fluentui-react-native/stack';
 import * as React from 'react';
 import { View } from 'react-native';
@@ -12,7 +13,7 @@ import {
   BUTTON_TEST_COMPONENT_LABEL,
 } from './consts';
 
-export const E2EButtonTest: React.FunctionComponent = () => {
+export const E2EButtonExperimentalTest: React.FunctionComponent = () => {
   const [buttonPressed, setButtonPressed] = React.useState(false);
 
   const onClick = React.useCallback(() => {
@@ -22,13 +23,12 @@ export const E2EButtonTest: React.FunctionComponent = () => {
   return (
     <View>
       <Stack style={stackStyle}>
-        <Button
-          content="This is a button for E2E testing"
-          testID={BUTTON_TEST_COMPONENT}
-          onClick={onClick}
-          accessibilityLabel={BUTTON_ACCESSIBILITY_LABEL}
-        />
-        <Button content={BUTTON_TEST_COMPONENT_LABEL} testID={BUTTON_NO_A11Y_LABEL_COMPONENT} onClick={onClick} />
+        <Button testID={BUTTON_TEST_COMPONENT} onClick={onClick} accessibilityLabel={BUTTON_ACCESSIBILITY_LABEL}>
+          This is a button for E2E testing
+        </Button>
+        <Button testID={BUTTON_NO_A11Y_LABEL_COMPONENT} onClick={onClick}>
+          {BUTTON_TEST_COMPONENT_LABEL}
+        </Button>
         {buttonPressed ? <Text testID={BUTTON_ON_PRESS}>Button Pressed</Text> : null}
       </Stack>
     </View>

apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ToggleButtonTestSection.tsx → apps/fluent-tester/src/FluentTester/TestComponents/Button/ToggleButtonTestSection.tsx

@@ -1,4 +1,4 @@
-import { ToggleButton } from '@fluentui-react-native/experimental-button';
+import { ToggleButton } from '@fluentui-react-native/button';
 import { Checkbox } from '@fluentui/react-native';
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';

apps/fluent-tester/src/FluentTester/TestComponents/Button/consts.ts

@@ -1,6 +1,16 @@
 export const HOMEPAGE_BUTTON_BUTTON = 'Homepage_Button_Button'; // Button on the homepage that navigates to the selected test page
 export const BUTTON_TESTPAGE = 'Button_TestPage'; // The title of each test page. This is displayed after navigating to the test page
 
+/* Test Button 1 */
+export const BUTTON_TEST_COMPONENT_DEPRECATED = 'Button_Test_Component_Deprecated'; // A component on each specific test page
+export const BUTTON_ACCESSIBILITY_LABEL_DEPRECATED = 'E2E testing Button accessibility label';
+
+/* Test Button 2 */
+export const BUTTON_NO_A11Y_LABEL_COMPONENT_DEPRECATED = 'Button_No_A11y_label_Component_Deprecated';
+export const BUTTON_TEST_COMPONENT_LABEL_DEPRECATED = 'Test Button2 - No Accessibility Label'; // A component on each specific test page
+
+export const BUTTON_ON_PRESS_DEPRECATED = 'Button_On_Press'; // For testing the press functionality on a button
+
 /* Test Button 1 */
 export const BUTTON_TEST_COMPONENT = 'Button_Test_Component'; // A component on each specific test page
 export const BUTTON_ACCESSIBILITY_LABEL = 'E2E testing Button accessibility label';

apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonFocusTest.tsx → apps/fluent-tester/src/FluentTester/TestComponents/Button/deprecated/ButtonFocusTest.tsx

@@ -3,9 +3,9 @@ import { IFocusable } from '@fluentui-react-native/interactive-hooks';
 import { Stack } from '@fluentui-react-native/stack';
 import * as React from 'react';
 import { findNodeHandle } from 'react-native';
-import { stackStyle } from '../Common/styles';
+import { stackStyle } from '../../Common/styles';
 
-export const ButtonFocusTest: React.FunctionComponent = () => {
+export const ButtonFocusTest_deprecated: React.FunctionComponent = () => {
   const [state, setState] = React.useState({
     focused: false,
   });