diff --git a/apps/fluent-tester/src/E2E/Button/pages/ButtonPageObject.macos.ts b/apps/fluent-tester/src/E2E/Button/pages/ButtonPageObject.macos.ts index 206ff0d40d..cfc7b7d3e6 100644 --- a/apps/fluent-tester/src/E2E/Button/pages/ButtonPageObject.macos.ts +++ b/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() { diff --git a/apps/fluent-tester/src/E2E/Button/pages/ButtonPageObject.ts b/apps/fluent-tester/src/E2E/Button/pages/ButtonPageObject.ts index 96e77d433e..ff787fb61e 100644 --- a/apps/fluent-tester/src/E2E/Button/pages/ButtonPageObject.ts +++ b/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() { diff --git a/apps/fluent-tester/src/E2E/Button/specs/Button.spec.win.ts b/apps/fluent-tester/src/E2E/Button/specs/Button.spec.win.ts index df2fcc376f..db2162595a 100644 --- a/apps/fluent-tester/src/E2E/Button/specs/Button.spec.win.ts +++ b/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); }); }); diff --git a/apps/fluent-tester/src/E2E/ButtonExperimental/pages/ButtonExperimentalPageObject.ts b/apps/fluent-tester/src/E2E/ButtonExperimental/pages/ButtonExperimentalPageObject.ts index f3687e8327..7f64f5fd33 100644 --- a/apps/fluent-tester/src/E2E/ButtonExperimental/pages/ButtonExperimentalPageObject.ts +++ b/apps/fluent-tester/src/E2E/ButtonExperimental/pages/ButtonExperimentalPageObject.ts @@ -1,9 +1,9 @@ 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 { @@ -11,23 +11,23 @@ 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); } } diff --git a/apps/fluent-tester/src/E2E/ButtonExperimental/specs/ButtonExperimental.spec.win.ts b/apps/fluent-tester/src/E2E/ButtonExperimental/specs/ButtonExperimental.spec.win.ts index 7f59832b03..1cb87b23be 100644 --- a/apps/fluent-tester/src/E2E/ButtonExperimental/specs/ButtonExperimental.spec.win.ts +++ b/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,7 +38,7 @@ 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); }); @@ -49,9 +46,7 @@ describe('Experimental Button Accessibility Testing', () => { 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); }); }); diff --git a/apps/fluent-tester/src/E2E/common/NavigateAppPage.win.ts b/apps/fluent-tester/src/E2E/common/NavigateAppPage.win.ts index 72ac3ef5c1..decfce1697 100644 --- a/apps/fluent-tester/src/E2E/common/NavigateAppPage.win.ts +++ b/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); } diff --git a/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ButtonHOCTestSection.tsx b/apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonHOCTestSection.tsx similarity index 95% rename from apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ButtonHOCTestSection.tsx rename to apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonHOCTestSection.tsx index 15979ce1ec..751ffb3123 100644 --- a/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ButtonHOCTestSection.tsx +++ b/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'; diff --git a/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ButtonIconTestSection.tsx b/apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonIconTestSection.tsx similarity index 97% rename from apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ButtonIconTestSection.tsx rename to apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonIconTestSection.tsx index 961b59b01d..ff9f2f13c3 100644 --- a/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ButtonIconTestSection.tsx +++ b/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'; diff --git a/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ButtonShapeTestSection.tsx b/apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonShapeTestSection.tsx similarity index 94% rename from apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ButtonShapeTestSection.tsx rename to apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonShapeTestSection.tsx index 6bafa97e75..f5b5b269be 100644 --- a/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ButtonShapeTestSection.tsx +++ b/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'; diff --git a/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ButtonSizeTestSection.tsx b/apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonSizeTestSection.tsx similarity index 97% rename from apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ButtonSizeTestSection.tsx rename to apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonSizeTestSection.tsx index a84320b222..477e2dbab9 100644 --- a/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ButtonSizeTestSection.tsx +++ b/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'; diff --git a/apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonTest.tsx b/apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonTest.tsx index 5149127323..61961ef61f 100644 --- a/apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonTest.tsx +++ b/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', }; diff --git a/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ButtonVariantTestSection.tsx b/apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonVariantTestSection.tsx similarity index 96% rename from apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ButtonVariantTestSection.tsx rename to apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonVariantTestSection.tsx index 9273b1bbc6..218e1875cc 100644 --- a/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ButtonVariantTestSection.tsx +++ b/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, diff --git a/apps/fluent-tester/src/FluentTester/TestComponents/Button/E2EButtonTest.tsx b/apps/fluent-tester/src/FluentTester/TestComponents/Button/E2EButtonTest.tsx index 6c5bdbfc65..864450b158 100644 --- a/apps/fluent-tester/src/FluentTester/TestComponents/Button/E2EButtonTest.tsx +++ b/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 ( - + {buttonPressed ? Button Pressed : null} diff --git a/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ToggleButtonTestSection.tsx b/apps/fluent-tester/src/FluentTester/TestComponents/Button/ToggleButtonTestSection.tsx similarity index 97% rename from apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ToggleButtonTestSection.tsx rename to apps/fluent-tester/src/FluentTester/TestComponents/Button/ToggleButtonTestSection.tsx index db0ee77553..eac5b0d9f4 100644 --- a/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/ToggleButtonTestSection.tsx +++ b/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'; diff --git a/apps/fluent-tester/src/FluentTester/TestComponents/Button/consts.ts b/apps/fluent-tester/src/FluentTester/TestComponents/Button/consts.ts index cc8992f9dc..89ff44bdc1 100644 --- a/apps/fluent-tester/src/FluentTester/TestComponents/Button/consts.ts +++ b/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'; diff --git a/apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonFocusTest.tsx b/apps/fluent-tester/src/FluentTester/TestComponents/Button/deprecated/ButtonFocusTest.tsx similarity index 89% rename from apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonFocusTest.tsx rename to apps/fluent-tester/src/FluentTester/TestComponents/Button/deprecated/ButtonFocusTest.tsx index 3c5a4e2571..6ddcd048d8 100644 --- a/apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonFocusTest.tsx +++ b/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, }); diff --git a/apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonIconTest.tsx b/apps/fluent-tester/src/FluentTester/TestComponents/Button/deprecated/ButtonIconTest.tsx similarity index 87% rename from apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonIconTest.tsx rename to apps/fluent-tester/src/FluentTester/TestComponents/Button/deprecated/ButtonIconTest.tsx index d785e060f3..84e14b9f55 100644 --- a/apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonIconTest.tsx +++ b/apps/fluent-tester/src/FluentTester/TestComponents/Button/deprecated/ButtonIconTest.tsx @@ -3,17 +3,17 @@ import { Button, Text } from '@fluentui/react-native'; import { Stack } from '@fluentui-react-native/stack'; import * as React from 'react'; import { Platform, View } from 'react-native'; -import { stackStyle } from '../Common/styles'; +import { stackStyle } from '../../Common/styles'; import { SvgIconProps } from '@fluentui-react-native/icon'; -import TestSvg from './test.svg'; +import TestSvg from '../test.svg'; const CustomizedIconButton = Button.customize({ tokens: { iconColor: 'red' }, content: { style: { marginStart: 5 } }, }); -export const ButtonIconTest: React.FunctionComponent = () => { - const testImage = require('./icon_24x24.png'); +export const ButtonIconTest_deprecated: React.FunctionComponent = () => { + const testImage = require('../icon_24x24.png'); const svgProps: SvgIconProps = { src: TestSvg, diff --git a/apps/fluent-tester/src/FluentTester/TestComponents/Button/deprecated/E2EButtonTest.tsx b/apps/fluent-tester/src/FluentTester/TestComponents/Button/deprecated/E2EButtonTest.tsx new file mode 100644 index 0000000000..edbd86b3ed --- /dev/null +++ b/apps/fluent-tester/src/FluentTester/TestComponents/Button/deprecated/E2EButtonTest.tsx @@ -0,0 +1,36 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ +import { Button, Text } from '@fluentui/react-native'; +import { Stack } from '@fluentui-react-native/stack'; +import * as React from 'react'; +import { View } from 'react-native'; +import { stackStyle } from '../../Common/styles'; +import { + BUTTON_TEST_COMPONENT_DEPRECATED, + BUTTON_ON_PRESS_DEPRECATED, + BUTTON_NO_A11Y_LABEL_COMPONENT_DEPRECATED, + BUTTON_ACCESSIBILITY_LABEL_DEPRECATED, + BUTTON_TEST_COMPONENT_LABEL_DEPRECATED, +} from '../consts'; + +export const E2EButtonTest_deprecated: React.FunctionComponent = () => { + const [buttonPressed, setButtonPressed] = React.useState(false); + + const onClick = React.useCallback(() => { + setButtonPressed(!buttonPressed); + }, [buttonPressed]); + + return ( + + + - - {buttonPressed ? Button Pressed : null} - - - ); -}; diff --git a/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/Font Awesome 5 Free-Solid-900.otf b/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/Font Awesome 5 Free-Solid-900.otf deleted file mode 100644 index 9d8a0e62f5..0000000000 Binary files a/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/Font Awesome 5 Free-Solid-900.otf and /dev/null differ diff --git a/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/consts.ts b/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/consts.ts deleted file mode 100644 index 3dc7d17c93..0000000000 --- a/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/consts.ts +++ /dev/null @@ -1,12 +0,0 @@ -export const HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL = 'Homepage_Button_ButtonExperimental'; // Button on the homepage that navigates to the selected test page -export const EXPERIMENTAL_BUTTON_TEST_PAGE = 'ButtonExperimental_TestPage'; // A component on each specific test page. - -/* Test Button 1 */ -export const BUTTONEXPERIMENTAL_TEST_COMPONENT = 'Button_Test_Component'; // A component on each specific test page -export const BUTTONEXPERIMENTAL_ACCESSIBILITY_LABEL = 'E2E testing Button accessibility label'; - -/* Test Button 2 */ -export const BUTTONEXPERIMENTAL_NO_A11Y_LABEL_COMPONENT = 'Button_No_A11y_label_Component'; -export const BUTTONEXPERIMENTAL_TEST_COMPONENT_LABEL = 'Test Button2 - No Accessibility Label'; // A component on each specific test page - -export const BUTTONEXPERIMENTAL_ON_PRESS = 'Button_On_Press'; // For testing the press functionality on a button diff --git a/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/icon_24x24.png b/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/icon_24x24.png deleted file mode 100644 index f4cd391799..0000000000 Binary files a/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/icon_24x24.png and /dev/null differ diff --git a/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/index.ts b/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/index.ts deleted file mode 100644 index a0bd971ac8..0000000000 --- a/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './ButtonTest'; -export * from './consts'; diff --git a/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/test.svg b/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/test.svg deleted file mode 100644 index 16c740c453..0000000000 --- a/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental/test.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/fluent-tester/src/FluentTester/testPages.android.ts b/apps/fluent-tester/src/FluentTester/testPages.android.ts index 0b14d6b288..a9bbeb93a5 100644 --- a/apps/fluent-tester/src/FluentTester/testPages.android.ts +++ b/apps/fluent-tester/src/FluentTester/testPages.android.ts @@ -20,7 +20,6 @@ import { HOMEPAGE_THEME_BUTTON, ThemeTest } from './TestComponents/Theme'; import { HOMEPAGE_ICON_BUTTON, IconTest } from './TestComponents/Icon'; import { ActivityIndicatorTest, HOMEPAGE_ACTIVITY_INDICATOR_BUTTON } from './TestComponents/ActivityIndicator'; import { HOMEPAGE_TOKEN_BUTTON, TokenTest } from './TestComponents/Tokens'; -import { ExperimentalButtonTest, HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL } from './TestComponents/ButtonExperimental'; import { ExperimentalCheckboxTest, HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON } from './TestComponents/CheckboxExperimental'; import { TextExperimentalTest, HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON } from './TestComponents/TextExperimental'; @@ -45,11 +44,6 @@ export const tests: TestDescription[] = [ component: ButtonTest, testPage: HOMEPAGE_BUTTON_BUTTON, }, - { - name: 'Experimental Button', - component: ExperimentalButtonTest, - testPage: HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL, - }, { name: 'Callout Test', component: CalloutTest, diff --git a/apps/fluent-tester/src/FluentTester/testPages.ios.ts b/apps/fluent-tester/src/FluentTester/testPages.ios.ts index bef91bae63..2cdb97fb9e 100644 --- a/apps/fluent-tester/src/FluentTester/testPages.ios.ts +++ b/apps/fluent-tester/src/FluentTester/testPages.ios.ts @@ -4,7 +4,6 @@ import { BadgeTest, HOMEPAGE_BADGE } from './TestComponents/Badge'; import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button'; import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox'; import { ExperimentalCheckboxTest, HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON } from './TestComponents/CheckboxExperimental'; -import { ExperimentalButtonTest, HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL } from './TestComponents/ButtonExperimental'; import { HOMEPAGE_ICON_BUTTON, IconTest } from './TestComponents/Icon'; import { HOMEPAGE_LINK_BUTTON, LinkTest } from './TestComponents/Link'; import { NativeDatePickerTest, HOMEPAGE_NATIVEDATEPICKER_BUTTON } from './TestComponents/NativeDatePicker'; @@ -47,11 +46,6 @@ export const tests: TestDescription[] = [ component: NativeDatePickerTest, testPage: HOMEPAGE_NATIVEDATEPICKER_BUTTON, }, - { - name: 'Experimental Button', - component: ExperimentalButtonTest, - testPage: HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL, - }, { name: 'Pressable Test', component: PressableTest, diff --git a/apps/fluent-tester/src/FluentTester/testPages.macos.ts b/apps/fluent-tester/src/FluentTester/testPages.macos.ts index 5b90ec8e8e..a02639a7e9 100644 --- a/apps/fluent-tester/src/FluentTester/testPages.macos.ts +++ b/apps/fluent-tester/src/FluentTester/testPages.macos.ts @@ -6,7 +6,6 @@ import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout'; import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox'; import { ContextualMenuTest, HOMEPAGE_CONTEXTUALMENU_BUTTON } from './TestComponents/ContextualMenu'; import { ExperimentalCheckboxTest, HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON } from './TestComponents/CheckboxExperimental'; -import { ExperimentalButtonTest, HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL } from './TestComponents/ButtonExperimental'; import { HOMEPAGE_FOCUSZONE_BUTTON, FocusZoneTest } from './TestComponents/FocusZone'; import { HOMEPAGE_ICON_BUTTON, IconTest } from './TestComponents/Icon'; import { HOMEPAGE_LINK_BUTTON, LinkTest } from './TestComponents/Link'; @@ -63,11 +62,6 @@ export const tests: TestDescription[] = [ component: ContextualMenuTest, testPage: HOMEPAGE_CONTEXTUALMENU_BUTTON, }, - { - name: 'Experimental Button', - component: ExperimentalButtonTest, - testPage: HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL, - }, { name: 'Experimental Checkbox', component: ExperimentalCheckboxTest, diff --git a/apps/fluent-tester/src/FluentTester/testPages.ts b/apps/fluent-tester/src/FluentTester/testPages.ts index 1b78f17f4c..82b2de451b 100644 --- a/apps/fluent-tester/src/FluentTester/testPages.ts +++ b/apps/fluent-tester/src/FluentTester/testPages.ts @@ -14,7 +14,6 @@ import { HOMEPAGE_SHIMMER_BUTTON, ShimmerTest } from './TestComponents/Shimmer'; import { HOMEPAGE_SVG_BUTTON, SvgTest } from './TestComponents/Svg'; import { HOMEPAGE_TEXT_BUTTON, TextTest } from './TestComponents/Text'; import { HOMEPAGE_THEME_BUTTON, ThemeTest } from './TestComponents/Theme'; -import { HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL, ExperimentalButtonTest } from './TestComponents/ButtonExperimental'; import { HOMEPAGE_FOCUSZONE_BUTTON, FocusZoneTest } from './TestComponents/FocusZone'; import { HOMEPAGE_ICON_BUTTON, IconTest } from './TestComponents/Icon'; import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout'; @@ -128,11 +127,6 @@ export const tests: TestDescription[] = [ component: SvgTest, testPage: HOMEPAGE_SVG_BUTTON, }, - { - name: 'Experimental Button', - component: ExperimentalButtonTest, - testPage: HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL, - }, { name: 'Callout Test', component: CalloutTest, diff --git a/apps/fluent-tester/src/FluentTester/testPages.win32.ts b/apps/fluent-tester/src/FluentTester/testPages.win32.ts index 96c4f197b5..931ff4e7e5 100644 --- a/apps/fluent-tester/src/FluentTester/testPages.win32.ts +++ b/apps/fluent-tester/src/FluentTester/testPages.win32.ts @@ -1,7 +1,6 @@ import { JSAvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar'; import { BadgeTest, HOMEPAGE_BADGE } from './TestComponents/Badge'; import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button'; -import { ExperimentalButtonTest, HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL } from './TestComponents/ButtonExperimental'; import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout'; import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox'; import { ContextualMenuTest, HOMEPAGE_CONTEXTUALMENU_BUTTON } from './TestComponents/ContextualMenu'; @@ -69,11 +68,6 @@ export const tests: TestDescription[] = [ component: ContextualMenuTest, testPage: HOMEPAGE_CONTEXTUALMENU_BUTTON, }, - { - name: 'Experimental Button', - component: ExperimentalButtonTest, - testPage: HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL, - }, { name: 'Focus Trap Zone Test', component: FocusTrapTest, diff --git a/apps/fluent-tester/src/FluentTester/testPages.windows.ts b/apps/fluent-tester/src/FluentTester/testPages.windows.ts index 8ae749d616..28614421e0 100644 --- a/apps/fluent-tester/src/FluentTester/testPages.windows.ts +++ b/apps/fluent-tester/src/FluentTester/testPages.windows.ts @@ -15,7 +15,6 @@ import { HOMEPAGE_EXPERIMENTAL_TABS_BUTTON, ExperimentalTabsTest } from './TestC import { HOMEPAGE_TOKEN_BUTTON, TokenTest } from './TestComponents/Tokens'; import { ExpanderTest, HOMEPAGE_EXPANDER_BUTTON } from './TestComponents/Expander'; import { HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON, TextExperimentalTest } from './TestComponents/TextExperimental'; -import { ExperimentalButtonTest, HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL } from './TestComponents/ButtonExperimental'; import { ActivityIndicatorTest, HOMEPAGE_ACTIVITY_INDICATOR_BUTTON } from './TestComponents/ActivityIndicator'; export const tests = [ @@ -39,11 +38,6 @@ export const tests = [ component: CalloutTest, testPage: HOMEPAGE_CALLOUT_BUTTON, }, - { - name: 'Experimental Button', - component: ExperimentalButtonTest, - testPage: HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL, - }, { name: 'Pressable Test', component: PressableTest, diff --git a/change/@fluentui-react-native-button-5981a52f-af7a-4e3f-af41-475f6bbd1ac1.json b/change/@fluentui-react-native-button-5981a52f-af7a-4e3f-af41-475f6bbd1ac1.json new file mode 100644 index 0000000000..a10ef47efe --- /dev/null +++ b/change/@fluentui-react-native-button-5981a52f-af7a-4e3f-af41-475f6bbd1ac1.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Move experimental files to component folder", + "packageName": "@fluentui-react-native/button", + "email": "ruaraki@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-button-acd56f5e-7bfe-4d63-b1a8-06ccd72cc0b9.json b/change/@fluentui-react-native-experimental-button-acd56f5e-7bfe-4d63-b1a8-06ccd72cc0b9.json new file mode 100644 index 0000000000..3aef1a5331 --- /dev/null +++ b/change/@fluentui-react-native-experimental-button-acd56f5e-7bfe-4d63-b1a8-06ccd72cc0b9.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Fix up index files, mark experimental button package deprecated", + "packageName": "@fluentui-react-native/experimental-button", + "email": "ruaraki@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-tester-870d041f-9265-4f80-9608-97dc212c71cf.json b/change/@fluentui-react-native-tester-870d041f-9265-4f80-9608-97dc212c71cf.json new file mode 100644 index 0000000000..a6dc77a49a --- /dev/null +++ b/change/@fluentui-react-native-tester-870d041f-9265-4f80-9608-97dc212c71cf.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Move experimental button tests to button test", + "packageName": "@fluentui-react-native/tester", + "email": "ruaraki@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/docs/pages/Components/Button.mdx b/docs/pages/Components/Button.mdx deleted file mode 100644 index a65dbc4af8..0000000000 --- a/docs/pages/Components/Button.mdx +++ /dev/null @@ -1,20 +0,0 @@ -# Button Documentation - -## Example - -``` -import * as React from 'react'; -import { Button, View } from '@fluentui/react-native'; - -export const ButtonExample: React.FunctionComponent<{}> = props => { - return ( - - ` | | `` | `` | @@ -32,15 +28,15 @@ Primary and Stealth buttons now map to `Button`: - `testID` - `tooltip` -### Props no longer supported with an equivalent functionality in v2 Button +### Props no longer supported with an equivalent functionality in v1 Button - `content` => Pass the content as `children` instead - `endIcon` => Use `after` value for `iconPosition` prop and pass icon information into `icon` prop instead - `startIcon` => Use `before` value for `iconPosition` prop and pass icon information into `icon` prop instead -### Props no longer supported without an equivalent functionality in v2 Button +### Props no longer supported without an equivalent functionality in v1 Button -- Cannot use both `startIcon` and `endIcon` at the same time in v2 +- Cannot use both `startIcon` and `endIcon` at the same time in v1 ### Tokens that remain as is @@ -49,18 +45,18 @@ Primary and Stealth buttons now map to `Button`: - `iconSize` - `iconWeight` -### Tokens no longer supported with an equivalent functionality in v2 Button +### Tokens no longer supported with an equivalent functionality in v1 Button - `contentPadding` => Set on `style` property of `root` property under `slotProps` in `compose` API - `iconColorHovered` => Use `iconColor` token under the `hovered` state token - `iconColorPressed` => Use `iconColor` token under the `pressed` state token -### Tokens no longer supported without an equivalent functionality in v2 Button +### Tokens no longer supported without an equivalent functionality in v1 Button - `contentPaddingFocused` => Removed in favor of using native based focus visuals - `wrapperBorderColor` => Removed in favor of using native based focus visuals -### Slots no longer supported with an equivalent functionality in v2 Button +### Slots no longer supported with an equivalent functionality in v1 Button - `borderWrapper` has been removed in favor of using native focus visuals. Use `root` instead. - `stack` has been removed. Use `root` instead. @@ -132,7 +128,7 @@ No `Button` specific renames. ## Property mapping -| v0 `Button` | v2 `Button` | +| v0 `Button` | v1 `Button` | | -------------- | -------------- | | `componentRef` | `componentRef` | | `content` | | diff --git a/packages/experimental/Button/SPEC.md b/packages/components/Button/SPEC.md similarity index 96% rename from packages/experimental/Button/SPEC.md rename to packages/components/Button/SPEC.md index c38af8b958..ba6cadeaf8 100644 --- a/packages/experimental/Button/SPEC.md +++ b/packages/components/Button/SPEC.md @@ -22,7 +22,7 @@ Basic examples: ``` -More examples on the [Test pages for the Button](https://github.com/microsoft/fluentui-react-native/tree/master/apps/fluent-tester/src/FluentTester/TestComponents/ButtonExperimental). Instructions on running the tester app can be found [here](https://github.com/microsoft/fluentui-react-native/blob/master/apps/fluent-tester/README.md). +More examples on the [Test pages for the Button](../../../apps/fluent-tester/src/FluentTester/TestComponents/Button). Instructions on running the tester app can be found [here](../../../apps/fluent-tester/README.md). ## Visual Examples diff --git a/packages/experimental/Button/assets/button_example_win32.png b/packages/components/Button/assets/button_example_win32.png similarity index 100% rename from packages/experimental/Button/assets/button_example_win32.png rename to packages/components/Button/assets/button_example_win32.png diff --git a/packages/experimental/Button/assets/button_primary_example_win32.png b/packages/components/Button/assets/button_primary_example_win32.png similarity index 100% rename from packages/experimental/Button/assets/button_primary_example_win32.png rename to packages/components/Button/assets/button_primary_example_win32.png diff --git a/packages/experimental/Button/assets/compoundbutton_example_win32.png b/packages/components/Button/assets/compoundbutton_example_win32.png similarity index 100% rename from packages/experimental/Button/assets/compoundbutton_example_win32.png rename to packages/components/Button/assets/compoundbutton_example_win32.png diff --git a/packages/experimental/Button/assets/compoundbutton_primary_example_win32.png b/packages/components/Button/assets/compoundbutton_primary_example_win32.png similarity index 100% rename from packages/experimental/Button/assets/compoundbutton_primary_example_win32.png rename to packages/components/Button/assets/compoundbutton_primary_example_win32.png diff --git a/packages/experimental/Button/assets/fab_example_android.png b/packages/components/Button/assets/fab_example_android.png similarity index 100% rename from packages/experimental/Button/assets/fab_example_android.png rename to packages/components/Button/assets/fab_example_android.png diff --git a/packages/experimental/Button/assets/togglebutton_checked_example_win32.png b/packages/components/Button/assets/togglebutton_checked_example_win32.png similarity index 100% rename from packages/experimental/Button/assets/togglebutton_checked_example_win32.png rename to packages/components/Button/assets/togglebutton_checked_example_win32.png diff --git a/packages/experimental/Button/assets/togglebutton_example_win32.png b/packages/components/Button/assets/togglebutton_example_win32.png similarity index 100% rename from packages/experimental/Button/assets/togglebutton_example_win32.png rename to packages/components/Button/assets/togglebutton_example_win32.png diff --git a/packages/components/Button/package.json b/packages/components/Button/package.json index 0bd456748b..f0f810494a 100644 --- a/packages/components/Button/package.json +++ b/packages/components/Button/package.json @@ -28,19 +28,28 @@ "dependencies": { "@uifabricshared/foundation-compose": "^1.11.9", "@fluentui-react-native/adapters": ">=0.8.2 <1.0.0", + "@fluentui-react-native/experimental-activity-indicator": "^0.5.11", + "@fluentui-react-native/experimental-text": ">=0.7.12 <1.0.0", + "@fluentui-react-native/framework": "0.7.12", "@fluentui-react-native/icon": "0.11.6", "@fluentui-react-native/interactive-hooks": ">=0.13.0 <1.0.0", "@fluentui-react-native/pressable": ">=0.8.19 <1.0.0", + "@fluentui-react-native/styling-utils": ">=0.3.4 <1.0.0", + "@fluentui-react-native/theme-tokens": ">=0.12.0 <1.0.0", "@fluentui-react-native/text": ">=0.11.9 <1.0.0", "@fluentui-react-native/tokens": ">=0.11.5 <1.0.0", + "@fluentui-react-native/use-styling": ">=0.8.2 <1.0.0", "@uifabricshared/foundation-composable": ">=0.10.2 <1.0.0", - "@uifabricshared/foundation-settings": ">=0.11.2 <1.0.0" + "@uifabricshared/foundation-settings": ">=0.11.2 <1.0.0", + "tslib": "^2.3.1" }, "devDependencies": { "@fluentui-react-native/eslint-config-rules": "^0.1.1", + "@fluentui-react-native/test-tools": ">=0.1.1 <1.0.0", "@office-iss/react-native-win32": "^0.64.8", "@types/react-native": "^0.64.0", "@fluentui-react-native/scripts": "^0.1.1", + "react": "17.0.1", "react-native": "^0.64.3" }, "peerDependencies": { diff --git a/packages/experimental/Button/src/Button.styling.ts b/packages/components/Button/src/Button.styling.ts similarity index 100% rename from packages/experimental/Button/src/Button.styling.ts rename to packages/components/Button/src/Button.styling.ts diff --git a/packages/components/Button/src/Button.test.tsx b/packages/components/Button/src/Button.test.tsx index 19dc10d239..4d34986c78 100644 --- a/packages/components/Button/src/Button.test.tsx +++ b/packages/components/Button/src/Button.test.tsx @@ -1,8 +1,79 @@ import * as React from 'react'; import { Button } from './Button'; import * as renderer from 'react-test-renderer'; +import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools'; +import { Text, View } from 'react-native'; +import { Icon } from '@fluentui-react-native/icon'; -it('Button default', () => { - const tree = renderer.create().toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('Button primary', () => { + const tree = renderer.create().toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('Button subtle', () => { + const tree = renderer.create().toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('Button circular', () => { + const tree = renderer.create().toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('Button square', () => { + const tree = renderer.create().toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('Button small', () => { + const tree = renderer.create().toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('Button large', () => { + const tree = renderer.create().toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('Button customized', () => { + const CustomButton = Button.customize({ backgroundColor: 'pink' }); + const tree = renderer.create(Custom Button).toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('Button composed', () => { + const ComposedButton = Button.compose({ + slots: { + root: View, + icon: Icon, + content: Text, + }, + }); + const tree = renderer.create(Composed Button with RNText).toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('Button simple rendering does not invalidate styling', () => { + checkRenderConsistency(() => , 2); + }); + + it('Button re-renders correctly', () => { + checkReRender(() => , 2); + }); + + it('Button shares produced styles across multiple renders', () => { + const style = { backgroundColor: 'black' }; + checkRenderConsistency(() => , 2); + }); + + it('Button re-renders correctly with style', () => { + const style = { borderColor: 'blue' }; + checkReRender(() => , 2); + }); }); diff --git a/packages/components/Button/src/Button.tsx b/packages/components/Button/src/Button.tsx index 3892894bea..f4a423e465 100644 --- a/packages/components/Button/src/Button.tsx +++ b/packages/components/Button/src/Button.tsx @@ -1,112 +1,85 @@ /** @jsx withSlots */ import * as React from 'react'; import { View } from 'react-native'; -import { IButtonSlotProps, IButtonState, IButtonProps, IButtonRenderData, buttonName, IButtonType } from './Button.types'; -import { compose, IUseComposeStyling } from '@uifabricshared/foundation-compose'; -import { ISlots, withSlots } from '@uifabricshared/foundation-composable'; -import { Text } from '@fluentui-react-native/text'; -import { settings } from './Button.settings'; -import { backgroundColorTokens, borderTokens, textTokens, foregroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; -import { filterViewProps } from '@fluentui-react-native/adapters'; -import { mergeSettings } from '@uifabricshared/foundation-settings'; - -import { - useAsPressable, - useKeyProps, - useViewCommandFocus, - createIconProps, - useOnPressWithFocus, -} from '@fluentui-react-native/interactive-hooks'; +import { ActivityIndicator } from '@fluentui-react-native/experimental-activity-indicator'; +import { buttonName, ButtonType, ButtonProps } from './Button.types'; +import { Text } from '@fluentui-react-native/experimental-text'; +import { stylingSettings, getDefaultSize } from './Button.styling'; +import { compose, mergeProps, withSlots, UseSlots } from '@fluentui-react-native/framework'; +import { useButton } from './useButton'; import { Icon } from '@fluentui-react-native/icon'; +import { createIconProps, IPressableState } from '@fluentui-react-native/interactive-hooks'; -export const Button = compose({ - displayName: buttonName, - usePrepareProps: (userProps: IButtonProps, useStyling: IUseComposeStyling) => { - const defaultComponentRef = React.useRef(null); - const { - icon, - startIcon, - endIcon, - content, - onAccessibilityTap = userProps.onClick, - accessibilityLabel = userProps.content, - componentRef = defaultComponentRef, - testID, - onClick, - ...rest - } = userProps; - - // Ensure focus is placed on button after click - const onPressWithFocus = useOnPressWithFocus(componentRef, onClick); - // attach the pressable state handlers - const pressable = useAsPressable({ ...rest, onPress: onPressWithFocus }); - const onKeyProps = useKeyProps(onClick, ' ', 'Enter'); - // set up state - const state: IButtonState = { - info: { - ...pressable.state, - disabled: !!userProps.disabled, - content: !!content, - startIcon: !!startIcon || !!icon, - endIcon: !!endIcon, - }, - }; - - const buttonRef = useViewCommandFocus(componentRef); - // grab the styling information, referencing the state as well as the props - const styleProps = useStyling(userProps, (override: string) => state.info[override] || userProps[override]); - // create the merged slot props - - const slotProps = mergeSettings(styleProps, { - root: { - ...pressable.props, - ref: buttonRef, - onAccessibilityTap: onAccessibilityTap, - accessibilityLabel: accessibilityLabel, - accessibilityState: { disabled: state.info.disabled }, - ...onKeyProps, - testID, - }, - content: { children: content }, - startIcon: createIconProps(startIcon || icon), - endIcon: createIconProps(endIcon), - }); - - return { slotProps, state }; - }, - settings, - render: (Slots: ISlots, renderData: IButtonRenderData, ...children: React.ReactNode[]) => { - const info = renderData.state!.info; +/** + * A function which determines if a set of styles should be applied to the compoent given the current state and props of the button. + * + * @param layer The name of the state that is being checked for + * @param state The current state of the button + * @param userProps The props that were passed into the button + * @returns Whether the styles that are assigned to the layer should be applied to the button + */ +export const buttonLookup = (layer: string, state: IPressableState, userProps: ButtonProps): boolean => { + return ( + state[layer] || + userProps[layer] || + layer === userProps['appearance'] || + layer === userProps['size'] || + (!userProps['size'] && layer === getDefaultSize()) || + layer === userProps['shape'] || + (!userProps['shape'] && layer === 'rounded') || + (layer === 'hasContent' && !userProps.iconOnly) || + (layer === 'hasIconAfter' && (userProps.icon || userProps.loading) && userProps.iconPosition === 'after') || + (layer === 'hasIconBefore' && (userProps.icon || userProps.loading) && (!userProps.iconPosition || userProps.iconPosition === 'before')) + ); +}; - return ( - - - - {info.startIcon && } - {info.content && } - {children} - {info.endIcon && } - - - - ); - }, +export const Button = compose({ + displayName: buttonName, + ...stylingSettings, slots: { root: View, - stack: { slotType: View, filter: filterViewProps }, - borderWrapper: { slotType: View, filter: filterViewProps }, - startIcon: { slotType: Icon as React.ComponentType }, + icon: Icon, content: Text, - endIcon: { slotType: Icon as React.ComponentType }, }, - styles: { - root: [backgroundColorTokens, borderTokens], - stack: [], - borderWrapper: [{ source: 'wrapperBorderColor', lookup: getPaletteFromTheme, target: 'borderColor' }], - startIcon: [{ source: 'iconColor', lookup: getPaletteFromTheme, target: 'color' }], - content: [textTokens, foregroundColorTokens], - endIcon: [{ source: 'iconColor', lookup: getPaletteFromTheme, target: 'color' }], + render: (userProps: ButtonProps, useSlots: UseSlots) => { + const button = useButton(userProps); + const iconProps = createIconProps(userProps.icon); + // grab the styled slots + const Slots = useSlots(userProps, (layer) => buttonLookup(layer, button.state, userProps)); + + // now return the handler for finishing render + return (final: ButtonProps, ...children: React.ReactNode[]) => { + const { icon, iconOnly, iconPosition, loading, accessibilityLabel, ...mergedProps } = mergeProps(button.props, final); + + const shouldShowIcon = !loading && icon; + if (__DEV__ && iconOnly) { + React.Children.forEach(children, (child) => { + if (typeof child === 'string') { + console.warn('iconOnly should not be set when Button has content.'); + } + }); + } + + let childText = ''; + if (accessibilityLabel === undefined) { + React.Children.forEach(children, (child) => { + if (typeof child === 'string') { + childText = child; // We only automatically support the one child string. + } + }); + } + const label = accessibilityLabel ?? childText; + + return ( + + {loading && } + {shouldShowIcon && iconPosition === 'before' && } + {React.Children.map(children, (child) => + typeof child === 'string' ? {child} : child, + )} + {shouldShowIcon && iconPosition === 'after' && } + + ); + }; }, }); - -export default Button; diff --git a/packages/components/Button/src/Button.types.ts b/packages/components/Button/src/Button.types.ts index c638dac0d3..248c72d2ff 100644 --- a/packages/components/Button/src/Button.types.ts +++ b/packages/components/Button/src/Button.types.ts @@ -1,137 +1,151 @@ import * as React from 'react'; -import { PressableProps, ViewProps, ColorValue } from 'react-native'; -import { IRenderData } from '@uifabricshared/foundation-composable'; -import { ITextProps } from '@fluentui-react-native/text'; -import { IPressableProps } from '@fluentui-react-native/pressable'; -import { FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens'; -import { IFocusable, IPressableState } from '@fluentui-react-native/interactive-hooks'; -import type { IViewProps } from '@fluentui-react-native/adapters'; +import { ViewProps, ViewStyle, ColorValue } from 'react-native'; +import { TextProps } from '@fluentui-react-native/experimental-text'; +import { FontTokens, IBorderTokens, IColorTokens, IShadowTokens, LayoutTokens } from '@fluentui-react-native/tokens'; +import { IFocusable, IPressableHooks, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks'; import { IconProps, IconSourcesType } from '@fluentui-react-native/icon'; +import { IViewProps } from '@fluentui-react-native/adapters'; export const buttonName = 'Button'; +export type ButtonSize = 'small' | 'medium' | 'large'; +export type ButtonAppearance = 'primary' | 'subtle'; +export type ButtonShape = 'rounded' | 'circular' | 'square'; -export interface IButtonInfo extends IPressableState { +export interface ButtonCoreTokens extends LayoutTokens, FontTokens, IBorderTokens, IShadowTokens, IColorTokens { /** - * Disables the button. - * @default false - * @deprecated + * The icon color. */ - disabled?: boolean; + iconColor?: ColorValue; /** - * Button start icon. + * The size of the icon. */ - startIcon?: boolean; + iconSize?: number; /** - * Button text. + * The weight of the lines used when drawing the icon. */ - content?: boolean; + iconWeight?: number; + /** - * End icon. + * The width of the button. */ - endIcon?: boolean; -} + width?: ViewStyle['width']; -/* - * Because state updates are coming from the touchable and will cause a child render the button doesn't use - * changes in state value to trigger re-render. The values inside inner are effectively mutable and are used - * for per-component storage - */ -export interface IButtonState { - info: IButtonInfo; -} - -export interface IButtonTokens extends FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens { /** - * The amount of padding between the border and the contents. + * The amount of spacing between an icon and the content when iconPosition is set to 'before', in pixels */ - contentPadding?: number | string; + spacingIconContentBefore?: number; /** - * The amount of padding between the border and the contents when the Button has focus. + * The amount of spacing between an icon and the content when iconPosition is set to 'after', in pixels */ - contentPaddingFocused?: number | string; + spacingIconContentAfter?: number; /** - * The icon color. + * States that can be applied to a button */ - iconColor?: ColorValue; + hovered?: ButtonTokens; + focused?: ButtonTokens; + pressed?: ButtonTokens; + disabled?: ButtonTokens; + hasContent?: ButtonTokens; + hasIconBefore?: ButtonTokens; +} +export interface ButtonTokens extends ButtonCoreTokens { /** - * The icon color when hovering over the Button. + * Additional states that can be applied to a button */ - iconColorHovered?: ColorValue; + primary?: ButtonTokens; + subtle?: ButtonTokens; + block?: ButtonTokens; + small?: ButtonTokens; + medium?: ButtonTokens; + large?: ButtonTokens; + rounded?: ButtonTokens; + circular?: ButtonTokens; + square?: ButtonTokens; + hasIconAfter?: ButtonTokens; +} - /** - * The icon color when the Button is being pressed. +export interface ButtonCoreProps extends Omit, 'onPress'> { + /* + * Source URL or name of the icon to show on the Button. */ - iconColorPressed?: ColorValue; + icon?: IconSourcesType; /** - * The size of the icon. + * Button contains only icon, there's no text content + * Must be set for button to style correctly when button has not content. */ - iconSize?: number | string; + iconOnly?: boolean; /** - * The weight of the lines used when drawing the icon. + * A RefObject to access the IButton interface. Use this to access the public methods and properties of the component. */ - iconWeight?: number; + componentRef?: React.RefObject; /** - * Text to show on the Button. + * A callback to call on button click event */ - content?: string; + onClick?: () => void; /** - * Source URL or name of the icon to show on the Button. + * Text that should show in a tooltip when the user hovers over a button. */ - startIcon?: IconSourcesType; - endIcon?: IconSourcesType; - wrapperBorderColor?: ColorValue; + tooltip?: string; } -export interface IButtonProps extends Omit { +export interface ButtonProps extends ButtonCoreProps { /** - * Text to show on the Button. + * A button can have its content and borders styled for greater emphasis or to be subtle. + * - 'primary': Emphasizes the button as a primary action. + * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused. */ - content?: string; + appearance?: ButtonAppearance; /** - * Source URL or name of the start icon to show on the Button. - * @deprecated Use startIcon instead. + * A button can fill the width of its container. + * @default false */ - icon?: IconSourcesType; + block?: boolean; + + /** Sets style of button to a preset size style + * @default 'small' on win32, 'medium' elsewhere + */ + size?: ButtonSize; + /** - * A RefObject to access the IButton interface. Use this to access the public methods and properties of the component. + * Button shape: 'rounded' | 'circular' | 'square' + * @default 'rounded' */ - componentRef?: React.RefObject; + shape?: ButtonShape; + /** - * A callback to call on button click event + * Icon can be placed before or after Button's content. + * @default 'before' */ - onClick?: () => void; + iconPosition?: 'before' | 'after'; - testID?: string; - tooltip?: string; - startIcon?: IconSourcesType; - endIcon?: IconSourcesType; + /** + * A button can show a loading indicator if it is waiting for another action to happen before allowing itself to + * be interacted with. + * @default false + */ + loading?: boolean; } -export interface IButtonSlotProps { +export type ButtonState = IPressableHooks>; + +export interface ButtonSlotProps { root: React.PropsWithRef; - ripple?: PressableProps; // This slot exists to enable ripple-effect in android. It does not affect other platforms. - stack: ViewProps; - borderWrapper: ViewProps; - startIcon: IconProps; - content: ITextProps; - endIcon: IconProps; + icon: IconProps; + content: TextProps; } -export type IButtonRenderData = IRenderData; - -export interface IButtonType { - props: IButtonProps; - tokens: IButtonTokens; - slotProps: IButtonSlotProps; - state: IButtonState; +export interface ButtonType { + props: ButtonProps; + tokens: ButtonTokens; + slotProps: ButtonSlotProps; } diff --git a/packages/experimental/Button/src/ButtonColorTokens.macos.ts b/packages/components/Button/src/ButtonColorTokens.macos.ts similarity index 100% rename from packages/experimental/Button/src/ButtonColorTokens.macos.ts rename to packages/components/Button/src/ButtonColorTokens.macos.ts diff --git a/packages/experimental/Button/src/ButtonColorTokens.ts b/packages/components/Button/src/ButtonColorTokens.ts similarity index 100% rename from packages/experimental/Button/src/ButtonColorTokens.ts rename to packages/components/Button/src/ButtonColorTokens.ts diff --git a/packages/experimental/Button/src/ButtonColorTokens.win32.ts b/packages/components/Button/src/ButtonColorTokens.win32.ts similarity index 100% rename from packages/experimental/Button/src/ButtonColorTokens.win32.ts rename to packages/components/Button/src/ButtonColorTokens.win32.ts diff --git a/packages/experimental/Button/src/ButtonColorTokens.windows.ts b/packages/components/Button/src/ButtonColorTokens.windows.ts similarity index 100% rename from packages/experimental/Button/src/ButtonColorTokens.windows.ts rename to packages/components/Button/src/ButtonColorTokens.windows.ts diff --git a/packages/experimental/Button/src/ButtonFontTokens.macos.ts b/packages/components/Button/src/ButtonFontTokens.macos.ts similarity index 100% rename from packages/experimental/Button/src/ButtonFontTokens.macos.ts rename to packages/components/Button/src/ButtonFontTokens.macos.ts diff --git a/packages/experimental/Button/src/ButtonFontTokens.ts b/packages/components/Button/src/ButtonFontTokens.ts similarity index 100% rename from packages/experimental/Button/src/ButtonFontTokens.ts rename to packages/components/Button/src/ButtonFontTokens.ts diff --git a/packages/experimental/Button/src/ButtonFontTokens.win32.ts b/packages/components/Button/src/ButtonFontTokens.win32.ts similarity index 100% rename from packages/experimental/Button/src/ButtonFontTokens.win32.ts rename to packages/components/Button/src/ButtonFontTokens.win32.ts diff --git a/packages/experimental/Button/src/ButtonTokens.ts b/packages/components/Button/src/ButtonTokens.ts similarity index 100% rename from packages/experimental/Button/src/ButtonTokens.ts rename to packages/components/Button/src/ButtonTokens.ts diff --git a/packages/experimental/Button/src/ButtonTokens.win32.ts b/packages/components/Button/src/ButtonTokens.win32.ts similarity index 100% rename from packages/experimental/Button/src/ButtonTokens.win32.ts rename to packages/components/Button/src/ButtonTokens.win32.ts diff --git a/packages/experimental/Button/src/CompoundButton/CompoundButton.styling.ts b/packages/components/Button/src/CompoundButton/CompoundButton.styling.ts similarity index 100% rename from packages/experimental/Button/src/CompoundButton/CompoundButton.styling.ts rename to packages/components/Button/src/CompoundButton/CompoundButton.styling.ts diff --git a/packages/experimental/Button/src/CompoundButton/CompoundButton.test.tsx b/packages/components/Button/src/CompoundButton/CompoundButton.test.tsx similarity index 100% rename from packages/experimental/Button/src/CompoundButton/CompoundButton.test.tsx rename to packages/components/Button/src/CompoundButton/CompoundButton.test.tsx diff --git a/packages/experimental/Button/src/CompoundButton/CompoundButton.tsx b/packages/components/Button/src/CompoundButton/CompoundButton.tsx similarity index 98% rename from packages/experimental/Button/src/CompoundButton/CompoundButton.tsx rename to packages/components/Button/src/CompoundButton/CompoundButton.tsx index 9a8b3d5285..73a7561dea 100644 --- a/packages/experimental/Button/src/CompoundButton/CompoundButton.tsx +++ b/packages/components/Button/src/CompoundButton/CompoundButton.tsx @@ -74,5 +74,3 @@ export const CompoundButton = compose({ }; }, }); - -export default CompoundButton; diff --git a/packages/experimental/Button/src/CompoundButton/CompoundButton.types.ts b/packages/components/Button/src/CompoundButton/CompoundButton.types.ts similarity index 100% rename from packages/experimental/Button/src/CompoundButton/CompoundButton.types.ts rename to packages/components/Button/src/CompoundButton/CompoundButton.types.ts diff --git a/packages/experimental/Button/src/CompoundButton/CompoundButtonColorTokens.ts b/packages/components/Button/src/CompoundButton/CompoundButtonColorTokens.ts similarity index 100% rename from packages/experimental/Button/src/CompoundButton/CompoundButtonColorTokens.ts rename to packages/components/Button/src/CompoundButton/CompoundButtonColorTokens.ts diff --git a/packages/experimental/Button/src/CompoundButton/CompoundButtonColorTokens.win32.ts b/packages/components/Button/src/CompoundButton/CompoundButtonColorTokens.win32.ts similarity index 100% rename from packages/experimental/Button/src/CompoundButton/CompoundButtonColorTokens.win32.ts rename to packages/components/Button/src/CompoundButton/CompoundButtonColorTokens.win32.ts diff --git a/packages/experimental/Button/src/CompoundButton/CompoundButtonColorTokens.windows.ts b/packages/components/Button/src/CompoundButton/CompoundButtonColorTokens.windows.ts similarity index 100% rename from packages/experimental/Button/src/CompoundButton/CompoundButtonColorTokens.windows.ts rename to packages/components/Button/src/CompoundButton/CompoundButtonColorTokens.windows.ts diff --git a/packages/experimental/Button/src/CompoundButton/CompoundButtonFontTokens.ts b/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.ts similarity index 100% rename from packages/experimental/Button/src/CompoundButton/CompoundButtonFontTokens.ts rename to packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.ts diff --git a/packages/experimental/Button/src/CompoundButton/CompoundButtonFontTokens.win32.ts b/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.win32.ts similarity index 100% rename from packages/experimental/Button/src/CompoundButton/CompoundButtonFontTokens.win32.ts rename to packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.win32.ts diff --git a/packages/experimental/Button/src/CompoundButton/CompoundButtonTokens.ts b/packages/components/Button/src/CompoundButton/CompoundButtonTokens.ts similarity index 100% rename from packages/experimental/Button/src/CompoundButton/CompoundButtonTokens.ts rename to packages/components/Button/src/CompoundButton/CompoundButtonTokens.ts diff --git a/packages/experimental/Button/src/CompoundButton/SPEC.md b/packages/components/Button/src/CompoundButton/SPEC.md similarity index 100% rename from packages/experimental/Button/src/CompoundButton/SPEC.md rename to packages/components/Button/src/CompoundButton/SPEC.md diff --git a/packages/experimental/Button/src/CompoundButton/__snapshots__/CompoundButton.test.tsx.snap b/packages/components/Button/src/CompoundButton/__snapshots__/CompoundButton.test.tsx.snap similarity index 100% rename from packages/experimental/Button/src/CompoundButton/__snapshots__/CompoundButton.test.tsx.snap rename to packages/components/Button/src/CompoundButton/__snapshots__/CompoundButton.test.tsx.snap diff --git a/packages/experimental/Button/src/CompoundButton/index.ts b/packages/components/Button/src/CompoundButton/index.ts similarity index 100% rename from packages/experimental/Button/src/CompoundButton/index.ts rename to packages/components/Button/src/CompoundButton/index.ts diff --git a/packages/components/Button/src/FAB/FAB.android.tsx b/packages/components/Button/src/FAB/FAB.android.tsx new file mode 100644 index 0000000000..37b742b920 --- /dev/null +++ b/packages/components/Button/src/FAB/FAB.android.tsx @@ -0,0 +1 @@ +export { FAB } from './FABCore'; diff --git a/packages/components/Button/src/FAB/FAB.ios.tsx b/packages/components/Button/src/FAB/FAB.ios.tsx new file mode 100644 index 0000000000..37b742b920 --- /dev/null +++ b/packages/components/Button/src/FAB/FAB.ios.tsx @@ -0,0 +1 @@ +export { FAB } from './FABCore'; diff --git a/packages/experimental/Button/src/FAB/FAB.styling.ts b/packages/components/Button/src/FAB/FAB.styling.ts similarity index 100% rename from packages/experimental/Button/src/FAB/FAB.styling.ts rename to packages/components/Button/src/FAB/FAB.styling.ts diff --git a/packages/experimental/Button/src/FAB/FAB.tsx b/packages/components/Button/src/FAB/FAB.tsx similarity index 97% rename from packages/experimental/Button/src/FAB/FAB.tsx rename to packages/components/Button/src/FAB/FAB.tsx index 4f4afcb151..6c12f35ee3 100644 --- a/packages/experimental/Button/src/FAB/FAB.tsx +++ b/packages/components/Button/src/FAB/FAB.tsx @@ -20,5 +20,3 @@ export const FAB = compose({ }; }, }); - -export default FAB; diff --git a/packages/experimental/Button/src/FAB/FAB.types.ts b/packages/components/Button/src/FAB/FAB.types.ts similarity index 100% rename from packages/experimental/Button/src/FAB/FAB.types.ts rename to packages/components/Button/src/FAB/FAB.types.ts diff --git a/packages/experimental/Button/src/FAB/FABColorTokens.ts b/packages/components/Button/src/FAB/FABColorTokens.ts similarity index 100% rename from packages/experimental/Button/src/FAB/FABColorTokens.ts rename to packages/components/Button/src/FAB/FABColorTokens.ts diff --git a/packages/experimental/Button/src/FAB/FABColorTokens.win32.ts b/packages/components/Button/src/FAB/FABColorTokens.win32.ts similarity index 100% rename from packages/experimental/Button/src/FAB/FABColorTokens.win32.ts rename to packages/components/Button/src/FAB/FABColorTokens.win32.ts diff --git a/packages/experimental/Button/src/FAB/FABColorTokens.windows.ts b/packages/components/Button/src/FAB/FABColorTokens.windows.ts similarity index 100% rename from packages/experimental/Button/src/FAB/FABColorTokens.windows.ts rename to packages/components/Button/src/FAB/FABColorTokens.windows.ts diff --git a/packages/experimental/Button/src/FAB/FABCore.tsx b/packages/components/Button/src/FAB/FABCore.tsx similarity index 99% rename from packages/experimental/Button/src/FAB/FABCore.tsx rename to packages/components/Button/src/FAB/FABCore.tsx index 2c41548d1d..08a5f05668 100644 --- a/packages/experimental/Button/src/FAB/FABCore.tsx +++ b/packages/components/Button/src/FAB/FABCore.tsx @@ -74,5 +74,3 @@ export const FAB = compose({ }; }, }); - -export default FAB; diff --git a/packages/experimental/Button/src/FAB/FABTokens.ts b/packages/components/Button/src/FAB/FABTokens.ts similarity index 100% rename from packages/experimental/Button/src/FAB/FABTokens.ts rename to packages/components/Button/src/FAB/FABTokens.ts diff --git a/packages/experimental/Button/src/FAB/SPEC.md b/packages/components/Button/src/FAB/SPEC.md similarity index 100% rename from packages/experimental/Button/src/FAB/SPEC.md rename to packages/components/Button/src/FAB/SPEC.md diff --git a/packages/experimental/Button/src/FAB/index.ts b/packages/components/Button/src/FAB/index.ts similarity index 100% rename from packages/experimental/Button/src/FAB/index.ts rename to packages/components/Button/src/FAB/index.ts diff --git a/packages/components/Button/src/PrimaryButton/PrimaryButton.ts b/packages/components/Button/src/PrimaryButton/PrimaryButton.ts deleted file mode 100644 index c9f6e5a3c1..0000000000 --- a/packages/components/Button/src/PrimaryButton/PrimaryButton.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { Button } from '../Button'; -import { settings } from './PrimaryButton.settings'; - -export const PrimaryButton = Button.compose({ displayName: 'PrimaryButton', settings }); diff --git a/packages/components/Button/src/StealthButton/StealthButton.ts b/packages/components/Button/src/StealthButton/StealthButton.ts deleted file mode 100644 index c953423bf9..0000000000 --- a/packages/components/Button/src/StealthButton/StealthButton.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { Button } from '../Button'; -import { settings } from './StealthButton.settings'; - -export const StealthButton = Button.compose({ displayName: 'StealthButton', settings }); diff --git a/packages/experimental/Button/src/ToggleButton/SPEC.md b/packages/components/Button/src/ToggleButton/SPEC.md similarity index 100% rename from packages/experimental/Button/src/ToggleButton/SPEC.md rename to packages/components/Button/src/ToggleButton/SPEC.md diff --git a/packages/experimental/Button/src/ToggleButton/ToggleButton.styling.ts b/packages/components/Button/src/ToggleButton/ToggleButton.styling.ts similarity index 100% rename from packages/experimental/Button/src/ToggleButton/ToggleButton.styling.ts rename to packages/components/Button/src/ToggleButton/ToggleButton.styling.ts diff --git a/packages/experimental/Button/src/ToggleButton/ToggleButton.test.tsx b/packages/components/Button/src/ToggleButton/ToggleButton.test.tsx similarity index 100% rename from packages/experimental/Button/src/ToggleButton/ToggleButton.test.tsx rename to packages/components/Button/src/ToggleButton/ToggleButton.test.tsx diff --git a/packages/experimental/Button/src/ToggleButton/ToggleButton.tsx b/packages/components/Button/src/ToggleButton/ToggleButton.tsx similarity index 98% rename from packages/experimental/Button/src/ToggleButton/ToggleButton.tsx rename to packages/components/Button/src/ToggleButton/ToggleButton.tsx index 2314542a53..54d6dbdb11 100644 --- a/packages/experimental/Button/src/ToggleButton/ToggleButton.tsx +++ b/packages/components/Button/src/ToggleButton/ToggleButton.tsx @@ -62,5 +62,3 @@ export const ToggleButton = compose({ }; }, }); - -export default ToggleButton; diff --git a/packages/experimental/Button/src/ToggleButton/ToggleButton.types.ts b/packages/components/Button/src/ToggleButton/ToggleButton.types.ts similarity index 100% rename from packages/experimental/Button/src/ToggleButton/ToggleButton.types.ts rename to packages/components/Button/src/ToggleButton/ToggleButton.types.ts diff --git a/packages/experimental/Button/src/ToggleButton/ToggleButtonColorTokens.ts b/packages/components/Button/src/ToggleButton/ToggleButtonColorTokens.ts similarity index 100% rename from packages/experimental/Button/src/ToggleButton/ToggleButtonColorTokens.ts rename to packages/components/Button/src/ToggleButton/ToggleButtonColorTokens.ts diff --git a/packages/experimental/Button/src/ToggleButton/ToggleButtonColorTokens.win32.ts b/packages/components/Button/src/ToggleButton/ToggleButtonColorTokens.win32.ts similarity index 100% rename from packages/experimental/Button/src/ToggleButton/ToggleButtonColorTokens.win32.ts rename to packages/components/Button/src/ToggleButton/ToggleButtonColorTokens.win32.ts diff --git a/packages/experimental/Button/src/ToggleButton/ToggleButtonColorTokens.windows.ts b/packages/components/Button/src/ToggleButton/ToggleButtonColorTokens.windows.ts similarity index 100% rename from packages/experimental/Button/src/ToggleButton/ToggleButtonColorTokens.windows.ts rename to packages/components/Button/src/ToggleButton/ToggleButtonColorTokens.windows.ts diff --git a/packages/experimental/Button/src/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap b/packages/components/Button/src/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap similarity index 100% rename from packages/experimental/Button/src/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap rename to packages/components/Button/src/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap diff --git a/packages/experimental/Button/src/ToggleButton/index.ts b/packages/components/Button/src/ToggleButton/index.ts similarity index 100% rename from packages/experimental/Button/src/ToggleButton/index.ts rename to packages/components/Button/src/ToggleButton/index.ts diff --git a/packages/experimental/Button/src/ToggleButton/useToggleButton.ts b/packages/components/Button/src/ToggleButton/useToggleButton.ts similarity index 100% rename from packages/experimental/Button/src/ToggleButton/useToggleButton.ts rename to packages/components/Button/src/ToggleButton/useToggleButton.ts diff --git a/packages/components/Button/src/__snapshots__/Button.test.tsx.snap b/packages/components/Button/src/__snapshots__/Button.test.tsx.snap index f15ab9d9ab..7566167fec 100644 --- a/packages/components/Button/src/__snapshots__/Button.test.tsx.snap +++ b/packages/components/Button/src/__snapshots__/Button.test.tsx.snap @@ -1,73 +1,546 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Button default 1`] = ` +exports[`Button component tests Button circular 1`] = ` + + Circular Button + + +`; + +exports[`Button component tests Button composed 1`] = ` + - - + +`; + +exports[`Button component tests Button customized 1`] = ` + + + Custom Button + + +`; + +exports[`Button component tests Button default 1`] = ` + + + Default Button + + +`; + +exports[`Button component tests Button large 1`] = ` + + - - Default Button - - - + } + > + Large Button + + +`; + +exports[`Button component tests Button primary 1`] = ` + + + Primary Button + + +`; + +exports[`Button component tests Button small 1`] = ` + + + Small Button + + +`; + +exports[`Button component tests Button square 1`] = ` + + + Square Button + + +`; + +exports[`Button component tests Button subtle 1`] = ` + + + Subtle Button + `; diff --git a/packages/components/Button/src/Button.android.tsx b/packages/components/Button/src/deprecated/Button.android.tsx similarity index 92% rename from packages/components/Button/src/Button.android.tsx rename to packages/components/Button/src/deprecated/Button.android.tsx index 7bcb8d4362..b48f30aee5 100644 --- a/packages/components/Button/src/Button.android.tsx +++ b/packages/components/Button/src/deprecated/Button.android.tsx @@ -12,6 +12,10 @@ import { mergeSettings } from '@uifabricshared/foundation-settings'; import { useAsPressable, useViewCommandFocus, createIconProps } from '@fluentui-react-native/interactive-hooks'; import { Icon } from '@fluentui-react-native/icon'; +/** + * @deprecated This component is deprecated in favor of ButtonV1. This Button will be removed when the package moves to 1.0.0. + * At that point, ButtonV1 will be renamed to Button. Please see MIGRATION.md for details on how to move to the new Button. + */ export const Button = compose({ displayName: buttonName, usePrepareProps: (userProps: IButtonProps, useStyling: IUseComposeStyling) => { diff --git a/packages/components/Button/src/Button.settings.android.ts b/packages/components/Button/src/deprecated/Button.settings.android.ts similarity index 93% rename from packages/components/Button/src/Button.settings.android.ts rename to packages/components/Button/src/deprecated/Button.settings.android.ts index 2a1444d6e8..5376a302a8 100644 --- a/packages/components/Button/src/Button.settings.android.ts +++ b/packages/components/Button/src/deprecated/Button.settings.android.ts @@ -2,6 +2,10 @@ import { buttonName, IButtonType } from './Button.types'; import { IComposeSettings } from '@uifabricshared/foundation-compose'; import type { IViewProps } from '@fluentui-react-native/adapters'; +/** + * @deprecated This will be removed when the package moves to 1.0.0. + * Please see MIGRATION.md for details on how to move to the new Button. + */ export const settings: IComposeSettings = [ { tokens: { diff --git a/packages/components/Button/src/Button.settings.ts b/packages/components/Button/src/deprecated/Button.settings.ts similarity index 93% rename from packages/components/Button/src/Button.settings.ts rename to packages/components/Button/src/deprecated/Button.settings.ts index 4cea18dfc7..bf51616aaa 100644 --- a/packages/components/Button/src/Button.settings.ts +++ b/packages/components/Button/src/deprecated/Button.settings.ts @@ -2,6 +2,10 @@ import { buttonName, IButtonType } from './Button.types'; import { IComposeSettings } from '@uifabricshared/foundation-compose'; import type { IViewProps } from '@fluentui-react-native/adapters'; +/** + * @deprecated This will be removed when the package moves to 1.0.0. + * Please see MIGRATION.md for details on how to move to the new Button. + */ export const settings: IComposeSettings = [ { tokens: { diff --git a/packages/components/Button/src/Button.settings.win32.ts b/packages/components/Button/src/deprecated/Button.settings.win32.ts similarity index 93% rename from packages/components/Button/src/Button.settings.win32.ts rename to packages/components/Button/src/deprecated/Button.settings.win32.ts index 595b112aee..d22daf0739 100644 --- a/packages/components/Button/src/Button.settings.win32.ts +++ b/packages/components/Button/src/deprecated/Button.settings.win32.ts @@ -2,6 +2,10 @@ import { buttonName, IButtonType } from './Button.types'; import { IComposeSettings } from '@uifabricshared/foundation-compose'; import type { IViewProps } from '@fluentui-react-native/adapters'; +/** + * @deprecated This will be removed when the package moves to 1.0.0. + * Please see MIGRATION.md for details on how to move to the new Button. + */ export const settings: IComposeSettings = [ { tokens: { diff --git a/packages/components/Button/src/deprecated/Button.test.tsx b/packages/components/Button/src/deprecated/Button.test.tsx new file mode 100644 index 0000000000..19dc10d239 --- /dev/null +++ b/packages/components/Button/src/deprecated/Button.test.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { Button } from './Button'; +import * as renderer from 'react-test-renderer'; + +it('Button default', () => { + const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); - }); - - it('Button primary', () => { - const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); - }); - - it('Button subtle', () => { - const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); - }); - - it('Button circular', () => { - const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); - }); - - it('Button square', () => { - const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); - }); - - it('Button small', () => { - const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); - }); - - it('Button large', () => { - const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); - }); - - it('Button customized', () => { - const CustomButton = Button.customize({ backgroundColor: 'pink' }); - const tree = renderer.create(Custom Button).toJSON(); - expect(tree).toMatchSnapshot(); - }); - - it('Button composed', () => { - const ComposedButton = Button.compose({ - slots: { - root: View, - icon: Icon, - content: Text, - }, - }); - const tree = renderer.create(Composed Button with RNText).toJSON(); - expect(tree).toMatchSnapshot(); - }); - - it('Button simple rendering does not invalidate styling', () => { - checkRenderConsistency(() => , 2); - }); - - it('Button re-renders correctly', () => { - checkReRender(() => , 2); - }); - - it('Button shares produced styles across multiple renders', () => { - const style = { backgroundColor: 'black' }; - checkRenderConsistency(() => , 2); - }); - - it('Button re-renders correctly with style', () => { - const style = { borderColor: 'blue' }; - checkReRender(() => , 2); - }); -}); diff --git a/packages/experimental/Button/src/Button.tsx b/packages/experimental/Button/src/Button.tsx deleted file mode 100644 index 225df78e95..0000000000 --- a/packages/experimental/Button/src/Button.tsx +++ /dev/null @@ -1,87 +0,0 @@ -/** @jsx withSlots */ -import * as React from 'react'; -import { View } from 'react-native'; -import { ActivityIndicator } from '@fluentui-react-native/experimental-activity-indicator'; -import { buttonName, ButtonType, ButtonProps } from './Button.types'; -import { Text } from '@fluentui-react-native/experimental-text'; -import { stylingSettings, getDefaultSize } from './Button.styling'; -import { compose, mergeProps, withSlots, UseSlots } from '@fluentui-react-native/framework'; -import { useButton } from './useButton'; -import { Icon } from '@fluentui-react-native/icon'; -import { createIconProps, IPressableState } from '@fluentui-react-native/interactive-hooks'; - -/** - * A function which determines if a set of styles should be applied to the compoent given the current state and props of the button. - * - * @param layer The name of the state that is being checked for - * @param state The current state of the button - * @param userProps The props that were passed into the button - * @returns Whether the styles that are assigned to the layer should be applied to the button - */ -export const buttonLookup = (layer: string, state: IPressableState, userProps: ButtonProps): boolean => { - return ( - state[layer] || - userProps[layer] || - layer === userProps['appearance'] || - layer === userProps['size'] || - (!userProps['size'] && layer === getDefaultSize()) || - layer === userProps['shape'] || - (!userProps['shape'] && layer === 'rounded') || - (layer === 'hasContent' && !userProps.iconOnly) || - (layer === 'hasIconAfter' && (userProps.icon || userProps.loading) && userProps.iconPosition === 'after') || - (layer === 'hasIconBefore' && (userProps.icon || userProps.loading) && (!userProps.iconPosition || userProps.iconPosition === 'before')) - ); -}; - -export const Button = compose({ - displayName: buttonName, - ...stylingSettings, - slots: { - root: View, - icon: Icon, - content: Text, - }, - render: (userProps: ButtonProps, useSlots: UseSlots) => { - const button = useButton(userProps); - const iconProps = createIconProps(userProps.icon); - // grab the styled slots - const Slots = useSlots(userProps, (layer) => buttonLookup(layer, button.state, userProps)); - - // now return the handler for finishing render - return (final: ButtonProps, ...children: React.ReactNode[]) => { - const { icon, iconOnly, iconPosition, loading, accessibilityLabel, ...mergedProps } = mergeProps(button.props, final); - - const shouldShowIcon = !loading && icon; - if (__DEV__ && iconOnly) { - React.Children.forEach(children, (child) => { - if (typeof child === 'string') { - console.warn('iconOnly should not be set when Button has content.'); - } - }); - } - - let childText = ''; - if (accessibilityLabel === undefined) { - React.Children.forEach(children, (child) => { - if (typeof child === 'string') { - childText = child; // We only automatically support the one child string. - } - }); - } - const label = accessibilityLabel ?? childText; - - return ( - - {loading && } - {shouldShowIcon && iconPosition === 'before' && } - {React.Children.map(children, (child) => - typeof child === 'string' ? {child} : child, - )} - {shouldShowIcon && iconPosition === 'after' && } - - ); - }; - }, -}); - -export default Button; diff --git a/packages/experimental/Button/src/Button.types.ts b/packages/experimental/Button/src/Button.types.ts deleted file mode 100644 index 248c72d2ff..0000000000 --- a/packages/experimental/Button/src/Button.types.ts +++ /dev/null @@ -1,151 +0,0 @@ -import * as React from 'react'; -import { ViewProps, ViewStyle, ColorValue } from 'react-native'; -import { TextProps } from '@fluentui-react-native/experimental-text'; -import { FontTokens, IBorderTokens, IColorTokens, IShadowTokens, LayoutTokens } from '@fluentui-react-native/tokens'; -import { IFocusable, IPressableHooks, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks'; -import { IconProps, IconSourcesType } from '@fluentui-react-native/icon'; -import { IViewProps } from '@fluentui-react-native/adapters'; - -export const buttonName = 'Button'; -export type ButtonSize = 'small' | 'medium' | 'large'; -export type ButtonAppearance = 'primary' | 'subtle'; -export type ButtonShape = 'rounded' | 'circular' | 'square'; - -export interface ButtonCoreTokens extends LayoutTokens, FontTokens, IBorderTokens, IShadowTokens, IColorTokens { - /** - * The icon color. - */ - iconColor?: ColorValue; - - /** - * The size of the icon. - */ - iconSize?: number; - - /** - * The weight of the lines used when drawing the icon. - */ - iconWeight?: number; - - /** - * The width of the button. - */ - width?: ViewStyle['width']; - - /** - * The amount of spacing between an icon and the content when iconPosition is set to 'before', in pixels - */ - spacingIconContentBefore?: number; - - /** - * The amount of spacing between an icon and the content when iconPosition is set to 'after', in pixels - */ - spacingIconContentAfter?: number; - - /** - * States that can be applied to a button - */ - hovered?: ButtonTokens; - focused?: ButtonTokens; - pressed?: ButtonTokens; - disabled?: ButtonTokens; - hasContent?: ButtonTokens; - hasIconBefore?: ButtonTokens; -} - -export interface ButtonTokens extends ButtonCoreTokens { - /** - * Additional states that can be applied to a button - */ - primary?: ButtonTokens; - subtle?: ButtonTokens; - block?: ButtonTokens; - small?: ButtonTokens; - medium?: ButtonTokens; - large?: ButtonTokens; - rounded?: ButtonTokens; - circular?: ButtonTokens; - square?: ButtonTokens; - hasIconAfter?: ButtonTokens; -} - -export interface ButtonCoreProps extends Omit, 'onPress'> { - /* - * Source URL or name of the icon to show on the Button. - */ - icon?: IconSourcesType; - - /** - * Button contains only icon, there's no text content - * Must be set for button to style correctly when button has not content. - */ - iconOnly?: boolean; - - /** - * A RefObject to access the IButton interface. Use this to access the public methods and properties of the component. - */ - componentRef?: React.RefObject; - - /** - * A callback to call on button click event - */ - onClick?: () => void; - - /** - * Text that should show in a tooltip when the user hovers over a button. - */ - tooltip?: string; -} - -export interface ButtonProps extends ButtonCoreProps { - /** - * A button can have its content and borders styled for greater emphasis or to be subtle. - * - 'primary': Emphasizes the button as a primary action. - * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused. - */ - appearance?: ButtonAppearance; - - /** - * A button can fill the width of its container. - * @default false - */ - block?: boolean; - - /** Sets style of button to a preset size style - * @default 'small' on win32, 'medium' elsewhere - */ - size?: ButtonSize; - - /** - * Button shape: 'rounded' | 'circular' | 'square' - * @default 'rounded' - */ - shape?: ButtonShape; - - /** - * Icon can be placed before or after Button's content. - * @default 'before' - */ - iconPosition?: 'before' | 'after'; - - /** - * A button can show a loading indicator if it is waiting for another action to happen before allowing itself to - * be interacted with. - * @default false - */ - loading?: boolean; -} - -export type ButtonState = IPressableHooks>; - -export interface ButtonSlotProps { - root: React.PropsWithRef; - icon: IconProps; - content: TextProps; -} - -export interface ButtonType { - props: ButtonProps; - tokens: ButtonTokens; - slotProps: ButtonSlotProps; -} diff --git a/packages/experimental/Button/src/FAB/FAB.android.tsx b/packages/experimental/Button/src/FAB/FAB.android.tsx deleted file mode 100644 index c9e0e2cd79..0000000000 --- a/packages/experimental/Button/src/FAB/FAB.android.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import { FAB } from './FABCore'; -export { FAB } from './FABCore'; - -export default FAB; diff --git a/packages/experimental/Button/src/FAB/FAB.ios.tsx b/packages/experimental/Button/src/FAB/FAB.ios.tsx deleted file mode 100644 index c9e0e2cd79..0000000000 --- a/packages/experimental/Button/src/FAB/FAB.ios.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import { FAB } from './FABCore'; -export { FAB } from './FABCore'; - -export default FAB; diff --git a/packages/experimental/Button/src/__snapshots__/Button.test.tsx.snap b/packages/experimental/Button/src/__snapshots__/Button.test.tsx.snap deleted file mode 100644 index 7566167fec..0000000000 --- a/packages/experimental/Button/src/__snapshots__/Button.test.tsx.snap +++ /dev/null @@ -1,546 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Button component tests Button circular 1`] = ` - - - Circular Button - - -`; - -exports[`Button component tests Button composed 1`] = ` - - - Composed Button with RNText - - -`; - -exports[`Button component tests Button customized 1`] = ` - - - Custom Button - - -`; - -exports[`Button component tests Button default 1`] = ` - - - Default Button - - -`; - -exports[`Button component tests Button large 1`] = ` - - - Large Button - - -`; - -exports[`Button component tests Button primary 1`] = ` - - - Primary Button - - -`; - -exports[`Button component tests Button small 1`] = ` - - - Small Button - - -`; - -exports[`Button component tests Button square 1`] = ` - - - Square Button - - -`; - -exports[`Button component tests Button subtle 1`] = ` - - - Subtle Button - - -`; diff --git a/packages/experimental/Button/src/index.ts b/packages/experimental/Button/src/index.ts index a24c1047e1..bbd4fecf89 100644 --- a/packages/experimental/Button/src/index.ts +++ b/packages/experimental/Button/src/index.ts @@ -1,5 +1,35 @@ -export * from './Button.types'; -export * from './Button'; -export * from './CompoundButton'; -export * from './FAB'; -export * from './ToggleButton'; +if (__DEV__) { + console.warn( + '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 ButtonV1 from @fluentui-react-native/button.', + ); +} + +export { + buttonNameV1 as buttonName, + ButtonV1 as Button, + ButtonSize, + ButtonAppearance, + ButtonShape, + ButtonCoreTokens, + ButtonTokens, + ButtonCoreProps, + ButtonProps, + ButtonState, + ButtonSlotProps, + ButtonType, + compoundButtonName, + CompoundButton, + CompoundButtonTokens, + CompoundButtonProps, + CompoundButtonSlotProps, + CompoundButtonType, + fabName, + FAB, + FABType, + toggleButtonName, + ToggleButton, + ToggleButtonTokens, + ToggleButtonProps, + ToggleButtonSlotProps, + ToggleButtonType, +} from '@fluentui-react-native/button';