From d14ff1651a26245a67c8d2641efb76df531b0848 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Thu, 15 Sep 2022 09:32:21 +0200
Subject: [PATCH 01/17] feat: Implement shared AvatarContext

Done as part or RFC 24790. Creates a new context in
react-shared-contexts that will be consumed by the `Avatar` component.

This context provider can be used only internally and it is up to the
component author to make sure that the provider is located as close as
possible to where the overrides need to occur.
---
 .../src/components/Avatar/useAvatar.tsx       | 12 ++++++++--
 .../src/AvatarContext.ts                      | 22 +++++++++++++++++
 .../react-shared-contexts/src/index.ts        |  3 +++
 .../react-components/react-table/package.json |  1 +
 .../TableCellLayout/TableCellLayout.tsx       |  3 ++-
 .../TableCellLayout/TableCellLayout.types.ts  |  9 ++++++-
 .../TableCellLayout/renderTableCellLayout.tsx | 12 +++++++---
 .../TableCellLayout/useTableCellLayout.ts     |  4 ++++
 .../useTableCellLayoutContextValues.ts        | 24 +++++++++++++++++++
 .../src/stories/Table/SizeSmall.stories.tsx   |  6 +----
 .../src/stories/Table/SizeSmaller.stories.tsx |  6 +----
 11 files changed, 85 insertions(+), 17 deletions(-)
 create mode 100644 packages/react-components/react-shared-contexts/src/AvatarContext.ts
 create mode 100644 packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutContextValues.ts

diff --git a/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx b/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx
index 5769e3fc3c7246..c5d8915cb7e0a5 100644
--- a/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx
+++ b/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx
@@ -4,11 +4,19 @@ import { getInitials } from '../../utils/index';
 import type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';
 import { PersonRegular } from '@fluentui/react-icons';
 import { PresenceBadge } from '@fluentui/react-badge';
