@fluentui-react-native/tester 0.151.0 → 0.151.1

package/src/TestComponents/Chip/ChipDefault.tsx

@@ -0,0 +1,117 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import React, { useCallback } from 'react';
+import { StyleSheet, View, ToastAndroid } from 'react-native';
+
+import { Chip } from '@fluentui-react-native/chip';
+import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+import { Switch } from '@fluentui-react-native/switch';
+import { Text } from '@fluentui-react-native/text';
+
+import { svgProps } from '../Common/iconExamples';
+
+export const ChipDefault: React.FunctionComponent = () => {
+  const [showCloseIcon, setShowCloseIcon] = React.useState<boolean>(false);
+  const toggleActivityState = useCallback((_e: InteractionEvent, isActive: boolean) => setShowCloseIcon(isActive), []);
+  const showToast = () => {
+    ToastAndroid.show('Close icon clicked!', ToastAndroid.SHORT);
+  };
+
+  return (
+    <View>
+      <Switch label={'Show Close Icon'} defaultChecked={showCloseIcon} onChange={toggleActivityState} />
+      <View style={styles.rowStyle}>
+        <Chip size="small" style={styles.rowGap} showCloseIcon={showCloseIcon} closeIconOnPress={showToast}>
+          Neutral
+        </Chip>
+        <Chip size="medium" icon={{ svgSource: svgProps }} showCloseIcon={showCloseIcon} closeIconOnPress={showToast}>
+          Neutral
+        </Chip>
+      </View>
+      <View style={styles.rowStyle}>
+        <Chip size="small" style={styles.rowGap} disabled showCloseIcon={showCloseIcon} closeIconOnPress={showToast}>
+          Disabled
+        </Chip>
+        <Chip size="medium" icon={{ svgSource: svgProps }} disabled showCloseIcon={showCloseIcon} closeIconOnPress={showToast}>
+          Disabled
+        </Chip>
+      </View>
+      <View style={styles.rowStyle}>
+        <Chip size="small" chipColor="brand" style={styles.rowGap} showCloseIcon={showCloseIcon} closeIconOnPress={showToast}>
+          Brand
+        </Chip>
+        <Chip size="medium" chipColor="brand" icon={{ svgSource: svgProps }} showCloseIcon={showCloseIcon} closeIconOnPress={showToast}>
+          Brand
+        </Chip>
+      </View>
+      <View style={styles.rowStyle}>
+        <Chip size="small" chipColor="danger" style={styles.rowGap} showCloseIcon={showCloseIcon} closeIconOnPress={showToast}>
+          Danger
+        </Chip>
+        <Chip size="medium" chipColor="danger" icon={{ svgSource: svgProps }} showCloseIcon={showCloseIcon} closeIconOnPress={showToast}>
+          Danger
+        </Chip>
+      </View>
+      <View style={styles.rowStyle}>
+        <Chip size="small" chipColor="severe" style={styles.rowGap} showCloseIcon={showCloseIcon} closeIconOnPress={showToast}>
+          Severe
+        </Chip>
+        <Chip size="medium" chipColor="severe" icon={{ svgSource: svgProps }} showCloseIcon={showCloseIcon} closeIconOnPress={showToast}>
+          Severe
+        </Chip>
+      </View>
+      <View style={styles.rowStyle}>
+        <Chip size="small" chipColor="warning" style={styles.rowGap} showCloseIcon={showCloseIcon} closeIconOnPress={showToast}>
+          Warning
+        </Chip>
+        <Chip size="medium" chipColor="warning" icon={{ svgSource: svgProps }} showCloseIcon={showCloseIcon} closeIconOnPress={showToast}>
+          Warning
+        </Chip>
+      </View>
+      <View style={styles.rowStyle}>
+        <Chip size="small" chipColor="success" style={styles.rowGap} showCloseIcon={showCloseIcon} closeIconOnPress={showToast}>
+          Success
+        </Chip>
+        <Chip size="medium" chipColor="success" icon={{ svgSource: svgProps }} showCloseIcon={showCloseIcon} closeIconOnPress={showToast}>
+          Success
+        </Chip>
+      </View>
+      <Text>Search Bar Chip</Text>
+      <View style={styles.rowStyle}>
+        <Chip searchBar size="small" style={styles.rowGap} showCloseIcon={showCloseIcon} closeIconOnPress={showToast}>
+          Chip
+        </Chip>
+        <Chip searchBar size="medium" icon={{ svgSource: svgProps }} showCloseIcon={showCloseIcon} closeIconOnPress={showToast}>
+          Chip
+        </Chip>
+      </View>
+      <View style={styles.rowStyle}>
+        <Chip searchBar size="small" chipColor="brand" style={styles.rowGap} showCloseIcon={showCloseIcon} closeIconOnPress={showToast}>
+          Brand
+        </Chip>
+        <Chip
+          searchBar
+          size="medium"
+          chipColor="brand"
+          icon={{ svgSource: svgProps }}
+          showCloseIcon={showCloseIcon}
+          closeIconOnPress={showToast}
+        >
+          Brand
+        </Chip>
+      </View>
+      <View style={styles.rowStyle}>
+        <Chip searchBar size="small" style={styles.rowGap} disabled showCloseIcon={showCloseIcon} closeIconOnPress={showToast}>
+          Disabled
+        </Chip>
+        <Chip searchBar size="medium" icon={{ svgSource: svgProps }} disabled showCloseIcon={showCloseIcon} closeIconOnPress={showToast}>
+          Disabled
+        </Chip>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  rowStyle: { flexDirection: 'row', marginTop: 6 },
+  rowGap: { marginRight: 6 },
+});

