Avatar

An avatar is a visual representation of a user or entity.

28.0.2

Patch Changes

  • Updated dependencies

28.0.1

Patch Changes

28.0.0

Major Changes

  • 3516c9fac5ea8, (opens new window) - Rename the public 16px Avatar size from xsmall to xxsmall to make room for a future 20px xsmall size. xsmall still renders at runtime for now to avoid immediate JavaScript breakages, but it has been removed from TypeScript interfaces and will be removed in a future major before being re-added as the public 20px size.

    Run the Avatar codemod to update static 16px Avatar usage:

    <Avatar - size="xsmall" + size="xxsmall" />

    AvatarGroup continues to exclude 16px and 20px Avatar-only sizes.

Patch Changes

27.3.0

Minor Changes

Patch Changes

  • Updated dependencies

27.2.2

Patch Changes

27.2.1

Patch Changes

27.2.0

Minor Changes

  • d82e6f76528ab, (opens new window) - Add direct subpath package exports as part of the linking-platform, search, media, and design-system barrel-removal (de-barrel) migration.

    These packages now expose their individual modules via explicit package.json exports subpaths so that consumers can import directly from the leaf module (e.g. @atlaskit/pkg/thing) instead of the package barrel/index. This adds new public entry points without changing or removing any existing exports, so it is a backwards-compatible additive change.

    No runtime behaviour changes; this is an API-surface (entry-point) addition to support tree-shaking and to unblock removal of the barrel index files.

Patch Changes

  • Updated dependencies

27.1.0

Minor Changes

  • 8022d651e6a43, (opens new window) - Add the ./avatar-sizes entry point, which exports the AVATAR_SIZES size map. This allows consumers to import avatar sizing values directly via @atlaskit/avatar/avatar-sizes.

27.0.0

Major Changes

  • 517bbea71d2d2, (opens new window) - Breaking change: The isDecorative prop has been removed from Avatar.

    This prop was used to suppress aria-labelledby on decorative avatars. The same effect can be achieved by passing an empty string to the label prop.

    Migration:

    - <Avatar src={src} name="User name" isDecorative /> + <Avatar src={src} name="User name" label="" />

    If you were conditionally setting isDecorative:

    - <Avatar src={src} name={name} isDecorative={isDecorative} /> + <Avatar src={src} name={name} label={isDecorative ? '' : undefined} />

Patch Changes

  • Updated dependencies

26.4.2

Patch Changes

26.4.1

Patch Changes

26.4.0

Minor Changes

  • 3a45d08ff1c62, (opens new window) - Add xxsmall as the public 16px Avatar size and deprecate xsmall as the legacy 16px alias. This starts the migration from the existing 16/24px Avatar size scale to 16/20/24px. Static Avatar usages in AFM should migrate from xsmall to xxsmall; xsmall remains available for now and continues to render as 16px while the migration feature gate is off.

    AvatarGroup continues to exclude the Avatar-only 16px and 20px sizes.

26.3.0

Minor Changes

  • 6fc1fcd1b0196, (opens new window) - Adjusts hexagon avatars so that their stroke width is closer to 2px and consistent with other avatar shapes. This change is behind the platform_editor_agent_mentions_drop_one_fixes feature gate.

26.2.0

Minor Changes

  • 0a1dac0483f0a, (opens new window) - Add a new UNSAFE_xsmall size variant (20px) to Avatar, AvatarContent, and Skeleton. It sits between the existing xsmall (16px) and small (24px) sizes and supports presence and status indicators.

    UNSAFE_xsmall is an unsafe, transitional size that is intentionally hidden from the documented size scale (@private). The size scale will eventually be renamed so the 16px avatar becomes xxsmall and xsmall represents 20px. Until that migration happens, UNSAFE_xsmall provides a 20px avatar for consumers that need it.

Patch Changes

  • Updated dependencies

26.1.3

Patch Changes

  • Updated dependencies

26.1.2

Patch Changes

  • Updated dependencies

26.1.1

Patch Changes

  • Updated dependencies

26.1.0

Minor Changes

  • cd097a2111788, (opens new window) - Republish packages depending on @atlaskit/react-compiler-gating so their published dependency reference is updated to the renamed @atlaskit/react-compiler-gating scope.

    The earlier rename of @atlassian/react-compiler-gating to @atlaskit/react-compiler-gating only bumped the renamed package itself, so dependent packages were never republished and their published versions still referenced the old @atlassian/react-compiler-gating name, which is not available in the public npm registry. This minor bump republishes all affected packages with the corrected dependency.

