@fluentui-react-native/tester-core 0.1.1

package/src/TestComponents/CheckboxLegacy/CheckboxLegacyTest.tsx

@@ -0,0 +1,204 @@
+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

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

package/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 (
+    <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

@@ -0,0 +1,71 @@
+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

@@ -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" />
+    </>
+  );
+};

package/src/TestComponents/CheckboxV1/E2ECheckboxV1Test.tsx

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,64 @@
+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

@@ -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" />
+    </>
+  );
+};

package/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 (
+    <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

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

package/src/TestComponents/Chip/ChipDefault.tsx

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