package/src/TestComponents/Chip/ChipTest.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+import { ChipDefault } from './ChipDefault';
+import { E2EChipTest } from './E2EChipTest';
+import { CHIP_TESTPAGE } from '../../../../E2E/src/Chip/consts';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
+
+const chipSections: TestSection[] = [
+  {
+    name: 'Default Chip',
+    testID: CHIP_TESTPAGE,
+    component: ChipDefault,
+  },
+];
+
+const e2eSections: TestSection[] = [
+  {
+    name: 'Chip E2E',
+    component: E2EChipTest,
+  },
+];
+
+export const ChipTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Backlog',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Backlog',
+    macosStatus: 'Backlog',
+    androidStatus: 'Experimental',
+  };
+
+  const description =
+    'Chips are compact representations of entities (most commonly, people) that can be typed in, deleted or dragged easily.';
+
+  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Chip/SPEC.md';
+
+  return <Test name="Chip Test" description={description} spec={spec} sections={chipSections} status={status} e2eSections={e2eSections} />;
+};

package/src/TestComponents/Chip/E2EChipTest.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { Chip } from '@fluentui-react-native/chip';
+import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+import { Text } from '@fluentui-react-native/text';
+
+import {
+  CHIP_CALLBACK_TEXT_END_STATE,
+  CHIP_CALLBACK_TEXT_START_STATE,
+  CHIP_TEST_COMPONENT,
+  CHIP_TEXT,
+} from '../../../../E2E/src/Chip/consts';
+import { testProps } from '../Common/TestProps';
+
+export const E2EChipTest: React.FunctionComponent = () => {
+  const [text, setText] = React.useState<string>(CHIP_CALLBACK_TEXT_START_STATE);
+  const showTextOnSelection = React.useCallback(
+    (_e: InteractionEvent, isSelected: boolean) => setText(isSelected ? CHIP_CALLBACK_TEXT_END_STATE : CHIP_CALLBACK_TEXT_START_STATE),
+    [],
+  );
+  return (
+    <View>
+      <Text {...testProps(CHIP_TEXT)}>{text}</Text>
+      <Chip
+        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+        {...testProps(CHIP_TEST_COMPONENT)}
+        chipColor="success"
+        showCloseIcon
+        onSelectionChange={showTextOnSelection}
+      >
+        Basic Chip
+      </Chip>
+    </View>
+  );
+};

package/src/TestComponents/Chip/index.ts

@@ -0,0 +1 @@
+export * from './ChipTest';

package/src/testPages.ts

@@ -6,6 +6,7 @@ import { ButtonTest } from './TestComponents/Button';
 import { CalloutTest } from './TestComponents/Callout';
 import { CheckboxLegacyTest } from './TestComponents/CheckboxLegacy';
 import { CheckboxV1Test } from './TestComponents/CheckboxV1';
+import { ChipTest } from './TestComponents/Chip';
 import { ColorTokensTest } from './TestComponents/ColorTokens';
 import { ContextualMenuTest } from './TestComponents/ContextualMenu';
 import { CornerRadiusTokensTest } from './TestComponents/CornerRadius';
@@ -94,6 +95,12 @@ export const tests: TestDescription[] = [
     testPageButton: Constants.HOMEPAGE_CHECKBOXV1_BUTTON,
     platforms: ['android', 'ios', 'macos', 'win32'], // 'windows': GH#935: Temporarily disabling while SVGs don't work in windows
   },
+  {
+    name: 'Chip',
+    component: ChipTest,
+    testPageButton: Constants.HOMEPAGE_CHIP_BUTTON,
+    platforms: ['android'],
+  },
   {
     name: 'Color Tokens',
     component: ColorTokensTest,