A range lets users choose an approximate value on a slider.
yarn add @atlaskit/range#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/react4660ec858a305 -
Update React from v16 to v18e4d6f320b1650 -
Fix styling of our @atlaskit/range component lost in v8.0.0 rendering the component invisible.8a5e8d3d28432 -
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/range, 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.57f451bda8919 -
Adds side-effect config to support Compiled css extraction in third-party apps#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.
a8bd419fd70b9 -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.4ae083a7e66 - Use
@af/accessibility-testing for default jest-axe config and jest-axe import in accessibility
testing.599bfe90ee3 - Internal
change to use shape tokens. There is no expected visual change.b1bdec7cce2 - Internal
change to enforce token usage for spacing properties. There is no expected visual or behaviour
change.56507598609 - Skip
minor dependency bump22b754d311f - Updates
usage of removed design token utilities.UNSAFE_util.transparent in favour of its replacement
utilities.UNSAFE.transparent#25860
78741dd1644 - [ux]
Breaking visual changes to range to afford better contrast:
9827dcb82b8 - No-op
change to introduce spacing tokens to design system components.1966ffa850d - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.8202e37941b - Internal
code change turning on new linting rules.45ebe7af434 - Moved to
using declarative entrypoints internally. Public API is unchanged.#18526
17d9edaa415 - In
preparation for compiled adoption, internal styling has been rewritten to remove dynamic styles.
This includes custom theming using the theme prop, which has been removed.
If you are not using the theme prop, there should be no breaking changes.
19d72473dfb - The
no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when
auto-fixing by correctly formatting token ids.19d72473dfb - 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.#14777
21c178539a2 - [ux]
Instrumented range 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.
b0183dd2972 - Updated
package.json decriptions and documentation. Docs have moved from atlaskit.atlassian.com to
atlassian.designd6f7ff383cf - Updates
to development dependency storybook-addon-performance952019cfd39 - Removed
extraneous/unnecessary dependencies for design system components.3137d05e06 - [ux] Fixed
rendering bug inside of Range. Now the blue trackbar snaps to a step in the range to align with
the position of the thumb.5f58283e1f - 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.#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.
6262f382de - Use the
'lodash' package instead of single-function 'lodash.*' packagese99262c6f0 - All form
elements now have a default font explicitly set87f4720f27 - 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#2137
da1c8c16d4 - In this
version we made range dramatically faster and lighter 🤩
In 4.0.0 we bring significant performance improvements all for just the cost of 1 breaking
change 😮. That's not all folks because this update comes with a 🤑 FREE 🤑 codemod for you to
upgrade with.
peerDependency on styled-components@3. Internally range is now using
@emotion/core for stylinginputRef prop to be ref which returns the ref of the range input using
React.forwardRef. This new ref prop will accept the type of the old inputRef prop,
(input?: HTMLInputElement) => any, as well as if ref is created with React.createRef.onChange event# You first need to have the latest range installed before you can run the codemod
yarn upgrade @atlaskit/range@^4.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]
4.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 will change the inputRef prop to ref
- <Range inputRef={inputRef} />
+ <Range ref={inputRef} />
- <Range
- inputRef={ref => {
- myRangeRef = ref;
- }}
- />
+ <Range
+ ref={ref => {
+ myRangeRef = ref;
+ }}
+ />
[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[patch]4a223473c5:
Removes babel/runtime from dependencies. Users should see a smaller bundlesize as a result- Updated dependencies 82747f2922:
Updated dependencies 4a223473c5:
Updated dependencies 6a8bc6f866:
[patch]35d2229b2a:
Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.
[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
[major]4a08d1912e:
@atlaskit/range has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes.
[major]7c17b35107:
[major]546b636a36:
[patch]1f2a181b0f:
[minor]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.
[patch]aab267bb3a:
[patch]d13242d:
[minor]8945a58: