Spinner

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.

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.

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

#102543, (opens new window) 497efb1c63b02, (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/spinner, 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.

#13302, (opens new window) 97d5fe7100c, (opens new window) - Instrumented Spinner with the new theming package, @atlaskit/tokens.

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.

• There was a bug in the xsmall size variant of Spinner where the Spinner path appeared flipped, making the rotation look like the axis was off.
• The addition of a wrapping span and layout change from inline to inline-block in v15.0.8 shifted the spinner down slightly, causing potential flickers when scrollbars appear as content overflows in very tight layout scenarios. Please note that if you are using a Spinner in the iconBefore, iconAfter or overlay props of @atlaskit/button to create custom loading experiences, you are encouraged to move to using our dedicated LoadingButton, (opens new window) component; this takes care of all UX concerns for you, and ensures a smooth upgrade path for you in the future.

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

#2137, (opens new window) 206be3a0cb, (opens new window) - In this version we made spinner dramatically faster and lighter 🤩

The mounting animation for spinner has been fixed. There are three parts to the mounting spinner animation:

1. Accelerated spin
2. Fade in
3. Stretch (the spinner starts small and grows to a bigger size)

In 12.x the fade in and stretch parts of the animation were broken 😢. These have been fixed in 13.0.0 🤘

See below for information about a codemod we created to automatically upgrade usages of spinner ❤️

There have been a number of breaking changes in 13.0.0.

• Spinner no longer has a peerDependency on styled-components@3. Internally spinner is now using @emotion/core for styling
• Added new ref prop which returns the ref of the spinner svg using React.forwardRef
• Improved dark mode support (not that dark mode is truly supported yet). appearance="invert" will now invert the colors of the spinner in dark mode. Previously appearance="invert" in dark mode did nothing.
• The default delay prop value has been reduced from 100ms to 0ms. The delay was previously designed to prevent the spinner from flickering if async content becomes quickly visible. Now that the fade in animation is working correctly, the spinner is only 2% visible at 100ms.
• The delay prop is no longer useful to prevent "quick flickering" so the default has been changed. We have created a guide to assist you with better understanding how to use delays, as well as provided new guidance on how to cross fade a spinner with other loading content.
• The invertColor={boolean} prop has been renamed to appearance="inherit | invert" to bring it into line with other components. This is useful when you are displaying a spinner on a background that is not the same background color scheme as the body.
• Changing name of the SpinnerSizes type to Size. Most people are not using this type directly
• isCompleting and onComplete props have been removed. Spinner no longer manages it's own unmount animations. If you want to have graceful unmounting we now have a recommended pattern which leverages our general purpose and performant @atlaskit/motion package. (Note: spinner will always animate itself in, you don't need to set anything up).

• You first need to upgrade to 13.0.0 before you run the codemod cli. This is because the cli will look in your local node_modules for the codemod which is published inside the spinner package.
• The codemod is pretty clever, and will respect aliasing as well as using custom naming for the default import 🤘

What the codemod will do:

• delay: replace literal number values equal to or less than 150ms as they are no longer needed to avoid flickering

• invertColor: automatically changed over to appearance="inherit | invert". All existing logic will be preserved in your code

• isCompleting and onComplete: removing props. But it will not remove the state or functions associated with those props. We cannot automatically remove the values or control flow associated with these props. If you were using isCompleting or onComplete props there will be manual intervention required.

If you were using onComplete for control flow, we now recommend using the performant and standard @atlaskit/motion solution

• SpinnerSizes type: automatically shifted over to a new name: Size

206be3a0cb, (opens new window) - In this version we made spinner dramatically faster and lighter 🤩

The mounting animation for spinner has been fixed. There are three parts to the mounting spinner animation:

1. Accelerated spin
2. Fade in
3. Stretch (the spinner starts small and grows to a bigger size)

In 12.x the fade in and stretch parts of the animation were broken 😢. These have been fixed in 13.0.0 🤘

See below for information about a codemod we created to automatically upgrade usages of spinner ❤️

There have been a number of breaking changes in 13.0.0.

• Spinner no longer has a peerDependency on styled-components@3. Internally spinner is now using @emotion/core for styling
• Added new ref prop which returns the ref of the spinner svg using React.forwardRef
• Improved dark mode support (not that dark mode is truly supported yet). appearance="invert" will now invert the colors of the spinner in dark mode. Previously appearance="invert" in dark mode did nothing.
• The default delay prop value has been reduced from 100ms to 0ms. The delay was previously designed to prevent the spinner from flickering if async content becomes quickly visible. Now that the fade in animation is working correctly, the spinner is only 2% visible at 100ms.
• The delay prop is no longer useful to prevent "quick flickering" so the default has been changed. We have created a guide to assist you with better understanding how to use delays, as well as provided new guidance on how to cross fade a spinner with other loading content.
• The invertColor={boolean} prop has been renamed to appearance="inherit | invert" to bring it into line with other components. This is useful when you are displaying a spinner on a background that is not the same background color scheme as the body.
• Changing name of the SpinnerSizes type to Size. Most people are not using this type directly
• isCompleting and onComplete props have been removed. Spinner no longer manages it's own unmount animations. If you want to have graceful unmounting we now have a recommended pattern which leverages our general purpose and performant @atlaskit/motion package. (Note: spinner will always animate itself in, you don't need to set anything up).

