Tag

ef98af289c49b, (opens new window) - Add motion to Tag, AvatarTag, TagDropdownTrigger, Tag Group, Select, React Select, and User Picker tag values. Tags use motion.label.enter and motion.label.exit for entry and exit, while interactive tags and dropdown triggers use the button hover and pressed motion tokens; Tag Dropdown Trigger also fades between its content and loading spinner. The remove control is removed when exit begins so it cannot linger while the tag collapses.

Motion is gated by platform-dst-motion-uplift-labels. Compatibility and adoption paths for the visually uplifted Tag, Tag Group, Select, React Select, and User Picker additionally remain behind platform-dst-lozenge-tag-badge-visual-uplifts.

@atlaskit/react-select also adds an optional onMotionFinish callback to the exported MultiValueProps interface so the Select can restore its placeholder after the final multi-value exit completes.

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.

772c0f5a9cdbd, (opens new window) - Add a new @atlaskit/tag/tag entry point that exports the default Tag component (removable by default) without going through the package barrel.

This gives consumers a non-barrel path to the recommended default Tag when migrating off the deprecated SimpleTag (@atlaskit/tag/simple-tag) and RemovableTag (@atlaskit/tag/removable-tag) entry points:

Importing from @atlaskit/tag/tag (instead of the @atlaskit/tag barrel) keeps consumers off the prohibited barrel entry point, improving IDE type highlighting, dev-server startup, and tree-shaking.

7de10719ffa5c, (opens new window) - Adds optional swatchBeforeLabel and swatchBeforeRole props to SimpleTag, RemovableTag, and TagNew components. When both props are provided and the parent-field-switcher-missing-info-image-text feature gate is enabled, the color swatch renders with role="img" and aria-label for screen reader accessibility.

10862ef4cfde6, (opens new window) - Re-introduces the SimpleTag/RemovableTag deprecation and hasMargin cleanup.

These changes were previously released in @atlaskit/tag@15.2.2, then reverted in the monorepo, so the published 15.2.2 package on npm no longer matched master. This change re-lands the intended behaviour so the source and published package are back in sync.

• Deprecated SimpleTag and RemovableTag. Migrate to the default Tag export from @atlaskit/tag: use <Tag isRemovable={false} /> in place of SimpleTag, and <Tag /> in place of RemovableTag (removable by default).
• Removed hasMargin from SimpleTagProps as it was never forwarded to the underlying tag and had no effect on SimpleTag. The prop remains available on RemovableTag, where it is applied correctly.

• Removed hasMargin from SimpleTagProps as it was never forwarded to the underlying tag and had no effect on SimpleTag. The prop remains available on RemovableTag, where it is applied correctly.

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.

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.

• Borders now use the new color.border.accent.*.subtle tokens (introduced in @atlaskit/tokens@13.2.0).
• Icons keep color.icon.accent.* in the default state (vibrant on the plain page background) and swap to color.text.accent.* on hover/pressed for guaranteed 3:1 contrast against the coloured interactive backgrounds.
• The AvatarTag border uses color.border.accent.gray.subtle directly with no interactive transforms.

f66361a625b2c, (opens new window) - Support string[] for the UI-uplifted Tag (TagNew) text prop.

This helps Lozenge → Tag migration cases where intl placeholder callbacks return ordered string chunks. string[] values are flattened with join('') before rendering. AvatarTag remain string-only.

52b7aa6b3d721, (opens new window) - Added a new /new entrypoint for @atlaskit/lozenge, @atlaskit/badge, and @atlaskit/tag. These entrypoints export the new visual refresh components directly, bypassing the platform-dst-lozenge-tag-badge-visual-uplifts feature flag. This is intended for products that don't have Statsig integrated and cannot evaluate the feature flag.

New entrypoints:

• import Lozenge from '@atlaskit/lozenge/new'
• import Badge from '@atlaskit/badge/new'
• import Tag from '@atlaskit/tag/new'

Note: Do not use the /new entrypoint if your app can evaluate the platform-dst-lozenge-tag-badge-visual-uplifts feature flag. These entrypoints will be removed after the visual uplift rollout is complete, which will require updating import paths back to the default entrypoint.

0b0079f9a87a8, (opens new window) - Introduced TagDropdownTrigger for Jira Epic workflows only. This component is deprecated and intended strictly for migration/backward-compatibility use cases; do not adopt it for new product experiences.

