MetricText

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.

fe3a9586700ef, (opens new window) - ##

Add named exports for primitives subpath components while preserving default exports.

This update expands API availability for several component subpaths without breaking existing imports. Default imports continue to work, and named imports are now supported in the same entry-points.

The following public subpaths now support both default and named imports:

• @atlaskit/primitives/anchor
• @atlaskit/primitives/flex
• @atlaskit/primitives/inline
• @atlaskit/primitives/metric-text
• @atlaskit/primitives/pressable
• @atlaskit/primitives/stack
• @atlaskit/primitives/text

Existing default imports remain valid:

Named imports are also supported:

• Package root named imports remain valid.
• @atlaskit/primitives/box continues to support a default import via its dedicated entry-point.

b1453699ad8be, (opens new window) - Add semantic code syntax tokens:

• color.background.code.default
• color.background.code.gutter
• color.background.code.highlight
• color.background.code.added.line
• color.background.code.added.highlight
• color.background.code.removed.line
• color.background.code.removed.highlight
• color.border.code
• color.text.code.default
• color.text.code.comments
• color.text.code.operators
• color.text.code.keywords
• color.text.code.strings
• color.text.code.numbers
• color.text.code.functions
• color.text.code.tags
• color.text.code.accent.1
• color.text.code.accent.2
• color.text.code.gutter

Update BackgroundColorToken to support the new code background tokens.

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.

71fee8de88abc, (opens new window) - Added new design tokens to support the Lozenge / Tag / Badge visual uplift:

15 new color.border.*.subtle tokens for decorative borders that do not need to meet 3:1 contrast requirements:

• 5 semantic: danger, warning, success, discovery, information (no neutral.subtle — the default color.border already serves this case)
• 10 accent: red, orange, yellow, lime, green, teal, blue, purple, magenta, gray
• Light theme maps to Color300; dark theme maps to Color800 (DarkNeutral400 for accent.gray)

5 new color.background.*.subtle tokens for non-interactive elements (e.g. semantic badges, status pills, callout chips):

• danger, success, discovery, information — light theme maps to Color300, dark theme maps to Color800
• warning — light theme maps to Orange250, dark theme maps to Orange850 (different stops because Orange300 is already used by warning.bold)

Note: color.background.*.subtle is intentionally non-interactive only — no .hovered or .pressed variants are provided. For interactive surfaces, use color.background.<semantic>.bold or color.background.<semantic>.subtler instead.

Updated dependencies

644c0f593ae62, (opens new window) - Adds background color tokens to types.

644c0f593ae62, (opens new window) - Adds new semantic background and text tokens.

Background Tokens (background.[semantics].subtler.*):

Added subtler variants for semantic background colors with default, hovered, and pressed states:

• background.success.subtler.[default|hovered|pressed]
• background.warning.subtler.[default|hovered|pressed]
• background.danger.subtler.[default|hovered|pressed]
• background.information.subtler.[default|hovered|pressed]
• background.discovery.subtler.[default|hovered|pressed]

Text Tokens (text.[semantics].bolder):

Added bolder variants for semantic text colors to ensure proper contrast on colored backgrounds:

• text.success.bolder
• text.warning.bolder
• text.danger.bolder
• text.information.bolder
• text.discovery.bolder

c9b86863a2583, (opens new window) - The Focusable component now resets the outline style when the element matches the pseudo-class :focus but not :focus-visible. This is to ensure the focus ring is not applied when it should not be. Some apps have global styles targeting all buttons and anchors, adding an outline on :focus. This will unset that style.

This change was previously behind a feature flag, which has now been removed.

fe9321ccb4bd7, (opens new window) - The Focusable component now resets the outline style when the element matches the pseudo-class :focus but not :focus-visible. This is to ensure the focus ring is not applied when it should not be. Some apps have global styles targeting all buttons and anchors, adding an outline on :focus. This will unset that style.

This change is behind a feature flag.

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

#158114, (opens new window) 01676a379617b, (opens new window) - This generates a new entrypoint for opt-in to Compiled through @atlaskit/primitives/compiled.

No documentation is currently available on how to use this, and this is for internal testing, use at your own risk.

Possibly BREAKING: In theory, this could have an impact depending on your bundling setup due to newly distributed dist/cjs/compiled/box.compiled.css type files—the most notable impact is in an extreme, Webpack may error if it was not expecting *.css files (and then these files could be ignored for now following future updates), or are included but not used, increasing client-facing bundle size.

#128232, (opens new window) c97dfe9e5b27d, (opens new window) - Box no longer supports usage as an anchor tag (<a>). Use the Anchor primitive, (opens new window) instead, which is more specialized. This has benefits including:

• Built-in event tracking support
• Default text underlines
• Automatic router link configuration from @atlaskit/app-provider
• Built-in accessible focus styles
• Warning screen-readers when links open in new windows

Migrating to Anchor

• First consider if another ADS link component such as @atlaskit/link is better suited rather than building a custom anchor.
• Anchor has focus ring styles built-in, so remove existing styles including @atlaskit/focus-ring.
• Anchor has a default cursor (cursor: pointer), so existing styles can be removed.
• Anchor has a default link underline, so an existing style can be removed.

Before migration

After migration

#119014, (opens new window) 80c46fcb18957, (opens new window) - Increased type safety for xcss. In general, non-token values for the following properties are no longer allowed:

• margin
• marginBlock
• marginBlockEnd
• marginBlockStart
• marginBottom
• marginInline
• marginInlineEnd
• marginInlineStart
• marginLeft
• marginRight
• marginTop
• paddingBottom
• paddingLeft
• paddingRight
• paddingTop

Note: Logical properties for padding, e.g. paddingInline, already prohibit non-token values.