• You first need to upgrade to 13.0.0 before you run the codemod cli. This is because the cli will look in your local node_modules for the codemod which is published inside the spinner package.
• The codemod is pretty clever, and will respect aliasing as well as using custom naming for the default import 🤘

What the codemod will do:

• delay: replace literal number values equal to or less than 150ms as they are no longer needed to avoid flickering

• invertColor: automatically changed over to appearance="inherit | invert". All existing logic will be preserved in your code

• isCompleting and onComplete: removing props. But it will not remove the state or functions associated with those props. If you where using those props there will be manual intervention required. We cannot reasonably trace back and remove these values as they could be used for other purposes.

NOTE: values associated with isCompleting and onComplete props are not removed, just the props on the Spinner component

• SpinnerSizes type: automatically shifted over to a new name: Size

• @atlaskit/docs@8.4.0
• @atlaskit/webdriver-runner@0.3.0
• @atlaskit/button@13.3.9

• @atlaskit/webdriver-runner@0.2.0
• @atlaskit/button@13.3.8

[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/button@13.3.7
• @atlaskit/theme@9.5.1

[patch]4a223473c5, (opens new window):

Removes babel/runtime from dependencies. Users should see a smaller bundlesize as a result- Updated dependencies 82747f2922, (opens new window):

Updated dependencies 4a223473c5, (opens new window):

• @atlaskit/theme@9.5.0
• @atlaskit/button@13.3.5

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

[minor]808d37259d, (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.

[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]bbff8a7d87, (opens new window):

Fixes bug, missing version.json file

[patch]18dfac7332, (opens new window):

In this PR, we are:

• Re-introducing dist build folders
• Adding back cjs
• Replacing es5 by cjs and es2015 by esm
• Creating folders at the root for entry-points
• Removing the generation of the entry-points at the root Please see this ticket, (opens new window) or this page, (opens new window) for further details

[patch]db39394a23, (opens new window):

Export Spinner Props, Sizes and Phases types

[patch]93bcf314c6, (opens new window):

Added missing tslib dep

• This is just a safety release in case anything strange happened in in the previous one. See Pull Request #5942 for details

• @atlaskit/spinner has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes.

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

• @atlaskit/docs@7.0.3
• @atlaskit/button@12.0.3
• @atlaskit/theme@8.1.7

• update Spinner component's usage of styled-components to work in v3 and v4

• @atlaskit/docs@7.0.2
• @atlaskit/theme@8.1.6
• @atlaskit/button@12.0.0

• Update spinner imports to use alternative entry points of theme (to decrease bundle size)

• Removes duplicate babel-runtime dependency

• use <span> rather than <div> to allow the spinner to be used within <p> style tags

• @atlaskit/docs@7.0.1
• @atlaskit/theme@8.0.1
• @atlaskit/button@11.0.0

[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/button@10.1.1
• @atlaskit/theme@7.0.1
• @atlaskit/docs@6.0.0

• @atlaskit/docs@5.2.3
• @atlaskit/button@10.0.4
• @atlaskit/theme@7.0.0

• @atlaskit/docs@5.2.1
• @atlaskit/theme@6.2.1
• @atlaskit/button@10.0.0

• @atlaskit/theme@6.0.0
• @atlaskit/button@9.0.6
• @atlaskit/docs@5.0.6

• @atlaskit/button@9.0.5
• @atlaskit/theme@5.1.3

• @atlaskit/button@9.0.4
• @atlaskit/theme@5.1.2
• @atlaskit/docs@5.0.2

• @atlaskit/button@9.0.3
• @atlaskit/theme@5.1.1

• @atlaskit/button@9.0.2
• @atlaskit/docs@5.0.1

• @atlaskit/button@9.0.1

• @atlaskit/button@9.0.0
• @atlaskit/theme@5.0.0
• @atlaskit/docs@5.0.0

• @atlaskit/button@9.0.0
• @atlaskit/theme@5.0.0
• @atlaskit/docs@5.0.0

• @atlaskit/button@8.2.3

• @atlaskit/button@8.2.2

• @atlaskit/button@8.2.0

• @atlaskit/button@8.1.2
• @atlaskit/theme@4.0.4

• @atlaskit/theme@4.0.3
• @atlaskit/button@8.1.1
• @atlaskit/docs@4.1.1

• @atlaskit/button@8.0.1
• @atlaskit/theme@4.0.1
• @atlaskit/docs@4.0.1

• @atlaskit/button@8.0.0
• @atlaskit/theme@4.0.0
• @atlaskit/docs@4.0.0

• @atlaskit/button@7.2.5
• @atlaskit/theme@3.2.2
• @atlaskit/docs@3.0.4