Patch Changes

  • Updated dependencies

26.0.2

Patch Changes

26.0.1

Patch Changes

26.0.0

Major Changes

  • f2dc9097319f0, (opens new window) - ### Dropped support for legacy Typescript 4 types. Typescript 5 is now the new minimum.

    Removes the typesVersions property and dist/types-ts4.5 directory from the dist.

    Types are now exclusively via the "types": "dist/types/index.d.ts" property.

    - "typesVersions": { - ">=4.5 <4.9": { - "*": [ - "dist/types-ts4.5/*", - "dist/types-ts4.5/index.d.ts" - ] - } - },

Patch Changes

  • Updated dependencies

25.15.1

Patch Changes

  • d39a9f06a8508, (opens new window) - [ux] Bug fix: square avatars allow size to be set to xlarge and xxlarge, which are invalid sizes that should not be available for square avatars (only circle and hexagonal avatars).

25.15.0

Minor Changes

  • e52f0046ff01d, (opens new window) - Cleanup feature gate platform_dst_hexagon_avatar_unified_size. Hexagonal avatars now consistently use unified sizing to align with other avatar types. We have not seen any regression with this breaking alignment, but it's possible to have subtle breaking changes with unsafe style overrides.

25.14.2

Patch Changes

  • Updated dependencies

25.14.1

Patch Changes

  • 0b2913c48cd7a, (opens new window) - Fix hexagon avatar hover scaling: apply motion scale transform to the outermost hexagon wrapper so the border and content scale together, instead of only the inner content scaling.

25.14.0

Minor Changes

25.13.0

Minor Changes

  • 91ec2c3ecc3b5, (opens new window) - [ux] Added 'warning' as a new value for the status prop on Avatar and the Status component. This adds a yellow warning indicator to signal caution or attention-required states, supporting Agent visibility use cases.

25.12.0

Minor Changes

  • 1a7161faf1584, (opens new window) - [ux] Added 'warning' as a new value for the status prop on Avatar and the Status component. This adds a yellow warning indicator to signal caution or attention-required states, supporting Agent visibility use cases.

25.11.7

Patch Changes

  • Updated dependencies

25.11.6

Patch Changes

25.11.5

Patch Changes

  • Updated dependencies

25.11.4

Patch Changes

25.11.3

Patch Changes

25.11.2

Patch Changes

  • Updated dependencies

25.11.1

Patch Changes

25.11.0

Minor Changes

25.10.0

Minor Changes

25.9.2

Patch Changes

25.9.1

Patch Changes

  • Updated dependencies

25.9.0

Minor Changes

Patch Changes

  • 0511c5b5930bb, (opens new window) - Adjust the hexagonal appearance Avatar's width and height to be aligned with other Avatars behind fg platform_dst_hexagon_avatar_unified_size

25.8.4

Patch Changes

25.8.3

Patch Changes

  • Updated dependencies

25.8.2

Patch Changes

  • Updated dependencies

25.8.1

Patch Changes

  • Updated dependencies

25.8.0

Minor Changes

  • 7140aa6f03a00, (opens new window) - Adds aria-controls, aria-expanded, and aria-haspopup props to Avatar, enabling it to be used directly as a popup trigger without needing an external button wrapper.

25.7.5

Patch Changes

  • Updated dependencies

25.7.4

Patch Changes

  • Updated dependencies

25.7.3

Patch Changes

  • Updated dependencies

25.7.2

Patch Changes

25.7.1

Patch Changes

  • Updated dependencies

25.7.0

Minor Changes

25.6.3

Patch Changes

  • Updated dependencies

25.6.2

Patch Changes

25.6.1

Patch Changes

  • Updated dependencies

25.6.0

Minor Changes

  • 7df690ca5c497, (opens new window) - We are expanding the testing of previous changes behind an additional feature flag to more apps. If this change is successful, it will be available in a later release.

Patch Changes

  • Updated dependencies

25.5.6

Patch Changes

25.5.5

Patch Changes

  • Updated dependencies

25.5.4

Patch Changes

  • Updated dependencies

25.5.3

Patch Changes

  • Updated dependencies

25.5.2

Patch Changes

  • Updated dependencies

25.5.1

Patch Changes

25.5.0

Minor Changes

25.4.4

Patch Changes

  • Updated dependencies

25.4.3

