feat(react-avatar): add base hooks for Avatar component

[dmytrokirpa]

Previous Behavior

New Behavior

Added useAvatarBase_unstable hook that contains state for logic and slots (but excludes the badge slot and badge-related props). Exports are commented out intentionally, as we'll uncomment them in experimental branch for experimental release.

Example how to compose a custom Avatar component:

import * as React from 'react';
import type { AvatarProps } from '@fluentui/react-avatar';
import {
  useAvatarBase_unstable,
  renderAvatar_unstable,
} from '@fluentui/react-avatar';

const CustomAvatar = React.forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {
  const state = useAvatarBase_unstable(
    {
      ...props,
      // Customize default icon if needed
      icon: props.icon ?? <CustomPersonIcon />,
    },
    ref,
  );

  state.root.className = ['custom-avatar', state.root.className].filter(Boolean).join(' ');

  return renderAvatar_unstable(state);
});

export const Example: React.FC = () => {
  return (
    <div>
      <CustomAvatar name="John Doe" />
      <CustomAvatar name="Jane Smith" icon={<CustomIcon />} />
    </div>
  );
};

Note: There are no public API changes or modifications to the behavior of existing components, and all unit and VR tests are passing. The new hook useAvatarBase_unstable and types (AvatarBaseProps, AvatarBaseState) are now exported for composing custom Avatar components.

Related Issue(s)

Partially implements #35562

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-avatar Avatar	48.545 kB 15.459 kB	49.137 kB 15.634 kB	592 B 175 B
react-avatar AvatarGroupItem	61.797 kB 19.459 kB	62.378 kB 19.616 kB	581 B 157 B
react-components react-components: entire library	1.291 MB 323.024 kB	1.292 MB 323.166 kB	562 B 142 B
react-persona Persona	55.436 kB 17.336 kB	56.02 kB 17.523 kB	584 B 187 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-avatar AvatarGroup	18.336 kB 7.324 kB
react-components react-components: Button, FluentProvider & webLightTheme	71.11 kB 20.219 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	237.741 kB 68.697 kB
react-components react-components: FluentProvider & webLightTheme	44.409 kB 14.303 kB
react-portal-compat PortalCompatProvider	8.386 kB 2.624 kB
react-table DataGrid	160.195 kB 45.263 kB
react-table Table (Primitives only)	41.883 kB 13.493 kB
react-table Table as DataGrid	131.41 kB 36.265 kB
react-table Table (Selection only)	69.798 kB 19.628 kB
react-table Table (Sort only)	68.441 kB 19.244 kB
react-tag-picker @fluentui/react-tag-picker - package	187.42 kB 56.172 kB
react-tags InteractionTag	14.552 kB 5.788 kB
react-tags Tag	30.407 kB 9.721 kB
react-tags TagGroup	83.097 kB 24.491 kB
react-timepicker-compat TimePicker	109.036 kB 36.023 kB
react-tree FlatTree	148.521 kB 42.459 kB
react-tree PersonaFlatTree	150.347 kB 42.844 kB
react-tree PersonaTree	146.407 kB 41.672 kB
react-tree Tree	144.587 kB 41.298 kB

_{🤖 This report was generated against 57dfcfa6164a69c1be9a9d9f9d7a2dd67be18199}

[github-actions]

Pull request demo site: URL

[github-actions]

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Avatar Converged 10 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Avatar Converged.basic - High Contrast.normal.chromium.png	141	Changed
vr-tests-react-components/Avatar Converged.basic - RTL.normal.chromium.png	106	Changed
vr-tests-react-components/Avatar Converged.basic - Dark Mode.normal.chromium.png	30	Changed
vr-tests-react-components/Avatar Converged.image-bad-url+icon.normal.chromium.png	106	Changed
vr-tests-react-components/Avatar Converged.customSize+icon+active.normal.chromium.png	2826	Changed
vr-tests-react-components/Avatar Converged.color - High Contrast.normal.chromium.png	4504	Changed
vr-tests-react-components/Avatar Converged.color+active.normal.chromium.png	6586	Changed
vr-tests-react-components/Avatar Converged.size+icon+badge+square.normal.chromium.png	6366	Changed
vr-tests-react-components/Avatar Converged.color+active - Dark Mode.normal.chromium.png	2702	Changed
vr-tests-react-components/Avatar Converged.badgeMask.normal.chromium.png	5	Changed

vr-tests-react-components/Charts-DonutChart 1 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Charts-DonutChart.Dynamic - RTL.default.chromium.png	5570	Changed

vr-tests-react-components/Positioning 2 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png	760	Changed
vr-tests-react-components/Positioning.Positioning end.chromium.png	28	Changed

vr-tests-react-components/Skeleton converged 1 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Skeleton converged.Opaque Skeleton with circle - High Contrast.default.chromium.png	1	Changed

vr-tests-react-components/TagPicker 1 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/TagPicker.disabled - High Contrast.disabled input hover.chromium.png	1319	Changed

vr-tests-react-components/Tree 3 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Tree.persona - High Contrast.default.chromium.png	1102	Changed
vr-tests-react-components/Tree.persona - Dark Mode.default.chromium.png	208	Changed
vr-tests-react-components/Tree.persona.default.chromium.png	828	Changed

There were 6 duplicate changes discarded. Check the build logs for more information.

[ValentinaKozlova]

Suggested change

// Set default icon children if icon slot exists

[ValentinaKozlova]

Suggested change

// Include the badge in labelledby if it exists

[ValentinaKozlova]

Suggested change

// aria-label is already set by base function, keep it