@fluentui-react-native/tester 0.170.50 → 0.170.51

package/src/TestComponents/CheckboxLegacy/CheckboxLegacyTest.tsx

@@ -1,204 +0,0 @@
-import * as React from 'react';
-import { View, TextInput } from 'react-native';
-
-import { Checkbox } from '@fluentui/react-native';
-import { CHECKBOX_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-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 { CheckboxLegacyE2ETest } from './CheckboxLegacyE2ETest';
-import { commonTestStyles as commonStyles } from '../Common/styles';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-function onChangeUncontrolled(isChecked: boolean) {
-  console.log(isChecked);
-}
-
-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={true}
-        accessibilityLabel="Hello there"
-      />
-      <Checkbox label="Disabled checkbox" onChange={onChangeUncontrolled} defaultChecked={false} disabled={true} />
-      <Checkbox label="Disabled checked checkbox" onChange={onChangeUncontrolled} defaultChecked={true} disabled={true} />
-      <Checkbox label="Checkbox will display a tooltip" onChange={onChangeUncontrolled} tooltip="This is a tooltip" />
-    </View>
-  );
-};
-
-const OtherCheckbox: React.FunctionComponent = () => {
-  const [isCheckedControlled1, setCheckedControlled1] = React.useState(false);
-  const onChangeControlled1 = React.useCallback((checked) => {
-    setCheckedControlled1(checked);
-  }, []);
-
-  const [isCheckedControlled2, setCheckedControlled2] = React.useState(true);
-  const onChangeControlled2 = React.useCallback((checked) => {
-    setCheckedControlled2(checked);
-  }, []);
-
-  return (
-    <View>
-      <Checkbox label="This is a controlled Checkbox" onChange={onChangeControlled1} checked={isCheckedControlled1} />
-      <Checkbox
-        label="Checkbox rendered with boxSide 'end' (controlled)"
-        onChange={onChangeControlled2}
-        boxSide="end"
-        checked={isCheckedControlled2}
-      />
-    </View>
-  );
-};
-
-const CircularCheckbox = Checkbox.customize({ tokens: { borderRadius: 50 } });
-
-const CircleColorCheckbox = Checkbox.customize({
-  tokens: { borderRadius: 50, checkboxBackgroundColor: 'white' },
-  _overrides: {
-    checked: {
-      tokens: {
-        checkboxBackgroundColor: 'green',
-        checkboxBorderColor: 'green',
-        checkmarkColor: 'white',
-      },
-    },
-    focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
-    hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
-    pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } },
-  },
-});
-
-const HoverCheckbox = Checkbox.customize({
-  _overrides: {
-    checked: {
-      tokens: {
-        checkboxBackgroundColor: 'black',
-        checkmarkColor: 'white',
-      },
-    },
-    hovered: {
-      tokens: {
-        checkmarkVisibility: 1,
-      },
-    },
-  },
-});
-
-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({
-    tokens: { checkboxBackgroundColor: 'white' },
-    _overrides: {
-      checked: {
-        tokens: {
-          checkboxBackgroundColor: checkboxColor,
-          checkboxBorderColor: checkboxColor,
-          checkmarkColor: checkmarkColor,
-        },
-      },
-      focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
-      hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
-      pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } },
-    },
-  });
-
-  const theme = useTheme();
-  const textBoxBorderStyle = getThemedStyles(theme);
-
-  return (
-    <View>
-      <CircularCheckbox label="A circular checkbox" onChange={onChangeUncontrolled} defaultChecked={false} />
-      <HoverCheckbox label="A checkbox with checkmark visible on hover" onChange={onChangeUncontrolled} defaultChecked={false} />
-      <CircleColorCheckbox label="A circular token-customized checkbox" onChange={onChangeUncontrolled} defaultChecked={true} />
-      <BlueCheckbox
-        label="Token-customized checkbox. Customizable below."
-        onChange={onChangeUncontrolled}
-        boxSide="end"
-        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>
-  );
-};
-
-const checkboxSections: TestSection[] = [
-  {
-    name: 'Basic Checkboxes',
-    testID: CHECKBOX_TESTPAGE,
-    component: BasicCheckbox,
-  },
-  {
-    name: 'Other Implementations',
-    component: OtherCheckbox,
-  },
-  {
-    name: 'Token Customized Checkboxes',
-    component: TokenCheckbox,
-  },
-];
-
-const e2eSections: TestSection[] = [
-  {
-    name: 'Checkbox for E2E Testing',
-    component: CheckboxLegacyE2ETest,
-  },
-];
-
-export const CheckboxLegacyTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Deprecated',
-    uwpStatus: 'Deprecated',
-    iosStatus: 'N/A',
-    macosStatus: 'Deprecated',
-    androidStatus: 'N/A',
-  };
-
-  const description =
-    'Checkboxes give people a way to select one or more items from a group, or switch between two mutually exclusive options (checked or unchecked, on or off).';
-
-  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Checkbox/SPEC.md';
-
-  return (
-    <Test
-      name="Checkbox Legacy Test"
-      description={description}
-      spec={spec}
-      sections={checkboxSections}
-      status={status}
-      e2eSections={e2eSections}
-    />
-  );
-};