Patch Changes

  • Updated dependencies

25.4.2

Patch Changes

  • Updated dependencies

25.4.1

Patch Changes

25.4.0

Minor Changes

  • a37090c1d91de, (opens new window) - Adds a new hexagon appearance (<Avatar appearance="hexagon">) as well as a <Skeleton appearance="hexagon"> and internal Image default loader for this. The intent with this appearance is documented as displaying AI agents: circle for users, square for app entities (teams, projects, spaces), andhexagon for agent entities.

25.3.2

Patch Changes

25.3.1

Patch Changes

25.3.0

Minor Changes

  • e314c4cb133f7, (opens new window) - [ux] Updates avatar and avatar group styles to reflect our new visual design language. These changes were previously behind a feature flag and are now fully rolled out.

25.2.1

Patch Changes

25.2.0

Minor Changes

  • 955c510552199, (opens new window) - We are testing a visual change behind a feature flag. Square avatar border radius will be updated to be consistent with the new ADS Tile System. If this change is successful it will be available in a later release.

Patch Changes

  • Updated dependencies

25.1.20

Patch Changes

25.1.19

Patch Changes

25.1.18

Patch Changes

  • Updated dependencies

25.1.17

Patch Changes

25.1.16

Patch Changes

  • Updated dependencies

25.1.15

Patch Changes

25.1.14

Patch Changes

25.1.13

Patch Changes

25.1.12

Patch Changes

25.1.11

Patch Changes

  • Updated dependencies

25.1.10

Patch Changes

  • Updated dependencies

25.1.9

Patch Changes

  • Updated dependencies

25.1.8

Patch Changes

25.1.7

Patch Changes

  • Updated dependencies

25.1.6

Patch Changes

  • Updated dependencies

25.1.5

Patch Changes

  • Updated dependencies

25.1.4

Patch Changes

  • Updated dependencies

25.1.3

Patch Changes

  • Updated dependencies

25.1.2

Patch Changes

  • Updated dependencies

25.1.1

Patch Changes

25.1.0

Minor Changes

25.0.5

Patch Changes

  • Updated dependencies

25.0.4

Patch Changes

25.0.3

Patch Changes

25.0.2

Patch Changes

25.0.1

Patch Changes

  • Updated dependencies

25.0.0

Major Changes

  • #122909, (opens new window) 5330c20b7c5fd, (opens new window) - 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, 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.

Patch Changes

  • Updated dependencies

24.0.1

Patch Changes

  • Updated dependencies

24.0.0

Major Changes

23.0.0

Major Changes

  • #117222, (opens new window) a80e8994489e7, (opens new window) - 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:

    Before

    import Avatar from '@atlaskit/avatar'; <Avatar> {(props) => ( <span {...props}> Custom content </span> )} <Avatar>

    After

    import Avatar, { AvatarContent } from '@atlaskit/avatar'; <Avatar> <AvatarContent> Custom content </AvatarContent> <Avatar>

Patch Changes

  • Updated dependencies

22.0.0

Major Changes

Patch Changes

  • Updated dependencies

21.18.4

Patch Changes

  • Updated dependencies

21.18.3

Patch Changes

21.18.2

Patch Changes

  • Updated dependencies

21.18.1

Patch Changes

  • Updated dependencies

21.18.0

Minor Changes

Patch Changes

  • Updated dependencies

21.17.9

Patch Changes

21.17.8

Patch Changes

21.17.7

Patch Changes

  • Updated dependencies

21.17.6

Patch Changes

21.17.5

Patch Changes

  • Updated dependencies

21.17.4

Patch Changes

  • Updated dependencies

21.17.3

Patch Changes

21.17.2

Patch Changes

21.17.1

Patch Changes

21.17.0

Minor Changes

21.16.1

Patch Changes

  • Updated dependencies

21.16.0

Minor Changes

Patch Changes

21.15.5

Patch Changes

  • Updated dependencies

21.15.4

Patch Changes

  • Updated dependencies

21.15.3

Patch Changes

21.15.2

Patch Changes

  • Updated dependencies

21.15.1

Patch Changes

21.15.0

Minor Changes

21.14.1

Patch Changes

  • Updated dependencies

21.14.0

Minor Changes

  • #127511, (opens new window) db30e29344013, (opens new window) - 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.

Patch Changes

  • Updated dependencies

21.13.1

Patch Changes

  • Updated dependencies

21.13.0

Minor Changes

