-
Notifications
You must be signed in to change notification settings - Fork 163
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Split checkbox tests into their own files (#3833)
* Split up checkbox tests into their own files * Change files
- Loading branch information
1 parent
f4469e4
commit 7bec589
Showing
7 changed files
with
208 additions
and
172 deletions.
There are no files selected for viewing
22 changes: 22 additions & 0 deletions
22
apps/fluent-tester/src/TestComponents/CheckboxV1/BasicCheckboxTest.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <View> | ||
| <Checkbox label="Unchecked checkbox (undefined)" onChange={onChangeUncontrolled} /> | ||
| <Checkbox label="Unchecked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked={false} /> | ||
| <Checkbox label="Checked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked accessibilityLabel="Hello there" /> | ||
| <Checkbox label="Disabled checkbox" disabled /> | ||
| <Checkbox label="Disabled checked checkbox" defaultChecked disabled /> | ||
| <Checkbox label="A required checkbox" required /> | ||
| </View> | ||
| ); | ||
| }; |
178 changes: 6 additions & 172 deletions
178
apps/fluent-tester/src/TestComponents/CheckboxV1/CheckboxV1Test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 13 additions & 0 deletions
13
apps/fluent-tester/src/TestComponents/CheckboxV1/DesktopSpecificCheckboxTest.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { Checkbox } from '@fluentui-react-native/experimental-checkbox'; | ||
|
|
||
| export const DesktopSpecificCheckbox: React.FunctionComponent = () => { | ||
| return ( | ||
| <> | ||
| <Checkbox label="Checkbox will display a tooltip" tooltip="This is a tooltip" /> | ||
| <Checkbox label="A circular checkbox" shape="circular" /> | ||
| <Checkbox label="A checkbox with label placed before" labelPosition="before" /> | ||
| </> | ||
| ); | ||
| }; |
40 changes: 40 additions & 0 deletions
40
apps/fluent-tester/src/TestComponents/CheckboxV1/OtherCheckboxPropsTest.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <View style={memoizedStyles}> | ||
| <Button onClick={setCheckedTrue} size="small"> | ||
| Check controlled checkboxes below | ||
| </Button> | ||
| <Button onClick={setCheckedFalse} size="small"> | ||
| Uncheck controlled checkboxes below | ||
| </Button> | ||
|
|
||
| <Checkbox label="This is a controlled Checkbox" checked={isChecked} /> | ||
| {Platform.OS !== 'android' && ( | ||
| <> | ||
| <Checkbox label="Checkbox rendered with labelPosition 'before' (controlled)" labelPosition="before" checked={isChecked} /> | ||
| <Checkbox label="A required checkbox with other required text" required="**" /> | ||
| </> | ||
| )} | ||
| </View> | ||
| ); | ||
| }; |
14 changes: 14 additions & 0 deletions
14
apps/fluent-tester/src/TestComponents/CheckboxV1/SizeCheckboxTest.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { Checkbox } from '@fluentui-react-native/experimental-checkbox'; | ||
|
|
||
| export const SizeCheckbox: React.FunctionComponent = () => { | ||
| return ( | ||
| <> | ||
| <Checkbox tooltip="Medium checkbox" size="medium" /> | ||
| <Checkbox tooltip="Large checkbox" size="large" /> | ||
| <Checkbox label="Medium checkbox" size="medium" /> | ||
| <Checkbox label="Large checkbox" size="large" /> | ||
| </> | ||
| ); | ||
| }; |
106 changes: 106 additions & 0 deletions
106
apps/fluent-tester/src/TestComponents/CheckboxV1/TokenCheckboxTest.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <View> | ||
| {Platform.OS !== 'android' && ( | ||
| <> | ||
| <HoverCheckbox label="A checkbox with checkmark visible on hover" onChange={onChangeUncontrolled} /> | ||
| <CircleColorCheckbox | ||
| label="A circular token-customized checkbox" | ||
| shape="circular" | ||
| onChange={onChangeUncontrolled} | ||
| defaultChecked | ||
| /> | ||
| </> | ||
| )} | ||
|
|
||
| <BigLabelCheckbox label="A checkbox with a bold large font label" /> | ||
| <ComposedCheckbox label="A checkbox with a hot pink label and no padding" /> | ||
|
|
||
| <BlueCheckbox | ||
| label="Token-customized checkbox. Customizable below." | ||
| onChange={onChangeUncontrolled} | ||
| labelPosition="before" | ||
| defaultChecked={false} | ||
| /> | ||
| <TextInput | ||
| accessibilityLabel="Background color" | ||
| style={textBoxBorderStyle.textbox} | ||
| placeholder="Background color" | ||
| blurOnSubmit={true} | ||
| onSubmitEditing={(e) => { | ||
| setCheckboxColor(e.nativeEvent.text); | ||
| }} | ||
| /> | ||
|
|
||
| <TextInput | ||
| accessibilityLabel="Checkmark color" | ||
| style={textBoxBorderStyle.textbox} | ||
| placeholder="Checkmark color" | ||
| blurOnSubmit={true} | ||
| onSubmitEditing={(e) => { | ||
| setCheckmarkColor(e.nativeEvent.text); | ||
| }} | ||
| /> | ||
| </View> | ||
| ); | ||
| }; |
7 changes: 7 additions & 0 deletions
7
change/@fluentui-react-native-tester-bee09dc9-b280-4a47-98c5-6a1690461be4.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "patch", | ||
| "comment": "Split up checkbox tests into their own files", | ||
| "packageName": "@fluentui-react-native/tester", | ||
| "email": "[email protected]", | ||
| "dependentChangeType": "patch" | ||
| } |