Primitives are token-backed low-level building blocks.
yarn add @atlaskit/primitives96ff1753a7299 -
Update dependencies and remove unused internal exports.4850fa1a503ba -
[ux] Automatic color inversion based on bold surfaces will only affect the default color behind a
feature flag. If testing successful, this change will be made available in a later release.#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/reactb6dd4e0fcdd67 -
Added support for style overrides of overflowWrap and textDecorationLine for the compiled
version of Text.54699aa47995b -
[ux] Removed feature flag platform-primitives-nested-text-inherit-size resulting in Text to
inherit size when nested in other Text component.4660ec858a305 -
Update React from v16 to v186be28a4ed15b1 -
Fixing label text for compiled/anchor to be 1:1 with primitive as part of compiled migration77f2655aef31d -
Fixing label text for compiled/anchor to be 1:1 with primitive as part of compiled migration0384c8ac8996a -
Narrow down fontStyle type definition to only allow normal and italic.c2dec1ca710f3 -
Adds an experimental Focusable component under the Compiled entrypoint, which requires a specific
setup.55f201f2b2d04 -
[ux] Text to inherit size when nested in other Text component behind a feature flag. If testing
successful, this change will be made available in a later release.22f69cdefebd9 -
Add compiled.css sideEffect to @atlaskit/primitives to hint and fix bundlers to load these styles#158114
01676a379617b -
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.
01676a379617b -
Remove the UNSAFE_SurfaceContext export which was temporarily used internally and not documented
for public use.284490a8c1813 -
Update codegen script to output into primitives-emotion-to-compiled codemod.3c4de48168ffe -
Update the import path of useId* from @atlaskit/ds-liba92a52978058c -
Exports a temporary UNSAFE_SurfaceContext export that may be removed in a future minor version to
decouple Compiled migrations from Primitives4fdf6347eb506 -
Add new entrypoint called "use-layout-effect" to ds-lib and use it inside primitives pkg.94620325283df -
Remove react-uid and use an ID generator that is compatible with React16 and React 18; Strict
React 18 behind a flag.#128232
c97dfe9e5b27d -
Box no longer supports usage as an anchor tag (<a>). Use
the Anchor primitive instead,
which is more specialized. This has benefits including:
@atlaskit/app-providerMigrating to Anchor
@atlaskit/link is better suited rather
than building a custom anchor.@atlaskit/focus-ring.cursor: pointer), so existing styles can be removed.Before migration
import { Box, xcss } from '@atlaskit/primitives';
import FocusRing from '@atlaskit/focus-ring';
const anchorStyles = xcss({
cursor: 'pointer',
color: 'color.link',
textDecoration: 'underline',
});
const MyApp = () => (
<FocusRing>
<Box as="a" href="/foo" xcss={anchorStyles}>
Hello
</Box>
</FocusRing>
);
After migration
import { Anchor, xcss } from '@atlaskit/primitives';
const anchorStyles = xcss({
color: 'color.link',
});
const MyApp = () => (
<Anchor href="/foo" xcss={anchorStyles}>
Hello
</Anchor>
);
24092d9f293a1 -
Removed development warnings from JSDoc comment for Anchor primitive.4de823258d64a -
Added dl as a valid polymorphic element for both the Inline and Stack primitives.62381baf0d2e1 -
Update 'opens new window' for anchor and link with a nicer AT announcementc99cce707b5cb -
The separator prop in the inline component has had its type expanded to ReactNode.#119014
80c46fcb18957 -
Increased type safety for xcss. In general, non-token values for the following properties are no
longer allowed:
marginmarginBlockmarginBlockEndmarginBlockStartmarginBottommarginInlinemarginInlineEndmarginInlineStartmarginLeftmarginRightmarginToppaddingBottompaddingLeftpaddingRightpaddingTopNote: Logical properties for padding, e.g. paddingInline, already prohibit non-token values.
For example:
const styles = xcss({
padding: '8px', // <-- Type Error
^^^^^
});
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'
d4d420c947747 -
[ux] Pressable and Anchor primitives no longer support surface color detection to improve
performance. These primitives don't contain nested layouts so this is not needed. Although this is
a breaking change, the impact of this change is minimal as no usage of surface detection in these
primitives has been observed.7ba62903cc2eb -
Internal changes to both Pressable and Anchor primitives. They no longer use the Box primitive.
There are no changes for consumers.7c318f9ea8f09 -
Added support for skeleton color tokens as XCSS background colors.294e1a9116fce -
Update color.skeleton and color.skeleton.subtle to be valid backgroundColor values on XCSS.#109778
d20b004b7c9dd -
Box no longer supports usage as a button. Use
the Pressable primitive
instead, which is more specialized and has built-in event tracking support.
@atlaskit/focus-ringcursor: pointer) built-in, so existing styles can be removed.isDisabled prop, rather than direct usage of the disabled attribute.Before migration
import { Box, xcss } from '@atlaskit/primitives';
import FocusRing from '@atlaskit/focus-ring';
const buttonStyles = xcss({
cursor: 'pointer',
backgroundColor: 'color.background.brand.bold',
});
const MyApp = () => (
<FocusRing>
<Box as="button" xcss={buttonStyles} disabled={isDisabled}>
Hello
</Box>
</FocusRing>
);
After migration
import { Pressable, xcss } from '@atlaskit/primitives';
const buttonStyles = xcss({
backgroundColor: 'color.background.brand.bold',
});
const MyApp = () => (
<Pressable xcss={buttonStyles} isDisabled={isDisabled}>
Hello
</Pressable>
);
8f3fa9e80b93c -
Updated xl breakpoint to be 1768px instead of 1760px (110.5rem instead of 110rem) to match updated
design guidance.a8bd419fd70b9 -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.0392b6e4d865a -
The Text component now aplies overflow-wrap: anywhere by default to ensure text does not break
out of fixed width containers. Be aware that if a single word is wider than its container width,
the word will be broken over multiple lines.c414bbde52951 -
Extends XCSS type to support :focus:not(:focus-visible)c414bbde52951 -
Adds a :focus style reset to Anchor and Pressable to prevent :focus styles with lower
specificity from leaking through.b8c2eefeb195b - -
Anchor and Pressable primitives no longer require children, so labels can be supplied through
aria attributes if requiredb8c2eefeb195b - -
Fixed a bug with Anchor, where the "(opens new window)" label was not being automatically appended
to aria-label or aria-labelledby.#110975
c462a22b33940 -
Removed type hinting for size values in the following properties in XCSS:
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.
dc7e72da70ef7 -
Migrating instances of UNSAFE_ANCHOR primitive imports to the new safe import Anchor, in
preparation of Anchor open beta and removal of the unsafe export from @atlaskit/primitivesc3dc02298f8aa -
[ux] Change heading xsmall lineheight from 16 to 20 for minor third theme.#108387
0f3b7b4c63c6d -
xcss: Restrict valid chained pseudo-selectors a limited subset:
:visited:active:active:visited:hover::before:hover::after:focus-visible::before:focus-visible::afterPreviously, any combination of two pseudo-selectors was allowed. This decision was made to improve performance for TypeScript compilation and IDE type hinting.
219600ccac79 -
Adding safe exports for Anchor primitive in preparation for open beta. The UNSAFE_ prefixed
exports have been deprecated and will be removed in an upcoming major release.9e4502966543 -
Relax type safety on borderWidth, borderRadius, and their variant properties on xcss. The
tokens for those properties will be deprecated in future in favor of new border tokens.b28e3d55ab88 -
Adds "Fill" to the set of exported style map types45101e24202a -
Internal change only; update generated styles.6cca90095b7e - -
Pressable now accepts a role attribute.
UNSAFE_PressableProps export has been renamed to PressableProps. This is unused in
products.914419349eeb - -
Pressable primitive is now in beta.
UNSAFE_PRESSABLE and UNSAFE_PressableProps have been removed.35fd5ed8e1d7 -
Upgrading internal dependency bind-event-listener to @^3.0.00437b8b3c791 -
Updated imports of UNSAFE_PRESSABLE primitive to new Pressable exporte9177e2fdee3 -
Adds new export for Pressable as Pressable in preparation for open beta. The previous
UNSAFE_PRESSABLE export remains available while existing usages are migrated, and will be
removed in an upcoming major release.85525725cb0d -
Migrated to the new button component4c87d9b4f0c2 -
The internal composition of this component has changed. There is no expected change in behavior.43cd9551f332 -
Removed deprecated textAlign prop from Text primitive component0e9c8c15ef86 -
Extends XCSS selector types to allow up to two CSS psuedos to be used in combination. For example:
:visited:hover {}.92f574fd392d -
Anchor now suffixes the accessible label with visually hidden text "(opens new window)" when
target is set to _blank. This improves accessibility for screen readers.rel="noopener noreferrer" and target="_blank" when the link was detected to link externally.0988fda99a0d -
Renaming text alignment prop for Text component from textAlign to align8d4e99057fe0 -
Upgrade Typescript from 4.9.5 to 5.4.26ea786dd8082 -
Add UNSAFE_small fontsize token.#81744
30e3d8c81030 -
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"8877e9b57d55 -
Added size prop which will replace variant prop in the next major version.427c2dd9e0d6 -
Update input border color token and width to meet 3:1 color contrast473df43e816b -
Removed ui variant from Text component. The body variant should be used for all non-heading
typography.9e119dcbfd60 -
The xcss prop on select components have had its type expanded to support styles being passed
from Compiled CSS-in-JS. This is still experimental and something we'll be iterating on.c6819de73d02 -
Default text color + allow color inheritance if explicitly defineda45d2049a22c -
The "Link" primitive has been renamed to "Anchor" to avoid confusion with the upcoming "Link"
component. Since Link is still in Alpha this should not cause any upgrade friction.75b2ade8b254 -
Both the Pressable and Anchor primitives now support analytics tracking by default.39f3c929f0c4 -
Add Pressable and Anchor primitives (in Alpha) to root export as UNSAFE_PRESSABLE and
UNSAFE_LINK.4951390bc0ae -
[ux] Adds a default underline style to the Anchor primitive (Alpha)707a8fee2aee -
Both the Pressable and Anchor primitives (in Alpha) now support analytics tracking in the same
fashion as @atlaskit/button. An additional prop componentName allows analytics to be
configured if a parent component name is desired to be tracked rather than the primitive names.
For the time being this tracking is opt-in via use of the componentName prop. This will be made
default behavior in an upcoming release once tracking is removed in the new Buttons, and
@atlaskit/button is bumped to use the latest version of @atlaskit/primitivesc15d58bff276 -
Text inherits color by default if color prop is not provided. Removed auto-collapsing
behaviour of Text3963062ac997 -
Codegen to add in new font family tokens. Not exposed in any components.0c78c9c18cb7 -
Fix font family not preferencing apple system fonts on macOS#68009
1168354ed6ef -
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.
67d09e3f972d -
weight property added to Text to allow overriding text variant default font weight.77249f536425 -
Text color prop defaults to color.text if not provided.5b6bbaf2d5fc -
Added maxLines prop to Text component, allowing truncation at a certain number of lines. This
prop replaces shouldTruncate prop.175c07b58c52 -
Export tokensMap objectadf1c3ebf0fd -
Fixed an issue with Text where text could render incorrectly if a typography token theme was not
present on a page.1e2db2714522 -
The shouldTruncate prop on Text is now only available for body variants and cannot be used
with ui variants.e8835feffae9 -
Internal change to improve token sorting logic for typography tokens. Typography tokens are now
marked as active though they are still in development and not recommend for use without prior
approval from ADS.2e34d3535125 - -
Fixed issue where using negative space tokens in xcss wouldn't apply.
xcss (i.e. top, bottom, left, right,
and inset-*).cae2e80ae968 -
Migrate webdriver tests for @atlassian/product-search-dialogd74bd13bec9c -
Restrict usage of data-testid to primitives (testId should be used instead). This prop is
currently silently ignored so this is just to follow the principle of least surprise when using
primitives.cc9e9495e995 -
Export media.only and media.below for Compiled CSS-in-JS support.d2c06815d043 - -
Inline: Allow role prop to be passed through. role already existed in the type, but was not
actually applied to the component.
role prop to be passed through. role already existed in the type, but was not
actually applied to the component.role prop to be passed through. role already existed in the type, but was not
actually applied to the component.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.import { xcss, type XCSS } from '@atlaskit/primitives'.6a89d1fcf6b - Add
missing tokenised XCSS properties for borderBlockColor, borderBlockWidth, borderInlineColor,
borderInlineWidthf1d3719ea48 -
Tokenised values are now accepted in all border-radius, border-width, border-color, and opacity
CSS properties in XCSS.3cb6a290654 - Text
component now has margin: 0 to ensure no margins are inherited (for example from the CSS reset).5778f757885 - Added
export for Text component. This component is currently in closed beta and is not intended for
general use at this stage.8cc2926465e - Removed
the ability to use the style prop on primitives such as Inline, Stack, and Flex. This prop
previously had no effect on these components and is now only allowed on Box.4c9d4a7be34 - - Link
primitive will now throw an error if a router link configuration object is passed to the href
prop when there is not a router link component set in the AppProvider4c9d4a7be34 - - Fixes
a bug where Link primitive was not passing through router link configuration objectsa64dc3026de - Create
the new Link primitive (Unsafe to use, still in Alpha)0a52fc9129e - Internal
change to the media export to ensure compatibility with
Compiled. No change to public API.350e4081d89 - [ux]
Regenerates codegen artifacts as a result of changes to color palettes and token values50de1ccacd7 -
Additional documentation details for alignment props on Inline and Stack.8d123310957 - Minor
internal changes. There is no expected behaviour change83cd2ae7c5a -
Regenerates codegen artifacts as a result of introducting new visited link token.9cd356f858a - Negative
space tokens can now be applied to margin properties via xcss.#39556
fa6c592fdb2 -
Introduce Heading into package in immediate alpha state. This is more or less a port of
@atlaskit/heading. Component is not yet stable and implementation is likely to change.
#39412
c2e55a9b782 - Adds
surface detection support to the Box primitive:
Box background colour to be set to the utility.elevation.surface.current token.elevation.surface.raised).6900f89eb0e - Internal
changes to use space tokens. There is no expected visual or behaviour change.89ce462b216 - Fix for
margin properties not being mapped to values correctly.da792e55f6f - - Bleed
now uses negative space tokens under the hood.
block prop.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.9ac38d5c3e9 - All
margin and padding properties now support autocomplete and token values in xcss.88e4ac397ea -
Regenerates codegen artifacts as a result of introducting new accent interaction tokens.dfd014c15b3 - [ux]
Pressable primitive: Adds missing cursor style not-allowed for disabled buttons9a3fd8455fb - Stack
alignBlock prop now accepts 'stretch' which is also the default value for the alignBlock
prop.37e0d67942b - - Add
missing xcss type export for TextColor
xcss function did not accept color.link or color.link.pressed token
values for text color0116391a81e - -
Support xcss in Pressable
@atlaskit/focus-ringac645224013 - Removes
generic for xcss fn. Adds support for other AtTypes.1859bc0b8c7 - Update
the casing on xcss to ensure consistency with the API and package consumption.8986cf1ed16 - Reverts
a change that allowed className to be applied to Box.6070ef412be - Box now
accepts any HTML element for its as prop. Fixed issue where types may be incorrect depending on
element used for the as prop.aa8ec75ace3 - Simplify
types for Show and Hide components. There should be no difference in behavior.74f7af9882b - [ux]
correct fallback color of token color.border.focused to meet contrast requirement298df94426c -
Regenerates codegen'd artifacts as a result of introducting new brand background design tokens.cac98ccfb7d -
Introduces Flex component as common component for Stack, Inline.#36313
fec62731e2e - 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
8b04f3e78bd - 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:
4c026f170d6 - Remove
warnings for non-token values passed to xcss in non-development environments.455677dbd4c - -
Documents the responsive media helpers into an Alpha state.
xxl breakpoint from all media queries (should be unused).media export without media.below intentionally omitted. Should be unused
externally, but used internally and still available via the existing UNSAFE_media export.55be182b904 -
Regenerates codegen'd artifacts as a result of introducting new design tokens.b2706220d22 - Adds an
experimental UNSAFE_useMediaQuery hook to utilize our media query breakpoints in JavaScript.
This is not SSR-safe and will return null or perhaps incorrectly depending on your SSR
environment.79e94411a9c - Bump to
account for regeneration of tokens artifacts.e278a3b0ea9 - Allow
loose auto completion and less strict types for some xcss properties.407853b7b26 - Inline
now has a new default value for the alignBlock prop: start - the previous default, stretch,
is now an option that can be set explicitly as well.8bd6dc6027f - Box
backgroundColor prop now accepts full token names, abbreviated forms will no longer work. xcss now
accepts full token names, abbreviated forms will no longer work.b6302963111 - Change
border.radius.normal to be 3px instead of 4px. display: grid is now accepted for xcss.313d71fce9c - Allow
media queries at predefined breakpoints to be applied through xcss.b19d5c53b64 - Internal
changest to the primitives package related to token generated styles.4c4dcc3d571 - Updates
primitives internal style map.9d00501a414 - Ensure
legacy types are published for TS 4.5-4.8e06d56c5a3d - Adds
type hinting for fill CSS property.56507598609 - Skip
minor dependency bumpda1727baf77 - Allow
non tokenised values to be passed through for tokenisable properties like padding. Adds type
hinting for zIndex CSS property.5a134a5128a - Adds
type hinting for boxShadow CSS property. Fixes bug with token to CSS custom property
transformation for gap, rowGap, columnGap.bad2da77917 - The Box
primitive now accepts more elements for the 'as' propb5b26f3d947 - Bugfix:
'padding' prop no longer takes (incorrect) precedence over any other padding props.0969a35c1b0 - Allow
type hinting for nested styles inside pseudo-selectors.7127e85932a - Update
codegen to explicitly list spacing prop values as string unions for compatibility with
extract-react-types.983b1e61003 - Fix
Primitives pages being shown in prod despite being marked as alpha.2e01c9c74b5 - DUMMY
remove before merging to master; dupe adf-schema via adf-utils#32281
ac4c8695d3f -
Constrain CSS values of flex-direction to account for accessibility considerations.
#32296
4d19bdd2218 -
Inline:
space prop now accepts values in the form space.XXX. For example: space="space.100".rowSpace prop now accepts values in the form space.XXX. For example: rowSpace="space.100".Stack:
space prop now accepts values in the form space.XXX. For example: space="space.100".a02eed2974e - Move
codegen into @atlassian scope to publish it to private registry4d60ec345a5 - Remove
internal/exploratory responsive props available in BaseBox.e379d04c74a - Expose a
new form of xcss that is parameterised so it can be statically bound to the intended usage
context.8e03331eb8b -
Introduce 'as' prop to Inline and Stack so the resulting element can be controlled.003c381e37d - Apply
width: 100% to Inline and Stack when grow prop is set to fill.e7b64da97a1 - Add
rowSpace prop to override the space prop's spacing between rows.114d6a73f72 - Cleanup
the experimental responsive box utilizing our responsive helpers.7c280fead96 - Add new
responsive helpers, breakpoints config, and types into @atlaskit/primitives/responsive. Exports
are treated as UNSAFE_ and experimental until modified as they're being worked on in parallel to
our Alpha Grid.bf90d854748 - Internal
representation of Box primitive now supports some responsive styles5b886634089 - [ux]
Change Box to be the default export from @atlaskit/primitives/box. Fix the negative value of
margin-inline in Inline separator not being applied properly.fe50d8cb56c - Internal
change to add shape tokens to primitives.069494fbea6 - Internal
change. There is no behaviour or visual change.