Patch Changes

  • Updated dependencies

21.12.1

Patch Changes

  • Updated dependencies

21.12.0

Minor Changes

21.11.2

Patch Changes

21.11.1

Patch Changes

  • Updated dependencies

21.11.0

Minor Changes

21.10.4

Patch Changes

  • Updated dependencies

21.10.3

Patch Changes

  • Updated dependencies

21.10.2

Patch Changes

21.10.1

Patch Changes

  • Updated dependencies

21.10.0

Minor Changes

Patch Changes

  • Updated dependencies

21.9.2

Patch Changes

21.9.1

Patch Changes

  • Updated dependencies

21.9.0

Minor Changes

21.8.0

Minor Changes

21.7.0

Minor Changes

21.6.1

Patch Changes

21.6.0

Minor Changes

21.5.2

Patch Changes

21.5.1

Patch Changes

21.5.0

Minor Changes

21.4.6

Patch Changes

21.4.5

Patch Changes

21.4.4

Patch Changes

21.4.3

Patch Changes

  • #63807, (opens new window) 538c46e739b6, (opens new window) - [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.

21.4.2

Patch Changes

  • Updated dependencies

21.4.1

Patch Changes

21.4.0

Minor Changes

21.3.9

Patch Changes

21.3.8

Patch Changes

21.3.7

Patch Changes

21.3.6

Patch Changes

21.3.5

Patch Changes

21.3.4

Patch Changes

21.3.3

Patch Changes

21.3.2

Patch Changes

21.3.1

Patch Changes

21.3.0

Minor Changes

Patch Changes

  • Updated dependencies

21.2.1

Patch Changes

21.2.0

Minor Changes

Patch Changes

21.1.10

Patch Changes

21.1.9

Patch Changes

  • Updated dependencies

21.1.8

Patch Changes

  • Updated dependencies

21.1.7

Patch Changes

21.1.6

Patch Changes

21.1.5

Patch Changes

  • Updated dependencies

21.1.4

Patch Changes

  • Updated dependencies

21.1.3

Patch Changes

  • Updated dependencies

21.1.2

Patch Changes

21.1.1

Patch Changes

21.1.0

Minor Changes

Patch Changes

  • Updated dependencies

21.0.3

Patch Changes

21.0.2

Patch Changes

21.0.1

Patch Changes

21.0.0

Major Changes

  • #21570, (opens new window) 92bb02bc46b, (opens new window) - [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.

Patch Changes

20.5.10

Patch Changes

  • Updated dependencies

20.5.9

Patch Changes

20.5.8

Patch Changes

  • Updated dependencies

20.5.7

Patch Changes

  • Updated dependencies

20.5.6

Patch Changes

  • Updated dependencies

20.5.5

Patch Changes

20.5.4

Patch Changes

  • 19d72473dfb, (opens new window) - Updates usage of deprecated token names so they're aligned with the latest naming conventions. No UI or visual changes
  • Updated dependencies

20.5.3

Patch Changes

  • Updated dependencies

20.5.2

Patch Changes

20.5.1

Patch Changes

  • Updated dependencies

20.5.0

Minor Changes

Patch Changes

  • Updated dependencies

20.4.2

Patch Changes

  • Updated dependencies

20.4.1

Patch Changes

20.4.0

Minor Changes

Patch Changes

  • Updated dependencies

20.3.3

Patch Changes

20.3.2

Patch Changes

20.3.1

Patch Changes

20.3.0

Minor Changes

Patch Changes

20.2.2

Patch Changes

20.2.1

Patch Changes

20.2.0

Minor Changes

  • #8178, (opens new window) 1a8fcbf9878, (opens new window) - [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.

Patch Changes

20.1.1

Patch Changes

20.1.0

Minor Changes

  • #7170, (opens new window) 4f9e6e2db5, (opens new window) - 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.

Patch Changes

  • Updated dependencies

20.0.8

Patch Changes

20.0.7

Patch Changes

  • #6228, (opens new window) 5c1b4d64ef, (opens new window) - [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.

20.0.6

Patch Changes

20.0.5

Patch Changes

  • Updated dependencies

20.0.4

Patch Changes

  • Updated dependencies

20.0.3

Patch Changes

20.0.2

Patch Changes

20.0.1

Patch Changes

20.0.0