Added experimental swatchBefore support to new Tag component, which renders a 12x12 leading color swatch before elemBefore (using either the tag color’s subtle accent token or a provided token value). This API is experimental and not recommended for broad adoption yet.

• Fix bug where removable gray tags rendered incorrect colors for the close button.
• Add testId to links in link tags to allow links to be targeted by tests

#117363, (opens new window) 10a0f7f6c2027, (opens new window) - 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, (opens new window)

#94639, (opens new window) 135106f2d1c95, (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/tag, 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, (opens new window).

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

• Button focus outlines are no longer negatively inset
• overflow: hidden was removed from base tag styles to prevent button focus outlines being cropped. No known impacts are expected from this change
• Pressable includes event tracking on click

• Link tag color background + text updates: hovered and pressed states. Now using accent tokens
• Removable tag background, text, and remove button color updates: hovered and pressed states. Now using "danger" token color (red) on hover
• Elements before tags now vertically centered rather than anchored to the top
• Elements before tags now match text color of tag, improving visibility on color variations and interaction states
• Replaced some remaining colors with design tokens

#14319, (opens new window) 312f801c5ee, (opens new window) - [ux] Instrumented tag with the new theming package, @atlaskit/tokens.

New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha). These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.

#4749, (opens new window) 661b22b003, (opens new window) - ### Brief

The major changes are mainly on performance tunning for tag. As part of the change, we split Tag into RemovableTag and SimpleTag.

If you just want to display a non-interactive tag, use SimpleTag. If you want to display tags that can be removed, use RemovableTag. We made this split so that people only need to pay the cost for the functionality they are using.

and use RemovableTag for the full-featured version in entry point removable-tag:

RemovableTag has the remove button so you can remove it from the page. There are a few other enhancements as well in this changeset. By using remove icon from @atlaskit/icon and animation from @atlaskit/motion, we reduced the overall size of the component. In addition, the DOM structure is reduced too.

• Renamed removeButtonText to removeButtonLabel as it's used as aria-label
• Added isRemovable prop to RemovableTag so you can conditionally allow removal

#3885, (opens new window) 6c525a8229, (opens new window) - 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.

[minor]55b726b9af, (opens new window):

Various accessibility improvements:

• Clicking on an element that is not clickable will no longer activate a focus ring
• Non-clickable tags no longer have focus / hover states
• Links can be directly navigated to and clicked via native browser behavior
• Remove button now sets a pointer cursor

• @atlaskit/icon@20.0.2

