@fluentui-react-native/tester 0.170.50 → 0.170.51

package/src/TestComponents/Avatar/BasicAvatar.android.tsx

@@ -1,263 +0,0 @@
-import type { FunctionComponent } from 'react';
-import React from 'react';
-import { View } from 'react-native';
-
-import { Avatar } from '@fluentui-react-native/avatar';
-import type { PresenceBadgeStatus } from '@fluentui-react-native/badge';
-import { PresenceBadgeStatuses } from '@fluentui-react-native/badge';
-import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
-import { Switch } from '@fluentui-react-native/switch';
-
-import { StyledPicker } from '../Common/StyledPicker';
-import { mobileStyles } from '../Common/styles';
-import { steveBallmerPhotoUrl } from '../PersonaCoin/styles';
-
-export const StandardUsage: FunctionComponent = () => {
-  const [status, setStatus] = React.useState<PresenceBadgeStatus>('available');
-  const [activityRing, setActivityRing] = React.useState(false);
-  const [outOfOffice, setOutOfOffice] = React.useState(false);
-
-  const onStatusChange = React.useCallback((value) => setStatus(value), []);
-  const toggleActivityState = (_e: InteractionEvent, isActive: boolean) => {
-    setActivityRing(isActive);
-  };
-  const toggleOutOfOffice = (_e: InteractionEvent, isActive: boolean) => {
-    setOutOfOffice(isActive);
-  };
-  const nameAccessibilityLabel = 'Steve Ballmer';
-
-  return (
-    <View style={mobileStyles.pageStyle}>
-      <Switch label={'Show Activity Ring'} defaultChecked={activityRing} onChange={toggleActivityState} />
-      <Switch label={'Out of Office'} defaultChecked={outOfOffice} onChange={toggleOutOfOffice} />
-      <StyledPicker prompt="Status" selected={status} onChange={onStatusChange} collection={PresenceBadgeStatuses} />
-
-      <View style={mobileStyles.testVariants}>
-        {/* Variation  - Initials. */}
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={16} name="Rafi" avatarColor={'colorful'} />
-        <Avatar
-          active={activityRing ? 'active' : 'inactive'}
-          activeAppearance="ring"
-          size={20}
-          name="Richard Faynman"
-          avatarColor={'colorful'}
-        />
-        <Avatar
-          active={activityRing ? 'active' : 'inactive'}
-          activeAppearance="ring"
-          size={24}
-          name="Gita Khawas"
-          avatarColor={'colorful'}
-        />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={32} name="Mary Kom" avatarColor={'colorful'} />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={40} name="Khan Sir" avatarColor={'colorful'} />
-        <Avatar
-          active={activityRing ? 'active' : 'inactive'}
-          activeAppearance="ring"
-          size={56}
-          name="Harry Potter"
-          avatarColor={'colorful'}
-        />
-        <Avatar
-          active={activityRing ? 'active' : 'inactive'}
-          activeAppearance="ring"
-          size={72}
-          name="Ellie armstrong"
-          avatarColor={'colorful'}
-        />
-      </View>
-
-      <View style={mobileStyles.testVariants}>
-        {/* Variation - Image */}
-        <Avatar
-          active={activityRing ? 'active' : 'inactive'}
-          accessibilityLabel={nameAccessibilityLabel}
-          activeAppearance="ring"
-          size={16}
-          imageUrl={steveBallmerPhotoUrl}
-        />
-        <Avatar
-          active={activityRing ? 'active' : 'inactive'}
-          accessibilityLabel={nameAccessibilityLabel}
-          activeAppearance="ring"
-          size={20}
-          imageUrl={steveBallmerPhotoUrl}
-        />
-        <Avatar
-          active={activityRing ? 'active' : 'inactive'}
-          accessibilityLabel={nameAccessibilityLabel}
-          activeAppearance="ring"
-          size={24}
-          imageUrl={steveBallmerPhotoUrl}
-        />
-        <Avatar
-          active={activityRing ? 'active' : 'inactive'}
-          accessibilityLabel={nameAccessibilityLabel}
-          activeAppearance="ring"
-          size={32}
-          imageUrl={steveBallmerPhotoUrl}
-        />
-        <Avatar
-          active={activityRing ? 'active' : 'inactive'}
-          accessibilityLabel={nameAccessibilityLabel}
-          activeAppearance="ring"
-          size={40}
-          imageUrl={steveBallmerPhotoUrl}
-        />
-        <Avatar
-          active={activityRing ? 'active' : 'inactive'}
-          accessibilityLabel={nameAccessibilityLabel}
-          activeAppearance="ring"
-          size={56}
-          imageUrl={steveBallmerPhotoUrl}
-        />
-        <Avatar
-          active={activityRing ? 'active' : 'inactive'}
-          accessibilityLabel={nameAccessibilityLabel}
-          activeAppearance="ring"
-          size={72}
-          imageUrl={steveBallmerPhotoUrl}
-        />
-      </View>
-
-      <View style={mobileStyles.testVariants}>
-        {/* Variation - Image with Badge */
-        /* Badge is not shown for size 16 on Android. */}
-        <Avatar
-          size={16}
-          accessibilityLabel={nameAccessibilityLabel}
-          badge={{ status: status, outOfOffice: outOfOffice }}
-          imageUrl={steveBallmerPhotoUrl}
-        />
-        <Avatar
-          size={20}
-          accessibilityLabel={nameAccessibilityLabel}
-          badge={{ status: status, outOfOffice: outOfOffice }}
-          imageUrl={steveBallmerPhotoUrl}
-        />
-        <Avatar
-          size={24}
-          accessibilityLabel={nameAccessibilityLabel}
-          badge={{ status: status, outOfOffice: outOfOffice }}
-          imageUrl={steveBallmerPhotoUrl}
-        />
-        <Avatar
-          size={32}
-          accessibilityLabel={nameAccessibilityLabel}
-          badge={{ status: status, outOfOffice: outOfOffice }}
-          imageUrl={steveBallmerPhotoUrl}
-        />
-        <Avatar
-          size={40}
-          accessibilityLabel={nameAccessibilityLabel}
-          badge={{ status: status, outOfOffice: outOfOffice }}
-          imageUrl={steveBallmerPhotoUrl}
-        />
-        <Avatar
-          size={56}
-          accessibilityLabel={nameAccessibilityLabel}
-          badge={{ status: status, outOfOffice: outOfOffice }}
-          imageUrl={steveBallmerPhotoUrl}
-        />
-        <Avatar
-          size={72}
-          accessibilityLabel={nameAccessibilityLabel}
-          badge={{ status: status, outOfOffice: outOfOffice }}
-          imageUrl={steveBallmerPhotoUrl}
-        />
-      </View>
-
-      <View style={mobileStyles.testVariants}>
-        {/* Variation - Standard */}
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={16} avatarColor={'brand'} />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={20} avatarColor={'brand'} />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={24} avatarColor={'brand'} />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={32} avatarColor={'brand'} />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={40} avatarColor={'brand'} />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={56} avatarColor={'brand'} />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={72} avatarColor={'brand'} />
-      </View>
-
-      <View style={mobileStyles.testVariants}>
-        {/* Variation - Standard with Badge */
-        /* Badge is not shown for size 16 on Android. */}
-        <Avatar badge={{ status: status, outOfOffice: outOfOffice }} size={16} avatarColor={'brand'} />
-        <Avatar badge={{ status: status, outOfOffice: outOfOffice }} size={20} avatarColor={'brand'} />
-        <Avatar badge={{ status: status, outOfOffice: outOfOffice }} size={24} avatarColor={'brand'} />
-        <Avatar badge={{ status: status, outOfOffice: outOfOffice }} size={32} avatarColor={'brand'} />
-        <Avatar badge={{ status: status, outOfOffice: outOfOffice }} size={40} avatarColor={'brand'} />
-        <Avatar badge={{ status: status, outOfOffice: outOfOffice }} size={56} avatarColor={'brand'} />
-        <Avatar badge={{ status: status, outOfOffice: outOfOffice }} size={72} avatarColor={'brand'} />
-      </View>
-
-      <View style={mobileStyles.testVariants}>
-        {/* Variation - Standard Inverted */}
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={16} avatarColor={'brandInverted'} />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={20} avatarColor={'brandInverted'} />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={24} avatarColor={'brandInverted'} />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={32} avatarColor={'brandInverted'} />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={40} avatarColor={'brandInverted'} />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={56} avatarColor={'brandInverted'} />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={72} avatarColor={'brandInverted'} />
-      </View>
-
-      <View style={mobileStyles.testVariants}>
-        {/* Variation - Anonymous */}
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={16} />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={20} />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={24} />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={32} />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={40} />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={56} />
-        <Avatar
-          accessibilityLabel="Fall-back Icon"
-          accessibilityHint="A picture representing a user"
-          size={72}
-          activeAppearance="ring"
-          active={activityRing ? 'active' : 'inactive'}
-        />
-      </View>
-
-      <View style={mobileStyles.testVariants}>
-        {/* Variation - Anonymous accent */}
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={16} avatarColor={'accent'} />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={20} avatarColor={'accent'} />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={24} avatarColor={'accent'} />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={32} avatarColor={'accent'} />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={40} avatarColor={'accent'} />
-        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={56} avatarColor={'accent'} />
-        <Avatar
-          accessibilityLabel="Fall-back Icon"
-          accessibilityHint="A picture representing a user"
-          size={72}
-          activeAppearance="ring"
-          active={activityRing ? 'active' : 'inactive'}
-          avatarColor={'accent'}
-        />
-      </View>
-
-      <View style={mobileStyles.testVariants}>
-        {/* Variation - Overflow .*/}
-
-        <Avatar shape={'square'} size={16} name="Rafi" avatarColor={'colorful'} />
-        <Avatar shape={'square'} size={20} name="Richard Faynman" avatarColor={'colorful'} />
-        <Avatar shape={'square'} size={24} name="Gita Khawas" avatarColor={'colorful'} />
-        <Avatar shape={'square'} size={32} name="Mary Kom" avatarColor={'colorful'} />
-        <Avatar shape={'square'} size={40} name="Khan Sir" avatarColor={'colorful'} imageUrl={steveBallmerPhotoUrl} />
-        <Avatar shape={'square'} size={56} name="Harry Potter" avatarColor={'colorful'} />
-        <Avatar shape={'square'} size={72} name="Ellie armstrong" avatarColor={'colorful'} />
-      </View>
-
-      <View style={mobileStyles.testVariants}>
-        {/* Variation - Overflow .*/}
-        <Avatar size={16} initials="20" />
-        <Avatar size={20} initials="11" />
-        <Avatar size={24} initials="88" />
-        <Avatar size={32} initials="20" />
-        <Avatar size={40} initials="20" />
-        <Avatar size={56} initials="56" />
-        <Avatar size={72} initials="20" />
-      </View>
-    </View>
-  );
-};

