@fluentui-react-native/tester-core 0.1.1

package/src/TestComponents/Chip/ChipTest.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+import { CHIP_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+
+import { ChipDefault } from './ChipDefault';
+import { E2EChipTest } from './E2EChipTest';
+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: 'N/A',
+    uwpStatus: 'N/A',
+    iosStatus: 'Production',
+    macosStatus: 'N/A',
+    androidStatus: 'Production',
+  };
+
+  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 {
+  CHIP_CALLBACK_TEXT_END_STATE,
+  CHIP_CALLBACK_TEXT_START_STATE,
+  CHIP_TEST_COMPONENT,
+  CHIP_TEXT,
+} from '@fluentui-react-native/e2e-testing';
+import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+import { Text } from '@fluentui-react-native/text';
+
+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/TestComponents/ColorTokens/ColorTokenTest.tsx

@@ -0,0 +1,251 @@
+import * as React from 'react';
+import type { ViewStyle, ColorValue } from 'react-native';
+import { View, StyleSheet, Platform } from 'react-native';
+
+import { Text, ToggleButton } from '@fluentui/react-native';
+import { createAliasTokens } from '@fluentui-react-native/default-theme';
+import { COLORTOKENS_TEST_COMPONENT, COLORTOKEN_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+import type { SvgIconProps } from '@fluentui-react-native/icon';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+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 { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
+import { createOfficeAliasTokens } from '@fluentui-react-native/win32-theme';
+import type { SvgProps } from 'react-native-svg';
+import Svg, { G, Path } from 'react-native-svg';
+
+import { commonTestStyles } from '../Common/styles';
+import { testProps } from '../Common/TestProps';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
+
+const getThemedStyles = themedStyleSheet((theme: Theme) => {
+  return {
+    swatch: {
+      width: 80,
+      height: 20,
+      marginRight: 5,
+      borderWidth: 2,
+      borderColor: theme.colors.bodyText,
+    },
+  };
+});
+
+const styles = StyleSheet.create({
+  swatchItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 5,
+  },
+  stackStyle: {
+    borderWidth: 2,
+    padding: 12,
+    margin: 8,
+  },
+  statusView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    margin: 8,
+  },
+  // Needed to ensure that with the button is toggled on, the top of the newly shown
+  // content is visible so the user knows to scroll down
+  toggleButtonAreaPadding: { paddingBottom: 10 },
+  colorDescriptionStyle: { flexDirection: 'row', flexWrap: 'wrap', flex: 1 },
+  colorDescriptionNamePadding: { paddingRight: 5 },
+});
+
+const getSwatchColorStyle = (colorName: string, colorValue: ColorValue): ViewStyle => {
+  styles[colorName] = styles[colorName] || { backgroundColor: colorValue };
+  return styles[colorName];
+};
+
+type ColorTokenProps = { colorValue: ColorValue; colorName: string };
+const ColorToken: React.FunctionComponent<ColorTokenProps> = (p: ColorTokenProps) => {
+  if (p.colorValue === undefined) {
+    console.warn('Color token ' + p.colorName + ' is undefined');
+  }
+
+  const themedStyles = getThemedStyles(useTheme());
+  return (
+    <View style={styles.swatchItem}>
+      <View
+        style={[getSwatchColorStyle(p.colorName, p.colorValue), themedStyles.swatch]}
+        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+        {...testProps(COLORTOKENS_TEST_COMPONENT)}
+      />
+      <View style={styles.colorDescriptionStyle}>
+        <Text style={styles.colorDescriptionNamePadding}>{p.colorName}</Text>
+        <Text>{'(' + p.colorValue?.toString() + ')'}</Text>
+      </View>
+    </View>
+  );
+};
+
+const getSwatch = (item) => {
+  const { colorValue, colorName } = item;
+  return <ColorToken key={colorName} colorValue={colorValue} colorName={colorName} />;
+};
+
+/// Alias color tokens
+
+const AliasColorTokensSwatchList: React.FunctionComponent = () => {
+  const theme = useTheme();
+
+  const isOfficeTheme =
+    theme.name === 'White' ||
+    theme.name === 'Colorful' ||
+    theme.name === 'DarkGray' ||
+    theme.name === 'Black' ||
+    theme.name === 'HighContrast';
+
+  const aliasColorTokens = isOfficeTheme
+    ? createOfficeAliasTokens(theme.name)
+    : createAliasTokens(getCurrentAppearance(theme.host.appearance, 'light'));
+
+  const aggregator = React.useCallback(
+    (colorName: string) => {
+      return { colorName: colorName, colorValue: aliasColorTokens[colorName] };
+    },
+    [aliasColorTokens],
+  );
+
+  const flattenArray = React.useCallback(() => {
+    return Object.keys(aliasColorTokens).map(aggregator);
+  }, [aliasColorTokens, aggregator]);
+
+  const aliasColorTokensAsArray = React.useMemo(flattenArray, [flattenArray]);
+
+  const renderSwatch = React.useCallback(getSwatch, []);
+
+  return (
+    <View style={commonTestStyles.view}>
+      <View style={styles.stackStyle}>{aliasColorTokensAsArray.map((item) => renderSwatch(item))}</View>
+    </View>
+  );
+};
+
+/// Global color tokens - neutral
+
+const globalNeutralColorNamesSortedDarkToLight = Object.keys(globalTokens.color)
+  .filter((globalColorName) => globalColorName.includes('grey') || globalColorName === 'black' || globalColorName === 'white')
+  .sort((color1, color2) => {
+    const color1hex = globalTokens.color[color1];
+    const color2hex = globalTokens.color[color2];
+    // All global color tokens are hex based colors, so we can make the assumption that ordering the hex values alphabetically
+    // will order the colors from dark to light
+    return color1hex === color2hex ? 0 : color1hex < color2hex ? -1 : 1;
+  });
+
+const globalNeutralColorTokensAsArray = globalNeutralColorNamesSortedDarkToLight.map((colorName: string) => {
+  return {
+    colorName: colorName,
+    colorValue: globalTokens.color[colorName],
+  };
+});
+
+const GlobalNeutralColorTokensSwatchList: React.FunctionComponent = () => {
+  const renderSwatch = React.useCallback(getSwatch, []);
+
+  return (
+    <View style={commonTestStyles.view}>
+      <View style={styles.stackStyle}>{globalNeutralColorTokensAsArray.map((item) => renderSwatch(item))}</View>
+    </View>
+  );
+};
+
+/// Global color tokens - shared
+
+const globalSharedColorNames = Object.keys(globalTokens.color).filter((key) => globalTokens.color[key].primary !== undefined);
+const globalSharedColorVariantsSortedDarkToLight = Object.keys(globalTokens.color.red).sort((color1, color2) => {
+  const color1hex = globalTokens.color.red[color1];
+  const color2hex = globalTokens.color.red[color2];
+  // All global color tokens are hex based colors, so we can make the assumption that ordering the hex values alphabetically
+  // will order the colors from dark to light
+  return color1hex === color2hex ? 0 : color1hex < color2hex ? -1 : 1;
+});
+const globalSharedColorTokensAsArray = globalSharedColorNames
+  .map((sharedColorName) => {
+    return globalSharedColorVariantsSortedDarkToLight.map((variant) => {
+      return {
+        colorName: sharedColorName + '.' + variant,
+        colorValue: globalTokens.color[sharedColorName][variant],
+      };
+    });
+  })
+  .reduce((accumulator, sharedColor) => accumulator.concat(sharedColor));
+
+const GlobalSharedColorTokensSwatchList: React.FunctionComponent = () => {
+  const renderSwatch = React.useCallback(getSwatch, []);
+
+  const [showGlobalSharedColors, setShowGlobalSharedColors] = React.useState(false);
+
+  const toggleSvg: React.FunctionComponent<SvgProps> = () => {
+    const plusPath =
+      'M6.5 1.75C6.5 1.33579 6.16421 1 5.75 1C5.33579 1 5 1.33579 5 1.75V5H1.75C1.33579 5 1 5.33579 1 5.75C1 6.16421 1.33579 6.5 1.75 6.5H5V9.75C5 10.1642 5.33579 10.5 5.75 10.5C6.16421 10.5 6.5 10.1642 6.5 9.75V6.5H9.75C10.1642 6.5 10.5 6.16421 10.5 5.75C10.5 5.33579 10.1642 5 9.75 5H6.5V1.75Z';
+    const minusPath = 'M2.75 5.25h6.5s0.75 0 0.75 0.75v0s0 0.75 -0.75 0.75h-6.5s-0.75 0 -0.75 -0.75v0s0 -0.75 0.75 -0.75';
+
+    const path = showGlobalSharedColors ? minusPath : plusPath;
+    return (
+      <Svg>
+        <G>
+          <Path d={path} fill="black" />
+        </G>
+      </Svg>
+    );
+  };
+
+  const svgProps: SvgIconProps = { src: toggleSvg };
+  const plusCodepoint = 0x2795;
+  const minusCodepoint = 0x2796;
+  const fontIconProps = {
+    codepoint: showGlobalSharedColors ? minusCodepoint : plusCodepoint,
+    fontSize: 10,
+  };
+  const toggleIconProps = Platform.OS === 'windows' ? { fontSource: fontIconProps } : { svgSource: svgProps, width: 12, height: 12 };
+
+  return (
+    <View style={styles.toggleButtonAreaPadding}>
+      <View style={styles.statusView}>
+        <Text variant="subheaderStandard">Show color tokens</Text>
+        <ToggleButton iconOnly={true} icon={toggleIconProps} onClick={() => setShowGlobalSharedColors(!showGlobalSharedColors)} />
+      </View>
+      {showGlobalSharedColors && (
+        <View style={commonTestStyles.view}>
+          <View style={styles.stackStyle}>{globalSharedColorTokensAsArray.map((item) => renderSwatch(item))}</View>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const themeSections: TestSection[] = [
+  {
+    name: 'Alias Color Tokens',
+    testID: COLORTOKEN_TESTPAGE,
+    component: () => <AliasColorTokensSwatchList />,
+  },
+  {
+    name: 'Global Color Tokens - Neutral Colors',
+    component: () => <GlobalNeutralColorTokensSwatchList />,
+  },
+  {
+    name: 'Global Color Tokens - Shared Colors',
+    component: () => <GlobalSharedColorTokensSwatchList />,
+  },
+];
+
+export const ColorTokensTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Production',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Production',
+    macosStatus: 'Backlog',
+    androidStatus: 'Production',
+  };
+
+  const description = 'Alias and global tokens given from token pipeline. Used to style components.';
+
+  return <Test name="Color Tokens Test" description={description} sections={themeSections} status={status} />;
+};

package/src/TestComponents/ColorTokens/index.ts

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

package/src/TestComponents/Common/AlignmentPicker.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { IconAlignment } from '@fluentui/react-native';
+
+import { MenuPicker } from './MenuPicker';
+import { undefinedText } from '../PersonaCoin/styles';
+
+const alignmentValues: Array<typeof undefinedText | IconAlignment> = [undefinedText, 'start', 'center', 'end'];
+
+interface IAlignmentPickerProps {
+  style?: StyleProp<ViewStyle>;
+  label: string;
+  onSelectionChange: (value: IconAlignment) => void;
+}
+
+export const AlignmentPicker: React.FunctionComponent<IAlignmentPickerProps> = (props: IAlignmentPickerProps) => {
+  const { label, onSelectionChange, style } = props;
+  const [selectedValue, setSelectedValue] = React.useState<IconAlignment>();
+  const alignmentCollection = alignmentValues.map((value) => {
+    return {
+      label: value,
+      value: value,
+    };
+  });
+  return (
+    <MenuPicker
+      style={style}
+      prompt={label}
+      selected={selectedValue || undefinedText}
+      onChange={(value: IconAlignment, index: number) => {
+        const alignmentValue = index == 0 ? undefined : value;
+        onSelectionChange(alignmentValue);
+        setSelectedValue(alignmentValue);
+      }}
+      collection={alignmentCollection}
+    />
+  );
+};

package/src/TestComponents/Common/MenuPicker.android.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+
+import { Picker } from '@react-native-picker/picker';
+
+import type { CollectionItem, MenuPickerProps } from './MenuPicker.types';
+import { testProps } from './TestProps';
+export type { CollectionItem, MenuPickerProps };
+
+/*
+ * The MenuPicker was created because the RN Core Picker was deprecated (preventing us from updating to RN 0.66).
+ * MenuPicker uses the community Picker package for Android
+ */
+
+export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (props: MenuPickerProps) => {
+  const { prompt, selected, onChange, collection, style, testID } = props;
+  let selectedItemKey;
+
+  collection.forEach((item) => {
+    if (item.value == selected) {
+      selectedItemKey = item.value;
+    }
+  });
+
+  return (
+    <Picker
+      prompt={prompt}
+      selectedValue={selectedItemKey}
+      onValueChange={(value: string, index: number) => onChange(value, index)}
+      style={{ ...style }}
+      /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+      {...testProps(testID)}
+    >
+      {collection.map((item, index) => (
+        <Picker.Item
+          label={item.label}
+          key={index}
+          value={item.value} /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(item.testID)}
+        />
+      ))}
+    </Picker>
+  );
+};

package/src/TestComponents/Common/MenuPicker.desktop.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import { ButtonV1 as Button, Text } from '@fluentui/react-native';
+import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
+import { SvgXml } from 'react-native-svg';
+
+import type { MenuPickerProps, CollectionItem } from './MenuPicker.types';
+
+export type { MenuPickerProps, CollectionItem };
+
+const chevronXml = `
+<svg width="12" height="16" viewBox="0 0 11 6" color="#000">
+  <path fill='currentColor' d='M0.646447 0.646447C0.841709 0.451184 1.15829 0.451184 1.35355 0.646447L5.5 4.79289L9.64645 0.646447C9.84171 0.451185 10.1583 0.451185 10.3536 0.646447C10.5488 0.841709 10.5488 1.15829 10.3536 1.35355L5.85355 5.85355C5.65829 6.04882 5.34171 6.04882 5.14645 5.85355L0.646447 1.35355C0.451184 1.15829 0.451184 0.841709 0.646447 0.646447Z' />
+</svg>`;
+
+export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (props: MenuPickerProps) => {
+  const { prompt, selected, onChange, collection } = props;
+
+  let label;
+  collection.forEach((item) => {
+    if (item.value == selected) {
+      label = item.label;
+    }
+  });
+
+  return (
+    <View style={menuPickerStyles.container}>
+      <Text style={menuPickerStyles.prompt}>{prompt}</Text>
+      <Menu>
+        <MenuTrigger>
+          <Button>
+            <Text>{label}</Text>
+            <View style={menuPickerStyles.chevronContainer}>
+              <SvgXml xml={chevronXml} />
+            </View>
+          </Button>
+        </MenuTrigger>
+        <MenuPopover>
+          <MenuList>
+            {collection.map((collectionItem: CollectionItem, index: number) => (
+              <MenuItem onClick={() => onChange(collectionItem.value, index)} key={collectionItem.value ?? index}>
+                {collectionItem.label}
+              </MenuItem>
+            ))}
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    </View>
+  );
+};
+
+const menuPickerStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    margin: 5,
+  },
+  prompt: {
+    marginRight: 5,
+  },
+  chevronContainer: {
+    padding: 4,
+  },
+});

