@fluentui-react-native/tester 0.78.4 → 0.79.2

package/src/E2E/RadioGroup/specs/RadioGroup.spec.win.ts

@@ -7,7 +7,7 @@ import {
   RADIOGROUP_TEST_COMPONENT_LABEL,
   FIRST_RADIO_BUTTON_ACCESSIBILITY_LABEL,
   SECOND_RADIO_BUTTON_LABEL,
-} from '../../../FluentTester/TestComponents/RadioGroup/consts';
+} from '../../../TestComponents/RadioGroup/consts';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('RadioGroup/RadioButton Testing Initialization', function () {

package/src/E2E/Separator/pages/SeparatorPageObject.macos.ts

@@ -1,8 +1,4 @@
-import {
-  SEPARATOR_TESTPAGE,
-  SEPARATOR_TEST_COMPONENT,
-  HOMEPAGE_SEPARATOR_BUTTON,
-} from '../../../FluentTester/TestComponents/Separator/consts';
+import { SEPARATOR_TESTPAGE, SEPARATOR_TEST_COMPONENT, HOMEPAGE_SEPARATOR_BUTTON } from '../../../TestComponents/Separator/consts';
 import { BasePage, By } from '../../common/BasePage.macos';
 
 class SeparatorPageObject extends BasePage {

package/src/E2E/Separator/pages/SeparatorPageObject.win.ts

@@ -1,8 +1,4 @@
-import {
-  SEPARATOR_TESTPAGE,
-  SEPARATOR_TEST_COMPONENT,
-  HOMEPAGE_SEPARATOR_BUTTON,
-} from '../../../FluentTester/TestComponents/Separator/consts';
+import { SEPARATOR_TESTPAGE, SEPARATOR_TEST_COMPONENT, HOMEPAGE_SEPARATOR_BUTTON } from '../../../TestComponents/Separator/consts';
 import { BasePage, By } from '../../common/BasePage.win';
 
 class SeparatorPageObject extends BasePage {

package/src/E2E/Shimmer/pages/ShimmerPageObject.win.ts

@@ -1,4 +1,4 @@
-import { HOMEPAGE_SHIMMER_BUTTON, SHIMMER_TESTPAGE, SHIMMER_TEST_COMPONENT } from '../../../FluentTester/TestComponents/Shimmer/consts';
+import { HOMEPAGE_SHIMMER_BUTTON, SHIMMER_TESTPAGE, SHIMMER_TEST_COMPONENT } from '../../../TestComponents/Shimmer/consts';
 import { BasePage, By } from '../../common/BasePage.win';
 
 class ShimmerPageObject extends BasePage {

package/src/E2E/Svg/pages/SvgPageObject.macos.ts

@@ -1,4 +1,4 @@
-import { SVG_TESTPAGE, SVG_TEST_COMPONENT, HOMEPAGE_SVG_BUTTON } from '../../../FluentTester/TestComponents/Svg/consts';
+import { SVG_TESTPAGE, SVG_TEST_COMPONENT, HOMEPAGE_SVG_BUTTON } from '../../../TestComponents/Svg/consts';
 import { BasePage, By } from '../../common/BasePage.macos';
 
 class SvgPageObject extends BasePage {

package/src/E2E/Svg/pages/SvgPageObject.win.ts

@@ -1,4 +1,4 @@
-import { SVG_TESTPAGE, SVG_TEST_COMPONENT, HOMEPAGE_SVG_BUTTON } from '../../../FluentTester/TestComponents/Svg/consts';
+import { SVG_TESTPAGE, SVG_TEST_COMPONENT, HOMEPAGE_SVG_BUTTON } from '../../../TestComponents/Svg/consts';
 import { BasePage, By } from '../../common/BasePage.win';
 
 class SvgPageObject extends BasePage {

package/src/E2E/Tabs/pages/TabsPageObject.macos.ts

@@ -1,9 +1,4 @@
-import {
-  TABS_TESTPAGE,
-  TABS_TEST_COMPONENT,
-  FIRST_TABS_ITEM,
-  HOMEPAGE_TABS_BUTTON,
-} from '../../../FluentTester/TestComponents/Tabs/consts';
+import { TABS_TESTPAGE, TABS_TEST_COMPONENT, FIRST_TABS_ITEM, HOMEPAGE_TABS_BUTTON } from '../../../TestComponents/Tabs/consts';
 import { BasePage, By } from '../../common/BasePage.macos';
 
 class TabsPageObject extends BasePage {

package/src/E2E/Tabs/pages/TabsPageObject.win.ts

@@ -8,7 +8,7 @@ import {
   FIRST_TABS_ITEM_CONTENT,
   SECOND_TABS_ITEM_CONTENT,
   THIRD_TABS_ITEM_CONTENT,
-} from '../../../FluentTester/TestComponents/Tabs/consts';
+} from '../../../TestComponents/Tabs/consts';
 import { BasePage, By } from '../../common/BasePage.win';
 
 /* This enum gives the spec file an EASY way to interact with SPECIFIC UI elements on the page.

package/src/E2E/TabsExperimental/pages/ExperimentalTabsPageObject.macos.ts

@@ -3,7 +3,7 @@ import {
   EXPERIMENTAL_TABS_TESTPAGE,
   EXPERIMENTAL_TABS_TEST_COMPONENT,
   HOMEPAGE_EXPERIMENTAL_TABS_BUTTON,
-} from '../../../FluentTester/TestComponents/TabsExperimental/consts';
+} from '../../../TestComponents/TabsExperimental/consts';
 import { BasePage, By } from '../../common/BasePage.macos';
 
 class ExperimentalTabsPageObject extends BasePage {

package/src/E2E/TabsExperimental/pages/ExperimentalTabsPageObject.win.ts

@@ -3,7 +3,7 @@ import {
   EXPERIMENTAL_TABS_TESTPAGE,
   EXPERIMENTAL_TABS_TEST_COMPONENT,
   HOMEPAGE_EXPERIMENTAL_TABS_BUTTON,
-} from '../../../FluentTester/TestComponents/TabsExperimental/consts';
+} from '../../../TestComponents/TabsExperimental/consts';
 import { BasePage, By } from '../../common/BasePage.win';
 
 class ExperimentalTabsPageObject extends BasePage {

package/src/E2E/Text/pages/TextPageObject.macos.ts

@@ -1,4 +1,4 @@
-import { TEXT_TESTPAGE, FIRST_TEXT_COMPONENT, HOMEPAGE_TEXT_BUTTON } from '../../../FluentTester/TestComponents/Text/consts';
+import { TEXT_TESTPAGE, FIRST_TEXT_COMPONENT, HOMEPAGE_TEXT_BUTTON } from '../../../TestComponents/Text/consts';
 import { BasePage, By } from '../../common/BasePage.macos';
 
 class TextPageObject extends BasePage {

package/src/E2E/Text/pages/TextPageObject.win.ts

@@ -1,9 +1,4 @@
-import {
-  TEXT_TESTPAGE,
-  FIRST_TEXT_COMPONENT,
-  HOMEPAGE_TEXT_BUTTON,
-  SECOND_TEXT_COMPONENT,
-} from '../../../FluentTester/TestComponents/Text/consts';
+import { TEXT_TESTPAGE, FIRST_TEXT_COMPONENT, HOMEPAGE_TEXT_BUTTON, SECOND_TEXT_COMPONENT } from '../../../TestComponents/Text/consts';
 import { BasePage, By } from '../../common/BasePage.win';
 
 class TextPageObject extends BasePage {

package/src/E2E/Text/specs/Text.spec.win.ts

@@ -2,7 +2,7 @@ import NavigateAppPage from '../../common/NavigateAppPage.win';
 import TextPageObject from '../pages/TextPageObject.win';
 import { ComponentSelector } from '../../common/BasePage.win';
 import { TEXT_A11Y_ROLE, PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
-import { TEXT_ACCESSIBILITY_LABEL, TEXT_COMPONENT_CONTENT } from '../../../FluentTester/TestComponents/Text/consts';
+import { TEXT_ACCESSIBILITY_LABEL, TEXT_COMPONENT_CONTENT } from '../../../TestComponents/Text/consts';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Text Testing Initialization', function () {

package/src/E2E/TextExperimental/pages/ExperimentalTextPageObject.win.ts

@@ -2,7 +2,7 @@ import {
   EXPERIMENTAL_TEXT_TESTPAGE,
   EXPERIMENTAL_TEXT_TEST_COMPONENT,
   HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON,
-} from '../../../FluentTester/TestComponents/TextExperimental/consts';
+} from '../../../TestComponents/TextExperimental/consts';
 import { BasePage, By } from '../../common/BasePage.win';
 
 class ExperimentalTextPageObject extends BasePage {

package/src/E2E/Theme/pages/ThemePageObject.win.ts

@@ -1,4 +1,4 @@
-import { THEME_TESTPAGE, THEME_TEST_COMPONENT, HOMEPAGE_THEME_BUTTON } from '../../../FluentTester/TestComponents/Theme/consts';
+import { THEME_TESTPAGE, THEME_TEST_COMPONENT, HOMEPAGE_THEME_BUTTON } from '../../../TestComponents/Theme/consts';
 import { BasePage, By } from '../../common/BasePage.win';
 
 class ThemePageObject extends BasePage {

package/src/E2E/Tokens/pages/TokensPageObject.win.ts

@@ -1,4 +1,4 @@
-import { HOMEPAGE_TOKEN_BUTTON, TOKEN_TESTPAGE, TOKENS_TEST_COMPONENT } from '../../../FluentTester/TestComponents/Tokens/consts';
+import { HOMEPAGE_TOKEN_BUTTON, TOKEN_TESTPAGE, TOKENS_TEST_COMPONENT } from '../../../TestComponents/Tokens/consts';
 import { BasePage, By } from '../../common/BasePage.win';
 
 class TokenPageObject extends BasePage {

package/src/E2E/common/NavigateAppPage.macos.ts

@@ -1,23 +1,23 @@
-import { HOMEPAGE_CHECKBOX_BUTTON } from '../../FluentTester/TestComponents/Checkbox/consts';
-import { HOMEPAGE_BUTTON_BUTTON } from '../../FluentTester/TestComponents/Button/consts';
-import { HOMEPAGE_CALLOUT_BUTTON } from '../../FluentTester/TestComponents/Callout/consts';
-import { HOMEPAGE_CONTEXTUALMENU_BUTTON } from '../../FluentTester/TestComponents/ContextualMenu/consts';
-import { HOMEPAGE_EXPERIMENTAL_TABS_BUTTON } from '../../FluentTester/TestComponents/TabsExperimental/consts';
-import { HOMEPAGE_FOCUSTRAPZONE_BUTTON } from '../../FluentTester/TestComponents/FocusTrapZone/consts';
-import { HOMEPAGE_FOCUSZONE_BUTTON } from '../../FluentTester/TestComponents/FocusZone/consts';
-import { HOMEPAGE_ICON_BUTTON } from '../../FluentTester/TestComponents/Icon/consts';
-import { HOMEPAGE_LINK_BUTTON } from '../../FluentTester/TestComponents/Link/consts';
-import { HOMEPAGE_MENUBUTTON_BUTTON } from '../../FluentTester/TestComponents/MenuButton/consts';
-import { HOMEPAGE_PERSONA_BUTTON } from '../../FluentTester/TestComponents/Persona/consts';
-import { HOMEPAGE_PERSONACOIN_BUTTON } from '../../FluentTester/TestComponents/PersonaCoin/consts';
-import { HOMEPAGE_PRESSABLE_BUTTON } from '../../FluentTester/TestComponents/Pressable/consts';
-import { HOMEPAGE_RADIOGROUP_BUTTON } from '../../FluentTester/TestComponents/RadioGroup/consts';
-import { HOMEPAGE_SEPARATOR_BUTTON } from '../../FluentTester/TestComponents/Separator/consts';
-import { HOMEPAGE_SVG_BUTTON } from '../../FluentTester/TestComponents/Svg/consts';
-import { HOMEPAGE_TEXT_BUTTON } from '../../FluentTester/TestComponents/Text/consts';
-import { HOMEPAGE_TABS_BUTTON } from '../../FluentTester/TestComponents/Tabs/consts';
-import { HOMEPAGE_THEME_BUTTON } from '../../FluentTester/TestComponents/Theme/consts';
-import { BASE_TESTPAGE } from '../../FluentTester/TestComponents/Common/consts';
+import { HOMEPAGE_CHECKBOX_BUTTON } from '../../TestComponents/Checkbox/consts';
+import { HOMEPAGE_BUTTON_BUTTON } from '../../TestComponents/Button/consts';
+import { HOMEPAGE_CALLOUT_BUTTON } from '../../TestComponents/Callout/consts';
+import { HOMEPAGE_CONTEXTUALMENU_BUTTON } from '../../TestComponents/ContextualMenu/consts';
+import { HOMEPAGE_EXPERIMENTAL_TABS_BUTTON } from '../../TestComponents/TabsExperimental/consts';
+import { HOMEPAGE_FOCUSTRAPZONE_BUTTON } from '../../TestComponents/FocusTrapZone/consts';
+import { HOMEPAGE_FOCUSZONE_BUTTON } from '../../TestComponents/FocusZone/consts';
+import { HOMEPAGE_ICON_BUTTON } from '../../TestComponents/Icon/consts';
+import { HOMEPAGE_LINK_BUTTON } from '../../TestComponents/Link/consts';
+import { HOMEPAGE_MENUBUTTON_BUTTON } from '../../TestComponents/MenuButton/consts';
+import { HOMEPAGE_PERSONA_BUTTON } from '../../TestComponents/Persona/consts';
+import { HOMEPAGE_PERSONACOIN_BUTTON } from '../../TestComponents/PersonaCoin/consts';
+import { HOMEPAGE_PRESSABLE_BUTTON } from '../../TestComponents/Pressable/consts';
+import { HOMEPAGE_RADIOGROUP_BUTTON } from '../../TestComponents/RadioGroup/consts';
+import { HOMEPAGE_SEPARATOR_BUTTON } from '../../TestComponents/Separator/consts';
+import { HOMEPAGE_SVG_BUTTON } from '../../TestComponents/Svg/consts';
+import { HOMEPAGE_TEXT_BUTTON } from '../../TestComponents/Text/consts';
+import { HOMEPAGE_TABS_BUTTON } from '../../TestComponents/Tabs/consts';
+import { HOMEPAGE_THEME_BUTTON } from '../../TestComponents/Theme/consts';
+import { BASE_TESTPAGE } from '../../TestComponents/Common/consts';
 import { By, BasePage } from './BasePage.macos';
 
 class NavigateAppPage extends BasePage {

package/src/E2E/common/NavigateAppPage.win.ts

@@ -1,31 +1,31 @@
-import { HOMEPAGE_ACTIVITY_INDICATOR_BUTTON } from '../../FluentTester/TestComponents/ActivityIndicator/consts';
-import { HOMEPAGE_AVATAR_BUTTON } from '../../FluentTester/TestComponents/Avatar/consts';
-import { HOMEPAGE_CHECKBOX_BUTTON } from '../../FluentTester/TestComponents/Checkbox/consts';
-import { HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON } from '../../FluentTester/TestComponents/CheckboxExperimental/consts';
-import { HOMEPAGE_BUTTON_BUTTON } from '../../FluentTester/TestComponents/Button/consts';
-import { HOMEPAGE_CALLOUT_BUTTON } from '../../FluentTester/TestComponents/Callout/consts';
-import { HOMEPAGE_CONTEXTUALMENU_BUTTON } from '../../FluentTester/TestComponents/ContextualMenu/consts';
-import { HOMEPAGE_EXPERIMENTAL_TABS_BUTTON } from '../../FluentTester/TestComponents/TabsExperimental/consts';
-import { HOMEPAGE_FOCUSTRAPZONE_BUTTON } from '../../FluentTester/TestComponents/FocusTrapZone/consts';
-import { HOMEPAGE_FOCUSZONE_BUTTON } from '../../FluentTester/TestComponents/FocusZone/consts';
-import { HOMEPAGE_ICON_BUTTON } from '../../FluentTester/TestComponents/Icon/consts';
-import { HOMEPAGE_LINK_BUTTON } from '../../FluentTester/TestComponents/Link/consts';
-import { HOMEPAGE_MENU_BUTTON } from '../../FluentTester/TestComponents/Menu/consts';
-import { HOMEPAGE_MENUBUTTON_BUTTON } from '../../FluentTester/TestComponents/MenuButton/consts';
-import { HOMEPAGE_EXPERIMENTAL_MENU_BUTTON } from '../../FluentTester/TestComponents/MenuButtonExperimental/consts';
-import { HOMEPAGE_PERSONA_BUTTON } from '../../FluentTester/TestComponents/Persona/consts';
-import { HOMEPAGE_PERSONACOIN_BUTTON } from '../../FluentTester/TestComponents/PersonaCoin/consts';
-import { HOMEPAGE_PRESSABLE_BUTTON } from '../../FluentTester/TestComponents/Pressable/consts';
-import { HOMEPAGE_RADIOGROUP_BUTTON } from '../../FluentTester/TestComponents/RadioGroup/consts';
-import { HOMEPAGE_SEPARATOR_BUTTON } from '../../FluentTester/TestComponents/Separator/consts';
-import { HOMEPAGE_SHIMMER_BUTTON } from '../../FluentTester/TestComponents/Shimmer/consts';
-import { HOMEPAGE_SVG_BUTTON } from '../../FluentTester/TestComponents/Svg/consts';
-import { HOMEPAGE_TEXT_BUTTON } from '../../FluentTester/TestComponents/Text/consts';
-import { HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON } from '../../FluentTester/TestComponents/TextExperimental/consts';
-import { HOMEPAGE_TOKEN_BUTTON } from '../../FluentTester/TestComponents/Tokens/consts';
-import { HOMEPAGE_TABS_BUTTON } from '../../FluentTester/TestComponents/Tabs/consts';
-import { HOMEPAGE_THEME_BUTTON } from '../../FluentTester/TestComponents/Theme/consts';
-import { BASE_TESTPAGE } from '../../FluentTester/TestComponents/Common/consts';
+import { HOMEPAGE_ACTIVITY_INDICATOR_BUTTON } from '../../TestComponents/ActivityIndicator/consts';
+import { HOMEPAGE_AVATAR_BUTTON } from '../../TestComponents/Avatar/consts';
+import { HOMEPAGE_CHECKBOX_BUTTON } from '../../TestComponents/Checkbox/consts';
+import { HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON } from '../../TestComponents/CheckboxExperimental/consts';
+import { HOMEPAGE_BUTTON_BUTTON } from '../../TestComponents/Button/consts';
+import { HOMEPAGE_CALLOUT_BUTTON } from '../../TestComponents/Callout/consts';
+import { HOMEPAGE_CONTEXTUALMENU_BUTTON } from '../../TestComponents/ContextualMenu/consts';
+import { HOMEPAGE_EXPERIMENTAL_TABS_BUTTON } from '../../TestComponents/TabsExperimental/consts';
+import { HOMEPAGE_FOCUSTRAPZONE_BUTTON } from '../../TestComponents/FocusTrapZone/consts';
+import { HOMEPAGE_FOCUSZONE_BUTTON } from '../../TestComponents/FocusZone/consts';
+import { HOMEPAGE_ICON_BUTTON } from '../../TestComponents/Icon/consts';
+import { HOMEPAGE_LINK_BUTTON } from '../../TestComponents/Link/consts';
+import { HOMEPAGE_MENU_BUTTON } from '../../TestComponents/Menu/consts';
+import { HOMEPAGE_MENUBUTTON_BUTTON } from '../../TestComponents/MenuButton/consts';
+import { HOMEPAGE_EXPERIMENTAL_MENU_BUTTON } from '../../TestComponents/MenuButtonExperimental/consts';
+import { HOMEPAGE_PERSONA_BUTTON } from '../../TestComponents/Persona/consts';
+import { HOMEPAGE_PERSONACOIN_BUTTON } from '../../TestComponents/PersonaCoin/consts';
+import { HOMEPAGE_PRESSABLE_BUTTON } from '../../TestComponents/Pressable/consts';
+import { HOMEPAGE_RADIOGROUP_BUTTON } from '../../TestComponents/RadioGroup/consts';
+import { HOMEPAGE_SEPARATOR_BUTTON } from '../../TestComponents/Separator/consts';
+import { HOMEPAGE_SHIMMER_BUTTON } from '../../TestComponents/Shimmer/consts';
+import { HOMEPAGE_SVG_BUTTON } from '../../TestComponents/Svg/consts';
+import { HOMEPAGE_TEXT_BUTTON } from '../../TestComponents/Text/consts';
+import { HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON } from '../../TestComponents/TextExperimental/consts';
+import { HOMEPAGE_TOKEN_BUTTON } from '../../TestComponents/Tokens/consts';
+import { HOMEPAGE_TABS_BUTTON } from '../../TestComponents/Tabs/consts';
+import { HOMEPAGE_THEME_BUTTON } from '../../TestComponents/Theme/consts';
+import { BASE_TESTPAGE } from '../../TestComponents/Common/consts';
 import { By, BasePage } from './BasePage.win';
 
 class NavigateAppPage extends BasePage {

package/src/TestComponents/Avatar/BasicAvatar.tsx

@@ -0,0 +1,145 @@
+import React, { useState, useCallback, FunctionComponent } from 'react';
+import { AvatarSize, AvatarSizes, AvatarColor, AvatarColors, Avatar, AvatarActive } from '@fluentui-react-native/avatar';
+import { PresenceBadgeStatuses, PresenceBadgeStatus } from '@fluentui-react-native/badge';
+import { View, Text, Platform } from 'react-native';
+import { satyaPhotoUrl, undefinedText } from './../PersonaCoin/styles';
+import { commonTestStyles as commonStyles } from '../Common/styles';
+import TestSvg from '../../FluentTester/test-data/test.svg';
+import { SvgIconProps } from '@fluentui-react-native/icon';
+import { StyledPicker } from '../Common/StyledPicker';
+import { ToggleButton } from '@fluentui/react-native';
+
+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 svgProps: SvgIconProps = {
+    src: TestSvg,
+    viewBox: '0 0 500 500',
+  };
+
+  const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
+
+  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 prompt="Size" selected={imageSize.toString()} onChange={onSizeChange} collection={avatarSizesForPicker} />
+        <StyledPicker prompt="Active" selected={active} onChange={onActiveChange} collection={avatarActive} />
+        {active === 'active' && <Text>Active appearance is ring</Text>}
+        <StyledPicker prompt="Avatar Color" selected={avatarColor} onChange={onAvatarColorChange} collection={avatarColors} />
+        <StyledPicker 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: presence === undefinedText ? undefined : presence, outOfOffice }}
+          imageUrl={showImage ? satyaPhotoUrl : undefined}
+          avatarColor={avatarColor}
+        />
+        <Avatar
+          active={active}
+          activeAppearance={activeAppearance}
+          size={imageSize === undefinedText ? undefined : imageSize}
+          shape={isSquare ? 'square' : 'circular'}
+          accessibilityLabel="Icon"
+          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
+              active={active}
+              activeAppearance={activeAppearance}
+              size={imageSize === undefinedText ? undefined : imageSize}
+              shape={isSquare ? 'square' : 'circular'}
+              accessibilityLabel="SVG Icon"
+              icon={{ fontSource: { ...fontBuiltInProps, fontSize: 16 }, color: 'red' }}
+              avatarColor={avatarColor}
+              badge={{ status: 'outOfOffice', outOfOffice }}
+            />
+            <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>
+  );
+};