chore(Avatar): add VR test for overrides (#16396)

packages/fluentui/docs/src/examples/components/Avatar/Visual/AvatarStatusOverrideExample.shorthand.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Avatar, Provider, AcceptIcon } from '@fluentui/react-northstar';
+
+const AvatarExampleShorthand = () => (
+  <Provider
+    theme={{
+      componentStyles: {
+        Avatar: {
+          status: ({ variables: v }) => ({ ...(v.isFoo && { backgroundColor: 'red' }) }),
+        },
+      },
+    }}
+  >
+    <Avatar
+      status={{
+        icon: <AcceptIcon />,
+        title: 'Available',
+      }}
+    />
+    <Avatar
+      status={{
+        icon: <AcceptIcon />,
+        title: 'Available',
+      }}
+      variables={{ isFoo: true }}
+    />
+  </Provider>
+);
+
+export default AvatarExampleShorthand;

packages/fluentui/docs/src/examples/components/Avatar/Visual/index.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+import ComponentExample from '../../../../components/ComponentDoc/ComponentExample';
+import NonPublicSection from '../../../../components/ComponentDoc/NonPublicSection';
+
+const Usage = () => (
+  <NonPublicSection title="Visual tests">
+    <ComponentExample examplePath="components/Avatar/Visual/AvatarStatusOverrideExample" />
+  </NonPublicSection>
+);
+
+export default Usage;

packages/fluentui/docs/src/examples/components/Avatar/index.tsx

@@ -5,13 +5,15 @@ import Types from './Types';
 import Variations from './Variations';
 import Usage from './Usage';
 import Performance from './Performance';
+import Visual from './Visual';
 
 const AvatarExamples = () => (
   <>
     <Types />
     <Variations />
     <Rtl />
     <Usage />
+    <Visual />
     <Performance />
   </>
 );