Major Changes

  • #3428, (opens new window) cde426961a, (opens new window) - 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, (opens new window) for more details on the codemod CLI.

    Change summary:

    • BREAKING: Avatar's component prop is now a renderProp, (opens new window) and has been renamed to render
    • BREAKING: AvatarItem's component prop is now a renderProp, (opens new window) and has been renamed to render
    • Avatar now forwards its ref
    • AvatarItem now forwards its ref
    • Type AvatarClickType has been renamed to AvatarClickEventHandler

Patch Changes

19.0.0

Major Changes

Patch Changes

  • Updated dependencies

18.0.2

Patch Changes

18.0.1

Patch Changes

18.0.0

Major Changes

  • #2137, (opens new window) b1fa2d6d1c, (opens new window) - 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, (opens new window)

    Summary

    • Fixes re-rendering issues
    • Removes all deprecated theme API. This includes previous experimental dark-mode theme support
    • Stop accepting and spreading arbitrary props
    • Removes analytics-next HOCs in favor of hook variant (You may need to update snapshot tests)
    • Removes all usage of HOCs
    • Replaces styled-components v3 with @emotion/core to improve runtime and bundlesize

    Avatar API / PROP CHANGES

    • enableTooltip removed. Please use @atlaskit/tooltip instead
    • onClick method signature has been simplified to onChange(event, analyticsEvent)
    • isHover removed
    • isActive removed
    • isFocus removed
    • isSelected removed
    • theme removed
    • Added prop types to the component prop
    • BORDER_WIDTH is now a single value rather than an object
    • withPseudoState, 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 isTruncationDisabled
    • onClick method signature has been simplified to onChange(event, analyticsEvent)
    • isHover removed
    • isActive removed
    • isFocus removed
    • isSelected removed
    • theme removed
    • Added prop types to the component prop

17.1.11

Patch Changes

  • Updated dependencies

17.1.10

Patch Changes

17.1.9

Patch Changes

17.1.8

Patch Changes

  • Updated dependencies e3f01787dd, (opens new window):
    • @atlaskit/webdriver-runner@0.2.0
    • @atlaskit/button@13.3.8
    • @atlaskit/section-message@4.1.6
    • @atlaskit/toggle@8.1.5
    • @atlaskit/tooltip@15.2.4

17.1.7

Patch Changes

  • [patch]6548261c9a, (opens new window):

    Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a, (opens new window):

    • @atlaskit/docs@8.3.2
    • @atlaskit/visual-regression@0.1.9
    • @atlaskit/analytics-next@6.3.5
    • @atlaskit/button@13.3.7
    • @atlaskit/field-base@14.0.1
    • @atlaskit/icon@20.0.1
    • @atlaskit/section-message@4.1.5
    • @atlaskit/theme@9.5.1
    • @atlaskit/toggle@8.1.4
    • @atlaskit/tooltip@15.2.3

17.1.6

Patch Changes

17.1.5

Patch Changes

17.1.4

Patch Changes

  • [patch]d222c2b987, (opens new window):

    Theme has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided.

    Breaking

    ** 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');

17.1.3

Patch Changes

17.1.2

Patch Changes

17.1.1

Patch Changes

17.1.0

Minor Changes

  • [minor]79689c9027, (opens new window):

    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.

17.0.1

Patch Changes

  • [patch]40bda8f796, (opens new window):

    @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.

17.0.0

Major Changes

  • [major]8d0f37c23e, (opens new window):

    @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.

16.1.0

Minor Changes

16.0.14

Patch Changes

  • [patch]097b696613, (opens new window):

    Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports

16.0.13

Patch Changes

16.0.12

Patch Changes

16.0.11

Patch Changes

16.0.10

Patch Changes

  • [patch]926b43142b, (opens new window):

    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 withAnalyticsEvents
    • AnalyticsContextWrappedComp alias has been removed, please use withAnalyticsContext

    Breaking 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.
    • Type WithAnalyticsEventProps has been renamed to WithAnalyticsEventsProps to match source code
    • Type CreateUIAnalyticsEventSignature has been renamed to CreateUIAnalyticsEvent to match source code
    • Type UIAnalyticsEventHandlerSignature has been renamed to UIAnalyticsEventHandler to match source code
    • Type AnalyticsEventsPayload has been renamed to AnalyticsEventPayload
    • Type ObjectType has been removed, please use Record<string, any> or [key: string]: any
    • Type UIAnalyticsEventInterface has been removed, please use UIAnalyticsEvent
    • Type AnalyticsEventInterface has been removed, please use AnalyticsEvent
    • Type CreateAndFireEventFunction removed and should now be inferred by TypeScript
    • Type AnalyticsEventUpdater removed and should now be inferred by TypeScript

