Skip to content

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

Merged
sopranopillow merged 2 commits into
microsoft:masterfrom
sopranopillow:avatargroup-warnings
Jun 10, 2022
Merged

chore(react-avatar): Adding warnings on use of AvatarGroup and AvatarGroupItem#23498
sopranopillow merged 2 commits into
microsoft:masterfrom
sopranopillow:avatargroup-warnings

Conversation

@sopranopillow

@sopranopillow sopranopillow commented Jun 10, 2022

Copy link
Copy Markdown
Contributor

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

… AvatarGroupItem and for AvatarGroupItem to check if it's being used inside an AvatarGroup.
@codesandbox-ci

Copy link
Copy Markdown

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

Copy link
Copy Markdown
Collaborator

📊 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

size-auditor Bot commented Jun 10, 2022

Copy link
Copy Markdown

Asset size changes

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

Baseline commit: 5ea871d03d388b192a83e2e5c0e0717e7dc61add (build)

@fabricteam

Copy link
Copy Markdown
Collaborator

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

@sopranopillow sopranopillow merged commit ed9d97c into microsoft:master Jun 10, 2022
@sopranopillow sopranopillow deleted the avatargroup-warnings branch June 10, 2022 21:18
marwan38 pushed a commit to marwan38/fluentui that referenced this pull request Jun 13, 2022
…GroupItem (microsoft#23498)

* chore: Added warning for AvatarGroup to check if children are of type AvatarGroupItem and for AvatarGroupItem to check if it's being used inside an AvatarGroup.

* change files
@layershifter

layershifter commented Jun 21, 2022

Copy link
Copy Markdown
Member

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>
  );
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Development

Successfully merging this pull request may close these issues.

4 participants