package/src/TestComponents/Avatar/BasicAvatar.tsx

@@ -1,154 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import type { FunctionComponent } from 'react';
-import { View, Text, Platform } from 'react-native';
-
-import { ToggleButton } from '@fluentui/react-native';
-import type { AvatarSize, AvatarColor, AvatarActive } from '@fluentui-react-native/avatar';
-import { AvatarSizes, AvatarColors, Avatar } from '@fluentui-react-native/avatar';
-import type { PresenceBadgeStatus } from '@fluentui-react-native/badge';
-import { PresenceBadgeStatuses } from '@fluentui-react-native/badge';
-
-import { svgProps } from '../Common/iconExamples';
-import { StyledPicker } from '../Common/StyledPicker';
-import { commonTestStyles as commonStyles } from '../Common/styles';
-import { satyaPhotoUrl, undefinedText } from '../PersonaCoin/styles';
-
-type WithUndefined<T> = T | typeof undefinedText;
-
-const avatarActive: AvatarActive[] = ['unset', 'active', 'inactive'];
-const avatarColors: AvatarColor[] = ['neutral', 'brand', 'colorful', ...AvatarColors];
-
-const allSizes: WithUndefined<AvatarSize>[] = [undefinedText, ...AvatarSizes];
-const allPresences: WithUndefined<PresenceBadgeStatus>[] = [undefinedText, ...PresenceBadgeStatuses];
-
-export const StandardUsage: FunctionComponent = () => {
-  const [isSquare, setSquare] = useState(false);
-  const [showImage, setShowImage] = useState(true);
-  const [outOfOffice, setOutOfOffice] = useState(false);
-  const [active, setActive] = useState<AvatarActive>('unset');
-  const [imageSize, setImageSize] = useState<WithUndefined<AvatarSize>>(72);
-  const [presence, setPresence] = useState<WithUndefined<PresenceBadgeStatus>>('available');
-  const [avatarColor, setAvatarColor] = useState<AvatarColor>('brass');
-
-  const onActiveChange = useCallback((value) => setActive(value), []);
-  const onAvatarColorChange = useCallback((value) => setAvatarColor(value), []);
-  const onSizeChange = useCallback((value) => setImageSize(value), []);
-
-  const onPresenceChange = useCallback((value) => setPresence(value), []);
-  const avatarSizesForPicker = allSizes.map((size) => size.toString());
-
-  const activeAppearance = 'ring';
-
-  const fontBuiltInProps = {
-    fontFamily: 'Arial',
-    codepoint: 0x2663,
-  };
-
-  const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
-  const badgeStatus = presence === undefinedText ? undefined : presence;
-
-  return (
-    <View style={commonStyles.root}>
-      <View style={commonStyles.settingsPicker}>
-        <ToggleButton onClick={() => setShowImage(!showImage)} checked={showImage} style={commonStyles.vmargin}>
-          {showImage ? 'Hide' : 'Show'} image
-        </ToggleButton>
-        <ToggleButton onClick={() => setSquare(!isSquare)} checked={isSquare} style={commonStyles.vmargin}>
-          Set {isSquare ? ' circle' : ' square'} Avatar
-        </ToggleButton>
-        <ToggleButton onClick={() => setOutOfOffice(!outOfOffice)} checked={outOfOffice} style={commonStyles.vmargin}>
-          Set {outOfOffice ? ' In office' : ' Out of office'}
-        </ToggleButton>
-
-        <StyledPicker
-          style={commonStyles.vmargin}
-          prompt="Size"
-          selected={imageSize.toString()}
-          onChange={onSizeChange}
-          collection={avatarSizesForPicker}
-        />
-        <StyledPicker style={commonStyles.vmargin} prompt="Active" selected={active} onChange={onActiveChange} collection={avatarActive} />
-        {active === 'active' && <Text>Active appearance is ring</Text>}
-        <StyledPicker
-          style={commonStyles.vmargin}
-          prompt="Avatar Color"
-          selected={avatarColor}
-          onChange={onAvatarColorChange}
-          collection={avatarColors}
-        />
-        <StyledPicker
-          style={commonStyles.vmargin}
-          prompt="Presence status"
-          selected={presence}
-          onChange={onPresenceChange}
-          collection={allPresences}
-        />
-      </View>
-      <View style={commonStyles.pickerControlled}>
-        <Avatar
-          accessibilityLabel="Fall-back Icon"
-          accessibilityHint="A picture representing a user"
-          size={imageSize === undefinedText ? undefined : imageSize}
-        />
-        <Avatar
-          active={active}
-          activeAppearance={activeAppearance}
-          size={imageSize === undefinedText ? undefined : imageSize}
-          name="Satya Nadella"
-          shape={isSquare ? 'square' : 'circular'}
-          accessibilityLabel="Photo of Satya Nadella"
-          badge={{ status: badgeStatus, outOfOffice, accessibilityLabel: badgeStatus }}
-          imageUrl={showImage ? satyaPhotoUrl : undefined}
-          avatarColor={avatarColor}
-        />
-        <Avatar
-          active={active}
-          activeAppearance={activeAppearance}
-          size={imageSize === undefinedText ? undefined : imageSize}
-          shape={isSquare ? 'square' : 'circular'}
-          accessibilityLabel="Icon"
-          image={{ source: showImage ? { uri: satyaPhotoUrl } : undefined }}
-          name="* Richard Faynman *"
-          avatarColor="#ff0099"
-          initialsColor="yellow"
-        />
-        <Avatar
-          active={active}
-          activeAppearance={activeAppearance}
-          size={36}
-          shape={isSquare ? 'square' : 'circular'}
-          accessibilityLabel="SVG Icon"
-          icon={{ fontSource: fontBuiltInProps }}
-          avatarColor={avatarColor}
-          badge={{ status: 'outOfOffice', outOfOffice }}
-        />
-        <Avatar
-          active={active}
-          activeAppearance={activeAppearance}
-          size={imageSize === undefinedText ? undefined : imageSize}
-          shape={isSquare ? 'square' : 'circular'}
-          accessibilityLabel="SVG Icon"
-          icon={{ fontSource: fontBuiltInProps, color: 'green' }}
-          avatarColor={avatarColor}
-          badge={{ status: 'outOfOffice', outOfOffice }}
-        />
-        {svgIconsEnabled && (
-          <>
-            <Avatar
-              accessibilityHint="A picture representing a user"
-              active={active}
-              activeAppearance={activeAppearance}
-              size={imageSize === undefinedText ? undefined : imageSize}
-              shape={isSquare ? 'square' : 'circular'}
-              accessibilityLabel="SVG Icon"
-              icon={{ svgSource: svgProps }}
-              avatarColor={avatarColor}
-              badge={{ status: 'away', outOfOffice }}
-              idForColor="15"
-            />
-          </>
-        )}
-      </View>
-    </View>
-  );
-};

