A tag labels UI objects for quick recognition and navigation.
yarn add @atlaskit/tag#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/react#94639
135106f2d1c95 -
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.
4660ec858a305 -
Update React from v16 to v18ad627ccbb12b8 -
Refactor internals and flesh out dev dependencies to match internal usage.57f451bda8919 -
Adds side-effect config to support Compiled css extraction in third-party apps8ae1e110621b7 -
Internal changes to feature flag used to toggle new icons21bfb50836bad -
Migrated to use new iconography behind a feature flag.ed8ae748863a0 -
Enhance the removable Tag component to automatically prepend 'Remove' to the tag text by default.#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.
1d7ac70801120 -
[ux] Testing a new visual appearance behind a feature flag. If successful it'll be released at a
later date.d131599730792 -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.d645476428e9 -
Fix bug in which tags weren't getting truncated with ellipsis when within smaller containers.#96758
97190f5196c8 -
RemovableTag remove buttons now use the Pressable primitive.
overflow: hidden was removed from base tag styles to prevent button focus outlines being
cropped. No known impacts are expected from this changed3fa752a0e8e -
Updates background color of the YellowLight tag varian to use the appropriate yellow token1de74609c13 - Removed
all remaining legacy theming logic from the Tag, Toggle and Tooltip components.07aa588c8a4 - Reverts
the fix to text descender cut-off, due to incompatibilities with Firefox and Safari.a8ad544c90a - [ux]
Updates background in interaction states to use new interaction accent tokens. Introduces three
new color variants: Lime, Orange and Magenta.56b444b56a8 - Fix a
bug where text descenders were cut off at high zoom levels on Windows4ae083a7e66 - Use
@af/accessibility-testing for default jest-axe config and jest-axe import in accessibility
testing.df07bc1eecf - Internal
change to use space tokens for spacing properties. There is no visual change.49b08bfdf5f - Migrated
use of gridSize to space tokens where possible. There is no expected visual or behaviour change.56507598609 - Skip
minor dependency bumpf6c88b297ae - [ux]
Adds back in a focus indicator on Tags when they are also links.18aeca8c199 - Internal
change to update token references. There is no expected behaviour or visual change.9827dcb82b8 - No-op
change to introduce spacing tokens to design system components.30538b8eba9 - [ux]
Update grey color to use design tokensdcab33b00fd - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.292f10ad52d - Internal
code change turning on new linting rules.#19618
53588b7628f - [ux]
Color updates
9a686cea43e - [ux]
Reinstated missing hover states for simple tags82149cbba48 - Internal
styling has been refactored in preparation for @compiled/react19d72473dfb - The
no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when
auto-fixing by correctly formatting token ids.f460cc7c411 - Builds
for this package now pass through a tokens babel plugin, removing runtime invocations of the
tokens() function and improving bundle size.#14319
312f801c5ee - [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.
557c2cacd26 - [ux]
Fixed the incorrect hover state coloursd6f7ff383cf - Updates
to development dependency storybook-addon-performance753dd89d2db - Removed
redundant role attribute of Simple and Removable tags7116601e1b2 - Internal
typing refactored to be readable by extract-react-types.79c23df6340 - Use
injected package name and version for analytics instead of version.json.863370c4cab - [ux]
Fixes a bug in which Tag's hover state is incorrectly using the removable color palette.65d8baf4c6 - Fixed
hover color for linked tag and focus ring for keyboard navigationc46e5e022f - Fixed
props table missing and relative path in examples issue5f58283e1f - 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.#4749
661b22b003 - ### 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.
import SimpleTag from '@atlaskit/tag/simple-tag';
and use RemovableTag for the full-featured version in entry point removable-tag:
import RemovableTag from '@atlaskit/tag/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.
removeButtonText to removeButtonLabel as it's used as aria-labelisRemovable prop to RemovableTag so you can conditionally allow removal# You first need to have the latest range installed before you can run the codemod
yarn upgrade @atlaskit/tag@^11.0.0
# Run the codemod cli
# Pass in a parser for your codebase
npx @atlaskit/codemod-cli /path/to/target/directory --parser [tsx | flow | babel]
b6d1b68c09 - Fix
exiting animation and adjust paddings for tag content#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.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 npm[minor]55b726b9af:
Various accessibility improvements:
[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[patch]f998d0afc2:
Removed comment- Updated dependencies d2b8166208:
[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]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[major]1adb8727e3:
@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:
Consume analytics-next ts type definitions as an ambient declaration.
[patch]21854842b5:
[major]7c17b35107:
[patch]ef0875bb53:
[patch]98e11001ff:
[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.
[minor]925de1a:
AppearanceType flow type