@atlaskit/range 5.0.8 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @atlaskit/range
 
+## 5.1.0
+
+### Minor Changes
+
+- [`21c178539a2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/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.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.0.11
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.0.10
+
+### Patch Changes
+
+- [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
+
+## 5.0.9
+
+### Patch Changes
+
+- [`b0183dd2972`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b0183dd2972) - Updated package.json decriptions and documentation. Docs have moved from atlaskit.atlassian.com to atlassian.design
+
 ## 5.0.8
 
 ### Patch Changes

package/README.md

@@ -1,6 +1,6 @@
-# Field-range
+# Range
 
-Component which renders a Slider and is a substitute of the native input["range"] element.
+A range lets users choose an approximate value on a slider.
 
 ## Installation
 
@@ -10,4 +10,4 @@ yarn add @atlaskit/range
 
 ## Usage
 
-Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/design-system/range).
+For more information, see our [detailed range docs and examples](https://atlassian.design/components/range/).

package/build/tsconfig.json

@@ -5,6 +5,13 @@
     "target": "es5",
     "paths": {}
   },
-  "include": ["../src/**/*.ts", "../src/**/*.tsx"],
-  "exclude": ["../src/**/__tests__/*"]
-}
+  "include": [
+    "../src/**/*.ts",
+    "../src/**/*.tsx"
+  ],
+  "exclude": [
+    "../src/**/__tests__/*",
+    "../src/**/*.test.*",
+    "../src/**/test.*"
+  ]
+}

package/constellation/index/examples.mdx

@@ -0,0 +1,39 @@
+---
+order: 0
+---
+
+import RangeDefault from '../../examples/constellation/range-default';
+import RangeForm from '../../examples/constellation/range-form';
+import RangeControlled from '../../examples/constellation/range-controlled';
+import RangeUncontrolled from '../../examples/constellation/range-uncontrolled';
+import RangeDisabled from '../../examples/constellation/range-disabled';
+
+## Default
+
+The default form of a range.
+
+<Example Component={RangeDefault} packageName="@atlaskit/range" />
+
+## Form
+
+Range used with the [Form](https://atlaskit.atlassian.com/packages/design-system/form) component.
+
+<Example Component={RangeForm} packageName="@atlaskit/range" />
+
+## Controlled
+
+In a controlled range, the state is managed by the React component. Use the `onChange` handler to set the value.
+
+<Example Component={RangeControlled} packageName="@atlaskit/range" />
+
+## Uncontrolled
+
+In an uncontrolled range, the state is managed by the DOM.
+
+<Example Component={RangeUncontrolled} packageName="@atlaskit/range" />
+
+## Disabled
+
+Set `isDisabled` to disable a range when another action has to be completed before the range is usable.
+
+<Example Component={RangeDisabled} packageName="@atlaskit/range" />

package/constellation/index/props.mdx

@@ -0,0 +1,5 @@
+import RangeProps from '!!extract-react-types-loader!../../extract-react-types/range-props';
+
+<PropsTable heading="" props={RangeProps} />
+
+Additional `input` attributes are available. See <a rel="noopener noreferrer" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range" target="_blank">MDN documentation</a> for more information.

package/constellation/index/usage.mdx

@@ -0,0 +1,31 @@
+---
+order: 2
+---
+
+## Usage
+
+Use ranges in [forms](/patterns/forms) to let users select a value within a given range of minimum and maximum values.
+
+## Anatomy
+
+![Range anatomy](images/range-anatomy.png)
+
+1. **Track:** The track displays the range available for the user to select from.
+2. **Handle:** A position indicator that can be moved along the track to change the value.
+
+## Best practices
+
+- Place labels directly above the input, and align to the left.
+- Do not use for ranges that are extremely large (for example, 1-1000).
+- Do not use for ranges that are very small (for example, 1-3). The range moves in steps when the range of values is lower.
+- Don't use a range if choosing a *specific* value is important. The slider interaction isn't as precise as explicitly typing or choosing an option from a list.
+
+
+## Content guidelines
+
+- Field label text above the range input should be short and concise.
+- If necessary, use helper text to clarify how to use the range.
+
+## Related
+
+- Ranges are used in [forms](/patterns/forms).

package/dist/cjs/styled.js

@@ -17,9 +17,11 @@ var _react = require("react");
 
 var _core = require("@emotion/core");
 
+var _colors = require("@atlaskit/theme/colors");
+
 var _constants = require("@atlaskit/theme/constants");
 
-var _elevation = require("@atlaskit/theme/elevation");
+var _tokens = require("@atlaskit/tokens");
 
 var _templateObject;
 
@@ -35,27 +37,28 @@ var getBackgroundGradient = function getBackgroundGradient(_ref) {
   var lower = _ref.lower,
       upper = _ref.upper;
   return "\n    background: linear-gradient(".concat(lower, ", ").concat(lower, ") 0 / var(--range-inline-width) 100%\n      no-repeat ").concat(upper, ";\n    [dir='rtl'] & {\n      background-position: right;\n    }\n  ");
-}; // Thumb style
+};
 
+var elevationStyle = (0, _tokens.token)('shadow.overlay', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)); // Thumb style
 
 var sliderThumbStyle = function sliderThumbStyle(_ref2) {
   var thumb = _ref2.thumb;
-  return "\n    background: ".concat(thumb.default.background, ";\n    border: ").concat(sliderThumbBorderThickness, "px solid transparent;\n    border-radius: 50%;\n    height: ").concat(sliderThumbSize, "px;\n    width: ").concat(sliderThumbSize, "px;\n    box-sizing: border-box;\n    transition: border-color ").concat(transitionDuration, " ease-in-out;\n    ").concat((0, _elevation.e200)(), ";\n  ");
+  return "\n    background: ".concat(thumb.default.background, ";\n    border: ").concat(sliderThumbBorderThickness, "px solid transparent;\n    border-radius: 50%;\n    height: ").concat(sliderThumbSize, "px;\n    width: ").concat(sliderThumbSize, "px;\n    box-sizing: border-box;\n    transition: border-color ").concat(transitionDuration, " ease-in-out;\n    box-shadow: ").concat(elevationStyle, "\n  ");
 }; // Track styles
 
 
 var sliderTrackStyle = "\n  border-radius: ".concat(sliderBorderRadius, "px;\n  border: 0;\n  cursor: pointer;\n  height: ").concat(sliderLineThickness, "px;\n  width: 100%;\n  transition: background-color ").concat(transitionDuration, " ease-in-out;\n"); // Range input styles
 
 var chromeRangeInputStyle = function chromeRangeInputStyle(tokens) {
-  return "\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    margin-top: -".concat((sliderThumbSize - sliderLineThickness) / 2, "px;\n    ").concat(sliderThumbStyle(tokens), ";\n  }\n\n  &:focus::-webkit-slider-thumb {\n    border-color: ").concat(tokens.thumb.focus.border, ";\n  }\n\n  &:disabled::-webkit-slider-thumb {\n    cursor: not-allowed;\n    box-shadow: 0 0 1px ").concat(tokens.thumb.disabled.boxShadow, ";\n  }\n\n  &::-webkit-slider-runnable-track {\n    ").concat(sliderTrackStyle, ";\n    ").concat(getBackgroundGradient(tokens.track.default), ";\n  }\n\n  &:focus::-webkit-slider-runnable-track {\n    ").concat(getBackgroundGradient(tokens.track.default), ";\n  }\n\n  &:active::-webkit-slider-runnable-track,\n  &:hover::-webkit-slider-runnable-track {\n    ").concat(getBackgroundGradient(tokens.track.hover), ";\n  }\n\n  &:disabled::-webkit-slider-runnable-track {\n    ").concat(getBackgroundGradient(tokens.track.disabled), "\n    cursor: not-allowed;\n  }\n  ");
+  return "\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    margin-top: -".concat((sliderThumbSize - sliderLineThickness) / 2, "px;\n    ").concat(sliderThumbStyle(tokens), ";\n  }\n\n  &:focus::-webkit-slider-thumb {\n    border-color: ").concat(tokens.thumb.focus.border, ";\n  }\n\n  &:disabled::-webkit-slider-thumb {\n    cursor: not-allowed;\n    box-shadow: ").concat(tokens.thumb.disabled.boxShadow, ";\n  }\n\n  &::-webkit-slider-runnable-track {\n    ").concat(sliderTrackStyle, ";\n    ").concat(getBackgroundGradient(tokens.track.default), ";\n  }\n\n  &:focus::-webkit-slider-runnable-track {\n    ").concat(getBackgroundGradient(tokens.track.default), ";\n  }\n\n  &:active::-webkit-slider-runnable-track,\n  &:hover::-webkit-slider-runnable-track {\n    ").concat(getBackgroundGradient(tokens.track.hover), ";\n  }\n\n  &:disabled::-webkit-slider-runnable-track {\n    ").concat(getBackgroundGradient(tokens.track.disabled), "\n    cursor: not-allowed;\n  }\n  ");
 };
 
 var firefoxRangeInputStyle = function firefoxRangeInputStyle(tokens) {
-  return "\n  &::-moz-focus-outer {\n    border: 0;\n  }\n\n  &::-moz-range-thumb {\n    ".concat(sliderThumbStyle(tokens), ";\n  }\n\n  &:focus::-moz-range-thumb {\n    border-color: ").concat(tokens.thumb.focus.border, ";\n  }\n\n  &:disabled::-moz-range-thumb {\n    cursor: not-allowed;\n    box-shadow: 0 0 1px ").concat(tokens.thumb.disabled.boxShadow, ";\n  }\n\n  &::-moz-range-progress {\n    ").concat(sliderTrackStyle, ";\n    background: ").concat(tokens.track.default.lower, ";\n  }\n\n  &::-moz-range-track {\n    ").concat(sliderTrackStyle, ";\n    background: ").concat(tokens.track.default.upper, ";\n  }\n\n  &:active::-moz-range-progress,\n  &:hover::-moz-range-progress {\n    background: ").concat(tokens.track.hover.lower, ";\n  }\n\n  &:active::-moz-range-track,\n  &:hover::-moz-range-track {\n    background: ").concat(tokens.track.hover.upper, ";\n  }\n\n  &:disabled::-moz-range-progress {\n    background: ").concat(tokens.track.disabled.lower, ";\n    cursor: not-allowed;\n  }\n\n  &:disabled::-moz-range-track {\n    background: ").concat(tokens.track.disabled.upper, ";\n    cursor: not-allowed;\n  }\n");
+  return "\n  &::-moz-focus-outer {\n    border: 0;\n  }\n\n  &::-moz-range-thumb {\n    ".concat(sliderThumbStyle(tokens), ";\n  }\n\n  &:focus::-moz-range-thumb {\n    border-color: ").concat(tokens.thumb.focus.border, ";\n  }\n\n  &:disabled::-moz-range-thumb {\n    cursor: not-allowed;\n    box-shadow: ").concat(tokens.thumb.disabled.boxShadow, ";\n  }\n\n  &::-moz-range-progress {\n    ").concat(sliderTrackStyle, ";\n    background: ").concat(tokens.track.default.lower, ";\n  }\n\n  &::-moz-range-track {\n    ").concat(sliderTrackStyle, ";\n    background: ").concat(tokens.track.default.upper, ";\n  }\n\n  &:active::-moz-range-progress,\n  &:hover::-moz-range-progress {\n    background: ").concat(tokens.track.hover.lower, ";\n  }\n\n  &:active::-moz-range-track,\n  &:hover::-moz-range-track {\n    background: ").concat(tokens.track.hover.upper, ";\n  }\n\n  &:disabled::-moz-range-progress {\n    background: ").concat(tokens.track.disabled.lower, ";\n    cursor: not-allowed;\n  }\n\n  &:disabled::-moz-range-track {\n    background: ").concat(tokens.track.disabled.upper, ";\n    cursor: not-allowed;\n  }\n");
 };
 
 var IERangeInputStyle = function IERangeInputStyle(tokens) {
-  return "\n  &::-ms-thumb {\n    margin-top: 0;\n    ".concat(sliderThumbStyle(tokens), ";\n  }\n\n  &:focus::-ms-thumb {\n    border-color: ").concat(tokens.thumb.focus.border, ";\n  }\n\n  &:disabled::-ms-thumb {\n    cursor: not-allowed;\n    box-shadow: 0 0 1px ").concat(tokens.thumb.disabled.boxShadow, ";\n  }\n\n  &::-ms-track {\n    background: transparent;\n    border-color: transparent;\n    color: transparent;\n    cursor: pointer;\n    height: ").concat(sliderLineThickness, "px;\n    transition: background-color ").concat(transitionDuration, " ease-in-out;\n    width: 100%;\n  }\n\n  &::-ms-fill-lower {\n    background: ").concat(tokens.track.default.lower, ";\n    border-radius: ").concat(sliderBorderRadius, "px;\n    border: 0;\n  }\n\n  &::-ms-fill-upper {\n    background: ").concat(tokens.track.default.upper, ";\n    border-radius: ").concat(sliderBorderRadius, "px;\n    border: 0;\n  }\n\n  &:active::-ms-fill-lower,\n  &:hover::-ms-fill-lower {\n    background: ").concat(tokens.track.hover.lower, ";\n  }\n\n  &:active::-ms-fill-upper,\n  &:hover::-ms-fill-upper {\n    background: ").concat(tokens.track.hover.upper, ";\n  }\n\n  &:disabled::-ms-fill-lower {\n    background: ").concat(tokens.track.disabled.lower, ";\n    cursor: not-allowed;\n  }\n\n  &:disabled::-ms-fill-upper {\n    background: ").concat(tokens.track.disabled.upper, ";\n    cursor: not-allowed;\n  }\n");
+  return "\n  &::-ms-thumb {\n    margin-top: 0;\n    ".concat(sliderThumbStyle(tokens), ";\n  }\n\n  &:focus::-ms-thumb {\n    border-color: ").concat(tokens.thumb.focus.border, ";\n  }\n\n  &:disabled::-ms-thumb {\n    cursor: not-allowed;\n    box-shadow: ").concat(tokens.thumb.disabled.boxShadow, ";\n  }\n\n  &::-ms-track {\n    background: transparent;\n    border-color: transparent;\n    color: transparent;\n    cursor: pointer;\n    height: ").concat(sliderLineThickness, "px;\n    transition: background-color ").concat(transitionDuration, " ease-in-out;\n    width: 100%;\n  }\n\n  &::-ms-fill-lower {\n    background: ").concat(tokens.track.default.lower, ";\n    border-radius: ").concat(sliderBorderRadius, "px;\n    border: 0;\n  }\n\n  &::-ms-fill-upper {\n    background: ").concat(tokens.track.default.upper, ";\n    border-radius: ").concat(sliderBorderRadius, "px;\n    border: 0;\n  }\n\n  &:active::-ms-fill-lower,\n  &:hover::-ms-fill-lower {\n    background: ").concat(tokens.track.hover.lower, ";\n  }\n\n  &:active::-ms-fill-upper,\n  &:hover::-ms-fill-upper {\n    background: ").concat(tokens.track.hover.upper, ";\n  }\n\n  &:disabled::-ms-fill-lower {\n    background: ").concat(tokens.track.disabled.lower, ";\n    cursor: not-allowed;\n  }\n\n  &:disabled::-ms-fill-upper {\n    background: ").concat(tokens.track.disabled.upper, ";\n    cursor: not-allowed;\n  }\n");
 }; // Styles are split per browser as they are implemented differently
 // Cannot consolidate as Chrome & Firefox don't recognise styles if they are grouped
 // with CSS selectors they don't recognise, e.g. &::-ms-thumb
@@ -86,7 +89,8 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     style: {
       '--range-inline-width': "".concat(valuePercent, "%")
     },
-    ref: ref,
+    ref: ref // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    ,
     css: styles
   }));
 });

package/dist/cjs/theme.js

@@ -11,39 +11,37 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _components = require("@atlaskit/theme/components");
 
+var _tokens = require("@atlaskit/tokens");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var thumb = {
   default: {
-    background: colors.N0,
-    // This border color is not being used - awaiting focus state lift to props
-    border: colors.N800
+    background: (0, _tokens.token)('color.background.card', colors.N0)
   },
   disabled: {
-    boxShadow: colors.N60A
+    boxShadow: (0, _tokens.token)('shadow.card', "0 0 1px ".concat(colors.N60A))
   },
   focus: {
-    // This border color is not being used - awaiting focus state lift to props
-    background: colors.N0,
-    border: colors.B200
+    background: (0, _tokens.token)('color.background.boldNeutral.resting', colors.N0),
+    border: (0, _tokens.token)('color.border.focus', colors.B200)
   }
 };
 exports.thumb = thumb;
 var track = {
-  background: colors.N30A,
   default: {
-    lower: colors.B400,
-    upper: colors.N30
+    lower: (0, _tokens.token)('color.background.boldBrand.resting', colors.B400),
+    upper: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N30)
   },
   disabled: {
-    lower: colors.N50,
-    upper: colors.N30
+    lower: (0, _tokens.token)('color.text.disabled', colors.N50),
+    upper: (0, _tokens.token)('color.background.disabled', colors.N30)
   },
   hover: {
-    lower: colors.B300,
-    upper: colors.N40
+    lower: (0, _tokens.token)('color.background.boldBrand.hover', colors.B300),
+    upper: (0, _tokens.token)('color.background.subtleNeutral.hover', colors.N40)
   }
 };
 exports.track = track;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/range",
-	"version": "5.0.8",
+	"version": "5.1.0",
 	"sideEffects": false
 }

package/dist/es2019/styled.js

@@ -5,8 +5,9 @@ import _extends from "@babel/runtime/helpers/extends";
 /* eslint-disable no-mixed-operators */
 import { forwardRef, useMemo } from 'react';
 import { css, jsx } from '@emotion/core';
+import { N50A, N60A } from '@atlaskit/theme/colors';
 import { fontFamily } from '@atlaskit/theme/constants';
-import { e200 } from '@atlaskit/theme/elevation';
+import { token } from '@atlaskit/tokens';
 const sliderThumbSize = 16;
 const sliderThumbBorderThickness = 2;
 const sliderLineThickness = 4;
@@ -23,8 +24,9 @@ const getBackgroundGradient = ({
     [dir='rtl'] & {
       background-position: right;
     }
-  `; // Thumb style
+  `;
 
+const elevationStyle = token('shadow.overlay', `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`); // Thumb style
 
 const sliderThumbStyle = ({
   thumb
@@ -37,7 +39,7 @@ const sliderThumbStyle = ({
     width: ${sliderThumbSize}px;
     box-sizing: border-box;
     transition: border-color ${transitionDuration} ease-in-out;
-    ${e200()};
+    box-shadow: ${elevationStyle}
   `;
 }; // Track styles
 
