chore(react-avatar): Adding warnings on use of AvatarGroup and AvatarGroupItem

[sopranopillow]

Current Behavior

• AvatarGroup does not warn if an Avatar component is used instead of AvatarGroupItem.
• AvatarGroupItem does not warn if it isn't being used inside an AvatarGroup.

New Behavior

• AvatarGroup now warns if a child is not of type AvatarGroupItem.
• AvatarGroupItem now warns if it isn't being used inside an AvatarGroup.

Related Issue(s)

#22240

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 84819d3:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[fabricteam]

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-avatar Avatar	45.64 kB 13.303 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	184.818 kB 51.18 kB
react-components react-components: FluentProvider & webLightTheme	33.988 kB 11.108 kB

_{🤖 This report was generated against 5ea871d03d388b192a83e2e5c0e0717e7dc61add}

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 5ea871d03d388b192a83e2e5c0e0717e7dc61add (build)

[fabricteam]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	886	912	5000
Button	mount	540	557	5000
FluentProvider	mount	1819	1872	5000
FluentProviderWithTheme	mount	294	288	10
FluentProviderWithTheme	virtual-rerender	208	221	10
FluentProviderWithTheme	virtual-rerender-with-unmount	319	307	10
MakeStyles	mount	1544	1570	50000

[layershifter]

Please consider to revert this PR as it breaks composition patterns in React 🙁 For example, the snippet below will produce warnings on valid component's usage:

function CustomAvatarGroupItem(props) {
  return <AvatarGroupItem {...defaultProps} {...props} />;
}

function App() {
  return (
    <AvatarGroup>
      <CustomAvatarGroupItem />
    </AvatarGroup>
  );
}