diff --git a/apps/fluent-tester/src/TestComponents/CheckboxV1/BasicCheckboxTest.tsx b/apps/fluent-tester/src/TestComponents/CheckboxV1/BasicCheckboxTest.tsx new file mode 100644 index 0000000000..c28fb558b4 --- /dev/null +++ b/apps/fluent-tester/src/TestComponents/CheckboxV1/BasicCheckboxTest.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { View } from 'react-native'; + +import { Checkbox } from '@fluentui-react-native/experimental-checkbox'; +import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; + +function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) { + console.log(isChecked); +} + +export const BasicCheckbox: React.FunctionComponent = () => { + return ( + + + + + + + + + ); +}; diff --git a/apps/fluent-tester/src/TestComponents/CheckboxV1/CheckboxV1Test.tsx b/apps/fluent-tester/src/TestComponents/CheckboxV1/CheckboxV1Test.tsx index 35597ce467..6214b8c692 100644 --- a/apps/fluent-tester/src/TestComponents/CheckboxV1/CheckboxV1Test.tsx +++ b/apps/fluent-tester/src/TestComponents/CheckboxV1/CheckboxV1Test.tsx @@ -1,181 +1,15 @@ import * as React from 'react'; -import { View, TextInput, Platform } from 'react-native'; - -import { ButtonV1 as Button } from '@fluentui-react-native/button'; -import { Checkbox } from '@fluentui-react-native/experimental-checkbox'; -import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; -import type { Theme } from '@fluentui-react-native/theme-types'; -import { useTheme } from '@fluentui-react-native/theme-types'; -import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet'; +import { Platform } from 'react-native'; import { E2ECheckboxV1Test } from './E2ECheckboxV1Test'; import { CHECKBOXV1_TESTPAGE } from '../../../../E2E/src/CheckboxV1/consts'; -import { commonTestStyles as commonStyles, mobileStyles } from '../Common/styles'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; - -function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) { - console.log(isChecked); -} - -const BasicCheckbox: React.FunctionComponent = () => { - return ( - - - - - - - - - ); -}; - -const DesktopSpecificCheckbox: React.FunctionComponent = () => { - return ( - <> - - - - - ); -}; - -const SizeCheckbox: React.FunctionComponent = () => { - return ( - - - - - - - ); -}; - -const OtherCheckbox: React.FunctionComponent = () => { - const [isChecked, setisChecked] = React.useState(false); - - const setCheckedTrue = React.useCallback(() => { - setisChecked(true); - }, []); - - const setCheckedFalse = React.useCallback(() => { - setisChecked(false); - }, []); - - const memoizedStyles = React.useMemo(() => (Platform.OS === 'android' ? { ...mobileStyles.containerSpacedEvenly, height: 150 } : {}), []); - - return ( - - - - - - {Platform.OS !== 'android' && ( - <> - - - - )} - - ); -}; - -const CircleColorCheckbox = Checkbox.customize({ - checked: { - checkboxBackgroundColor: 'green', - checkboxBorderColor: 'green', - checkmarkColor: 'white', - }, -}); - -const HoverCheckbox = Checkbox.customize({ - hovered: { - checkmarkOpacity: 1, - }, -}); - -const BigLabelCheckbox = Checkbox.customize({ - label: { - fontSize: 24, - fontWeight: 'bold', - }, -}); - -const ComposedCheckbox = Checkbox.compose({ - slotProps: { - label: { style: { color: 'hotpink' } }, - }, -}); - -const getThemedStyles = themedStyleSheet((t: Theme) => { - return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } }; -}); - -const TokenCheckbox: React.FunctionComponent = () => { - const [checkboxColor, setCheckboxColor] = React.useState('blue'); - const [checkmarkColor, setCheckmarkColor] = React.useState('white'); - - const BlueCheckbox = Checkbox.customize({ - checked: { - checkboxBackgroundColor: checkboxColor, - checkboxBorderColor: checkboxColor, - checkmarkColor: checkmarkColor, - }, - }); - - const theme = useTheme(); - const textBoxBorderStyle = getThemedStyles(theme); - - return ( - - {Platform.OS !== 'android' && ( - <> - - - - )} - - - - - - { - setCheckboxColor(e.nativeEvent.text); - }} - /> - - { - setCheckmarkColor(e.nativeEvent.text); - }} - /> - - ); -}; +import { BasicCheckbox } from './BasicCheckboxTest'; +import { DesktopSpecificCheckbox } from './DesktopSpecificCheckboxTest'; +import { OtherCheckbox } from './OtherCheckboxPropsTest'; +import { SizeCheckbox } from './SizeCheckboxTest'; +import { TokenCheckbox } from './TokenCheckboxTest'; const checkboxSections: TestSection[] = [ { diff --git a/apps/fluent-tester/src/TestComponents/CheckboxV1/DesktopSpecificCheckboxTest.tsx b/apps/fluent-tester/src/TestComponents/CheckboxV1/DesktopSpecificCheckboxTest.tsx new file mode 100644 index 0000000000..208ae7ac53 --- /dev/null +++ b/apps/fluent-tester/src/TestComponents/CheckboxV1/DesktopSpecificCheckboxTest.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +import { Checkbox } from '@fluentui-react-native/experimental-checkbox'; + +export const DesktopSpecificCheckbox: React.FunctionComponent = () => { + return ( + <> + + + + + ); +}; diff --git a/apps/fluent-tester/src/TestComponents/CheckboxV1/OtherCheckboxPropsTest.tsx b/apps/fluent-tester/src/TestComponents/CheckboxV1/OtherCheckboxPropsTest.tsx new file mode 100644 index 0000000000..b212b7b57d --- /dev/null +++ b/apps/fluent-tester/src/TestComponents/CheckboxV1/OtherCheckboxPropsTest.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { Platform, View } from 'react-native'; + +import { ButtonV1 as Button } from '@fluentui-react-native/button'; +import { Checkbox } from '@fluentui-react-native/experimental-checkbox'; + +import { mobileStyles } from '../Common/styles'; + +export const OtherCheckbox: React.FunctionComponent = () => { + const [isChecked, setisChecked] = React.useState(false); + + const setCheckedTrue = React.useCallback(() => { + setisChecked(true); + }, []); + + const setCheckedFalse = React.useCallback(() => { + setisChecked(false); + }, []); + + const memoizedStyles = React.useMemo(() => (Platform.OS === 'android' ? { ...mobileStyles.containerSpacedEvenly, height: 150 } : {}), []); + + return ( + + + + + + {Platform.OS !== 'android' && ( + <> + + + + )} + + ); +}; diff --git a/apps/fluent-tester/src/TestComponents/CheckboxV1/SizeCheckboxTest.tsx b/apps/fluent-tester/src/TestComponents/CheckboxV1/SizeCheckboxTest.tsx new file mode 100644 index 0000000000..230bd1a471 --- /dev/null +++ b/apps/fluent-tester/src/TestComponents/CheckboxV1/SizeCheckboxTest.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +import { Checkbox } from '@fluentui-react-native/experimental-checkbox'; + +export const SizeCheckbox: React.FunctionComponent = () => { + return ( + <> + + + + + + ); +}; diff --git a/apps/fluent-tester/src/TestComponents/CheckboxV1/TokenCheckboxTest.tsx b/apps/fluent-tester/src/TestComponents/CheckboxV1/TokenCheckboxTest.tsx new file mode 100644 index 0000000000..c27c3cadd7 --- /dev/null +++ b/apps/fluent-tester/src/TestComponents/CheckboxV1/TokenCheckboxTest.tsx @@ -0,0 +1,106 @@ +import React from 'react'; +import { View, TextInput, Platform } from 'react-native'; + +import { Checkbox } from '@fluentui-react-native/experimental-checkbox'; +import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; +import type { Theme } from '@fluentui-react-native/theme-types'; +import { useTheme } from '@fluentui-react-native/theme-types'; +import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet'; + +import { commonTestStyles as commonStyles } from '../Common/styles'; + +function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) { + console.log(isChecked); +} + +const CircleColorCheckbox = Checkbox.customize({ + checked: { + checkboxBackgroundColor: 'green', + checkboxBorderColor: 'green', + checkmarkColor: 'white', + }, +}); + +const HoverCheckbox = Checkbox.customize({ + hovered: { + checkmarkOpacity: 1, + }, +}); + +const BigLabelCheckbox = Checkbox.customize({ + label: { + fontSize: 24, + fontWeight: 'bold', + }, +}); + +const ComposedCheckbox = Checkbox.compose({ + slotProps: { + label: { style: { color: 'hotpink' } }, + }, +}); + +const getThemedStyles = themedStyleSheet((t: Theme) => { + return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } }; +}); + +export const TokenCheckbox: React.FunctionComponent = () => { + const [checkboxColor, setCheckboxColor] = React.useState('blue'); + const [checkmarkColor, setCheckmarkColor] = React.useState('white'); + + const BlueCheckbox = Checkbox.customize({ + checked: { + checkboxBackgroundColor: checkboxColor, + checkboxBorderColor: checkboxColor, + checkmarkColor: checkmarkColor, + }, + }); + + const theme = useTheme(); + const textBoxBorderStyle = getThemedStyles(theme); + + return ( + + {Platform.OS !== 'android' && ( + <> + + + + )} + + + + + + { + setCheckboxColor(e.nativeEvent.text); + }} + /> + + { + setCheckmarkColor(e.nativeEvent.text); + }} + /> + + ); +}; diff --git a/change/@fluentui-react-native-tester-bee09dc9-b280-4a47-98c5-6a1690461be4.json b/change/@fluentui-react-native-tester-bee09dc9-b280-4a47-98c5-6a1690461be4.json new file mode 100644 index 0000000000..89e7a72070 --- /dev/null +++ b/change/@fluentui-react-native-tester-bee09dc9-b280-4a47-98c5-6a1690461be4.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Split up checkbox tests into their own files", + "packageName": "@fluentui-react-native/tester", + "email": "ruaraki@microsoft.com", + "dependentChangeType": "patch" +}