package/src/TestComponents/Common/MenuPicker.ios.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
+import { useFluentTheme } from '@fluentui-react-native/framework';
+import { Text } from '@fluentui-react-native/text';
+import { MenuView } from '@react-native-menu/menu';
+import type { MenuAction } from '@react-native-menu/menu';
+import { SvgXml } from 'react-native-svg';
+
+import type { CollectionItem, MenuPickerProps } from './MenuPicker.types';
+import { testProps } from './TestProps';
+
+export type { CollectionItem, MenuPickerProps };
+
+/*
+ * The MenuPicker was created because the RN Core Picker was deprecated (preventing us from updating to RN 0.66).
+ * MenuPicker uses the community MenuView package for iOS
+ */
+
+const chevronXml = `
+<svg width="12" height="16" viewBox="0 0 11 6">
+  <path fill='currentColor' d='M0.646447 0.646447C0.841709 0.451184 1.15829 0.451184 1.35355 0.646447L5.5 4.79289L9.64645 0.646447C9.84171 0.451185 10.1583 0.451185 10.3536 0.646447C10.5488 0.841709 10.5488 1.15829 10.3536 1.35355L5.85355 5.85355C5.65829 6.04882 5.34171 6.04882 5.14645 5.85355L0.646447 1.35355C0.451184 1.15829 0.451184 0.841709 0.646447 0.646447Z' />
+</svg>`;
+
+const styles = StyleSheet.create({
+  menuPickerPromptText: {
+    marginBottom: 4,
+  },
+  menuPickerIconPadding: {
+    paddingLeft: 12,
+  },
+});
+
+export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (props: MenuPickerProps) => {
+  const { prompt, selected, onChange, collection, style, testID } = props;
+  let selectedItemKey;
+
+  collection.forEach((item) => {
+    if (item.value == selected) {
+      selectedItemKey = item.value;
+    }
+  });
+
+  const pickerOptions: MenuAction[] = collection.map((item) => ({
+    id: item.label,
+    title: item.label,
+    state: item.value === selected ? 'on' : 'off',
+  }));
+
+  const theme = useFluentTheme();
+
+  return (
+    <MenuView
+      title={prompt}
+      onPressAction={({ nativeEvent }) => {
+        onChange(nativeEvent.event);
+      }}
+      actions={pickerOptions}
+      style={style}
+      /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+      {...testProps(testID)}
+    >
+      <Text variant="bodySemibold" style={styles.menuPickerPromptText}>
+        {prompt}
+      </Text>
+      <Button appearance="outline">
+        <Text variant="bodySemibold">{selectedItemKey}</Text>
+        <View style={styles.menuPickerIconPadding}>
+          <SvgXml xml={chevronXml} color={theme.colors.bodyText} />
+        </View>
+      </Button>
+    </MenuView>
+  );
+};

