An avatar is a visual representation of a user or entity.
yarn add @atlaskit/avatar42617a5e15cd2 -
Removes the children prop from AvatarItem, along with the CustomAvatarItemProps type.
Limiting the amount of customization that can be applied. This change is in preparation for the
migration from @emotion/react to Compiled CSS-in-JS.#117222
a80e8994489e7 -
Removes the option to provide a function to the children prop to create a custom avatar. A new
AvatarContent sub-component is now available, which similarly enables custom content to be
provided for the avatar. This change is in preparation for the migration from @emotion/react to
Compiled CSS-in-JS.
Example usage before and after:
import Avatar from '@atlaskit/avatar';
<Avatar>
{(props) => (
<span {...props}>
Custom content
</span>
)}
<Avatar>
import Avatar, { AvatarContent } from '@atlaskit/avatar';
<Avatar>
<AvatarContent>
Custom content
</AvatarContent>
<Avatar>
#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
4660ec858a305 -
Update React from v16 to v18534b86dda4d5c -
Remove unused internal exports and update dependencies.57f451bda8919 -
Adds side-effect config to support Compiled css extraction in third-party appsb3a2ceaf98b77 -
Internal refactoring of file names and resolving of ESLint disables.51a41686c7949 -
Fixes lineheight issue for xxxsmall avatars which was throwing off the positioning of the fallback
icon823ac616e85a9 -
adding data-ssr-placeholder-ignored attribute for VC calculation002c8762275d8 -
Fix focus styles overriding custom border styles when focus is not visible.3c4de48168ffe -
Update the import path of useId* from @atlaskit/ds-lib6325e9c5617d5 -
Use a ID generator that is compatible with React16 and React 18#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.f80ae8ed91fc9 -
Adding data-vc attributes for tracking TTVC (go/ttvc).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.ea4751db471b1 -
Allow maker-provided prop to override the context value for the AvatarContext's size property.65f87a3ac916 -
[ux] Increase font size of secondary text from computed 11.9px to 12px.44381801376a -
Creates a context to set the size prop for all avatars under the provider.1b320a82df61 -
Add Team fallback avatar20bb01a34fcd -
test id selector added to Avatar label31068e587071 -
[ux] Removes decorative images of presence and status from view of assistive technologies. The
presence and status are announced as part of the labeling of the parent component and therefore no
longer necessary.61b09a38c764 -
[ux] Adds label to custom avatars using the render prop API.538c46e739b6 -
[ux] Add accessible name to non-interactive avatars. If you are a making a test that relies on
there being only a single element containing the avatar's expected text, skipping any elements
with a hidden attribute will narrow down your search to only the visible element; this will make
the test act the same as it would before this change.4ae083a7e66 - Use
@af/accessibility-testing for default jest-axe config and jest-axe import in accessibility
testing.599bfe90ee3 - Internal
change to use shape tokens. There is no expected visual change.342bd17ba74 - Fix
presence and status props being expanded to all strings instead of the allowed values.abf69e9a4f6 - Removes
usage of deprecated theme mixins in favor of static token / color usage.e2d375fa634 - Refactor
how some internal styles are applied; no functional changes.56507598609 - Skip
minor dependency bump51928bbe70c - [ux]
Removes status/presence indicator images from the accessibility tree for the Avatar component.64f11e50567 - [ux]
Adds accessible name to standalone Presence and Status components.0ecd2a2238b - Add more
precision to custom component check for status and presence5aab9bfc96c - Replace
gridSize in spacing values with corresponding spacing tokens18aeca8c199 - Internal
change to update token references. There is no expected behaviour or visual change.4ee60bafc6d -
ED-16603: Remove tooltips from VR tests and make them opt in. To opt-in, add allowedSideEffects
when loading the page.47f0e63c935 - Internal
changes to apply spacing tokens. This should be a no-op change.bc989043572 - Internal
changes to apply spacing tokens. This should be a no-op change.c1d012d6d20 - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behaviour change.f9cd9e55e43 - Update
to disabled tokens which slightly affects the opacity in disabled states#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.
be23a6d8ee1 - [ux]
Updates color tokens used to be more semantically accurate19d72473dfb - 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.cf853e39278 - [ux] Fix
avatar focus ring in windows high contrast mode0a759df738f - When
Avatar is not interactive and no name prop is provided, role and an empty aria-label
attributes are not rendered anymore. Screen readers consider these images as decorative now and
doesn't announce them as "Unlabeled image".016d19b8038 - [ux]
When avatars are disabled they no longer will appear as interactive.cb101fd1d29 - [ux]
Colors are now sourced through tokens.34992526ab4 - Removes
duplicate dependency (@atlaskit/tooltip) from dependency array.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.af5707375f7 - Internal
code changes.cfcefd986eb - Adds
jsdoc description to exported components.4e8f13c9b8a - Renames
internal props to match naming convention.1974621bc4d - Add
eslint rule disable for enforcing filename and extension9e335c673bb - Rename
no-type-suffix eslint rule to type-name-no-type-suffix-nor-props, and add restriction for nameing
types props.1512054d655 - Fixed
no-type-suffix eslint errorsebd98351a30 - Corrects
internal jsdoc declarations.70679cfeb04 - Fixed
eslint errors by using css object notation7ea77bc9fbe - Internal
changes.79c23df6340 - Use
injected package name and version for analytics instead of version.json.1a8fcbf9878 - [ux]
Avatar and AvatarItem now accept a label prop which allows the components to be accessible when
viewed in a screen reader. The isDisabled prop now correctly generates the appropriate markup (was
a span, now a disabled button) for screen reader users.8308fe23b9b - Removing
incorrect cursor styles from non-interactive AvatarItemsfe59fc62a58 -
Increased the contrast for the fallback icon of the Avatar package so that it passes WCAG AA
contrast requirements.4f9e6e2db5 - These
packages now have defined entry points -- this means that you cannot access internal files in the
packages that are not meant to be public. Sub-components in these packages have been explicitly
defined, aiding tree-shaking and reducing bundle size.5c1b4d64ef - [ux] There
were two browser specific issues in avatar component. 1- Misalignment in firefox (Interactive
button avatar is incorrectly aligned) — To fix this we added font-size and font-family to button
element. 2- Hover issue in safari (On hover avatar was showing rectangular background) — To fix
this we have added border radius to avatar on hover.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.#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.
954cc87b62 - The readme
and package information has been updated to point to the new design system website.dfd7418707 - Added
types for function parameters in the Presence, Status and Skeleton avatar sub-components. Without
these types we were unable to generate prop tables in the documentation site using
extract-react-types.#3428
cde426961a - Changes to
Avatar in this release are intended to provide users with more flexible and performant
customization options.
Previously Avatars could only be customized like so:
<Avatar component={Button} />
This is restrictive in that you're not able to pass custom props or children to button without passing props directly through to Avatar first.
Now with render props, we can enable that:
const initials = 'MCB';
<Avatar render={(props) => <Button {...props}>{initials} // custom initials etc.</Button>} />;
Since there are significant prop and API changes we provided a codemod to help consumers upgrade their components.
Running the codemod cli
To run the codemod: You first need to have the latest avatar installed before you can run the codemod
yarn upgrade @atlaskit/avatar@^19.0.0
Once upgraded, use the Atlaskit codemod-cli;
npx @atlaskit/codemod-cli --parser [PARSER] --extensions [FILE_EXTENSIONS] [TARGET_PATH]
Or run npx @atlaskit/codemod-cli -h for more details on usage. For Atlassians, refer to
this doc for more details
on the codemod CLI.
Change summary:
Avatar's component prop is now a
renderProp and has been renamed to renderAvatarItem's component prop is now a
renderProp and has been renamed to renderAvatarClickType has been renamed to AvatarClickEventHandlercacf9a3097 - Fixes a
regression in AvatarItem where the default padding was 16px instead of 4px.e99c1c2ac8 - Removes
text decoration from AvatarItems rendered as anchor tags19b9dc6daf - Avatar now
sends complete contextualised analytics metadata.db053b24d8 - Update all
the theme imports to be tree-shakable87f4720f27 - 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/395341c401b41d6 - Codemod
updated to target the correct avatarItem prop namee3cb6026bc - Updates
the v18 codemod to ensure it doesnt format files that are not relevant54a9514fcf - Build and
supporting files will no longer be published to npm#2137
b1fa2d6d1c - Avatar has
been refactored to improve performance and be compliant with the lite-mode specification. Since
there are significant prop and API changes, we will be providing a codemod to help consumers
upgrade their components.
To run the codemod:
You first need to have the latest avatar installed before you can run the codemod
yarn upgrade @atlaskit/avatar@^18.0.0
Run the codemod cli
npx @atlaskit/codemod-cli /path/to/target/directory
For more information on @atlaskit/codemod-cli please refer to this doc
Summary
styled-components v3 with @emotion/core to improve runtime and bundlesizeAvatar API / PROP CHANGES
enableTooltip removed. Please use @atlaskit/tooltip insteadonClick method signature has been simplified to onChange(event, analyticsEvent)isHover removedisActive removedisFocus removedisSelected removedtheme removedcomponent propBORDER_WIDTH is now a single value rather than an objectwithPseudoState, getProps, getBorderRadius, getInnerStyles have been removed and are
therefor no longer available. These methods were for designed for internal use and use within
the AvatarGroup component.Avatar Item API / PROP CHANGES
enableTruncation renamed to isTruncationDisabledonClick method signature has been simplified to onChange(event, analyticsEvent)isHover removedisActive removedisFocus removedisSelected removedtheme removedcomponent prop[patch]167a55fd7a:
Change imports to comply with Atlassian conventions- Updated dependencies 3940bd71f1:
Updated dependencies 9e4b195732:
Updated dependencies 6b8e60827e:
Updated dependencies 449ef134b3:
Updated dependencies 57c0487a02:
Updated dependencies fd41d77c29:
[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[patch]b9dc265bc9:
Avatar-item will now respect the width of it's parent container- Updated dependencies c0102a3ea2:
[patch]24865cfaff:
Corrects bgColor type from never to string- Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
[patch]d222c2b987:
Theme has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided.
** getTokens props changes ** When defining the value function passed into a ThemeProvider, the
getTokens parameter cannot be called without props; if no props are provided an empty object {}
must be passed in:
<CustomTheme.Provider
value={t => ({ ...t(), backgroundColor: '#333'})}
>
becomes:
<CustomTheme.Provider
value={t => ({ ...t({}), backgroundColor: '#333'})}
>
** Color palette changes ** Color palettes have been moved into their own file. Users will need to update imports from this:
import { colors } from '@atlaskit/theme';
colors.colorPalette('8');
to this:
import { colorPalette } from '@atlaskit/theme';
colorPalette.colorPalette('8');
or for multi entry-point users:
import * as colors from '@atlaskit/theme/colors';
colors.colorPalette('8');
to this:
import * as colorPalettes from '@atlaskit/theme/color-palette';
colorPalettes.colorPalette('8');
[patch]35d2229b2a:
Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.
[patch]a2d0043716:
Updated version of analytics-next to fix potential incompatibilities with TS 3.6
[patch]8dff68dffa:
AvatarItems will only present a pointer cursor if onClick or href has been supplied
[minor]79689c9027:
Adding an optional prop testId that will set the attribute value data-testid. It will help
products to write better integration and end to end tests.
[patch]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.
[major]8d0f37c23e:
@atlaskit/avatar has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes.
[minor]c6efb2f5b6:
Prefix the legacy lifecycle methods with UNSAFE_* to avoid warning in React 16.9+
More information about the deprecation of lifecycles methods can be found here: https://reactjs.org/blog/2018/03/29/react-v-16-3.html#component-lifecycle-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]926b43142b:
Analytics-next has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No behavioural changes.
Breaking changes
withAnalyticsForSumTypeProps alias has been removed, please use withAnalyticsEventsAnalyticsContextWrappedComp alias has been removed, please use withAnalyticsContextBreaking changes to TypeScript annotations
withAnalyticsEvents now infers proptypes automatically, consumers no longer need to provide
props as a generic type.withAnalyticsContext now infers proptypes automatically, consumers no longer need to provide
props as a generic type.WithAnalyticsEventProps has been renamed to WithAnalyticsEventsProps to match source
codeCreateUIAnalyticsEventSignature has been renamed to CreateUIAnalyticsEvent to match
source codeUIAnalyticsEventHandlerSignature has been renamed to UIAnalyticsEventHandler to match
source codeAnalyticsEventsPayload has been renamed to AnalyticsEventPayloadObjectType has been removed, please use Record<string, any> or [key: string]: anyUIAnalyticsEventInterface has been removed, please use UIAnalyticsEventAnalyticsEventInterface has been removed, please use AnalyticsEventCreateAndFireEventFunction removed and should now be inferred by TypeScriptAnalyticsEventUpdater removed and should now be inferred by TypeScript[patch]d905cbc0ac:
Adding a condition to check if the component are referenced in tests running in CI. It reduces the noise and help reading the CI log.
[patch]9f8ab1084b:
Consume analytics-next ts type definitions as an ambient declaration.
[patch]21854842b5:
[major]7c17b35107:
[patch]d01ab3961b:
[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]92d8e6317c:
[patch]d13242d:
[patch]a981c43:
feature; added the xxlarge size to Avatar (5cfbfb5)
feature; adds AvatarGroup export with 'stack' and 'grid' appearances (59dac0c)
feature; adds AvatarItem named export to Avatar (9939bfd)
feature; adds name prop to Avatar (replaces label) (5cfe547)
feature; adds tooltips for Avatars (816402a)
feature; avatar how handles href, onClick and arbitrary `component` prop functionality (763e00c)
feature; presence prop now accepts a react element in addition to its enumerable values (rep (dfcc3f7)
feature; replaced presenceBorderColor prop with `borderColor` (0e4c171)
breaking; Removed presenceBorderColor prop (replaced with `borderColor`)
breaking; `icon` prop has been replaced with a more accepting `presence` prop
breaking; Label prop has been replaced with `name`