package/src/TestComponents/CheckboxLegacy/index.ts

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

package/src/TestComponents/CheckboxV1/BasicCheckboxTest.tsx

@@ -1,22 +0,0 @@
-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>
-  );
-};

package/src/TestComponents/CheckboxV1/CheckboxV1Test.tsx

@@ -1,71 +0,0 @@
-import * as React from 'react';
-import { Platform } from 'react-native';
-
-import { CHECKBOXV1_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-
-import { E2ECheckboxV1Test } from './E2ECheckboxV1Test';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-import { BasicCheckbox } from './BasicCheckboxTest';
-import { DesktopSpecificCheckbox } from './DesktopSpecificCheckboxTest';
-import { OtherCheckbox } from './OtherCheckboxPropsTest';
-import { SizeCheckbox } from './SizeCheckboxTest';
-import { TokenCheckbox } from './TokenCheckboxTest';
-
-const checkboxSections: TestSection[] = [
-  {
-    name: 'Basic Checkboxes',
-    testID: CHECKBOXV1_TESTPAGE,
-    component: BasicCheckbox,
-  },
-  Platform.select({
-    android: null,
-    ios: null,
-    default: {
-      name: 'Size Checkboxes',
-      component: SizeCheckbox,
-    },
-  }),
-  Platform.select({
-    android: null,
-    ios: null,
-    default: {
-      name: 'Desktop Specific Checkboxes',
-      component: DesktopSpecificCheckbox,
-    },
-  }),
-  {
-    name: 'Other Implementations',
-    component: OtherCheckbox,
-  },
-  Platform.select({
-    android: null,
-    ios: null,
-    default: {
-      name: 'Token Customized Checkboxes',
-      component: TokenCheckbox,
-    },
-  }),
-];
-
-const e2eSections: TestSection[] = [
-  {
-    name: 'E2E Testing for CheckboxV1',
-    component: E2ECheckboxV1Test,
-  },
-];
-
-export const CheckboxV1Test: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Production',
-    uwpStatus: 'N/A',
-    iosStatus: 'Production',
-    macosStatus: 'Production',
-    androidStatus: 'Production',
-  };
-
-  const description =
-    'Checkboxes give people a way to select one or more items from a group, or switch between two mutually exclusive options (checked or unchecked, on or off). For macOS, use experimental-checkbox package.';
-
-  return <Test name="CheckboxV1 Test" description={description} sections={checkboxSections} status={status} e2eSections={e2eSections} />;
-};

package/src/TestComponents/CheckboxV1/DesktopSpecificCheckboxTest.tsx

@@ -1,13 +0,0 @@
-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" />
-    </>
-  );
-};

package/src/TestComponents/CheckboxV1/E2ECheckboxV1Test.tsx