For example:

A few additional non-token values are still accepted:

• margin: '0 auto' | 'auto' | '0'
• marginBlock: 'auto' | '0'
• marginBlockEnd: 'auto' | '0'
• marginBlockStart: 'auto' | '0'
• marginBottom: 'auto' | '0'
• marginInline: 'auto' | '0'
• marginInlineEnd: 'auto' | '0'
• marginInlineStart: 'auto' | '0'
• marginLeft: 'auto' | '0'
• marginRight: 'auto' | '0'
• marginTop: 'auto' | '0'
• paddingBlock: '0'
• paddingBlockEnd: '0'
• paddingBlockStart: '0'
• paddingBottom: '0'
• paddingInline: '0'
• paddingInlineEnd: '0'
• paddingInlineStart: '0'
• paddingLeft: '0'
• paddingRight: '0'
• paddingTop: '0'

as well as global CSS properties: 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset'

#109778, (opens new window) d20b004b7c9dd, (opens new window) - Box no longer supports usage as a button. Use the Pressable primitive, (opens new window) instead, which is more specialized and has built-in event tracking support.

• Pressable has focus ring styles built-in, so remove existing styles including @atlaskit/focus-ring
• Pressable has a default cursor (cursor: pointer) built-in, so existing styles can be removed.
• Pressable has a isDisabled prop, rather than direct usage of the disabled attribute.
• Pressable is built on Box, so no visual changes are expected.

Before migration

After migration

#110975, (opens new window) c462a22b33940, (opens new window) - Removed type hinting for size values in the following properties in XCSS:

• blockSize
• height
• inlineSize
• maxBlockSize
• maxHeight
• maxInlineSize
• maxWidth
• minBlockSize
• minHeight
• minInlineSize
• minWidth
• width

These properties optionally accept size values like width: 'size.100'. However size will be deprecated in the future. Therefore, the type hinting that displayed size.XXX has been removed to discourage its usage until it is officially deprecated.

No changes in functionality have been introduced. The syntax width: 'size.100' remains valid for now, so existing code will not be broken. However, consumers are encouraged to use hard-coded values, like width: '8px', instead.

#108387, (opens new window) 0f3b7b4c63c6d, (opens new window) - xcss: Restrict valid chained pseudo-selectors a limited subset:

• :visited:active
• :active:visited
• :hover::before
• :hover::after
• :focus-visible::before
• :focus-visible::after

Previously, any combination of two pseudo-selectors was allowed. This decision was made to improve performance for TypeScript compilation and IDE type hinting.

• The UNSAFE_PressableProps export has been renamed to PressableProps. This is unused in products.

• Pressable unsafe exports UNSAFE_PRESSABLE and UNSAFE_PressableProps have been removed.

#81744, (opens new window) 30e3d8c81030, (opens new window) - Replaced Text's variant prop with a size prop. The size prop takes three values: "small", "medium" (default), and "large".

Migration guide:

• variant="body.small" -> size="small"
• variant="body" -> size="medium" (Note: Since medium is the default, the size prop can be omitted here)
• variant="body.large" -> size="large"

#68009, (opens new window) 1168354ed6ef, (opens new window) - We now ensure the specificity of our xcss-based overrides are consistent across all primitives so xcss will always override props.

This resulted in a breaking change wtih Grid. For example, <Grid templateAreas="…" xcss({ gridTemplateAreas: "…" })> will result in different styles resolution before and after this version. This applies to templateAreas, templateColumns, and templateRows). From static analysis, we found only one known usage of this and it has been resolved.

• Allow negative space tokens for position properties in xcss (i.e. top, bottom, left, right, and inset-*).

• Stack: Allow role prop to be passed through. role already existed in the type, but was not actually applied to the component.
• Flex: Allow role prop to be passed through. role already existed in the type, but was not actually applied to the component.
• Text: Omit xcss from prop types. <Text xcss={yourStyles}></Text> will now throw a type error. xcss was previously non-functional in Text. So, this should not cause any behavior change.
• xcss: Export XCSS type from main entry point. It is now possible to import { xcss, type XCSS } from '@atlaskit/primitives'.

• Enable a Box background colour to be set to the utility.elevation.surface.current token.
• Internally set the current surface CSS variable value when the background color of a Box is set to a surface token (e.g. elevation.surface.raised).

• Fixed an issue where the wrong token would apply for space.025 in Bleed's block prop.
• Fallback values for Bleed block and inline props now use rem instead of px - this is only applied if space tokens are not available on the page. Space tokens already use rem under the hood.

• Fixes a bug where the xcss function did not accept color.link or color.link.pressed token values for text color

• Remove dependency on @atlaskit/focus-ring

#36313, (opens new window) fec62731e2e, (opens new window) - This package is now in open beta and is no longer considered experimental. We will be making iterative improvements until GA. While the API is likely to be stable, we reserve the right to make changes if required. This version contains no changes whatsoever.

P.S. The reason for the change is to aid package deduplication in the product.

#36050, (opens new window) 8b04f3e78bd, (opens new window) - Adds basic <Show> and <Hide> responsive primitive components to make consistent, composable UIs without writing a dozen lines for just one display: none css rule.

Additionally:

• Adds some further examples, tests, and VRs.
• Tweaks some internals around building these reusable media query maps.

• BREAKING: Removes the xxl breakpoint from all media queries (should be unused).
• Adds a new media export without media.below intentionally omitted. Should be unused externally, but used internally and still available via the existing UNSAFE_media export.
• Changes the underlying media queries to be a bit safer against unexpected overlap. This changes the breakpoints ever-so-slightly, but given browsers round fractional rems, it's impractical that this will have any unintended impact—if anything, it may fix a bug.