@fluentui/react-avatar 9.0.3 → 9.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +253 -7
- package/CHANGELOG.md +56 -8
- package/README-AvatarGroup.md +63 -39
- package/SPEC-AvatarGroup.md +103 -85
- package/dist/index.d.ts +117 -40
- package/lib/AvatarGroupPopover.js +2 -0
- package/lib/AvatarGroupPopover.js.map +1 -0
- package/lib/components/Avatar/useAvatar.js +3 -7
- package/lib/components/Avatar/useAvatar.js.map +1 -1
- package/lib/components/Avatar/useAvatarStyles.js +27 -5
- package/lib/components/Avatar/useAvatarStyles.js.map +1 -1
- package/lib/components/AvatarGroup/AvatarGroup.js +4 -2
- package/lib/components/AvatarGroup/AvatarGroup.js.map +1 -1
- package/lib/components/AvatarGroup/AvatarGroup.types.js.map +1 -1
- package/lib/components/AvatarGroup/index.js +1 -0
- package/lib/components/AvatarGroup/index.js.map +1 -1
- package/lib/components/AvatarGroup/renderAvatarGroup.js +5 -31
- package/lib/components/AvatarGroup/renderAvatarGroup.js.map +1 -1
- package/lib/components/AvatarGroup/useAvatarGroup.js +4 -62
- package/lib/components/AvatarGroup/useAvatarGroup.js.map +1 -1
- package/lib/components/AvatarGroup/useAvatarGroupContextValues.js +14 -0
- package/lib/components/AvatarGroup/useAvatarGroupContextValues.js.map +1 -0
- package/lib/components/AvatarGroup/useAvatarGroupStyles.js +5 -265
- package/lib/components/AvatarGroup/useAvatarGroupStyles.js.map +1 -1
- package/lib/components/AvatarGroupItem/AvatarGroupItem.js +1 -1
- package/lib/components/AvatarGroupItem/AvatarGroupItem.js.map +1 -1
- package/lib/components/AvatarGroupItem/AvatarGroupItem.types.js.map +1 -1
- package/lib/components/AvatarGroupItem/useAvatarGroupItem.js +10 -11
- package/lib/components/AvatarGroupItem/useAvatarGroupItem.js.map +1 -1
- package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.js +51 -59
- package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.js.map +1 -1
- package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js +16 -0
- package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js.map +1 -0
- package/lib/components/AvatarGroupPopover/AvatarGroupPopover.types.js +2 -0
- package/lib/components/AvatarGroupPopover/AvatarGroupPopover.types.js.map +1 -0
- package/lib/components/AvatarGroupPopover/index.js +6 -0
- package/lib/components/AvatarGroupPopover/index.js.map +1 -0
- package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js +23 -0
- package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map +1 -0
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js +102 -0
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js.map +1 -0
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js +10 -0
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js.map +1 -0
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js +307 -0
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js.map +1 -0
- package/lib/contexts/AvatarGroupContext.js +7 -3
- package/lib/contexts/AvatarGroupContext.js.map +1 -1
- package/lib/index.js +4 -2
- package/lib/index.js.map +1 -1
- package/lib/utils/index.js +1 -0
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/partitionAvatarGroupItems.js +30 -0
- package/lib/utils/partitionAvatarGroupItems.js.map +1 -0
- package/lib-commonjs/AvatarGroupPopover.js +10 -0
- package/lib-commonjs/AvatarGroupPopover.js.map +1 -0
- package/lib-commonjs/components/Avatar/useAvatar.js +2 -7
- package/lib-commonjs/components/Avatar/useAvatar.js.map +1 -1
- package/lib-commonjs/components/Avatar/useAvatarStyles.js +27 -5
- package/lib-commonjs/components/Avatar/useAvatarStyles.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/AvatarGroup.js +5 -2
- package/lib-commonjs/components/AvatarGroup/AvatarGroup.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/index.js +2 -0
- package/lib-commonjs/components/AvatarGroup/index.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/renderAvatarGroup.js +4 -32
- package/lib-commonjs/components/AvatarGroup/renderAvatarGroup.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/useAvatarGroup.js +3 -64
- package/lib-commonjs/components/AvatarGroup/useAvatarGroup.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupContextValues.js +23 -0
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupContextValues.js.map +1 -0
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.js +3 -265
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/AvatarGroupItem.js +2 -2
- package/lib-commonjs/components/AvatarGroupItem/AvatarGroupItem.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItem.js +8 -9
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItem.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.js +52 -60
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/AvatarGroupPopover.js +29 -0
- package/lib-commonjs/components/AvatarGroupPopover/AvatarGroupPopover.js.map +1 -0
- package/lib-commonjs/{contexts/AvatarGroupContext.types.js → components/AvatarGroupPopover/AvatarGroupPopover.types.js} +1 -1
- package/lib-commonjs/{contexts/AvatarGroupContext.types.js.map → components/AvatarGroupPopover/AvatarGroupPopover.types.js.map} +0 -0
- package/lib-commonjs/components/AvatarGroupPopover/index.js +18 -0
- package/lib-commonjs/components/AvatarGroupPopover/index.js.map +1 -0
- package/lib-commonjs/components/AvatarGroupPopover/renderAvatarGroupPopover.js +36 -0
- package/lib-commonjs/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map +1 -0
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopover.js +118 -0
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopover.js.map +1 -0
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js +19 -0
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js.map +1 -0
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js +321 -0
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js.map +1 -0
- package/lib-commonjs/contexts/AvatarGroupContext.js +10 -3
- package/lib-commonjs/contexts/AvatarGroupContext.js.map +1 -1
- package/lib-commonjs/index.js +61 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/index.js +10 -1
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/partitionAvatarGroupItems.js +39 -0
- package/lib-commonjs/utils/partitionAvatarGroupItems.js.map +1 -0
- package/package.json +16 -13
- package/MIGRATION-AvatarGroup.md +0 -35
- package/dist/tsdoc-metadata.json +0 -11
- package/lib/contexts/AvatarGroupContext.types.js +0 -2
- package/lib/contexts/AvatarGroupContext.types.js.map +0 -1
package/MIGRATION-AvatarGroup.md
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
# AvatarGroup Migration
|
|
2
|
-
|
|
3
|
-
## Migration from v0
|
|
4
|
-
|
|
5
|
-
`v0` does not have a component similar to `AvatarGroup`.
|
|
6
|
-
|
|
7
|
-
## Migration from v8
|
|
8
|
-
|
|
9
|
-
AvatarGroup and Facepile have similar APIs, but the main difference is how they interact with AvatarGroupItem/Persona. AvatarGroup receives AvatarGroupItems as children and places them in their respective place, this means AvatarGroup has no control over AvatarGroupItem. `size` is the only property of AvatarGroupItem that is modified by AvatarGroup to make all AvatarGroupItems the same size. Face adding functionality is not supported.
|
|
10
|
-
|
|
11
|
-
Avatars must not be used inside an AvatarGroup, instead AvatarGroupItems are used since it has extra functionality used only in AvatarGroups. This includes adding a label when the AvatarGroupItem is rendered in the overflow Popover and specific styling for each layout.
|
|
12
|
-
|
|
13
|
-
AvatarGroup has extra functionality that Facepile does not have, this includes:
|
|
14
|
-
- When the AvatarGroupItems are overflowing, a Popover is rendered that contains all the overflowed AvatarGroupItems. The Popover is triggered when the overflow button is clicked.
|
|
15
|
-
- AvatarGroup supports three layouts: `spread` (default), `stack`, and `pie`.
|
|
16
|
-
|
|
17
|
-
## Property mapping
|
|
18
|
-
|
|
19
|
-
| v8 `Facepile` | v9 `AvatarGroup` |
|
|
20
|
-
| ------------------------ | -------------------------------------------------------- |
|
|
21
|
-
| `personas` | `children` |
|
|
22
|
-
| `addButtonProps` | - |
|
|
23
|
-
| `className` | `className` |
|
|
24
|
-
| `getPersonaProps` | `AvatarGroupItem`'s props |
|
|
25
|
-
| `maxDisplayablePersonas` | `maxAvatars` |
|
|
26
|
-
| `onRenderPersona` | Render function for the AvatarGroupItem |
|
|
27
|
-
| `onRenderPersonaCoin` | Render function for the `avatar` slot in AvatarGroupItem |
|
|
28
|
-
| `onRenderPersonaWrapper` | - |
|
|
29
|
-
| `overflowButtonProps` | `overflowButton` slot props |
|
|
30
|
-
| `overflowButtonType` | `overflowIndicator` |
|
|
31
|
-
| `overflowPersonas` | - |
|
|
32
|
-
| `personaSize` | `size` |
|
|
33
|
-
| `showAddButton` | - |
|
|
34
|
-
| `showTooltip` | - |
|
|
35
|
-
| `styles` | (theme) |
|
package/dist/tsdoc-metadata.json
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
|
|
2
|
-
// It should be published with your NPM package. It should not be tracked by Git.
|
|
3
|
-
{
|
|
4
|
-
"tsdocVersion": "0.12",
|
|
5
|
-
"toolPackages": [
|
|
6
|
-
{
|
|
7
|
-
"packageName": "@microsoft/api-extractor",
|
|
8
|
-
"packageVersion": "7.18.1"
|
|
9
|
-
}
|
|
10
|
-
]
|
|
11
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroupContext.types.js","sourceRoot":"../src/","sources":["contexts/AvatarGroupContext.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarGroupProps } from '../AvatarGroup';\n\nexport type AvatarGroupContextValue = Pick<AvatarGroupProps, 'size' | 'layout'> & {\n isOverflow?: boolean;\n nonOverflowAvatarsCount?: number;\n};\n"]}
|