16.0.9

Patch Changes

  • [patch]d905cbc0ac, (opens new window):

    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.

16.0.8

16.0.7

Patch Changes

16.0.6

  • Updated dependencies 06326ef3f7, (opens new window):
    • @atlaskit/docs@8.1.3
    • @atlaskit/button@13.0.9
    • @atlaskit/field-base@13.0.6
    • @atlaskit/section-message@4.0.5
    • @atlaskit/toggle@7.0.3
    • @atlaskit/tooltip@15.0.2
    • @atlaskit/icon@19.0.0

16.0.5

Patch Changes

16.0.4

16.0.3

  • Updated dependencies cfc3c8adb3, (opens new window):
    • @atlaskit/docs@8.1.2
    • @atlaskit/button@13.0.8
    • @atlaskit/field-base@13.0.4
    • @atlaskit/section-message@4.0.2
    • @atlaskit/toggle@7.0.1
    • @atlaskit/tooltip@14.0.3
    • @atlaskit/icon@18.0.0

16.0.2

16.0.1

16.0.0

  • [major]7c17b35107, (opens new window):
    • Updates react and react-dom peer dependencies to react@^16.8.0 and react-dom@^16.8.0. To use this package, please ensure you use at least this version of react and react-dom.

15.0.5

15.0.4

  • Updated dependencies 9c0b4744be, (opens new window):
    • @atlaskit/docs@7.0.3
    • @atlaskit/button@12.0.3
    • @atlaskit/field-base@12.0.2
    • @atlaskit/icon@16.0.9
    • @atlaskit/section-message@2.0.3
    • @atlaskit/toggle@6.0.4
    • @atlaskit/tooltip@13.0.4
    • @atlaskit/theme@8.1.7

15.0.3

  • Updated dependencies 1e826b2966, (opens new window):
    • @atlaskit/docs@7.0.2
    • @atlaskit/analytics-next@4.0.3
    • @atlaskit/icon@16.0.8
    • @atlaskit/section-message@2.0.2
    • @atlaskit/theme@8.1.6
    • @atlaskit/toggle@6.0.3
    • @atlaskit/tooltip@13.0.3
    • @atlaskit/button@12.0.0

15.0.2

  • [patch]ea173a3ee2, (opens new window):
    • Internal changes only. Component is now SSR compatible. If server side rendered, Avatar Images will begin to load immediately; before client bundle is ready. If this is undesired, imageUrl can be passed in after component is mounted.

15.0.1

  • Updated dependencies 9d5cc39394, (opens new window):
    • @atlaskit/docs@7.0.1
    • @atlaskit/analytics-next@4.0.1
    • @atlaskit/icon@16.0.5
    • @atlaskit/section-message@2.0.1
    • @atlaskit/theme@8.0.1
    • @atlaskit/toggle@6.0.1
    • @atlaskit/tooltip@13.0.1
    • @atlaskit/button@11.0.0

15.0.0

  • [major]76299208e6, (opens new window):

    • Drop ES5 from all the flow modules

    Dropping CJS support in all @atlaskit packages

    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, (opens new window) (for external) if you have any questions or queries about this.

14.1.9

  • [patch]92d8e6317c, (opens new window):
    • Check if the DOM is available when rendering an AvatarImage so that SSR rendered Avatars will render with the provided image.

14.1.8

  • Updated dependencies d7ef59d432, (opens new window):
    • @atlaskit/docs@6.0.1
    • @atlaskit/button@10.1.2
    • @atlaskit/field-base@11.0.14
    • @atlaskit/section-message@1.0.16
    • @atlaskit/toggle@5.0.15
    • @atlaskit/tooltip@12.1.15
    • @atlaskit/icon@16.0.0

14.1.7

  • Updated dependencies 58b84fa, (opens new window):
    • @atlaskit/analytics-next@3.1.2
    • @atlaskit/button@10.1.1
    • @atlaskit/field-base@11.0.13
    • @atlaskit/icon@15.0.2
    • @atlaskit/section-message@1.0.14
    • @atlaskit/theme@7.0.1
    • @atlaskit/toggle@5.0.14
    • @atlaskit/tooltip@12.1.13
    • @atlaskit/docs@6.0.0

