RFC: Reusing Avatar in other components

[ling1726]

This RFC presents the problem of Avatar reuse when trying to follow design guidelines. Several solutions are proposed along with their pros/cons

PREVIEW

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against 48df172dd62d2bc71409c8cdb3967ea500dcd999}

[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 2feea25:

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

[size-auditor]

Asset size changes

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

Baseline commit: c37c8714056e1e021ac7da86ca4bec3428e1953a (build)

[layershifter]

I suggest to add example with Popover there - an Avatar inside a Popover will have size "20" instead of default one

[ling1726]

As I implemented in the prototype, the choice of slot to apply this context can be more 'intelligent' #24807, and honestly it might not be that bad 🤔

[bsunderhus]

I believe the Shared context would be the best solution described here so far.

Pros

• We also use context for lots of other user cases - it works
• Can be targeted to the specific slot that needs these overrides

Cons

• Extra code in base component ⚠️ (Minimal extra code, not even enough to consider this as an actual con IMO)
• Needs prototyping and investigation (feat: Implement shared AvatarContext #24807)
• If the slot is not specific enough -> all avatars under this context will be affected (that's a valid real problem)
• This might not scale - AvatarContext, IconContext... (Honestly, definitely a painful to have to define every single edge case on an upper context, but still... it works)

[marcosmoura]

Have we considered the usage of CSS variables for the style overrides proposal? This solves the "Does not handle props" con. If the size prop of the avatar adds styles with the CSS variable, it'll have priority over the overriden style by the Table.

A con to this approach is to document well the CSS variable.

[ling1726]

The problem with style overrides (I tried it this morning) is that for Avatar the size actually controls multiple css properties:

• width
• height
• icon slot size
• font size
• font weight

I don't think a single css var will actually help and it's a problem that @behowell highlighted offline during tech sync. Furthermore, if designers decide to update the styles with size, it's harder to know what properties to have to update

[layershifter]

I am for the React context option 👍