-import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { useFluent_unstable as useFluent, useAvatarContext } from '@fluentui/react-shared-contexts';
 
 export const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {
   const { dir } = useFluent();
-  const { name, size = 32, shape = 'circular', active = 'unset', activeAppearance = 'ring', idForColor } = props;
+  const { size: contextSize } = useAvatarContext();
+  const {
+    name,
+    size = contextSize ?? 32,
+    shape = 'circular',
+    active = 'unset',
+    activeAppearance = 'ring',
+    idForColor,
+  } = props;
   let { color = 'neutral' } = props;
 
   // Resolve 'colorful' to a specific color name
diff --git a/packages/react-components/react-shared-contexts/src/AvatarContext.ts b/packages/react-components/react-shared-contexts/src/AvatarContext.ts
new file mode 100644
index 00000000000000..fff6f496945c4b
--- /dev/null
+++ b/packages/react-components/react-shared-contexts/src/AvatarContext.ts
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+const avatarContext = React.createContext<AvatarContextValue | undefined>(undefined);
+
+/**
+ * @internal
+ */
+export interface AvatarContextValue {
+  size?: number;
+}
+
+const avatarContextDefaultValue: AvatarContextValue = {};
+
+/**
+ * @internal
+ */
+export const AvatarContextProvider = avatarContext.Provider;
+
+/**
+ * @internal
+ */
+export const useAvatarContext = () => React.useContext(avatarContext) ?? avatarContextDefaultValue;
diff --git a/packages/react-components/react-shared-contexts/src/index.ts b/packages/react-components/react-shared-contexts/src/index.ts
index b56d6505192f34..9fcba5f458d8b2 100644
--- a/packages/react-components/react-shared-contexts/src/index.ts
+++ b/packages/react-components/react-shared-contexts/src/index.ts
@@ -15,3 +15,6 @@ export type { TooltipVisibilityContextValue as TooltipVisibilityContextValue_uns
 
 export { Provider as Provider_unstable, useFluent as useFluent_unstable } from './ProviderContext';
 export type { ProviderContextValue as ProviderContextValue_unstable } from './ProviderContext';
+
+export { AvatarContextProvider, useAvatarContext } from './AvatarContext';
+export type { AvatarContextValue } from './AvatarContext';
diff --git a/packages/react-components/react-table/package.json b/packages/react-components/react-table/package.json
index 428d1cf67a5880..9a5dbd4b73253e 100644
--- a/packages/react-components/react-table/package.json
+++ b/packages/react-components/react-table/package.json
@@ -35,6 +35,7 @@
     "@fluentui/react-checkbox": "^9.0.4",
     "@fluentui/react-context-selector": "^9.0.2",
     "@fluentui/react-icons": "^2.0.175",
+    "@fluentui/react-shared-contexts": "^9.0.0",
     "@fluentui/react-tabster": "^9.1.0",
     "@fluentui/react-theme": "^9.0.0",
     "@fluentui/react-utilities": "^9.0.2",
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.tsx b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.tsx
index dd3368d98c97ef..59c7638e1afc12 100644
--- a/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.tsx
+++ b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useTableCellLayout_unstable } from './useTableCellLayout';
 import { renderTableCellLayout_unstable } from './renderTableCellLayout';
 import { useTableCellLayoutStyles_unstable } from './useTableCellLayoutStyles';
+import { useTableCellLayoutContextValues_unstable } from './useTableCellLayoutContextValues';
 import type { TableCellLayoutProps } from './TableCellLayout.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
@@ -12,7 +13,7 @@ export const TableCellLayout: ForwardRefComponent<TableCellLayoutProps> = React.
   const state = useTableCellLayout_unstable(props, ref);
 
   useTableCellLayoutStyles_unstable(state);
-  return renderTableCellLayout_unstable(state);
+  return renderTableCellLayout_unstable(state, useTableCellLayoutContextValues_unstable(state));
 });
 
 TableCellLayout.displayName = 'TableCellLayout';
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts
index 0238a65776cdf4..28dfb8b751da93 100644
--- a/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts
+++ b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts
@@ -1,4 +1,10 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { AvatarContextValue } from '@fluentui/react-shared-contexts';
+import type { TableContextValue } from '../Table/Table.types';
+
+export type TableCellLayoutContextValues = {
+  avatar: AvatarContextValue;
+};
 
 export type TableCellLayoutSlots = {
   root: Slot<'div'>;
@@ -34,4 +40,5 @@ export type TableCellLayoutProps = ComponentProps<Partial<TableCellLayoutSlots>>
 /**
  * State used in rendering TableCellLayout
  */
-export type TableCellLayoutState = ComponentState<TableCellLayoutSlots> & Pick<TableCellLayoutProps, 'appearance'>;
+export type TableCellLayoutState = ComponentState<TableCellLayoutSlots> &
+  Pick<TableCellLayoutProps, 'appearance'> & { size: TableContextValue['size'] };
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/renderTableCellLayout.tsx b/packages/react-components/react-table/src/components/TableCellLayout/renderTableCellLayout.tsx
index 26c059caee4af8..f98138b97178b7 100644
--- a/packages/react-components/react-table/src/components/TableCellLayout/renderTableCellLayout.tsx
+++ b/packages/react-components/react-table/src/components/TableCellLayout/renderTableCellLayout.tsx
@@ -1,16 +1,22 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import type { TableCellLayoutState, TableCellLayoutSlots } from './TableCellLayout.types';
+import { AvatarContextProvider } from '@fluentui/react-shared-contexts';
+import type { TableCellLayoutState, TableCellLayoutSlots, TableCellLayoutContextValues } from './TableCellLayout.types';
 
 /**
  * Render the final JSX of TableCellLayout
  */
-export const renderTableCellLayout_unstable = (state: TableCellLayoutState) => {
+export const renderTableCellLayout_unstable = (
+  state: TableCellLayoutState,
+  contextValues: TableCellLayoutContextValues,
+) => {
   const { slots, slotProps } = getSlots<TableCellLayoutSlots>(state);
 
   return (
     <slots.root {...slotProps.root}>
-      {slots.media && <slots.media {...slotProps.media} />}
+      <AvatarContextProvider value={contextValues.avatar}>
+        {slots.media && <slots.media {...slotProps.media} />}
+      </AvatarContextProvider>
       {slots.wrapper && (
         <slots.wrapper {...slotProps.wrapper}>
           {slots.main && <slots.main {...slotProps.main}>{slotProps.root.children}</slots.main>}
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts
index a6a7c8647e1341..67bf0ddcdc85b3 100644
--- a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts
+++ b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
 import type { TableCellLayoutProps, TableCellLayoutState } from './TableCellLayout.types';
+import { useTableContext } from '../../contexts/tableContext';
 
 /**
  * Create the state required to render TableCellLayout.
@@ -15,6 +16,8 @@ export const useTableCellLayout_unstable = (
   props: TableCellLayoutProps,
   ref: React.Ref<HTMLElement>,
 ): TableCellLayoutState => {
+  const size = useTableContext(ctx => ctx.size);
+
   return {
     components: {
       root: 'div',
@@ -29,5 +32,6 @@ export const useTableCellLayout_unstable = (
     media: resolveShorthand(props.media),
     description: resolveShorthand(props.description),
     wrapper: resolveShorthand(props.wrapper, { required: !!props.description || !!props.children }),
+    size,
   };
 };
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutContextValues.ts b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutContextValues.ts
new file mode 100644
index 00000000000000..63a964edcd616c
--- /dev/null
+++ b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutContextValues.ts
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { TableContextValue } from '../Table/Table.types';
+import type { TableCellLayoutState, TableCellLayoutContextValues } from './TableCellLayout.types';
+
+const tableAvatarSizeMap: Record<TableContextValue['size'], number | undefined> = {
+  medium: undefined,
+  small: 24,
+  smaller: 20,
+};
+
+export function useTableCellLayoutContextValues_unstable(state: TableCellLayoutState): TableCellLayoutContextValues {
+  const { size: tableSize } = state;
+
+  const avatar = React.useMemo(
+    () => ({
+      size: tableAvatarSizeMap[tableSize],
+    }),
+    [tableSize],
+  );
+
+  return {
+    avatar,
+  };
+}
diff --git a/packages/react-components/react-table/src/stories/Table/SizeSmall.stories.tsx b/packages/react-components/react-table/src/stories/Table/SizeSmall.stories.tsx
index 63c172514a4300..0ecb3c9dfd2c11 100644
--- a/packages/react-components/react-table/src/stories/Table/SizeSmall.stories.tsx
+++ b/packages/react-components/react-table/src/stories/Table/SizeSmall.stories.tsx
@@ -77,11 +77,7 @@ export const SizeSmall = () => {
             <TableCell>
               <TableCellLayout
                 media={
-                  <Avatar
-                    name={item.author.label}
-                    badge={{ status: item.author.status as PresenceBadgeStatus }}
-                    size={24}
-                  />
+                  <Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />
                 }
               >
                 {item.author.label}
diff --git a/packages/react-components/react-table/src/stories/Table/SizeSmaller.stories.tsx b/packages/react-components/react-table/src/stories/Table/SizeSmaller.stories.tsx
index 7d431c1cac5a23..4f5b18af0d397a 100644
--- a/packages/react-components/react-table/src/stories/Table/SizeSmaller.stories.tsx
+++ b/packages/react-components/react-table/src/stories/Table/SizeSmaller.stories.tsx
@@ -76,11 +76,7 @@ export const SizeSmaller = () => {
             <TableCell>
               <TableCellLayout
                 media={
-                  <Avatar
-                    name={item.author.label}
-                    badge={{ status: item.author.status as PresenceBadgeStatus }}
-                    size={20}
-                  />
+                  <Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />
                 }
               >
                 {item.author.label}

From 99a1e1451777c6cc46fb8cd26f1c354c15bf5185 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Thu, 15 Sep 2022 09:39:24 +0200
Subject: [PATCH 02/17] update md

---
 .../etc/react-shared-contexts.api.md                 | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md b/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md
index 342a64fed5ef73..8f0c81c873e38b 100644
--- a/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md
+++ b/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md
@@ -7,6 +7,15 @@
 import * as React_2 from 'react';
 import type { Theme } from '@fluentui/react-theme';
 
+// @internal (undocumented)
+export const AvatarContextProvider: React_2.Provider<AvatarContextValue | undefined>;
+
+// @internal (undocumented)
+export interface AvatarContextValue {
+    // (undocumented)
+    size?: number;
+}
+
 // @internal (undocumented)
 export const Provider_unstable: React_2.Provider<ProviderContextValue_unstable>;
 
@@ -41,6 +50,9 @@ export type TooltipVisibilityContextValue_unstable = {
 // @internal (undocumented)
 export const TooltipVisibilityProvider_unstable: React_2.Provider<TooltipVisibilityContextValue_unstable>;
 
+// @internal (undocumented)
+export const useAvatarContext: () => AvatarContextValue;
+
 // @public (undocumented)
 export function useFluent_unstable(): ProviderContextValue_unstable;
 

From b58bce6ddd55dd60e98efc73cc9a3cdd1a6a87ce Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Thu, 15 Sep 2022 09:41:00 +0200
Subject: [PATCH 03/17] changefiles

---
 ...-react-avatar-8bdbaa84-a19a-41b4-8e84-12aaaf55bb24.json | 7 +++++++
 ...ared-contexts-cb55fa3a-95bc-492f-aa57-1a7616941102.json | 7 +++++++
 ...i-react-table-f485043e-7e31-4a75-844c-3cecdcd998d6.json | 7 +++++++
 3 files changed, 21 insertions(+)
 create mode 100644 change/@fluentui-react-avatar-8bdbaa84-a19a-41b4-8e84-12aaaf55bb24.json
 create mode 100644 change/@fluentui-react-shared-contexts-cb55fa3a-95bc-492f-aa57-1a7616941102.json
 create mode 100644 change/@fluentui-react-table-f485043e-7e31-4a75-844c-3cecdcd998d6.json

diff --git a/change/@fluentui-react-avatar-8bdbaa84-a19a-41b4-8e84-12aaaf55bb24.json b/change/@fluentui-react-avatar-8bdbaa84-a19a-41b4-8e84-12aaaf55bb24.json
new file mode 100644
index 00000000000000..c0f775eac24990
--- /dev/null
+++ b/change/@fluentui-react-avatar-8bdbaa84-a19a-41b4-8e84-12aaaf55bb24.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: consume shared AvatarContext",
+  "packageName": "@fluentui/react-avatar",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-shared-contexts-cb55fa3a-95bc-492f-aa57-1a7616941102.json b/change/@fluentui-react-shared-contexts-cb55fa3a-95bc-492f-aa57-1a7616941102.json
new file mode 100644
index 00000000000000..2315393d13ccf3
--- /dev/null
+++ b/change/@fluentui-react-shared-contexts-cb55fa3a-95bc-492f-aa57-1a7616941102.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Implement AvatarContext",
+  "packageName": "@fluentui/react-shared-contexts",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-table-f485043e-7e31-4a75-844c-3cecdcd998d6.json b/change/@fluentui-react-table-f485043e-7e31-4a75-844c-3cecdcd998d6.json
new file mode 100644
index 00000000000000..240cb7d2f3c56c
--- /dev/null
+++ b/change/@fluentui-react-table-f485043e-7e31-4a75-844c-3cecdcd998d6.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: Use AvatarContext to override avatar size",
+  "packageName": "@fluentui/react-table",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}

From fa8dcb7b55c7868b2668951afd33f11a4593f7ff Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Thu, 15 Sep 2022 10:16:11 +0200
Subject: [PATCH 04/17] improve types

---
 .../react-avatar/src/components/Avatar/useAvatar.tsx      | 2 +-
 .../etc/react-shared-contexts.api.md                      | 2 +-
 .../react-shared-contexts/src/AvatarContext.ts            | 8 +++++++-
 .../src/components/TableCellLayout/useTableCellLayout.ts  | 2 +-
 .../TableCellLayout/useTableCellLayoutContextValues.ts    | 5 ++---
 5 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx b/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx
index c5d8915cb7e0a5..5c51ff5fc0b747 100644
--- a/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx
+++ b/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx
@@ -11,7 +11,7 @@ export const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElemen
   const { size: contextSize } = useAvatarContext();
   const {
     name,
-    size = contextSize ?? 32,
+    size = contextSize ?? (32 as const),
     shape = 'circular',
     active = 'unset',
     activeAppearance = 'ring',
diff --git a/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md b/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md
index 8f0c81c873e38b..df0c5c1726973c 100644
--- a/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md
+++ b/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md
@@ -13,7 +13,7 @@ export const AvatarContextProvider: React_2.Provider<AvatarContextValue | undefi
 // @internal (undocumented)
 export interface AvatarContextValue {
     // (undocumented)
-    size?: number;
+    size?: AvatarSizes;
 }
 
 // @internal (undocumented)
diff --git a/packages/react-components/react-shared-contexts/src/AvatarContext.ts b/packages/react-components/react-shared-contexts/src/AvatarContext.ts
index fff6f496945c4b..72653451b35cfa 100644
--- a/packages/react-components/react-shared-contexts/src/AvatarContext.ts
+++ b/packages/react-components/react-shared-contexts/src/AvatarContext.ts
@@ -2,11 +2,17 @@ import * as React from 'react';
 
 const avatarContext = React.createContext<AvatarContextValue | undefined>(undefined);
 
+/**
+ * Sizes that can be used for the Avatar
+ * Copied from the react-avatar package, if the sizes are incompatible then TS should fail
+ */
+type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
+
 /**
  * @internal
  */
 export interface AvatarContextValue {
-  size?: number;
+  size?: AvatarSizes;
 }
 
 const avatarContextDefaultValue: AvatarContextValue = {};
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts
index 67bf0ddcdc85b3..a940f823b4551c 100644
--- a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts
+++ b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts
@@ -16,7 +16,7 @@ export const useTableCellLayout_unstable = (
   props: TableCellLayoutProps,
   ref: React.Ref<HTMLElement>,
 ): TableCellLayoutState => {
-  const size = useTableContext(ctx => ctx.size);
+  const { size } = useTableContext();
 
   return {
     components: {
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutContextValues.ts b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutContextValues.ts
index 63a964edcd616c..a27488b1a82cfd 100644
--- a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutContextValues.ts
+++ b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutContextValues.ts
@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { TableContextValue } from '../Table/Table.types';
 import type { TableCellLayoutState, TableCellLayoutContextValues } from './TableCellLayout.types';
 
-const tableAvatarSizeMap: Record<TableContextValue['size'], number | undefined> = {
+const tableAvatarSizeMap = {
   medium: undefined,
   small: 24,
   smaller: 20,
-};
+} as const;
 
 export function useTableCellLayoutContextValues_unstable(state: TableCellLayoutState): TableCellLayoutContextValues {
   const { size: tableSize } = state;

From a1f6c92c9777e1fbd747f5770bf88d411c7e0b9d Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 20 Sep 2022 14:51:20 +0200
Subject: [PATCH 05/17] avatar sizes source of truth

---
 .../react-avatar/src/components/Avatar/Avatar.types.ts     | 3 ++-
 .../react-shared-contexts/src/AvatarContext.ts             | 2 +-
 .../react-components/react-shared-contexts/src/index.ts    | 2 +-
 .../components/TableCellLayout/TableCellLayout.types.ts    | 4 ++--
 .../src/components/TableCellLayout/useTableCellLayout.ts   | 7 +++++++
 .../TableCellLayout/useTableCellLayoutContextValues.ts     | 6 ------
 6 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts b/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts
index 5c68e0636cc6e8..30ae0bc73d3084 100644
--- a/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts
+++ b/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts
@@ -1,5 +1,6 @@
 import { PresenceBadge } from '@fluentui/react-badge';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { AvatarSizes as AvatarContextSizes } from '@fluentui/react-shared-contexts';
 
 export type AvatarSlots = {
   root: Slot<'span'>;
@@ -72,7 +73,7 @@ export type AvatarNamedColor =
 /**
  * Sizes that can be used for the Avatar
  */
-export type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
+export type AvatarSizes = AvatarContextSizes;
 
 /**
  * Properties for Avatar
diff --git a/packages/react-components/react-shared-contexts/src/AvatarContext.ts b/packages/react-components/react-shared-contexts/src/AvatarContext.ts
index 72653451b35cfa..3882bec3e9b065 100644
--- a/packages/react-components/react-shared-contexts/src/AvatarContext.ts
+++ b/packages/react-components/react-shared-contexts/src/AvatarContext.ts
@@ -6,7 +6,7 @@ const avatarContext = React.createContext<AvatarContextValue | undefined>(undefi
  * Sizes that can be used for the Avatar
  * Copied from the react-avatar package, if the sizes are incompatible then TS should fail
  */
-type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
+export type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
 
 /**
  * @internal
diff --git a/packages/react-components/react-shared-contexts/src/index.ts b/packages/react-components/react-shared-contexts/src/index.ts
index 9fcba5f458d8b2..1e2dfb70f772bd 100644
--- a/packages/react-components/react-shared-contexts/src/index.ts
+++ b/packages/react-components/react-shared-contexts/src/index.ts
@@ -17,4 +17,4 @@ export { Provider as Provider_unstable, useFluent as useFluent_unstable } from '
 export type { ProviderContextValue as ProviderContextValue_unstable } from './ProviderContext';
 
 export { AvatarContextProvider, useAvatarContext } from './AvatarContext';
-export type { AvatarContextValue } from './AvatarContext';
+export type { AvatarContextValue, AvatarSizes } from './AvatarContext';
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts
index 28dfb8b751da93..6326a5841f14a1 100644
--- a/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts
+++ b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts
@@ -1,5 +1,5 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import type { AvatarContextValue } from '@fluentui/react-shared-contexts';
+import type { AvatarContextValue, AvatarSizes } from '@fluentui/react-shared-contexts';
 import type { TableContextValue } from '../Table/Table.types';
 
 export type TableCellLayoutContextValues = {
@@ -41,4 +41,4 @@ export type TableCellLayoutProps = ComponentProps<Partial<TableCellLayoutSlots>>
  * State used in rendering TableCellLayout
  */
 export type TableCellLayoutState = ComponentState<TableCellLayoutSlots> &
-  Pick<TableCellLayoutProps, 'appearance'> & { size: TableContextValue['size'] };
+  Pick<TableCellLayoutProps, 'appearance'> & { size: TableContextValue['size']; avatarSize: AvatarSizes | undefined };
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts
index a940f823b4551c..f97ae91cb50f62 100644
--- a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts
+++ b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts
@@ -3,6 +3,12 @@ import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utiliti
 import type { TableCellLayoutProps, TableCellLayoutState } from './TableCellLayout.types';
 import { useTableContext } from '../../contexts/tableContext';
 
+const tableAvatarSizeMap = {
+  medium: undefined,
+  small: 24,
+  smaller: 20,
+} as const;
+
 /**
  * Create the state required to render TableCellLayout.
  *
@@ -33,5 +39,6 @@ export const useTableCellLayout_unstable = (
     description: resolveShorthand(props.description),
     wrapper: resolveShorthand(props.wrapper, { required: !!props.description || !!props.children }),
     size,
+    avatarSize: tableAvatarSizeMap[size],
   };
 };
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutContextValues.ts b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutContextValues.ts
index a27488b1a82cfd..e27fb23e386e3f 100644
--- a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutContextValues.ts
+++ b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutContextValues.ts
@@ -1,12 +1,6 @@
 import * as React from 'react';
 import type { TableCellLayoutState, TableCellLayoutContextValues } from './TableCellLayout.types';
 
-const tableAvatarSizeMap = {
-  medium: undefined,
-  small: 24,
-  smaller: 20,
-} as const;
-
 export function useTableCellLayoutContextValues_unstable(state: TableCellLayoutState): TableCellLayoutContextValues {
   const { size: tableSize } = state;
 

From 08b8920b818d1102d4a2fd3e4e34d59053309051 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 20 Sep 2022 14:51:33 +0200
Subject: [PATCH 06/17] remove doc

---
 .../react-shared-contexts/src/AvatarContext.ts              | 4 ----
 .../TableCellLayout/useTableCellLayoutContextValues.ts      | 6 +++---
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/react-components/react-shared-contexts/src/AvatarContext.ts b/packages/react-components/react-shared-contexts/src/AvatarContext.ts
index 3882bec3e9b065..c7bf5c9ccaa556 100644
--- a/packages/react-components/react-shared-contexts/src/AvatarContext.ts
+++ b/packages/react-components/react-shared-contexts/src/AvatarContext.ts
@@ -2,10 +2,6 @@ import * as React from 'react';
 
 const avatarContext = React.createContext<AvatarContextValue | undefined>(undefined);
 
-/**
- * Sizes that can be used for the Avatar
- * Copied from the react-avatar package, if the sizes are incompatible then TS should fail
- */
 export type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
 
 /**
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutContextValues.ts b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutContextValues.ts
index e27fb23e386e3f..271c0cbca8b0e3 100644
--- a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutContextValues.ts
+++ b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutContextValues.ts
@@ -2,13 +2,13 @@ import * as React from 'react';
 import type { TableCellLayoutState, TableCellLayoutContextValues } from './TableCellLayout.types';
 
 export function useTableCellLayoutContextValues_unstable(state: TableCellLayoutState): TableCellLayoutContextValues {
-  const { size: tableSize } = state;
+  const { avatarSize } = state;
 
   const avatar = React.useMemo(
     () => ({
-      size: tableAvatarSizeMap[tableSize],
+      size: avatarSize,
     }),
-    [tableSize],
+    [avatarSize],
   );
 
   return {

From 9fd4f3c29f5eaa1a50e69a2d9ebe7ba30f1e612b Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 20 Sep 2022 14:53:29 +0200
Subject: [PATCH 07/17] update mdn

---
 .../react-avatar/etc/react-avatar.api.md                 | 3 ++-
 .../etc/react-shared-contexts.api.md                     | 3 +++
 .../react-components/react-table/etc/react-table.api.md  | 9 +++++++--
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/react-avatar/etc/react-avatar.api.md b/packages/react-components/react-avatar/etc/react-avatar.api.md
index 5779770c5074c2..8a8a43e29b723c 100644
--- a/packages/react-components/react-avatar/etc/react-avatar.api.md
+++ b/packages/react-components/react-avatar/etc/react-avatar.api.md
@@ -6,6 +6,7 @@
 
 /// <reference types="react" />
 
+import type { AvatarSizes as AvatarSizes_2 } from '@fluentui/react-shared-contexts';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import { ContextSelector } from '@fluentui/react-context-selector';
@@ -127,7 +128,7 @@ export type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {
 };
 
 // @public
-export type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
+export type AvatarSizes = AvatarSizes_2;
 
 // @public (undocumented)
 export type AvatarSlots = {
diff --git a/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md b/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md
index df0c5c1726973c..5291aaa10a8014 100644
--- a/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md
+++ b/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md
@@ -16,6 +16,9 @@ export interface AvatarContextValue {
     size?: AvatarSizes;
 }
 
+// @public (undocumented)
+export type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
+
 // @internal (undocumented)
 export const Provider_unstable: React_2.Provider<ProviderContextValue_unstable>;
 
diff --git a/packages/react-components/react-table/etc/react-table.api.md b/packages/react-components/react-table/etc/react-table.api.md
index a049e92436d115..c2ed6199bdf9f6 100644
--- a/packages/react-components/react-table/etc/react-table.api.md
+++ b/packages/react-components/react-table/etc/react-table.api.md
@@ -7,6 +7,8 @@
 /// <reference types="react" />
 
 import { ARIAButtonSlotProps } from '@fluentui/react-aria';
+import type { AvatarContextValue } from '@fluentui/react-shared-contexts';
+import type { AvatarSizes } from '@fluentui/react-shared-contexts';
 import type { Checkbox } from '@fluentui/react-checkbox';
 import type { CheckboxProps } from '@fluentui/react-checkbox';
 import type { ComponentProps } from '@fluentui/react-utilities';
@@ -40,7 +42,7 @@ export const renderTableCell_unstable: (state: TableCellState) => JSX.Element;
 export const renderTableCellActions_unstable: (state: TableCellActionsState) => JSX.Element;
 
 // @public
-export const renderTableCellLayout_unstable: (state: TableCellLayoutState) => JSX.Element;
+export const renderTableCellLayout_unstable: (state: TableCellLayoutState, contextValues: TableCellLayoutContextValues) => JSX.Element;
 
 // @public
 export const renderTableHeader_unstable: (state: TableHeaderState) => JSX.Element;
@@ -136,7 +138,10 @@ export type TableCellLayoutSlots = {
 };
 
 // @public
-export type TableCellLayoutState = ComponentState<TableCellLayoutSlots> & Pick<TableCellLayoutProps, 'appearance'>;
+export type TableCellLayoutState = ComponentState<TableCellLayoutSlots> & Pick<TableCellLayoutProps, 'appearance'> & {
+    size: TableContextValue['size'];
+    avatarSize: AvatarSizes | undefined;
+};
 
 // @public
 export type TableCellProps = ComponentProps<TableCellSlots> & {};

From 18ba70d763f773da35af6b26f6e57a650c4e60f5 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 27 Sep 2022 18:09:51 +0200
Subject: [PATCH 08/17] use react-avatar-context

---
 .../etc/react-avatar-context.api.md           | 17 ++++++++++++
 .../react-avatar-context/package.json         |  1 -
 .../react-avatar-context/src/index.ts         | 26 +++++++++++++++++--
 .../react-avatar/package.json                 |  1 +
 .../src/components/Avatar/Avatar.types.ts     |  2 +-
 .../src/components/Avatar/useAvatar.tsx       |  3 ++-
 .../src/AvatarContext.ts                      | 24 -----------------
 .../react-shared-contexts/src/index.ts        |  3 ---
 .../react-components/react-table/package.json |  2 +-
 .../TableCellLayout/renderTableCellLayout.tsx |  2 +-
 10 files changed, 47 insertions(+), 34 deletions(-)
 delete mode 100644 packages/react-components/react-shared-contexts/src/AvatarContext.ts

diff --git a/packages/react-components/react-avatar-context/etc/react-avatar-context.api.md b/packages/react-components/react-avatar-context/etc/react-avatar-context.api.md
index 30d00c02ec77fb..012200682a8152 100644
--- a/packages/react-components/react-avatar-context/etc/react-avatar-context.api.md
+++ b/packages/react-components/react-avatar-context/etc/react-avatar-context.api.md
@@ -4,6 +4,23 @@
 
 ```ts
 
+import * as React_2 from 'react';
+
+// @internal (undocumented)
+export const AvatarContextProvider: React_2.Provider<AvatarContextValue | undefined>;
+
+// @internal (undocumented)
+export interface AvatarContextValue {
+    // (undocumented)
+    size?: AvatarSizes;
+}
+
+// @public (undocumented)
+export type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
+
+// @internal (undocumented)
+export const useAvatarContext: () => AvatarContextValue;
+
 // (No @packageDocumentation comment for this package)
 
 ```
diff --git a/packages/react-components/react-avatar-context/package.json b/packages/react-components/react-avatar-context/package.json
index 56b3e30c1997da..608c91c3e9ea03 100644
--- a/packages/react-components/react-avatar-context/package.json
+++ b/packages/react-components/react-avatar-context/package.json
@@ -1,7 +1,6 @@
 {
   "name": "@fluentui/react-avatar-context",
   "version": "9.0.0-alpha.0",
-  "private": true,
   "description": "Context to override avatar props",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
diff --git a/packages/react-components/react-avatar-context/src/index.ts b/packages/react-components/react-avatar-context/src/index.ts
index aacbad0068e241..c7bf5c9ccaa556 100644
--- a/packages/react-components/react-avatar-context/src/index.ts
+++ b/packages/react-components/react-avatar-context/src/index.ts
@@ -1,2 +1,24 @@
-// TODO: replace with real exports
-export {};
+import * as React from 'react';
+
+const avatarContext = React.createContext<AvatarContextValue | undefined>(undefined);
+
+export type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
+
+/**
+ * @internal
+ */
+export interface AvatarContextValue {
+  size?: AvatarSizes;
+}
+
+const avatarContextDefaultValue: AvatarContextValue = {};
+
+/**
+ * @internal
+ */
+export const AvatarContextProvider = avatarContext.Provider;
+
+/**
+ * @internal
+ */
+export const useAvatarContext = () => React.useContext(avatarContext) ?? avatarContextDefaultValue;
diff --git a/packages/react-components/react-avatar/package.json b/packages/react-components/react-avatar/package.json
index 3d09bd93e425b9..7bf963f0776b7f 100644
--- a/packages/react-components/react-avatar/package.json
+++ b/packages/react-components/react-avatar/package.json
@@ -35,6 +35,7 @@
     "es6-weak-map": "^2.0.2"
   },
   "dependencies": {
+    "@fluentui/react-avatar-context": "^9.0.0-alpha",
     "@fluentui/react-badge": "^9.0.6",
     "@fluentui/react-context-selector": "^9.0.3",
     "@fluentui/react-icons": "^2.0.175",
diff --git a/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts b/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts
index 9a4916aa64689b..919ca353f1201f 100644
--- a/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts
+++ b/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts
@@ -1,6 +1,6 @@
 import { PresenceBadge } from '@fluentui/react-badge';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import type { AvatarSizes as AvatarContextSizes } from '@fluentui/react-shared-contexts';
+import type { AvatarSizes as AvatarContextSizes } from '@fluentui/react-avatar-context';
 
 export type AvatarSlots = {
   root: Slot<'span'>;
diff --git a/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx b/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx
index a732fbdd0d5c42..b2d72a824c2694 100644
--- a/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx
+++ b/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx
@@ -4,7 +4,8 @@ import { getInitials } from '../../utils/index';
 import type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';
 import { PersonRegular } from '@fluentui/react-icons';
 import { PresenceBadge } from '@fluentui/react-badge';
-import { useFluent_unstable as useFluent, useAvatarContext } from '@fluentui/react-shared-contexts';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { useAvatarContext } from '@fluentui/react-avatar-context';
 
 export const DEFAULT_STRINGS = {
   active: 'active',
diff --git a/packages/react-components/react-shared-contexts/src/AvatarContext.ts b/packages/react-components/react-shared-contexts/src/AvatarContext.ts
deleted file mode 100644
index c7bf5c9ccaa556..00000000000000
--- a/packages/react-components/react-shared-contexts/src/AvatarContext.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as React from 'react';
-
-const avatarContext = React.createContext<AvatarContextValue | undefined>(undefined);
-
-export type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
-
-/**
- * @internal
- */
-export interface AvatarContextValue {
-  size?: AvatarSizes;
-}
-
-const avatarContextDefaultValue: AvatarContextValue = {};
-
-/**
- * @internal
- */
-export const AvatarContextProvider = avatarContext.Provider;
-
-/**
- * @internal
- */
-export const useAvatarContext = () => React.useContext(avatarContext) ?? avatarContextDefaultValue;
diff --git a/packages/react-components/react-shared-contexts/src/index.ts b/packages/react-components/react-shared-contexts/src/index.ts
index 1e2dfb70f772bd..b56d6505192f34 100644
--- a/packages/react-components/react-shared-contexts/src/index.ts
+++ b/packages/react-components/react-shared-contexts/src/index.ts
@@ -15,6 +15,3 @@ export type { TooltipVisibilityContextValue as TooltipVisibilityContextValue_uns
 
 export { Provider as Provider_unstable, useFluent as useFluent_unstable } from './ProviderContext';
 export type { ProviderContextValue as ProviderContextValue_unstable } from './ProviderContext';
-
-export { AvatarContextProvider, useAvatarContext } from './AvatarContext';
-export type { AvatarContextValue, AvatarSizes } from './AvatarContext';
diff --git a/packages/react-components/react-table/package.json b/packages/react-components/react-table/package.json
index a1731de1b599e6..fafe9c2a827f8e 100644
--- a/packages/react-components/react-table/package.json
+++ b/packages/react-components/react-table/package.json
@@ -32,9 +32,9 @@
   },
   "dependencies": {
     "@fluentui/react-aria": "^9.2.0",
+    "@fluentui/react-avatar-context": "^9.0.0-alpha",
     "@fluentui/react-checkbox": "^9.0.6",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-shared-contexts": "^9.0.1",
     "@fluentui/react-tabster": "^9.1.1",
     "@fluentui/react-theme": "^9.1.0",
     "@fluentui/react-utilities": "^9.1.0",
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/renderTableCellLayout.tsx b/packages/react-components/react-table/src/components/TableCellLayout/renderTableCellLayout.tsx
index f98138b97178b7..526dcb8c93321d 100644
--- a/packages/react-components/react-table/src/components/TableCellLayout/renderTableCellLayout.tsx
+++ b/packages/react-components/react-table/src/components/TableCellLayout/renderTableCellLayout.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { AvatarContextProvider } from '@fluentui/react-shared-contexts';
+import { AvatarContextProvider } from '@fluentui/react-avatar-context';
 import type { TableCellLayoutState, TableCellLayoutSlots, TableCellLayoutContextValues } from './TableCellLayout.types';
 
 /**

From e29a351b158b30b6f0630eac609c11a9bfedd3bd Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Wed, 28 Sep 2022 15:25:44 +0200
Subject: [PATCH 09/17] avatar context belongs in react-avatar

---
 .../etc/react-avatar-context.api.md           | 17 ------------
 .../react-avatar-context/package.json         |  1 +
 .../react-avatar-context/src/index.ts         | 26 ++-----------------
 .../react-avatar/etc/react-avatar.api.md      |  7 ++++-
 .../react-avatar/package.json                 |  1 -
 .../src/components/Avatar/Avatar.types.ts     |  2 +-
 .../src/components/Avatar/useAvatar.tsx       |  2 +-
 .../src/contexts/AvatarContext.ts             | 24 +++++++++++++++++
 .../react-avatar/src/contexts/index.ts        |  1 +
 .../react-avatar/src/index.ts                 |  7 ++++-
 .../react-components/react-table/package.json |  2 +-
 .../TableCellLayout/renderTableCellLayout.tsx | 10 ++++---
 12 files changed, 49 insertions(+), 51 deletions(-)
 create mode 100644 packages/react-components/react-avatar/src/contexts/AvatarContext.ts

diff --git a/packages/react-components/react-avatar-context/etc/react-avatar-context.api.md b/packages/react-components/react-avatar-context/etc/react-avatar-context.api.md
index 012200682a8152..30d00c02ec77fb 100644
--- a/packages/react-components/react-avatar-context/etc/react-avatar-context.api.md
+++ b/packages/react-components/react-avatar-context/etc/react-avatar-context.api.md
@@ -4,23 +4,6 @@
 
 ```ts
 
-import * as React_2 from 'react';
-
-// @internal (undocumented)
-export const AvatarContextProvider: React_2.Provider<AvatarContextValue | undefined>;
-
-// @internal (undocumented)
-export interface AvatarContextValue {
-    // (undocumented)
-    size?: AvatarSizes;
-}
-
-// @public (undocumented)
-export type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
-
-// @internal (undocumented)
-export const useAvatarContext: () => AvatarContextValue;
-
 // (No @packageDocumentation comment for this package)
 
 ```
diff --git a/packages/react-components/react-avatar-context/package.json b/packages/react-components/react-avatar-context/package.json
index 608c91c3e9ea03..56b3e30c1997da 100644
--- a/packages/react-components/react-avatar-context/package.json
+++ b/packages/react-components/react-avatar-context/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@fluentui/react-avatar-context",
   "version": "9.0.0-alpha.0",
+  "private": true,
   "description": "Context to override avatar props",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
diff --git a/packages/react-components/react-avatar-context/src/index.ts b/packages/react-components/react-avatar-context/src/index.ts
index c7bf5c9ccaa556..aacbad0068e241 100644
--- a/packages/react-components/react-avatar-context/src/index.ts
+++ b/packages/react-components/react-avatar-context/src/index.ts
@@ -1,24 +1,2 @@
-import * as React from 'react';
-
-const avatarContext = React.createContext<AvatarContextValue | undefined>(undefined);
-
-export type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
-
-/**
- * @internal
- */
-export interface AvatarContextValue {
-  size?: AvatarSizes;
-}
-
-const avatarContextDefaultValue: AvatarContextValue = {};
-
-/**
- * @internal
- */
-export const AvatarContextProvider = avatarContext.Provider;
-
-/**
- * @internal
- */
-export const useAvatarContext = () => React.useContext(avatarContext) ?? avatarContextDefaultValue;
+// TODO: replace with real exports
+export {};
diff --git a/packages/react-components/react-avatar/etc/react-avatar.api.md b/packages/react-components/react-avatar/etc/react-avatar.api.md
index 3fe646d8111eac..3a42f8aaf09d36 100644
--- a/packages/react-components/react-avatar/etc/react-avatar.api.md
+++ b/packages/react-components/react-avatar/etc/react-avatar.api.md
@@ -6,7 +6,6 @@
 
 /// <reference types="react" />
 
-import type { AvatarSizes as AvatarSizes_2 } from '@fluentui/react-shared-contexts';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import { ContextSelector } from '@fluentui/react-context-selector';
@@ -28,6 +27,9 @@ export const Avatar: ForwardRefComponent<AvatarProps>;
 // @public (undocumented)
 export const avatarClassNames: SlotClassNames<AvatarSlots>;
 
+// @internal (undocumented)
+export const AvatarContextProvider: React_2.Provider<AvatarContextValue | undefined>;
+
 // @public
 export const AvatarGroup: ForwardRefComponent<AvatarGroupProps>;
 
@@ -179,6 +181,9 @@ export const renderAvatarGroupPopover_unstable: (state: AvatarGroupPopoverState,
 // @public (undocumented)
 export const useAvatar_unstable: (props: AvatarProps, ref: React_2.Ref<HTMLElement>) => AvatarState;
 
+// @internal (undocumented)
+export const useAvatarContext: () => AvatarContextValue;
+
 // @public
 export const useAvatarGroup_unstable: (props: AvatarGroupProps, ref: React_2.Ref<HTMLElement>) => AvatarGroupState;
 
diff --git a/packages/react-components/react-avatar/package.json b/packages/react-components/react-avatar/package.json
index 7bf963f0776b7f..3d09bd93e425b9 100644
--- a/packages/react-components/react-avatar/package.json
+++ b/packages/react-components/react-avatar/package.json
@@ -35,7 +35,6 @@
     "es6-weak-map": "^2.0.2"
   },
   "dependencies": {
-    "@fluentui/react-avatar-context": "^9.0.0-alpha",
     "@fluentui/react-badge": "^9.0.6",
     "@fluentui/react-context-selector": "^9.0.3",
     "@fluentui/react-icons": "^2.0.175",
diff --git a/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts b/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts
index 919ca353f1201f..7fe9a997a96f51 100644
--- a/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts
+++ b/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts
@@ -1,6 +1,6 @@
 import { PresenceBadge } from '@fluentui/react-badge';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import type { AvatarSizes as AvatarContextSizes } from '@fluentui/react-avatar-context';
+import type { AvatarSizes as AvatarContextSizes } from '../../contexts/AvatarContext';
 
 export type AvatarSlots = {
   root: Slot<'span'>;
diff --git a/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx b/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx
index b2d72a824c2694..7fda29c056d86d 100644
--- a/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx
+++ b/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx
@@ -5,7 +5,7 @@ import type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types'
 import { PersonRegular } from '@fluentui/react-icons';
 import { PresenceBadge } from '@fluentui/react-badge';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { useAvatarContext } from '@fluentui/react-avatar-context';
+import { useAvatarContext } from '../../contexts/AvatarContext';
 
 export const DEFAULT_STRINGS = {
   active: 'active',
diff --git a/packages/react-components/react-avatar/src/contexts/AvatarContext.ts b/packages/react-components/react-avatar/src/contexts/AvatarContext.ts
new file mode 100644
index 00000000000000..c7bf5c9ccaa556
--- /dev/null
+++ b/packages/react-components/react-avatar/src/contexts/AvatarContext.ts
@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+const avatarContext = React.createContext<AvatarContextValue | undefined>(undefined);
+
+export type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
+
+/**
+ * @internal
+ */
+export interface AvatarContextValue {
+  size?: AvatarSizes;
+}
+
+const avatarContextDefaultValue: AvatarContextValue = {};
+
+/**
+ * @internal
+ */
+export const AvatarContextProvider = avatarContext.Provider;
+
+/**
+ * @internal
+ */
+export const useAvatarContext = () => React.useContext(avatarContext) ?? avatarContextDefaultValue;
diff --git a/packages/react-components/react-avatar/src/contexts/index.ts b/packages/react-components/react-avatar/src/contexts/index.ts
index 5316e465d33035..9a81f44d0634db 100644
--- a/packages/react-components/react-avatar/src/contexts/index.ts
+++ b/packages/react-components/react-avatar/src/contexts/index.ts
@@ -1 +1,2 @@
 export * from './AvatarGroupContext';
+export * from './AvatarContext';
diff --git a/packages/react-components/react-avatar/src/index.ts b/packages/react-components/react-avatar/src/index.ts
index b49aba63355af0..292e998c293276 100644
--- a/packages/react-components/react-avatar/src/index.ts
+++ b/packages/react-components/react-avatar/src/index.ts
@@ -39,4 +39,9 @@ export {
   useAvatarGroupPopover_unstable,
 } from './AvatarGroupPopover';
 export type { AvatarGroupPopoverProps, AvatarGroupPopoverSlots, AvatarGroupPopoverState } from './AvatarGroupPopover';
-export { AvatarGroupProvider, useAvatarGroupContext_unstable } from './contexts/index';
+export {
+  AvatarGroupProvider,
+  useAvatarGroupContext_unstable,
+  AvatarContextProvider,
+  useAvatarContext,
+} from './contexts/index';
diff --git a/packages/react-components/react-table/package.json b/packages/react-components/react-table/package.json
index fafe9c2a827f8e..c5e9e78533a574 100644
--- a/packages/react-components/react-table/package.json
+++ b/packages/react-components/react-table/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@fluentui/react-aria": "^9.2.0",
-    "@fluentui/react-avatar-context": "^9.0.0-alpha",
+    "@fluentui/react-avatar": "^9.1.1",
     "@fluentui/react-checkbox": "^9.0.6",
     "@fluentui/react-icons": "^2.0.175",
     "@fluentui/react-tabster": "^9.1.1",
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/renderTableCellLayout.tsx b/packages/react-components/react-table/src/components/TableCellLayout/renderTableCellLayout.tsx
index 526dcb8c93321d..e3f8d155d7a790 100644
--- a/packages/react-components/react-table/src/components/TableCellLayout/renderTableCellLayout.tsx
+++ b/packages/react-components/react-table/src/components/TableCellLayout/renderTableCellLayout.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { AvatarContextProvider } from '@fluentui/react-avatar-context';
+import { AvatarContextProvider } from '@fluentui/react-avatar';
 import type { TableCellLayoutState, TableCellLayoutSlots, TableCellLayoutContextValues } from './TableCellLayout.types';
 
 /**
@@ -14,9 +14,11 @@ export const renderTableCellLayout_unstable = (
 
   return (
     <slots.root {...slotProps.root}>
-      <AvatarContextProvider value={contextValues.avatar}>
-        {slots.media && <slots.media {...slotProps.media} />}
-      </AvatarContextProvider>
+      {slots.media && (
+        <AvatarContextProvider value={contextValues.avatar}>
+          <slots.media {...slotProps.media} />
+        </AvatarContextProvider>
+      )}
       {slots.wrapper && (
         <slots.wrapper {...slotProps.wrapper}>
           {slots.main && <slots.main {...slotProps.main}>{slotProps.root.children}</slots.main>}

From f792ca24fbac0cac20ca2f4cfc514996be2326e9 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Wed, 28 Sep 2022 15:27:56 +0200
Subject: [PATCH 10/17] be explicit about medium size

---
 .../src/components/TableCellLayout/useTableCellLayout.ts        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts
index f97ae91cb50f62..e395b2161ba61b 100644
--- a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts
+++ b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts
@@ -4,7 +4,7 @@ import type { TableCellLayoutProps, TableCellLayoutState } from './TableCellLayo
 import { useTableContext } from '../../contexts/tableContext';
 
 const tableAvatarSizeMap = {
-  medium: undefined,
+  medium: 32,
   small: 24,
   smaller: 20,
 } as const;

From e48ff9c6adce9a2fc78a6872902c1810ea12c8cf Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Wed, 28 Sep 2022 15:31:30 +0200
Subject: [PATCH 11/17] avatar sizes exported from react-avatar

---
 .../react-avatar/etc/react-avatar.api.md                 | 2 +-
 .../react-avatar/src/components/Avatar/Avatar.types.ts   | 9 +++------
 .../react-avatar/src/contexts/AvatarContext.ts           | 3 +++
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/react-components/react-avatar/etc/react-avatar.api.md b/packages/react-components/react-avatar/etc/react-avatar.api.md
index 3a42f8aaf09d36..94d841ea49b5b5 100644
--- a/packages/react-components/react-avatar/etc/react-avatar.api.md
+++ b/packages/react-components/react-avatar/etc/react-avatar.api.md
@@ -130,7 +130,7 @@ export type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {
 };
 
 // @public
-export type AvatarSizes = AvatarSizes_2;
+export type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
 
 // @public (undocumented)
 export type AvatarSlots = {
diff --git a/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts b/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts
index 7fe9a997a96f51..c0f4959d37d758 100644
--- a/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts
+++ b/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts
@@ -1,6 +1,8 @@
 import { PresenceBadge } from '@fluentui/react-badge';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import type { AvatarSizes as AvatarContextSizes } from '../../contexts/AvatarContext';
+import type { AvatarSizes } from '../../contexts/AvatarContext';
+
+export type { AvatarSizes } from '../../contexts/AvatarContext';
 
 export type AvatarSlots = {
   root: Slot<'span'>;
@@ -70,11 +72,6 @@ export type AvatarNamedColor =
   | 'platinum'
   | 'anchor';
 
-/**
- * Sizes that can be used for the Avatar
- */
-export type AvatarSizes = AvatarContextSizes;
-
 /**
  * Properties for Avatar
  */
diff --git a/packages/react-components/react-avatar/src/contexts/AvatarContext.ts b/packages/react-components/react-avatar/src/contexts/AvatarContext.ts
index c7bf5c9ccaa556..2bc776d0f9ac8e 100644
--- a/packages/react-components/react-avatar/src/contexts/AvatarContext.ts
+++ b/packages/react-components/react-avatar/src/contexts/AvatarContext.ts
@@ -2,6 +2,9 @@ import * as React from 'react';
 
 const avatarContext = React.createContext<AvatarContextValue | undefined>(undefined);
 
+/**
+ * Sizes for the avatar
+ */
 export type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
 
 /**

From bcf7dab00a29b65c3c0b59bf6a9312f8d4414700 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Wed, 28 Sep 2022 15:34:17 +0200
Subject: [PATCH 12/17] remove casts for status

---
 .../src/stories/Table/SizeSmall.stories.tsx      | 16 ++++++----------
 .../src/stories/Table/SizeSmaller.stories.tsx    | 16 ++++++----------
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/packages/react-components/react-table/src/stories/Table/SizeSmall.stories.tsx b/packages/react-components/react-table/src/stories/Table/SizeSmall.stories.tsx
index 0ecb3c9dfd2c11..7f6558c7465e73 100644
--- a/packages/react-components/react-table/src/stories/Table/SizeSmall.stories.tsx
+++ b/packages/react-components/react-table/src/stories/Table/SizeSmall.stories.tsx
@@ -8,14 +8,14 @@ import {
   DocumentPdfRegular,
   VideoRegular,
 } from '@fluentui/react-icons';
-import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
+import { Avatar } from '@fluentui/react-components';
 import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell } from '../..';
 import { TableCellLayout } from '../../components/TableCellLayout/TableCellLayout';
 
 const items = [
   {
     file: { label: 'Meeting notes', icon: <DocumentRegular /> },
-    author: { label: 'Max Mustermann', status: 'available' },
+    author: { label: 'Max Mustermann', status: 'available' as const },
     lastUpdated: { label: '7h ago', timestamp: 1 },
     lastUpdate: {
       label: 'You edited this',
@@ -24,7 +24,7 @@ const items = [
   },
   {
     file: { label: 'Thursday presentation', icon: <FolderRegular /> },
-    author: { label: 'Erika Mustermann', status: 'busy' },
+    author: { label: 'Erika Mustermann', status: 'busy' as const },
     lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
     lastUpdate: {
       label: 'You recently opened this',
@@ -33,7 +33,7 @@ const items = [
   },
   {
     file: { label: 'Training recording', icon: <VideoRegular /> },
-    author: { label: 'John Doe', status: 'away' },
+    author: { label: 'John Doe', status: 'away' as const },
     lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
     lastUpdate: {
       label: 'You recently opened this',
@@ -42,7 +42,7 @@ const items = [
   },
   {
     file: { label: 'Purchase order', icon: <DocumentPdfRegular /> },
-    author: { label: 'Jane Doe', status: 'offline' },
+    author: { label: 'Jane Doe', status: 'offline' as const },
     lastUpdated: { label: 'Tue at 9:30 AM', timestamp: 3 },
     lastUpdate: {
       label: 'You shared this in a Teams chat',
@@ -75,11 +75,7 @@ export const SizeSmall = () => {
               <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>
             </TableCell>
             <TableCell>
-              <TableCellLayout
-                media={
-                  <Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />
-                }
-              >
+              <TableCellLayout media={<Avatar name={item.author.label} badge={{ status: item.author.status }} />}>
                 {item.author.label}
               </TableCellLayout>
             </TableCell>
diff --git a/packages/react-components/react-table/src/stories/Table/SizeSmaller.stories.tsx b/packages/react-components/react-table/src/stories/Table/SizeSmaller.stories.tsx
index 4f5b18af0d397a..1a4daabf1c913b 100644
--- a/packages/react-components/react-table/src/stories/Table/SizeSmaller.stories.tsx
+++ b/packages/react-components/react-table/src/stories/Table/SizeSmaller.stories.tsx
@@ -8,13 +8,13 @@ import {
   DocumentPdfRegular,
   VideoRegular,
 } from '@fluentui/react-icons';
-import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
+import { Avatar } from '@fluentui/react-components';
 import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell, TableCellLayout } from '../..';
 
 const items = [
   {
     file: { label: 'Meeting notes', icon: <DocumentRegular /> },
-    author: { label: 'Max Mustermann', status: 'available' },
+    author: { label: 'Max Mustermann', status: 'available' as const },
     lastUpdated: { label: '7h ago', timestamp: 1 },
     lastUpdate: {
       label: 'You edited this',
@@ -23,7 +23,7 @@ const items = [
   },
   {
     file: { label: 'Thursday presentation', icon: <FolderRegular /> },
-    author: { label: 'Erika Mustermann', status: 'busy' },
+    author: { label: 'Erika Mustermann', status: 'busy' as const },
     lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
     lastUpdate: {
       label: 'You recently opened this',
@@ -32,7 +32,7 @@ const items = [
   },
   {
     file: { label: 'Training recording', icon: <VideoRegular /> },
-    author: { label: 'John Doe', status: 'away' },
+    author: { label: 'John Doe', status: 'away' as const },
     lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
     lastUpdate: {
       label: 'You recently opened this',
@@ -41,7 +41,7 @@ const items = [
   },
   {
     file: { label: 'Purchase order', icon: <DocumentPdfRegular /> },
-    author: { label: 'Jane Doe', status: 'offline' },
+    author: { label: 'Jane Doe', status: 'offline' as const },
     lastUpdated: { label: 'Tue at 9:30 AM', timestamp: 3 },
     lastUpdate: {
       label: 'You shared this in a Teams chat',
@@ -74,11 +74,7 @@ export const SizeSmaller = () => {
               <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>
             </TableCell>
             <TableCell>
-              <TableCellLayout
-                media={
-                  <Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />
-                }
-              >
+              <TableCellLayout media={<Avatar name={item.author.label} badge={{ status: item.author.status }} />}>
                 {item.author.label}
               </TableCellLayout>
             </TableCell>

From e2110739e7b5564905baf76c2ee11168621e9f24 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Wed, 28 Sep 2022 17:55:39 +0200
Subject: [PATCH 13/17] update md

---
 .../etc/react-shared-contexts.api.md              | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md b/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md
index 5291aaa10a8014..342a64fed5ef73 100644
--- a/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md
+++ b/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md
@@ -7,18 +7,6 @@
 import * as React_2 from 'react';
 import type { Theme } from '@fluentui/react-theme';
 
-// @internal (undocumented)
-export const AvatarContextProvider: React_2.Provider<AvatarContextValue | undefined>;
-
-// @internal (undocumented)
-export interface AvatarContextValue {
-    // (undocumented)
-    size?: AvatarSizes;
-}
-
-// @public (undocumented)
-export type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
-
 // @internal (undocumented)
 export const Provider_unstable: React_2.Provider<ProviderContextValue_unstable>;
 
@@ -53,9 +41,6 @@ export type TooltipVisibilityContextValue_unstable = {
 // @internal (undocumented)
 export const TooltipVisibilityProvider_unstable: React_2.Provider<TooltipVisibilityContextValue_unstable>;
 
-// @internal (undocumented)
-export const useAvatarContext: () => AvatarContextValue;
-
 // @public (undocumented)
 export function useFluent_unstable(): ProviderContextValue_unstable;
 

From a847489f765627a35e2ceb3e3066b7a52c4c63ab Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Wed, 28 Sep 2022 18:17:22 +0200
Subject: [PATCH 14/17] update import

---
 .../src/components/TableCellLayout/TableCellLayout.types.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts
index 6326a5841f14a1..79c8966b360643 100644
--- a/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts
+++ b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts
@@ -1,5 +1,5 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import type { AvatarContextValue, AvatarSizes } from '@fluentui/react-shared-contexts';
+import type { AvatarContextValue, AvatarSizes } from '@fluentui/react-avatar';
 import type { TableContextValue } from '../Table/Table.types';
 
 export type TableCellLayoutContextValues = {

From d0a098deb3349820955562821260c14202d99092 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Wed, 28 Sep 2022 20:03:16 +0200
Subject: [PATCH 15/17] define avatar size in avatar types

---
 .../react-avatar/src/components/Avatar/Avatar.types.ts      | 6 ++++--
 .../react-avatar/src/contexts/AvatarContext.ts              | 6 +-----
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts b/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts
index c0f4959d37d758..1474b46dda127a 100644
--- a/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts
+++ b/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts
@@ -1,8 +1,10 @@
 import { PresenceBadge } from '@fluentui/react-badge';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import type { AvatarSizes } from '../../contexts/AvatarContext';
 
-export type { AvatarSizes } from '../../contexts/AvatarContext';
+/**
+ * Sizes for the avatar
+ */
+export type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
 
 export type AvatarSlots = {
   root: Slot<'span'>;
diff --git a/packages/react-components/react-avatar/src/contexts/AvatarContext.ts b/packages/react-components/react-avatar/src/contexts/AvatarContext.ts
index 2bc776d0f9ac8e..39bb4d84c93f8b 100644
--- a/packages/react-components/react-avatar/src/contexts/AvatarContext.ts
+++ b/packages/react-components/react-avatar/src/contexts/AvatarContext.ts
@@ -1,12 +1,8 @@
 import * as React from 'react';
+import { AvatarSizes } from '../components/Avatar/Avatar.types';
 
 const avatarContext = React.createContext<AvatarContextValue | undefined>(undefined);
 
-/**
- * Sizes for the avatar
- */
-export type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
-
 /**
  * @internal
  */

From ef70cc85d7564264a5c0978848ed470996deda60 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Wed, 28 Sep 2022 20:05:00 +0200
Subject: [PATCH 16/17] update changefiles

---
 ...-react-avatar-8bdbaa84-a19a-41b4-8e84-12aaaf55bb24.json | 2 +-
 ...ared-contexts-cb55fa3a-95bc-492f-aa57-1a7616941102.json | 7 -------
 2 files changed, 1 insertion(+), 8 deletions(-)
 delete mode 100644 change/@fluentui-react-shared-contexts-cb55fa3a-95bc-492f-aa57-1a7616941102.json

diff --git a/change/@fluentui-react-avatar-8bdbaa84-a19a-41b4-8e84-12aaaf55bb24.json b/change/@fluentui-react-avatar-8bdbaa84-a19a-41b4-8e84-12aaaf55bb24.json
index c0f775eac24990..24b392b1a54ac2 100644
--- a/change/@fluentui-react-avatar-8bdbaa84-a19a-41b4-8e84-12aaaf55bb24.json
+++ b/change/@fluentui-react-avatar-8bdbaa84-a19a-41b4-8e84-12aaaf55bb24.json
@@ -1,6 +1,6 @@
 {
   "type": "minor",
-  "comment": "feat: consume shared AvatarContext",
+  "comment": "feat: Implement avatar context for slot overrides",
   "packageName": "@fluentui/react-avatar",
   "email": "lingfangao@hotmail.com",
   "dependentChangeType": "patch"
diff --git a/change/@fluentui-react-shared-contexts-cb55fa3a-95bc-492f-aa57-1a7616941102.json b/change/@fluentui-react-shared-contexts-cb55fa3a-95bc-492f-aa57-1a7616941102.json
deleted file mode 100644
index 2315393d13ccf3..00000000000000
--- a/change/@fluentui-react-shared-contexts-cb55fa3a-95bc-492f-aa57-1a7616941102.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "feat: Implement AvatarContext",
-  "packageName": "@fluentui/react-shared-contexts",
-  "email": "lingfangao@hotmail.com",
-  "dependentChangeType": "patch"
-}

From 810164ed937fcc3cb59a565c3c22419079715ce4 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Wed, 28 Sep 2022 20:54:56 +0200
Subject: [PATCH 17/17] update table types

---
 .../react-avatar/etc/react-avatar.api.md                 | 6 ++++++
 packages/react-components/react-avatar/src/index.ts      | 1 +
 .../react-components/react-table/etc/react-table.api.md  | 4 +---
 .../components/TableCellLayout/TableCellLayout.types.ts  | 9 +++++----
 .../src/components/TableCellLayout/useTableCellLayout.ts | 1 -
 5 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/react-components/react-avatar/etc/react-avatar.api.md b/packages/react-components/react-avatar/etc/react-avatar.api.md
index 94d841ea49b5b5..24e29dceca7fca 100644
--- a/packages/react-components/react-avatar/etc/react-avatar.api.md
+++ b/packages/react-components/react-avatar/etc/react-avatar.api.md
@@ -30,6 +30,12 @@ export const avatarClassNames: SlotClassNames<AvatarSlots>;
 // @internal (undocumented)
 export const AvatarContextProvider: React_2.Provider<AvatarContextValue | undefined>;
 
+// @internal (undocumented)
+export interface AvatarContextValue {
+    // (undocumented)
+    size?: AvatarSizes;
+}
+
 // @public
 export const AvatarGroup: ForwardRefComponent<AvatarGroupProps>;
 
diff --git a/packages/react-components/react-avatar/src/index.ts b/packages/react-components/react-avatar/src/index.ts
index 292e998c293276..0dd61eebe10280 100644
--- a/packages/react-components/react-avatar/src/index.ts
+++ b/packages/react-components/react-avatar/src/index.ts
@@ -45,3 +45,4 @@ export {
   AvatarContextProvider,
   useAvatarContext,
 } from './contexts/index';
+export type { AvatarContextValue } from './contexts/index';
diff --git a/packages/react-components/react-table/etc/react-table.api.md b/packages/react-components/react-table/etc/react-table.api.md
index db090d1e9e1d46..ffe8ca6bf919cb 100644
--- a/packages/react-components/react-table/etc/react-table.api.md
+++ b/packages/react-components/react-table/etc/react-table.api.md
@@ -7,8 +7,7 @@
 /// <reference types="react" />
 
 import { ARIAButtonSlotProps } from '@fluentui/react-aria';
-import type { AvatarContextValue } from '@fluentui/react-shared-contexts';
-import type { AvatarSizes } from '@fluentui/react-shared-contexts';
+import type { AvatarSizes } from '@fluentui/react-avatar';
 import type { Checkbox } from '@fluentui/react-checkbox';
 import type { CheckboxProps } from '@fluentui/react-checkbox';
 import type { ComponentProps } from '@fluentui/react-utilities';
@@ -141,7 +140,6 @@ export type TableCellLayoutSlots = {
 
 // @public
 export type TableCellLayoutState = ComponentState<TableCellLayoutSlots> & Pick<TableCellLayoutProps, 'appearance'> & {
-    size: TableContextValue['size'];
     avatarSize: AvatarSizes | undefined;
 };
 
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts
index 79c8966b360643..1cae8d48f6f9f3 100644
--- a/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts
+++ b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts
@@ -1,9 +1,10 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import type { AvatarContextValue, AvatarSizes } from '@fluentui/react-avatar';
-import type { TableContextValue } from '../Table/Table.types';
+import type { AvatarSizes } from '@fluentui/react-avatar';
 
 export type TableCellLayoutContextValues = {
-  avatar: AvatarContextValue;
+  avatar: {
+    size?: AvatarSizes;
+  };
 };
 
 export type TableCellLayoutSlots = {
@@ -41,4 +42,4 @@ export type TableCellLayoutProps = ComponentProps<Partial<TableCellLayoutSlots>>
  * State used in rendering TableCellLayout
  */
 export type TableCellLayoutState = ComponentState<TableCellLayoutSlots> &
-  Pick<TableCellLayoutProps, 'appearance'> & { size: TableContextValue['size']; avatarSize: AvatarSizes | undefined };
+  Pick<TableCellLayoutProps, 'appearance'> & { avatarSize: AvatarSizes | undefined };
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts
index e395b2161ba61b..e8c73c594f1ddf 100644
--- a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts
+++ b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts
@@ -38,7 +38,6 @@ export const useTableCellLayout_unstable = (
     media: resolveShorthand(props.media),
     description: resolveShorthand(props.description),
     wrapper: resolveShorthand(props.wrapper, { required: !!props.description || !!props.children }),
-    size,
     avatarSize: tableAvatarSizeMap[size],
   };
 };