package/src/TestComponents/Avatar/CustomizedAvatar.tsx

@@ -1,257 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { View, Text, TextInput, Platform, StyleSheet } from 'react-native';
-
-import { ToggleButton } from '@fluentui/react-native';
-import type { AvatarSize } from '@fluentui-react-native/avatar';
-import { Avatar } from '@fluentui-react-native/avatar';
-import type { FontWeight } from '@fluentui-react-native/theme-types';
-
-import { svgProps } from '../Common/iconExamples';
-import { commonTestStyles as commonStyles } from '../Common/styles';
-import { steveBallmerPhotoUrl } from '../PersonaCoin/styles';
-
-const styles = StyleSheet.create({
-  avatarTestCaseContainer: { marginLeft: 20 },
-  avatarTokenOptions: { flexDirection: 'row' },
-  fontTokenOptions: { paddingHorizontal: 20 },
-  tokenHeader: { fontWeight: 'bold' },
-});
-
-export const CustomizeUsage: React.FunctionComponent = () => {
-  const [showImage, setShowImage] = useState(true);
-  const [showInitials, setShowInitials] = useState(true);
-  const [avatarColor, setAvatarColor] = useState<string>();
-  const [textColor, setTextColor] = useState<string>();
-  const [size, setSize] = useState<string>('96');
-  const [iconSize, setIconSize] = useState<number>(24);
-  const [iconColor, setIconColor] = useState<string>(undefined);
-  const [initialsSize, setInitialsSize] = useState<number>(16);
-  const [fontWeight, setFontWeight] = useState<string>('normal');
-  const [fontFamily, setFontFamily] = useState<string>('Georgia');
-  const [name, setName] = useState<string>('Steve Ballmer');
-  const [initials, setInitials] = useState<string>('');
-
-  const [ringColor, setRingColor] = useState<string>(undefined);
-  const [ringBackgroundColor, setRingBackgroundColor] = useState<string>('yellow');
-  const [ringThickness, setRingThickness] = useState<string>('4');
-  const [ringInnerGap, setRingInnerGap] = useState<string>('4');
-  const [showRing, setShowRing] = useState<boolean>(true);
-
-  const CustomizedAvatar = useMemo(() => {
-    const tokens = {
-      avatarColor,
-      color: textColor,
-      size: parseInt(size) as AvatarSize,
-      iconSize: iconSize,
-      iconColor,
-      fontSize: initialsSize,
-      fontWeight: fontWeight as FontWeight,
-      fontFamily,
-      ringColor,
-      ringBackgroundColor,
-      ringThickness: parseInt(ringThickness),
-      ringInnerGap: parseInt(ringInnerGap),
-    };
-    return Avatar.customize(tokens);
-  }, [
-    avatarColor,
-    textColor,
-    iconColor,
-    iconSize,
-    initialsSize,
-    size,
-    ringColor,
-    ringBackgroundColor,
-    ringInnerGap,
-    ringThickness,
-    fontWeight,
-    fontFamily,
-  ]);
-
-  const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
-
-  return (
-    <View style={commonStyles.root}>
-      <View style={commonStyles.settings}>
-        <ToggleButton onClick={() => setShowImage(!showImage)} checked={showImage} style={commonStyles.vmargin}>
-          {showImage ? 'Hide' : 'Show'} image
-        </ToggleButton>
-        <ToggleButton onClick={() => setShowInitials(!showInitials)} checked={showInitials} style={commonStyles.vmargin}>
-          {showInitials ? 'Hide' : 'Show'} initials
-        </ToggleButton>
-        <ToggleButton onClick={() => setShowRing(!showRing)} checked={showRing} style={commonStyles.vmargin}>
-          {showRing ? 'Hide' : 'Show'} ring
-        </ToggleButton>
-        <View style={styles.avatarTokenOptions}>
-          <View>
-            <TextInput
-              accessibilityLabel="Name for generating initials"
-              style={commonStyles.textBox}
-              placeholder="Name for generating initials"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setName(e.nativeEvent.text);
-              }}
-            />
-            <TextInput
-              accessibilityLabel="Initials"
-              style={commonStyles.textBox}
-              placeholder="Initials"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setInitials(e.nativeEvent.text);
-              }}
-            />
-            <Text style={styles.tokenHeader}>Avatar tokens</Text>
-            <TextInput
-              accessibilityLabel="Background color"
-              style={commonStyles.textBox}
-              placeholder="Background color"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setAvatarColor(e.nativeEvent.text);
-              }}
-            />
-
-            <TextInput
-              accessibilityLabel="Avatar size"
-              style={commonStyles.textBox}
-              placeholder="Avatar size"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setSize(e.nativeEvent.text);
-              }}
-            />
-
-            <TextInput
-              accessibilityLabel="Icon size"
-              style={commonStyles.textBox}
-              placeholder="Icon size"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setIconSize(parseInt(e.nativeEvent.text));
-              }}
-            />
-            <TextInput
-              accessibilityLabel="Icon color"
-              style={commonStyles.textBox}
-              placeholder="Icon color"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setIconColor(e.nativeEvent.text);
-              }}
-            />
-            <Text style={styles.tokenHeader}>Ring tokens</Text>
-            <TextInput
-              accessibilityLabel="Ring background color"
-              style={commonStyles.textBox}
-              placeholder="Ring background color"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setRingBackgroundColor(e.nativeEvent.text);
-              }}
-            />
-            <TextInput
-              accessibilityLabel="Ring color"
-              style={commonStyles.textBox}
-              placeholder="Ring color"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setRingColor(e.nativeEvent.text);
-              }}
-            />
-            <TextInput
-              accessibilityLabel="Ring thickness"
-              style={commonStyles.textBox}
-              placeholder="Ring thickness"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setRingThickness(e.nativeEvent.text);
-              }}
-            />
-            <TextInput
-              accessibilityLabel="Ring inner gap"
-              style={commonStyles.textBox}
-              placeholder="Ring inner gap"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setRingInnerGap(e.nativeEvent.text);
-              }}
-            />
-          </View>
-          <View style={styles.fontTokenOptions}>
-            <Text style={styles.tokenHeader}>Font tokens</Text>
-            <TextInput
-              accessibilityLabel="Initials text color"
-              style={commonStyles.textBox}
-              placeholder="Initials text color"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setTextColor(e.nativeEvent.text);
-              }}
-            />
-            <TextInput
-              accessibilityLabel="Initials size"
-              style={commonStyles.textBox}
-              placeholder="Initials size"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setInitialsSize(parseInt(e.nativeEvent.text));
-              }}
-            />
-            <TextInput
-              accessibilityLabel="Font weight"
-              style={commonStyles.textBox}
-              placeholder="Font weight"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setFontWeight(e.nativeEvent.text);
-              }}
-            />
-            <TextInput
-              accessibilityLabel="Font family"
-              style={commonStyles.textBox}
-              placeholder="Font family"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setFontFamily(e.nativeEvent.text);
-              }}
-            />
-          </View>
-        </View>
-      </View>
-      <View>
-        <Text>Customized Avatar</Text>
-        <CustomizedAvatar
-          active="active"
-          activeAppearance="ring"
-          avatarColor={avatarColor}
-          accessibilityLabel="Former CEO of Microsoft"
-          initials={showInitials ? initials : undefined}
-          name={showInitials ? name : undefined}
-          imageUrl={showImage ? steveBallmerPhotoUrl : undefined}
-          icon={svgIconsEnabled ? { svgSource: svgProps } : undefined}
-          transparentRing={!showRing}
-        />
-      </View>
-      <View style={styles.avatarTestCaseContainer}>
-        <Text>Avatar customized with props</Text>
-        <Avatar
-          active="active"
-          activeAppearance="ring"
-          avatarColor={avatarColor}
-          accessibilityLabel="Former CEO of Microsoft"
-          initials={showInitials ? initials : undefined}
-          name={showInitials ? name : undefined}
-          imageUrl={showImage ? steveBallmerPhotoUrl : undefined}
-          ringBackgroundColor={ringBackgroundColor}
-          ringColor={ringColor}
-          ringThickness={parseInt(ringThickness)}
-          size={parseInt(size) as AvatarSize}
-          transparentRing={!showRing}
-          ringInnerGap={parseInt(ringInnerGap)}
-        />
-      </View>
-    </View>
-  );
-};