[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/avatar@17.1.7
• @atlaskit/icon@20.0.1
• @atlaskit/section-message@4.1.5
• @atlaskit/theme@9.5.1

• @atlaskit/icon@20.0.0
• @atlaskit/avatar@17.1.6
• @atlaskit/section-message@4.1.4
• @atlaskit/docs@8.3.1

[patch]f998d0afc2, (opens new window):

Removed comment- Updated dependencies d2b8166208, (opens new window):

• @atlaskit/docs@8.3.0

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

** 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:

becomes:

** Color palette changes ** Color palettes have been moved into their own file. Users will need to update imports from this:

to this:

or for multi entry-point users:

to this:

[patch]35d2229b2a, (opens new window):

Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.

[patch]a2d0043716, (opens new window):

Updated version of analytics-next to fix potential incompatibilities with TS 3.6

• @atlaskit/avatar@17.0.0
• @atlaskit/theme@9.2.2

[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

[patch]ecca4d1dbb, (opens new window):

Upgraded Typescript to 3.3.x

[patch]708028db86, (opens new window):

Change all the imports to theme in Core to use multi entry points

[patch]de35ce8c67, (opens new window):

Updates component maintainers

[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

[patch]f34776be97, (opens new window):

Type definition files are now referenced in package.json

[major]1adb8727e3, (opens new window):

@atlaskit/tag 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]9f8ab1084b, (opens new window):

Consume analytics-next ts type definitions as an ambient declaration.

• @atlaskit/docs@8.1.3
• @atlaskit/avatar@16.0.6
• @atlaskit/section-message@4.0.5
• @atlaskit/icon@19.0.0

[patch]4615439434, (opens new window):

index.ts will now be ignored when publishing to npm

• @atlaskit/docs@8.1.2
• @atlaskit/avatar@16.0.3
• @atlaskit/section-message@4.0.2
• @atlaskit/icon@18.0.0

• @atlaskit/avatar@16.0.2
• @atlaskit/icon@17.1.1
• @atlaskit/theme@9.0.2
• @atlaskit/section-message@4.0.0

• Clean couple of TODO's that were already done

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

• Fixed size of tag remove icon

• @atlaskit/docs@7.0.3
• @atlaskit/avatar@15.0.4
• @atlaskit/icon@16.0.9
• @atlaskit/section-message@2.0.3
• @atlaskit/theme@8.1.7

• Removes duplicate babel-runtime dependency

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

• Drop ES5 from all the flow modules

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:

Previously this was sort of possible for consumers by doing something like:

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.

• @atlaskit/docs@6.0.1
• @atlaskit/avatar@14.1.8
• @atlaskit/section-message@1.0.16
• @atlaskit/icon@16.0.0

• @atlaskit/analytics-next@3.1.2
• @atlaskit/avatar@14.1.7
• @atlaskit/icon@15.0.2
• @atlaskit/section-message@1.0.14
• @atlaskit/theme@7.0.1
• @atlaskit/docs@6.0.0

• @atlaskit/docs@5.2.3
• @atlaskit/icon@15.0.1
• @atlaskit/section-message@1.0.13
• @atlaskit/theme@7.0.0
• @atlaskit/avatar@14.1.6

• @atlaskit/docs@5.2.2
• @atlaskit/avatar@14.1.5
• @atlaskit/section-message@1.0.12
• @atlaskit/icon@15.0.0

• Export AppearanceType flow type

• @atlaskit/docs@5.0.8
• @atlaskit/avatar@14.0.11
• @atlaskit/icon@14.0.0

• @atlaskit/theme@6.0.0
• @atlaskit/icon@13.2.5
• @atlaskit/avatar@14.0.8
• @atlaskit/docs@5.0.6

• @atlaskit/analytics-next@3.0.4
• @atlaskit/theme@5.1.3
• @atlaskit/icon@13.2.4
• @atlaskit/avatar@14.0.6

• @atlaskit/icon@13.2.2
• @atlaskit/theme@5.1.2
• @atlaskit/analytics-next@3.0.3
• @atlaskit/docs@5.0.2
• @atlaskit/avatar@14.0.5

• @atlaskit/analytics-next@3.0.2
• @atlaskit/theme@5.1.1
• @atlaskit/icon@13.2.1
• @atlaskit/avatar@14.0.4

• @atlaskit/analytics-next@3.0.1
• @atlaskit/docs@5.0.1
• @atlaskit/avatar@14.0.2

• @atlaskit/analytics-next@3.0.0
• @atlaskit/theme@5.0.0
• @atlaskit/docs@5.0.0
• @atlaskit/icon@13.0.0
• @atlaskit/avatar@14.0.0

• @atlaskit/analytics-next@3.0.0
• @atlaskit/theme@5.0.0
• @atlaskit/docs@5.0.0
• @atlaskit/icon@13.0.0
• @atlaskit/avatar@14.0.0

• @atlaskit/avatar@13.0.0

• @atlaskit/avatar@13.0.0

• @atlaskit/avatar@12.0.0

• @atlaskit/icon@12.3.1
• @atlaskit/avatar@11.2.1

• @atlaskit/theme@4.0.4
• @atlaskit/icon@12.1.2

• @atlaskit/theme@4.0.3
• @atlaskit/icon@12.1.1
• @atlaskit/avatar@11.1.1
• @atlaskit/docs@4.1.1

• @atlaskit/avatar@11.1.0
• @atlaskit/icon@12.1.0
• @atlaskit/docs@4.1.0
• @atlaskit/theme@4.0.2

• @atlaskit/icon@12.0.1
• @atlaskit/theme@4.0.1
• @atlaskit/docs@4.0.1
• @atlaskit/avatar@11.0.1

• @atlaskit/icon@12.0.0
• @atlaskit/theme@4.0.0
• @atlaskit/docs@4.0.0
• @atlaskit/avatar@11.0.0

• @atlaskit/icon@11.3.0
• @atlaskit/theme@3.2.2
• @atlaskit/avatar@10.0.6
• @atlaskit/docs@3.0.4