14.1.6

  • [patch]d13242d, (opens new window):
    • Change API to experimental theming API to namespace component themes into separate contexts and make theming simpler. Update all dependant components.

14.1.5

  • Updated dependencies ab9b69c, (opens new window):
    • @atlaskit/docs@5.2.2
    • @atlaskit/button@10.0.1
    • @atlaskit/field-base@11.0.11
    • @atlaskit/section-message@1.0.12
    • @atlaskit/toggle@5.0.12
    • @atlaskit/tooltip@12.1.11
    • @atlaskit/icon@15.0.0

14.1.4

  • Updated dependencies 6998f11, (opens new window):
    • @atlaskit/docs@5.2.1
    • @atlaskit/analytics-next@3.1.1
    • @atlaskit/icon@14.6.1
    • @atlaskit/section-message@1.0.11
    • @atlaskit/theme@6.2.1
    • @atlaskit/toggle@5.0.11
    • @atlaskit/tooltip@12.1.10
    • @atlaskit/button@10.0.0

14.1.3

14.1.2

14.1.1

14.1.0

14.0.11

  • [patch] Updated dependencies 65c6514, (opens new window)
    • @atlaskit/docs@5.0.8
    • @atlaskit/button@9.0.13
    • @atlaskit/field-base@11.0.8
    • @atlaskit/section-message@1.0.8
    • @atlaskit/toggle@5.0.9
    • @atlaskit/tooltip@12.1.1
    • @atlaskit/icon@14.0.0

14.0.10

  • [patch] Fix bug where analytics was causing avatar to always have an onClick and render with onClick styles/attributes. 966f1fb, (opens new window)

14.0.8

  • [patch] Updated dependencies df22ad8, (opens new window)
    • @atlaskit/theme@6.0.0
    • @atlaskit/tooltip@12.0.9
    • @atlaskit/toggle@5.0.6
    • @atlaskit/section-message@1.0.5
    • @atlaskit/icon@13.2.5
    • @atlaskit/field-base@11.0.5
    • @atlaskit/button@9.0.6
    • @atlaskit/docs@5.0.6

14.0.7

14.0.6

14.0.5

  • [patch] Updated dependencies acd86a1, (opens new window)
    • @atlaskit/tooltip@12.0.4
    • @atlaskit/icon@13.2.2
    • @atlaskit/toggle@5.0.4
    • @atlaskit/section-message@1.0.3
    • @atlaskit/button@9.0.4
    • @atlaskit/theme@5.1.2
    • @atlaskit/analytics-next@3.0.3
    • @atlaskit/docs@5.0.2
    • @atlaskit/field-base@11.0.2

14.0.4

  • [patch] Add a SSR test for every package, add react-dom and build-utils in devDependencies 7e331b5, (opens new window)
  • [none] Updated dependencies 7e331b5, (opens new window)
    • @atlaskit/tooltip@12.0.3
    • @atlaskit/field-base@11.0.1
    • @atlaskit/analytics-next@3.0.2
    • @atlaskit/toggle@5.0.3
    • @atlaskit/button@9.0.3
    • @atlaskit/theme@5.1.1
    • @atlaskit/section-message@1.0.2
    • @atlaskit/icon@13.2.1

14.0.3

14.0.2

14.0.1

14.0.0

13.0.0

12.0.0

11.2.2

11.2.1

11.2.0

11.1.1

  • [patch] Update changelogs to remove duplicate cc58e17, (opens new window)
  • [none] Updated dependencies cc58e17, (opens new window)
    • @atlaskit/theme@4.0.3
    • @atlaskit/item@7.0.4
    • @atlaskit/icon@12.1.1
    • @atlaskit/field-base@10.1.1
    • @atlaskit/dropdown-menu@5.0.3
    • @atlaskit/button@8.1.1
    • @atlaskit/docs@4.1.1

11.1.0

  • [none] Updated dependencies 9d20f54, (opens new window)
    • @atlaskit/tooltip@10.2.0
    • @atlaskit/item@7.0.3
    • @atlaskit/dropdown-menu@5.0.2
    • @atlaskit/icon@12.1.0
    • @atlaskit/toggle@4.0.2
    • @atlaskit/docs@4.1.0
    • @atlaskit/theme@4.0.2
    • @atlaskit/field-base@10.1.0
    • @atlaskit/button@8.1.0