package/src/TestComponents/Common/MenuPicker.macos.tsx

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

package/src/TestComponents/Common/MenuPicker.tsx

@@ -0,0 +1,11 @@
+import type { CollectionItem, MenuPickerProps } from './MenuPicker.types';
+export type { CollectionItem, MenuPickerProps };
+
+/*
+ * The MenuPicker was created because the RN Core Picker was deprecated (preventing us from updating to RN 0.66).
+ */
+
+export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (_props: MenuPickerProps) => {
+  console.warn('Platform not supported');
+  return null;
+};

package/src/TestComponents/Common/MenuPicker.types.tsx

@@ -0,0 +1,14 @@
+export interface CollectionItem<T = string> {
+  label: string;
+  value?: T;
+  testID?: string;
+}
+
+export interface MenuPickerProps {
+  prompt?: string;
+  selected?: string;
+  onChange?: (value: any, index?: number) => void;
+  collection?: CollectionItem[];
+  style?: any;
+  testID?: string;
+}

package/src/TestComponents/Common/MenuPicker.win32.tsx

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

package/src/TestComponents/Common/MenuPicker.windows.tsx

@@ -0,0 +1,33 @@
+export * from './MenuPicker.desktop';
+import * as React from 'react';
+import { Button, Text, View, StyleSheet } from 'react-native';
+
+import type { MenuPickerProps, CollectionItem } from './MenuPicker.types';
+export type { MenuPickerProps, CollectionItem };
+
+export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (props: MenuPickerProps) => {
+  const { prompt, onChange, collection } = props;
+  return (
+    <View style={menuPickerStyles.container}>
+      <Text style={menuPickerStyles.prompt}>{prompt}</Text>
+      {collection.map((item: CollectionItem, index: number) => (
+        <Button onPress={() => onChange(item.value, index)} key={index} title={item.label} />
+      ))}
+    </View>
+  );
+};
+
+const menuPickerStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    margin: 5,
+  },
+  prompt: {
+    marginRight: 5,
+  },
+  chevronContainer: {
+    padding: 4,
+  },
+});