@@ -1,56 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import { Text } from '@fluentui/react-native';
-import {
-  CHECKBOXV1_TEST_COMPONENT,
-  CHECKBOXV1_ACCESSIBILITY_LABEL,
-  CHECKBOXV1_NO_A11Y_LABEL_COMPONENT,
-  CHECKBOXV1_TEST_COMPONENT_LABEL,
-  CHECKBOXV1_ON_PRESS,
-} from '@fluentui-react-native/e2e-testing';
-import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { stackStyle } from '../Common/styles';
-import { testProps } from '../Common/TestProps';
-
-export const E2ECheckboxV1Test: React.FunctionComponent = () => {
-  const [checkboxPressed, setCheckboxPressed] = React.useState(false);
-
-  const onClick = React.useCallback(
-    (_e, checked) => {
-      setCheckboxPressed(checked);
-    },
-    [setCheckboxPressed],
-  );
-
-  return (
-    <View>
-      <Stack style={stackStyle}>
-        <Checkbox
-          accessibilityLabel={CHECKBOXV1_ACCESSIBILITY_LABEL}
-          disabled={false}
-          label="Testing accessibilityLabel"
-          onChange={onClick}
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(CHECKBOXV1_TEST_COMPONENT)}
-        />
-        <Checkbox
-          label={CHECKBOXV1_TEST_COMPONENT_LABEL}
-          required
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(CHECKBOXV1_NO_A11Y_LABEL_COMPONENT)}
-        />
-        {checkboxPressed ? (
-          <Text
-            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-            {...testProps(CHECKBOXV1_ON_PRESS)}
-          >
-            Checkbox Selected
-          </Text>
-        ) : null}
-      </Stack>
-    </View>
-  );
-};

package/src/TestComponents/CheckboxV1/OtherCheckboxPropsTest.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import { Platform, Pressable, View } from 'react-native';
-import type { ViewStyle } from 'react-native';
-
-import { ButtonV1 as Button } from '@fluentui-react-native/button';
-import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
-import { TextV1 } from '@fluentui-react-native/text';
-
-import { mobileStyles } from '../Common/styles';
-
-const pressableStyle: ViewStyle = { borderWidth: 1, padding: 4, gap: 4, flexDirection: 'row', alignItems: 'center' };
-
-export const OtherCheckbox: React.FunctionComponent = () => {
-  const [isChecked, setisChecked] = React.useState(false);
-
-  const setCheckedTrue = React.useCallback(() => {
-    setisChecked(true);
-  }, []);
-
-  const setCheckedFalse = React.useCallback(() => {
-    setisChecked(false);
-  }, []);
-
-  const onChange = React.useCallback((_e, checked: boolean) => {
-    setisChecked(checked);
-  }, []);
-
-  const onPress = React.useCallback(() => {
-    setisChecked(!isChecked);
-  }, [isChecked]);
-
-  const memoizedStyles = React.useMemo(
-    () => (Platform.OS === 'android' ? { ...mobileStyles.containerSpacedEvenly, height: 150 } : { gap: 8 }),
-    [],
-  );
-
-  return (
-    <View style={memoizedStyles}>
-      <View>
-        <Button onClick={setCheckedTrue} size="small">
-          Check controlled checkboxes below
-        </Button>
-        <Button onClick={setCheckedFalse} size="small">
-          Uncheck controlled checkboxes below
-        </Button>
-      </View>
-
-      <View>
-        <Checkbox label="This is a controlled Checkbox" checked={isChecked} onChange={onChange} />
-        <Pressable style={pressableStyle} onPress={onPress}>
-          <Checkbox checked={isChecked} onChange={onChange} />
-          <TextV1>A controlled checkbox in a Pressable. Pressing Pressable also toggles Checkbox</TextV1>
-        </Pressable>
-
-        {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>
-    </View>
-  );
-};

package/src/TestComponents/CheckboxV1/SizeCheckboxTest.tsx

@@ -1,14 +0,0 @@
-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" />
-    </>
-  );
-};

package/src/TestComponents/CheckboxV1/TokenCheckboxTest.tsx

@@ -1,106 +0,0 @@
-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>
-  );
-};

package/src/TestComponents/CheckboxV1/index.ts

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

package/src/TestComponents/Chip/ChipDefault.tsx

@@ -1,116 +0,0 @@
-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 },
-});