11.0.1

  • [patch] Update readme's 223cd67, (opens new window)
  • [patch] Updated dependencies 223cd67, (opens new window)
    • @atlaskit/tooltip@10.0.1
    • @atlaskit/item@7.0.1
    • @atlaskit/icon@12.0.1
    • @atlaskit/toggle@4.0.1
    • @atlaskit/field-base@10.0.1
    • @atlaskit/button@8.0.1
    • @atlaskit/theme@4.0.1
    • @atlaskit/docs@4.0.1
    • @atlaskit/dropdown-menu@5.0.1

11.0.0

  • [major] makes styled-components a peer dependency and upgrades version range from 1.4.6 - 3 to ^3.2.6 1e80619, (opens new window)
  • [patch] Updated dependencies 1e80619, (opens new window)
    • @atlaskit/tooltip@10.0.0
    • @atlaskit/item@7.0.0
    • @atlaskit/icon@12.0.0
    • @atlaskit/toggle@4.0.0
    • @atlaskit/field-base@10.0.0
    • @atlaskit/button@8.0.0
    • @atlaskit/theme@4.0.0
    • @atlaskit/docs@4.0.0
    • @atlaskit/dropdown-menu@5.0.0

10.0.7

10.0.6

  • [patch] Updated dependencies d662caa, (opens new window)
    • @atlaskit/icon@11.3.0
    • @atlaskit/tooltip@9.2.1
    • @atlaskit/toggle@3.0.2
    • @atlaskit/item@6.0.3
    • @atlaskit/field-base@9.0.3
    • @atlaskit/dropdown-menu@4.0.3
    • @atlaskit/button@7.2.5
    • @atlaskit/theme@3.2.2
    • @atlaskit/docs@3.0.4

10.0.4

10.0.3

10.0.2

10.0.0

9.2.3

9.2.2

9.2.1

9.2.0

9.1.0

9.0.4

9.0.2

9.0.1

9.0.0

  • [major] onAvatarClick prop on AvatarGroup now has a second argument. This second argument is the item that was clicked on. 23a488e, (opens new window)

8.4.1

8.4.0

8.3.10

8.3.6

8.3.5 (2017-11-30)

8.3.4 (2017-11-28)

8.3.3 (2017-11-23)

8.3.2 (2017-11-20)

8.3.1 (2017-11-16)

8.3.0 (2017-11-16)

8.2.4 (2017-11-15)

8.2.3 (2017-11-15)

8.2.2 (2017-11-15)

8.2.1 (2017-11-14)

8.2.0 (2017-11-14)

8.1.0 (2017-11-13)

8.0.11 (2017-11-02)

8.0.10 (2017-10-26)

8.0.9 (2017-10-22)

8.0.8 (2017-10-15)

8.0.7 (2017-10-13)

8.0.6 (2017-10-09)

8.0.5 (2017-09-18)

8.0.4 (2017-09-12)

8.0.3 (2017-09-11)

8.0.1 (2017-09-05)

8.0.0 (2017-08-11)

7.0.0 (2017-08-11)

6.4.5 (2017-08-04)

6.4.4 (2017-08-03)

6.4.3 (2017-07-28)

6.4.2 (2017-07-27)

6.4.1 (2017-07-25)

6.1.0 (2017-07-17)

5.0.0 (2017-07-12)

4.0.6 (2017-06-27)

4.0.4 (2017-05-26)

4.0.3 (2017-05-23)

4.0.2 (2017-05-11)

4.0.1 (2017-05-10)

4.0.0 (2017-05-03)

  • feature; optional square avatar appearance (c43c905, (opens new window))
  • breaking; Previously you could pass a custom Presence to an Avatar via the Avatar's children. Now, these custom Presence or icon elements should be passed to the new 'icon' prop. This change has been made to avoid overloading the concept of Presence and to make the API clearer.
  • ISSUES CLOSED: AK-1645

3.0.3 (2017-04-27)

3.0.2 (2017-04-27)

3.0.1 (2017-04-26)

3.0.0 (2017-04-13)

  • null refactor avatar to styled-components (21a371c, (opens new window))
  • breaking; added peerDependency "styled-components", removed dependency "classnames"
  • ISSUES CLOSED: AK-2099

2.1.5 (2017-04-04)

2.1.4 (2017-03-23)

2.1.2 (2017-03-21)

2.1.0 (2017-03-06)

2.0.2 (2017-02-16)

2.0.1 (2017-02-10)

Was this page helpful?
We use this feedback to improve our documentation.
© 2026 AtlassianTrademark, (opens new window)Privacy, (opens new window)License