@@ -65,7 +67,7 @@ const chromeRangeInputStyle = tokens => {
 
   &:disabled::-webkit-slider-thumb {
     cursor: not-allowed;
-    box-shadow: 0 0 1px ${tokens.thumb.disabled.boxShadow};
+    box-shadow: ${tokens.thumb.disabled.boxShadow};
   }
 
   &::-webkit-slider-runnable-track {
@@ -105,7 +107,7 @@ const firefoxRangeInputStyle = tokens => {
 
   &:disabled::-moz-range-thumb {
     cursor: not-allowed;
-    box-shadow: 0 0 1px ${tokens.thumb.disabled.boxShadow};
+    box-shadow: ${tokens.thumb.disabled.boxShadow};
   }
 
   &::-moz-range-progress {
@@ -153,7 +155,7 @@ const IERangeInputStyle = tokens => {
 
   &:disabled::-ms-thumb {
     cursor: not-allowed;
-    box-shadow: 0 0 1px ${tokens.thumb.disabled.boxShadow};
+    box-shadow: ${tokens.thumb.disabled.boxShadow};
   }
 
   &::-ms-track {
@@ -248,7 +250,8 @@ export const Input = /*#__PURE__*/forwardRef((props, ref) => {
     style: {
       '--range-inline-width': `${valuePercent}%`
     },
-    ref: ref,
+    ref: ref // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    ,
     css: styles
   }));
 });

package/dist/es2019/theme.js

@@ -1,33 +1,30 @@
 import * as colors from '@atlaskit/theme/colors';
 import { createTheme } from '@atlaskit/theme/components';
+import { token } from '@atlaskit/tokens';
 export const thumb = {
   default: {
-    background: colors.N0,
-    // This border color is not being used - awaiting focus state lift to props
-    border: colors.N800
+    background: token('color.background.card', colors.N0)
   },
   disabled: {
-    boxShadow: colors.N60A
+    boxShadow: token('shadow.card', `0 0 1px ${colors.N60A}`)
   },
   focus: {
-    // This border color is not being used - awaiting focus state lift to props
-    background: colors.N0,
-    border: colors.B200
+    background: token('color.background.boldNeutral.resting', colors.N0),
+    border: token('color.border.focus', colors.B200)
   }
 };
 export const track = {
-  background: colors.N30A,
   default: {
-    lower: colors.B400,
-    upper: colors.N30
+    lower: token('color.background.boldBrand.resting', colors.B400),
+    upper: token('color.background.subtleNeutral.resting', colors.N30)
   },
   disabled: {
-    lower: colors.N50,
-    upper: colors.N30
+    lower: token('color.text.disabled', colors.N50),
+    upper: token('color.background.disabled', colors.N30)
   },
   hover: {
-    lower: colors.B300,
-    upper: colors.N40
+    lower: token('color.background.boldBrand.hover', colors.B300),
+    upper: token('color.background.subtleNeutral.hover', colors.N40)
   }
 };
 export const Theme = createTheme(() => ({

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/range",
-	"version": "5.0.8",
+	"version": "5.1.0",
 	"sideEffects": false
 }

package/dist/esm/styled.js

@@ -9,8 +9,9 @@ var _templateObject;
 /* eslint-disable no-mixed-operators */
 import { forwardRef, useMemo } from 'react';
 import { css, jsx } from '@emotion/core';
+import { N50A, N60A } from '@atlaskit/theme/colors';
 import { fontFamily } from '@atlaskit/theme/constants';
-import { e200 } from '@atlaskit/theme/elevation';
+import { token } from '@atlaskit/tokens';
 var sliderThumbSize = 16;
 var sliderThumbBorderThickness = 2;
 var sliderLineThickness = 4;
@@ -22,27 +23,28 @@ var getBackgroundGradient = function getBackgroundGradient(_ref) {
   var lower = _ref.lower,
       upper = _ref.upper;
   return "\n    background: linear-gradient(".concat(lower, ", ").concat(lower, ") 0 / var(--range-inline-width) 100%\n      no-repeat ").concat(upper, ";\n    [dir='rtl'] & {\n      background-position: right;\n    }\n  ");
-}; // Thumb style
+};
 
+var elevationStyle = token('shadow.overlay', "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A)); // Thumb style
 
 var sliderThumbStyle = function sliderThumbStyle(_ref2) {
   var thumb = _ref2.thumb;
-  return "\n    background: ".concat(thumb.default.background, ";\n    border: ").concat(sliderThumbBorderThickness, "px solid transparent;\n    border-radius: 50%;\n    height: ").concat(sliderThumbSize, "px;\n    width: ").concat(sliderThumbSize, "px;\n    box-sizing: border-box;\n    transition: border-color ").concat(transitionDuration, " ease-in-out;\n    ").concat(e200(), ";\n  ");
+  return "\n    background: ".concat(thumb.default.background, ";\n    border: ").concat(sliderThumbBorderThickness, "px solid transparent;\n    border-radius: 50%;\n    height: ").concat(sliderThumbSize, "px;\n    width: ").concat(sliderThumbSize, "px;\n    box-sizing: border-box;\n    transition: border-color ").concat(transitionDuration, " ease-in-out;\n    box-shadow: ").concat(elevationStyle, "\n  ");
 }; // Track styles
 
 
 var sliderTrackStyle = "\n  border-radius: ".concat(sliderBorderRadius, "px;\n  border: 0;\n  cursor: pointer;\n  height: ").concat(sliderLineThickness, "px;\n  width: 100%;\n  transition: background-color ").concat(transitionDuration, " ease-in-out;\n"); // Range input styles
 
 var chromeRangeInputStyle = function chromeRangeInputStyle(tokens) {
-  return "\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    margin-top: -".concat((sliderThumbSize - sliderLineThickness) / 2, "px;\n    ").concat(sliderThumbStyle(tokens), ";\n  }\n\n  &:focus::-webkit-slider-thumb {\n    border-color: ").concat(tokens.thumb.focus.border, ";\n  }\n\n  &:disabled::-webkit-slider-thumb {\n    cursor: not-allowed;\n    box-shadow: 0 0 1px ").concat(tokens.thumb.disabled.boxShadow, ";\n  }\n\n  &::-webkit-slider-runnable-track {\n    ").concat(sliderTrackStyle, ";\n    ").concat(getBackgroundGradient(tokens.track.default), ";\n  }\n\n  &:focus::-webkit-slider-runnable-track {\n    ").concat(getBackgroundGradient(tokens.track.default), ";\n  }\n\n  &:active::-webkit-slider-runnable-track,\n  &:hover::-webkit-slider-runnable-track {\n    ").concat(getBackgroundGradient(tokens.track.hover), ";\n  }\n\n  &:disabled::-webkit-slider-runnable-track {\n    ").concat(getBackgroundGradient(tokens.track.disabled), "\n    cursor: not-allowed;\n  }\n  ");
+  return "\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    margin-top: -".concat((sliderThumbSize - sliderLineThickness) / 2, "px;\n    ").concat(sliderThumbStyle(tokens), ";\n  }\n\n  &:focus::-webkit-slider-thumb {\n    border-color: ").concat(tokens.thumb.focus.border, ";\n  }\n\n  &:disabled::-webkit-slider-thumb {\n    cursor: not-allowed;\n    box-shadow: ").concat(tokens.thumb.disabled.boxShadow, ";\n  }\n\n  &::-webkit-slider-runnable-track {\n    ").concat(sliderTrackStyle, ";\n    ").concat(getBackgroundGradient(tokens.track.default), ";\n  }\n\n  &:focus::-webkit-slider-runnable-track {\n    ").concat(getBackgroundGradient(tokens.track.default), ";\n  }\n\n  &:active::-webkit-slider-runnable-track,\n  &:hover::-webkit-slider-runnable-track {\n    ").concat(getBackgroundGradient(tokens.track.hover), ";\n  }\n\n  &:disabled::-webkit-slider-runnable-track {\n    ").concat(getBackgroundGradient(tokens.track.disabled), "\n    cursor: not-allowed;\n  }\n  ");
 };
 
 var firefoxRangeInputStyle = function firefoxRangeInputStyle(tokens) {
-  return "\n  &::-moz-focus-outer {\n    border: 0;\n  }\n\n  &::-moz-range-thumb {\n    ".concat(sliderThumbStyle(tokens), ";\n  }\n\n  &:focus::-moz-range-thumb {\n    border-color: ").concat(tokens.thumb.focus.border, ";\n  }\n\n  &:disabled::-moz-range-thumb {\n    cursor: not-allowed;\n    box-shadow: 0 0 1px ").concat(tokens.thumb.disabled.boxShadow, ";\n  }\n\n  &::-moz-range-progress {\n    ").concat(sliderTrackStyle, ";\n    background: ").concat(tokens.track.default.lower, ";\n  }\n\n  &::-moz-range-track {\n    ").concat(sliderTrackStyle, ";\n    background: ").concat(tokens.track.default.upper, ";\n  }\n\n  &:active::-moz-range-progress,\n  &:hover::-moz-range-progress {\n    background: ").concat(tokens.track.hover.lower, ";\n  }\n\n  &:active::-moz-range-track,\n  &:hover::-moz-range-track {\n    background: ").concat(tokens.track.hover.upper, ";\n  }\n\n  &:disabled::-moz-range-progress {\n    background: ").concat(tokens.track.disabled.lower, ";\n    cursor: not-allowed;\n  }\n\n  &:disabled::-moz-range-track {\n    background: ").concat(tokens.track.disabled.upper, ";\n    cursor: not-allowed;\n  }\n");
+  return "\n  &::-moz-focus-outer {\n    border: 0;\n  }\n\n  &::-moz-range-thumb {\n    ".concat(sliderThumbStyle(tokens), ";\n  }\n\n  &:focus::-moz-range-thumb {\n    border-color: ").concat(tokens.thumb.focus.border, ";\n  }\n\n  &:disabled::-moz-range-thumb {\n    cursor: not-allowed;\n    box-shadow: ").concat(tokens.thumb.disabled.boxShadow, ";\n  }\n\n  &::-moz-range-progress {\n    ").concat(sliderTrackStyle, ";\n    background: ").concat(tokens.track.default.lower, ";\n  }\n\n  &::-moz-range-track {\n    ").concat(sliderTrackStyle, ";\n    background: ").concat(tokens.track.default.upper, ";\n  }\n\n  &:active::-moz-range-progress,\n  &:hover::-moz-range-progress {\n    background: ").concat(tokens.track.hover.lower, ";\n  }\n\n  &:active::-moz-range-track,\n  &:hover::-moz-range-track {\n    background: ").concat(tokens.track.hover.upper, ";\n  }\n\n  &:disabled::-moz-range-progress {\n    background: ").concat(tokens.track.disabled.lower, ";\n    cursor: not-allowed;\n  }\n\n  &:disabled::-moz-range-track {\n    background: ").concat(tokens.track.disabled.upper, ";\n    cursor: not-allowed;\n  }\n");
 };
 
 var IERangeInputStyle = function IERangeInputStyle(tokens) {
-  return "\n  &::-ms-thumb {\n    margin-top: 0;\n    ".concat(sliderThumbStyle(tokens), ";\n  }\n\n  &:focus::-ms-thumb {\n    border-color: ").concat(tokens.thumb.focus.border, ";\n  }\n\n  &:disabled::-ms-thumb {\n    cursor: not-allowed;\n    box-shadow: 0 0 1px ").concat(tokens.thumb.disabled.boxShadow, ";\n  }\n\n  &::-ms-track {\n    background: transparent;\n    border-color: transparent;\n    color: transparent;\n    cursor: pointer;\n    height: ").concat(sliderLineThickness, "px;\n    transition: background-color ").concat(transitionDuration, " ease-in-out;\n    width: 100%;\n  }\n\n  &::-ms-fill-lower {\n    background: ").concat(tokens.track.default.lower, ";\n    border-radius: ").concat(sliderBorderRadius, "px;\n    border: 0;\n  }\n\n  &::-ms-fill-upper {\n    background: ").concat(tokens.track.default.upper, ";\n    border-radius: ").concat(sliderBorderRadius, "px;\n    border: 0;\n  }\n\n  &:active::-ms-fill-lower,\n  &:hover::-ms-fill-lower {\n    background: ").concat(tokens.track.hover.lower, ";\n  }\n\n  &:active::-ms-fill-upper,\n  &:hover::-ms-fill-upper {\n    background: ").concat(tokens.track.hover.upper, ";\n  }\n\n  &:disabled::-ms-fill-lower {\n    background: ").concat(tokens.track.disabled.lower, ";\n    cursor: not-allowed;\n  }\n\n  &:disabled::-ms-fill-upper {\n    background: ").concat(tokens.track.disabled.upper, ";\n    cursor: not-allowed;\n  }\n");
+  return "\n  &::-ms-thumb {\n    margin-top: 0;\n    ".concat(sliderThumbStyle(tokens), ";\n  }\n\n  &:focus::-ms-thumb {\n    border-color: ").concat(tokens.thumb.focus.border, ";\n  }\n\n  &:disabled::-ms-thumb {\n    cursor: not-allowed;\n    box-shadow: ").concat(tokens.thumb.disabled.boxShadow, ";\n  }\n\n  &::-ms-track {\n    background: transparent;\n    border-color: transparent;\n    color: transparent;\n    cursor: pointer;\n    height: ").concat(sliderLineThickness, "px;\n    transition: background-color ").concat(transitionDuration, " ease-in-out;\n    width: 100%;\n  }\n\n  &::-ms-fill-lower {\n    background: ").concat(tokens.track.default.lower, ";\n    border-radius: ").concat(sliderBorderRadius, "px;\n    border: 0;\n  }\n\n  &::-ms-fill-upper {\n    background: ").concat(tokens.track.default.upper, ";\n    border-radius: ").concat(sliderBorderRadius, "px;\n    border: 0;\n  }\n\n  &:active::-ms-fill-lower,\n  &:hover::-ms-fill-lower {\n    background: ").concat(tokens.track.hover.lower, ";\n  }\n\n  &:active::-ms-fill-upper,\n  &:hover::-ms-fill-upper {\n    background: ").concat(tokens.track.hover.upper, ";\n  }\n\n  &:disabled::-ms-fill-lower {\n    background: ").concat(tokens.track.disabled.lower, ";\n    cursor: not-allowed;\n  }\n\n  &:disabled::-ms-fill-upper {\n    background: ").concat(tokens.track.disabled.upper, ";\n    cursor: not-allowed;\n  }\n");
 }; // Styles are split per browser as they are implemented differently
 // Cannot consolidate as Chrome & Firefox don't recognise styles if they are grouped
 // with CSS selectors they don't recognise, e.g. &::-ms-thumb
@@ -72,7 +74,8 @@ export var Input = /*#__PURE__*/forwardRef(function (props, ref) {
     style: {
       '--range-inline-width': "".concat(valuePercent, "%")
     },
-    ref: ref,
+    ref: ref // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    ,
     css: styles
   }));
 });

package/dist/esm/theme.js

@@ -1,33 +1,30 @@
 import * as colors from '@atlaskit/theme/colors';
 import { createTheme } from '@atlaskit/theme/components';
+import { token } from '@atlaskit/tokens';
 export var thumb = {
   default: {
-    background: colors.N0,
-    // This border color is not being used - awaiting focus state lift to props
-    border: colors.N800
+    background: token('color.background.card', colors.N0)
   },
   disabled: {
-    boxShadow: colors.N60A
+    boxShadow: token('shadow.card', "0 0 1px ".concat(colors.N60A))
   },
   focus: {
-    // This border color is not being used - awaiting focus state lift to props
-    background: colors.N0,
-    border: colors.B200
+    background: token('color.background.boldNeutral.resting', colors.N0),
+    border: token('color.border.focus', colors.B200)
   }
 };
 export var track = {
-  background: colors.N30A,
   default: {
-    lower: colors.B400,
-    upper: colors.N30
+    lower: token('color.background.boldBrand.resting', colors.B400),
+    upper: token('color.background.subtleNeutral.resting', colors.N30)
   },
   disabled: {
-    lower: colors.N50,
-    upper: colors.N30
+    lower: token('color.text.disabled', colors.N50),
+    upper: token('color.background.disabled', colors.N30)
   },
   hover: {
-    lower: colors.B300,
-    upper: colors.N40
+    lower: token('color.background.boldBrand.hover', colors.B300),
+    upper: token('color.background.subtleNeutral.hover', colors.N40)
   }
 };
 export var Theme = createTheme(function () {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/range",
-	"version": "5.0.8",
+	"version": "5.1.0",
 	"sideEffects": false
 }

package/dist/types/range.d.ts

@@ -1,26 +1,26 @@
 import React from 'react';
 import { ThemeProp } from '@atlaskit/theme/components';
 export declare type OwnProps = {
-    /** if the field range needs to be disabled */
+    /** Sets the default value if range is not set. */
+    defaultValue?: number;
+    /** Sets whether the field range is disabled. */
     isDisabled?: boolean;
-    /** Maximum value of the range */
+    /** Sets the maximum value of the range. */
     max?: number;
-    /** Minimum value of the range */
+    /** Sets the minimum value of the range.*/
     min?: number;
-    /** Step value for the range */
-    step?: number;
-    /** Hook to be invoked on change of the range */
+    /** Hook to be invoked on change of the range. */
     onChange?: (value: number) => void;
-    /** Value of the range */
-    value?: number;
-    /** The default value */
-    defaultValue?: number;
+    /** Sets the step value for the range.  */
+    step?: number;
+    /** A `testId` prop is provided for specific elements. This is a unique string that appears as a data attribute `data-testid` in the rendered code and serves as a hook for automated tests. */
+    testId?: string;
     /** The theme object to be passed down. See
-    [@atlaskit/theme](https://atlaskit.atlassian.com/packages/design-system/theme) for more details on themeing.
+    [@atlaskit/theme](https://atlaskit.atlassian.com/packages/design-system/theme) for more details on theming.
     */
     theme?: ThemeProp<any, any>;
-    /** A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests */
-    testId?: string;
+    /** Sets the value of the range. */
+    value?: number;
 };
 declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
 export declare type RangeProps = Combine<Omit<React.InputHTMLAttributes<HTMLInputElement>, 'disabled' | 'required' | 'checked'>, OwnProps>;

package/dist/types/theme.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export interface ThemeTokensThumb {
     background: string;
-    border: string;
+    border?: string;
 }
 export interface ThemeTokensTrack {
     lower: string;
@@ -16,7 +16,6 @@ export interface ThemeTokens {
         focus: ThemeTokensThumb;
     };
     track: {
-        background: string;
         default: ThemeTokensTrack;
         disabled: ThemeTokensTrack;
         hover: ThemeTokensTrack;
@@ -24,30 +23,28 @@ export interface ThemeTokens {
 }
 export declare const thumb: {
     default: {
-        background: string;
-        border: string;
+        background: "var(--ds-background-card)";
     };
     disabled: {
-        boxShadow: string;
+        boxShadow: "var(--ds-card)";
     };
     focus: {
-        background: string;
-        border: string;
+        background: "var(--ds-background-boldNeutral-resting)";
+        border: "var(--ds-border-focus)";
     };
 };
 export declare const track: {
-    background: string;
     default: {
-        lower: string;
-        upper: string;
+        lower: "var(--ds-background-boldBrand-resting)";
+        upper: "var(--ds-background-subtleNeutral-resting)";
     };
     disabled: {
-        lower: string;
-        upper: string;
+        lower: "var(--ds-text-disabled)";
+        upper: "var(--ds-background-disabled)";
     };
     hover: {
-        lower: string;
-        upper: string;
+        lower: "var(--ds-background-boldBrand-hover)";
+        upper: "var(--ds-background-subtleNeutral-hover)";
     };
 };
 export declare const Theme: {

package/docs/0-intro.tsx

@@ -1,66 +1,13 @@
 import React from 'react';
 
-import { code, Example, md, Props } from '@atlaskit/docs';
+import { md } from '@atlaskit/docs';
+import SectionMessage from '@atlaskit/section-message';
 
 export default md`
-  Component which renders a native input[range] element, with atlassian stylings.
-  It can be used with just an \`onChange\` handler to respond to value changes, or
-  it can be used as a controlled component when it is needed.
-
-  ## Usage
-
-  ${code`import FieldRange from '@atlaskit/range';`}
-
-  ${(
-    <Example
-      packageName="@atlaskit/range"
-      Component={require('../examples/00-basic-example-uncontrolled').default}
-      title="Basic"
-      source={require('!!raw-loader!../examples/00-basic-example-uncontrolled')}
-    />
-  )}
-
-  You can also take full control of the range yourself if you need to manage its state, rather than simply respond to changes.
-
-  ${(
-    <Example
-      packageName="@atlaskit/range"
-      Component={require('../examples/01-basic-example-controlled').default}
-      title="Controlled Example"
-      source={require('!!raw-loader!../examples/01-basic-example-controlled')}
-    />
-  )}
-
-  ## Rate limiting
-
-  It is recommended that if you have an expensive onChange function
-  that you rate limit as it will be called on each step when you move
-  the range. You can do this in whatever way is best for your use case but
-  below is an example with:
-
-  * debouncing - function is called once after it isn't called for a given period
-  * throttling - function is only called once in a given period
-
-  ${(
-    <Example
-      packageName="@atlaskit/range"
-      Component={require('../examples/08-rate-limited').default}
-      title="Rate limited example"
-      source={require('!!raw-loader!../examples/08-rate-limited')}
-    />
-  )}
-
-  ## Props
-
-  In addition to the props below, we spread all other props provided on to the input
-  component. Between this and the innerRef, you should be empowered to take full control
-  of any aspect you need to do.
-
-  ${(
-    <Props
-      props={require('!!extract-react-types-loader!../extract-react-types/range-props')}
-      heading=""
-    />
-  )}
-
+${(
+  <SectionMessage appearance="information">
+    This component is now documented on{' '}
+    <a href="https://atlassian.design/components">atlassian.design</a>
+  </SectionMessage>
+)}
 `;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/range",
-  "version": "5.0.8",
-  "description": "A styled version of the native input[range] element.",
+  "version": "5.1.0",
+  "description": "A range lets users choose an approximate value on a slider.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -14,6 +14,7 @@
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
   "atlaskit:src": "src/index.ts",
+  "homepage": "https://atlassian.design/components/range/",
   "atlassian": {
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
@@ -24,7 +25,8 @@
     }
   },
   "dependencies": {
-    "@atlaskit/theme": "^11.0.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -33,16 +35,19 @@
   },
   "devDependencies": {
     "@atlaskit/build-utils": "*",
+    "@atlaskit/button": "^16.0.0",
     "@atlaskit/checkbox": "^12.0.0",
     "@atlaskit/docs": "*",
+    "@atlaskit/form": "^8.4.0",
+    "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tooltip": "^17.0.0",
+    "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/styled": "^10.0.7",
     "@testing-library/react": "^8.0.1",
     "@types/jscodeshift": "^0.11.0",
-    "jscodeshift": "^0.11.0",
+    "jscodeshift": "^0.13.0",
     "lodash": "^4.17.15",
     "react-dom": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
@@ -58,17 +63,12 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
-      "ui-components": [
-        "lite-mode"
-      ],
-      "analytics": [
-        "analytics-next"
-      ],
-      "theming": [
-        "new-theming-api"
-      ],
-      "deprecation": [
-        "no-deprecated-imports"
+      "ui-components": "lite-mode",
+      "analytics": "analytics-next",
+      "theming": "tokens",
+      "deprecation": "no-deprecated-imports",
+      "styling": [
+        "emotion"
       ]
     }
   },