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.156 kB 15.636 kB	611 B 177 B
react-avatar AvatarGroupItem	61.797 kB 19.459 kB	62.397 kB 19.619 kB	600 B 160 B
react-components react-components: entire library	1.291 MB 323.024 kB	1.292 MB 323.167 kB	581 B 143 B
react-persona Persona	55.436 kB 17.336 kB	56.039 kB 17.525 kB	603 B 189 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 d3e7fed616613980fda89b0ef0edaa2aa1524651}

[github-actions]

Pull request demo site: URL