An avatar group displays a number of avatars grouped together in a stack or grid.
yarn add @atlaskit/avatar-group#117363
10a0f7f6c2027 -
This package's peerDependencies have been adjusted for react and/or react-dom to reflect the
status of only supporting React 18 going forward. No explicit breaking change to React support has
been made in this release, but this is to signify going forward, breaking changes for React 16 or
React 17 may come via non-major semver releases.
Please refer this community post for more details: https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026
b50c5d5d65ae2 -
Bump to the latest version of @compiled/reacte0ea3e42506fb -
Internal refactor to the "more indicator". Fixes the focus state of the "more indicator" button.4660ec858a305 -
Update React from v16 to v18#104933
8a592509504c7 -
Migrated from @emotion/react to @compiled/react in order to improve performance, align with
the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
Please note, in order to use this version of @atlaskit/avatar-group, you will need to ensure
that your bundler is configured to handle .css imports correctly. Most bundlers come with
built-in support for .css imports, so you may not need to do anything. If you are using a
different bundler, please refer to the documentation for that bundler to understand how to handle
.css imports.
For more information on the migration, please refer to RFC-73 Migrating our components to Compiled CSS-in-JS.
d0ba9d90d42e5 -
Adds side-effect config to support Compiled css extraction in third-party appse005ceaf960e2 -
Make some spread props explicit in internal functions and components.870668ea63139 -
Refactoring internals to make spread props more explicit and resolve ESLint disables.8aee79daf4012 -
Removed xsmall size option for AvatarGroup since it is too small to display elements like the
more indicator in an accessible way. Use the small size instead. The standalone Avatar component
will continue to support the xsmall size.4539c88ed5ed3 -
The avatar group container now creates a new stacking context using isolation: isolate. This
improves how it interacts with other layered elementson the page.1495b8f9c9253 -
Modified popup trigger's aria-haspopup types to support the 'dialog' value.#127511
db30e29344013 -
Widening range of react and react-dom peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0
to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).
This change has been done to enable usage of react@18.3 as well as to have a consistent peer
dependency range for react and react-dom for /platform packages.
e8ee91f820e6f -
Refactors the way focus-rings are applied to avatars and avatar-groups in relation to custom
border colors.99084c446171e -
Fixes bug where the border color for avatars in the data prop were not being passed through. Now
the borderColor prop from an avatar in the data prop will pass through. Preference is given to
the borderColor prop from avatar group, if both are present.40234970169dc -
[ux] DSP-19190 We are testing a new visual appearance behind a feature flag. If successful it will
be released at a later date.4b4faf5caa25a -
[ux] The font size and font weight of avatar group more button is brought in line with design
system guidelines.20c2d58f6f8a9 -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.1809bf4e75ad -
Update font size of the 'more' indicator to be defined in rem rather than px.e7e14229e1ca -
Add support for React 18 in non-strict mode.35fd5ed8e1d7 -
Upgrading internal dependency bind-event-listener to @^3.0.087dafc8315c4 -
Updated Avatar Group's 'data' prop documentation to add more clarity around what AvatarGroupProps
is.b037e5451037 -
Update new button text color fallback for default theme (non-token) to match that of old button
current text color937861329875 -
Added the shouldPopupRenderToParent prop which determines if shouldRenderToParent is applied
to the avatar group's popup.6900f89eb0e - Internal
changes to use space tokens. There is no expected visual or behaviour change.3c114ea4257 - Update
type definitions to conform to inherited changes from @types/react@16.14.15.da7b6be2540 - Fixed
keyboard support for the interactive element. Changed span to button for avatar-group4ae083a7e66 - Use
@af/accessibility-testing for default jest-axe config and jest-axe import in accessibility
testing.cb7033c5b72 - keyboard
arrow (UP and DOWN) support in avatar-group popup componente7ea6832ad2 - Bans the
use of React.FC/React.FunctionComponent type in ADS components as part of the React 18 migration
work. The change is internal only and should not introduce any changes for the component
consumers.56507598609 - Skip
minor dependency bumpa8a1fe824b0 - Removed
unused prop enableTooltip and fixed tooltip toggle in examples.18aeca8c199 - Internal
change to update token references. There is no expected behaviour or visual change.b0f6dd0bc35 - Updated
to use typography tokens. There is no expected behaviour or visual change.3f8f08a1888 - Updating
Avatar-group component to position the tooltip either to top or bottom based on configuration.bc989043572 - Internal
changes to apply spacing tokens. This should be a no-op change.110fb3a5f19 - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behaviour change.4bc286406f2 - [ux]
Update more indicator icon to use new design tokens and remove the unnecessary use of the :after
element with regards to the consumption of the Avatar component.45ebe7af434 - Moved to
using declarative entrypoints internally. Public API is unchanged.#21570
92bb02bc46b - [ux]
There are no code changes required to consume this major, but you should be aware that
internal changes have been made to how @atlaskit/avatar loads images.
Before, the image loading behaviour was written in JS. Now, it leans on a standard HTML img tag
if you provide a src prop, allowing it to rely on the browser to optimise the loading. These
changes should result in faster image loading and an improved server-side rendering story.
In this version, the breaking change is that you will no longer see a fallback icon while the
image is loading. We have intentionally removed this loading behaviour as it is no longer
consistent with our native img behaviour-first approach, and was a source of SSR bugs. Avatar
images will load either instantly from the cache, or very fast from a CDN. In the edge cases where
there is an error with the image src provided, we will still fall back to a default icon.
1276a8179ad - [ux]
DSP-4535: Fix wrongly used token.b2f8af359cf - Rewrite
dynamic styles to be static to aid compiled migration.62edf20ab1e - Migrates
all usage of brand tokens to either selected or information tokens. This change is purely for
semantic reasons, there are no visual or behavioural changes.19d72473dfb - Updates
usage of deprecated token names so they're aligned with the latest naming conventions. No UI or
visual changesf460cc7c411 - Builds
for this package now pass through a tokens babel plugin, removing runtime invocations of the
tokens() function and improving bundle size.2b98dfda0a6 - Removes
@emotion/styled in favour of @emotion/core.016d19b8038 - [ux]
When avatar's are disabled their tooltip will no longer be displayed.c79bc186958 - [ux]
Colors are now sourced through tokens.2d7cc544696 - Updates
token usage to match the latest token set0d0ecc6e790 - Corrects
eslint supressions.9a84a3ceb82 - Internal
code changes.#12328
5ba523fc937 - Now the
AvatarGroup is marked with ul and li elements. This makes it easier for users with assistive
technologies to distinguish AvatarGroup ( which is a list of avatars ) among other page
components. The default label that the screen reader announces when a user selects the AvatarGroup
is list avatar group x items. When one of AvatarGroupItems is selected screen reader
announcement is [avatar label], i of n where i - index of a selected item, n - the length of
the list.
To change the label of a list you can use label props.
c056ee44d4b - Added
the design system tech stacks to the package.json and fixed linting errors, disabled some rules to
prevent bringing breaking changes4121ef822c4 - Fixing
issue where AvatarGroup list-style-type style would get overridden by product styles.8f84c89cad5 - [ux] The
styles of overflow button of avatar group has been aligned with default button styles. Also,
contrast issue of the button has been fixed.c40dcf42d93 - [ux]
Added passing an empty name prop to Avatar in the AvararGroupItem that is used for overflow
dropdown menu. Screen reader does not announce name twice now.dd0ddc74ee4 - Support
onClick handlers on anchor elements in Avatar Group952019cfd39 - Removed
extraneous/unnecessary dependencies for design system components.07fcbf76b3 - [ux]
avatar-group now renders properly when used in a modal-dialog. The overflow menu is visible
above the modal content.5f58283e1f - Export
types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules
compiler option. This requires version 3.8 of Typescript, read more about how we handle Typescript
versions here: https://atlaskit.atlassian.com/get-started Also add typescript to
devDependencies to denote version that the package was built with.19d7d96007 - [ux] Now
AvatarGroup wouldn't create non-interactive buttons in case there is no action provided#3885
6c525a8229 - Upgraded
to TypeScript 3.9.6 and tslib to 2.0.0
Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade to prevent duplicates of tslib being bundled.
6262f382de - Use the
'lodash' package instead of single-function 'lodash.*' packages954cc87b62 - The readme
and package information has been updated to point to the new design system website.#3428
cde426961a -
AvatarGroup has been migrated to lite-mode. Users should see performance improvements and
reduced bundlesize.
Change summary:
name is now a required property of the data attribute. This was previously not required
simply because we forwarded avatars props. Names should always be supplied so that avatars can
be differentiated in a meaningful way (although they are not required to be unique).isTooltipDisabled has been provided to allow users to disable tooltips@emotionMisc.
stack groupsdropdown-menu with a lighter and more performant popup componentdropdown-menu styling54f1e38676 - Replace
custom menu implementation with @atlaskit/menu componentse99c1c2ac8 - Removes
text decoration from AvatarItems rendered as anchor tagsd833e8c531 -
AvatarGroup component is longer typed via FCdb053b24d8 - Update all
the theme imports to be tree-shakableae57cd8744 - Assignment
of key for AvatarGroup children made user driven now and using Array.index as a fallback, which
fixes the unique key issue in AvaratGroup.87f4720f27 - Officially
dropping IE11 support, from this version onwards there are no warranties of the package working in
IE11. For more information see:
https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/3953454a9514fcf - Build and
supporting files will no longer be published to npm2daf5b6054 -
AvatarGroup will now send the index of the clicked item via the onAvatarClick event handler#2137
a7ca7039c7 -
AvatarGroup previously depended heavily on Avatar internals such as styles, getProps and
withPseudoState. These have been moved directly into AvatarGroup to finally decouple the two
components. We will revisit this when we convert AvatarGroup to lite-mode and most likely remove
them entirely.
Previously, it was possible to pass arbritray props to the underlying Avatar via the data prop.
This is no longer supported. Please pass props directly to the custom avatar / presence / status
components.
[patch]e95a8726e2:
Change imports to comply with Atlassian conventions- Updated dependencies 9e4b195732:
Updated dependencies 6b8e60827e:
Updated dependencies 449ef134b3:
Updated dependencies f7f2068a76:
Updated dependencies 167a55fd7a:
Updated dependencies 57c0487a02:
Updated dependencies 7a2540821c:
[patch]28573f37a7:
Fix hover and focus state of the more indicator- Updated dependencies 66dcced7a0:
Updated dependencies fd5292fd5a:
Updated dependencies fd5292fd5a:
Updated dependencies 8b9598a760:
Updated dependencies eea5e9bd8c:
Updated dependencies fd5292fd5a:
[minor]e9a14f945f:
Adds overrides for Avatar and AvatarGroupItem.- [minor]4859ceaa73:
Adds test id for the container, avatar, and overflow menu elements.
[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[patch]24865cfaff:
Fixes onMoreClick return type to void- [patch]24865cfaff:
Fixes return type of onClick in MoreIndicator to void- Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
[patch]35d2229b2a:
Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.
[major]40bda8f796:
@atlaskit/avatar-group has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes.
[patch]097b696613:
Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports
[patch]708028db86:
Change all the imports to theme in Core to use multi entry points
[patch]10d566fe8d:
Removed unused dependencies from package.json for avatar-group: @atlaskit/tooltip was unused.
[patch]21854842b5:
[major]7c17b35107:
[patch]ea173a3ee2:
imageUrl
can be passed in after component is mounted.[major]76299208e6:
As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only
distribute esm. This means all distributed code will be transpiled, but will still contain
import and export declarations.
The major reason for doing this is to allow us to support multiple entry points in packages, e.g:
import colors from `@atlaskit/theme/colors`;
Previously this was sort of possible for consumers by doing something like:
import colors from `@atlaskit/theme/dist/esm/colors`;
This has a couple of issues. 1, it treats the file system as API making internal refactors harder, we have to worry about how consumers might be using things that aren't actually supposed to be used. 2. We are unable to do this internally in @atlaskit packages. This leads to lots of packages bundling all of theme, just to use a single color, especially in situations where tree shaking fails.
To support being able to use multiple entrypoints internally, we unfortunately cannot have multiple distributions as they would need to have very different imports from of their own internal dependencies.
ES Modules are widely supported by all modern bundlers and can be worked around in node environments.
We may choose to revisit this solution in the future if we find any unintended condequences, but we see this as a pretty sane path forward which should lead to some major bundle size decreases, saner API's and simpler package architecture.
Please reach out to #fabric-build (if in Atlassian) or create an issue in Design System Support (for external) if you have any questions or queries about this.
[patch]3a9b559382:
[patch]ed05c5c5d9: