@atlaskit/range 7.1.7 → 7.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,52 +1,58 @@
1
1
  # @atlaskit/range
2
2
 
3
+ ## 7.1.8
4
+
5
+ ### Patch Changes
6
+
7
+ - [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116) [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) - Upgrade Typescript from `4.9.5` to `5.4.2`
8
+
3
9
  ## 7.1.7
4
10
 
5
11
  ### Patch Changes
6
12
 
7
- - [`9af31f3c1ae`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9af31f3c1ae) - Delete version.json
13
+ - [#38731](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38731) [`9af31f3c1ae`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9af31f3c1ae) - Delete version.json
8
14
 
9
15
  ## 7.1.6
10
16
 
11
17
  ### Patch Changes
12
18
 
13
- - [`356d6ebed05`](https://bitbucket.org/atlassian/atlassian-frontend/commits/356d6ebed05) - This package is now onboarded onto the product push model.
19
+ - [#38201](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38201) [`356d6ebed05`](https://bitbucket.org/atlassian/atlassian-frontend/commits/356d6ebed05) - This package is now onboarded onto the product push model.
14
20
 
15
21
  ## 7.1.5
16
22
 
17
23
  ### Patch Changes
18
24
 
19
- - [`4ae083a7e66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ae083a7e66) - Use `@af/accessibility-testing` for default jest-axe config and jest-axe import in accessibility testing.
25
+ - [#36754](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/36754) [`4ae083a7e66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ae083a7e66) - Use `@af/accessibility-testing` for default jest-axe config and jest-axe import in accessibility testing.
20
26
 
21
27
  ## 7.1.4
22
28
 
23
29
  ### Patch Changes
24
30
 
25
- - [`599bfe90ee3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/599bfe90ee3) - Internal change to use shape tokens. There is no expected visual change.
31
+ - [#35441](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/35441) [`599bfe90ee3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/599bfe90ee3) - Internal change to use shape tokens. There is no expected visual change.
26
32
 
27
33
  ## 7.1.3
28
34
 
29
35
  ### Patch Changes
30
36
 
31
- - [`b1bdec7cce2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1bdec7cce2) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
37
+ - [#32935](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32935) [`b1bdec7cce2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1bdec7cce2) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
32
38
 
33
39
  ## 7.1.2
34
40
 
35
41
  ### Patch Changes
36
42
 
37
- - [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
43
+ - [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793) [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
38
44
 
39
45
  ## 7.1.1
40
46
 
41
47
  ### Patch Changes
42
48
 
43
- - [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
49
+ - [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649) [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
44
50
 
45
51
  ## 7.1.0
46
52
 
47
53
  ### Minor Changes
48
54
 
49
- - [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
55
+ - [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258) [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
50
56
 
51
57
  ### Patch Changes
52
58
 
@@ -56,7 +62,7 @@
56
62
 
57
63
  ### Patch Changes
58
64
 
59
- - [`22b754d311f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/22b754d311f) - Updates usage of removed design token `utilities.UNSAFE_util.transparent` in favour of its replacement `utilities.UNSAFE.transparent`
65
+ - [#27634](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27634) [`22b754d311f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/22b754d311f) - Updates usage of removed design token `utilities.UNSAFE_util.transparent` in favour of its replacement `utilities.UNSAFE.transparent`
60
66
  - Updated dependencies
61
67
 
62
68
  ## 7.0.3
@@ -81,7 +87,7 @@
81
87
 
82
88
  ### Major Changes
83
89
 
84
- - [`78741dd1644`](https://bitbucket.org/atlassian/atlassian-frontend/commits/78741dd1644) - [ux] Breaking visual changes to range to afford better contrast:
90
+ - [#25860](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/25860) [`78741dd1644`](https://bitbucket.org/atlassian/atlassian-frontend/commits/78741dd1644) - [ux] Breaking visual changes to range to afford better contrast:
85
91
 
86
92
  - The scrubber now applies the same color as the foreground
87
93
  - The disabled state has been altered; it's now a consistently applied opacity state overlay across the whole element
@@ -91,38 +97,38 @@
91
97
 
92
98
  ### Patch Changes
93
99
 
94
- - [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
100
+ - [#26303](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26303) [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
95
101
 
96
102
  ## 6.1.0
97
103
 
98
104
  ### Minor Changes
99
105
 
100
- - [`1966ffa850d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1966ffa850d) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
106
+ - [#24710](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24710) [`1966ffa850d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1966ffa850d) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
101
107
 
102
108
  ## 6.0.9
103
109
 
104
110
  ### Patch Changes
105
111
 
106
- - [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
112
+ - [#24874](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24874) [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
107
113
 
108
114
  ## 6.0.8
109
115
 
110
116
  ### Patch Changes
111
117
 
112
- - [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
118
+ - [#24492](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24492) [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
113
119
 
114
120
  ## 6.0.7
115
121
 
116
122
  ### Patch Changes
117
123
 
118
- - [`8202e37941b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8202e37941b) - Internal code change turning on new linting rules.
124
+ - [#23381](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/23381) [`8202e37941b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8202e37941b) - Internal code change turning on new linting rules.
119
125
  - Updated dependencies
120
126
 
121
127
  ## 6.0.6
122
128
 
123
129
  ### Patch Changes
124
130
 
125
- - [`45ebe7af434`](https://bitbucket.org/atlassian/atlassian-frontend/commits/45ebe7af434) - Moved to using declarative entrypoints internally. Public API is unchanged.
131
+ - [#22642](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/22642) [`45ebe7af434`](https://bitbucket.org/atlassian/atlassian-frontend/commits/45ebe7af434) - Moved to using declarative entrypoints internally. Public API is unchanged.
126
132
 
127
133
  ## 6.0.5
128
134
 
@@ -134,7 +140,7 @@
134
140
 
135
141
  ### Patch Changes
136
142
 
137
- - [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
143
+ - [#20650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/20650) [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
138
144
 
139
145
  ## 6.0.3
140
146
 
@@ -158,7 +164,7 @@
158
164
 
159
165
  ### Major Changes
160
166
 
161
- - [`17d9edaa415`](https://bitbucket.org/atlassian/atlassian-frontend/commits/17d9edaa415) - In preparation for compiled adoption, internal styling has been rewritten to remove dynamic styles.
167
+ - [#18526](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/18526) [`17d9edaa415`](https://bitbucket.org/atlassian/atlassian-frontend/commits/17d9edaa415) - In preparation for compiled adoption, internal styling has been rewritten to remove dynamic styles.
162
168
  This includes custom theming using the `theme` prop, which has been removed.
163
169
 
164
170
  If you are not using the `theme` prop, there should be no breaking changes.
@@ -167,7 +173,7 @@
167
173
 
168
174
  ### Patch Changes
169
175
 
170
- - [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
176
+ - [#16752](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/16752) [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
171
177
  - [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
172
178
  - Updated dependencies
173
179
 
@@ -181,20 +187,20 @@
181
187
 
182
188
  ### Patch Changes
183
189
 
184
- - [`c55c736ecea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c55c736ecea) - Patch VULN AFP-3486 AFP-3487 AFP-3488 AFP-3489
190
+ - [#17475](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/17475) [`c55c736ecea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c55c736ecea) - Patch VULN AFP-3486 AFP-3487 AFP-3488 AFP-3489
185
191
 
186
192
  ## 5.1.1
187
193
 
188
194
  ### Patch Changes
189
195
 
190
- - [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
196
+ - [#15998](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/15998) [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
191
197
  - Updated dependencies
192
198
 
193
199
  ## 5.1.0
194
200
 
195
201
  ### Minor Changes
196
202
 
197
- - [`21c178539a2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/21c178539a2) - [ux] Instrumented range with the new theming package, `@atlaskit/tokens`.
203
+ - [#14777](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/14777) [`21c178539a2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/21c178539a2) - [ux] Instrumented range with the new theming package, `@atlaskit/tokens`.
198
204
 
199
205
  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
200
206
  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
@@ -213,43 +219,43 @@
213
219
 
214
220
  ### Patch Changes
215
221
 
216
- - [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
222
+ - [#12880](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12880) [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
217
223
 
218
224
  ## 5.0.9
219
225
 
220
226
  ### Patch Changes
221
227
 
222
- - [`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
228
+ - [#11980](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/11980) [`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
223
229
 
224
230
  ## 5.0.8
225
231
 
226
232
  ### Patch Changes
227
233
 
228
- - [`d6f7ff383cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6f7ff383cf) - Updates to development dependency `storybook-addon-performance`
234
+ - [#12167](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12167) [`d6f7ff383cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6f7ff383cf) - Updates to development dependency `storybook-addon-performance`
229
235
 
230
236
  ## 5.0.7
231
237
 
232
238
  ### Patch Changes
233
239
 
234
- - [`952019cfd39`](https://bitbucket.org/atlassian/atlassian-frontend/commits/952019cfd39) - Removed extraneous/unnecessary dependencies for design system components.
240
+ - [#7762](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/7762) [`952019cfd39`](https://bitbucket.org/atlassian/atlassian-frontend/commits/952019cfd39) - Removed extraneous/unnecessary dependencies for design system components.
235
241
 
236
242
  ## 5.0.6
237
243
 
238
244
  ### Patch Changes
239
245
 
240
- - [`3137d05e06`](https://bitbucket.org/atlassian/atlassian-frontend/commits/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.
246
+ - [#6930](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/6930) [`3137d05e06`](https://bitbucket.org/atlassian/atlassian-frontend/commits/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.
241
247
 
242
248
  ## 5.0.5
243
249
 
244
250
  ### Patch Changes
245
251
 
246
- - [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
252
+ - [#5857](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5857) [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
247
253
 
248
254
  ## 5.0.4
249
255
 
250
256
  ### Patch Changes
251
257
 
252
- - [`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option.
258
+ - [#5497](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5497) [`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option.
253
259
  This requires version 3.8 of Typescript, read more about how we handle Typescript versions here: https://atlaskit.atlassian.com/get-started
254
260
  Also add `typescript` to `devDependencies` to denote version that the package was built with.
255
261
 
@@ -263,7 +269,7 @@
263
269
 
264
270
  ### Patch Changes
265
271
 
266
- - [`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0
272
+ - [#3885](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3885) [`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0
267
273
 
268
274
  Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade
269
275
  to prevent duplicates of tslib being bundled.
@@ -272,14 +278,14 @@
272
278
 
273
279
  ### Patch Changes
274
280
 
275
- - [`6262f382de`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6262f382de) - Use the 'lodash' package instead of single-function 'lodash.\*' packages
281
+ - [#3823](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3823) [`6262f382de`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6262f382de) - Use the 'lodash' package instead of single-function 'lodash.\*' packages
276
282
  - [`e99262c6f0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e99262c6f0) - All form elements now have a default font explicitly set
277
283
 
278
284
  ## 5.0.0
279
285
 
280
286
  ### Major Changes
281
287
 
282
- - [`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially dropping IE11 support, from this version onwards there are no warranties of the package working in IE11.
288
+ - [#3335](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3335) [`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially dropping IE11 support, from this version onwards there are no warranties of the package working in IE11.
283
289
  For more information see: https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/39534
284
290
 
285
291
  ### Patch Changes
@@ -290,13 +296,13 @@
290
296
 
291
297
  ### Patch Changes
292
298
 
293
- - [`54a9514fcf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54a9514fcf) - Build and supporting files will no longer be published to npm
299
+ - [#2866](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2866) [`54a9514fcf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54a9514fcf) - Build and supporting files will no longer be published to npm
294
300
 
295
301
  ## 4.0.0
296
302
 
297
303
  ### Major Changes
298
304
 
299
- - [`da1c8c16d4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/da1c8c16d4) - In this version we made range dramatically faster and lighter 🤩
305
+ - [#2137](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2137) [`da1c8c16d4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/da1c8c16d4) - In this version we made range dramatically faster and lighter 🤩
300
306
 
301
307
  ### Changes
302
308
 
@@ -0,0 +1,31 @@
1
+ {
2
+ "extends": "../../../../tsconfig.entry-points.confluence.json",
3
+ "compilerOptions": {
4
+ "declaration": true,
5
+ "target": "es5",
6
+ "composite": true,
7
+ "outDir": "../dist",
8
+ "rootDir": "../",
9
+ "baseUrl": "../"
10
+ },
11
+ "include": [
12
+ "../src/**/*.ts",
13
+ "../src/**/*.tsx"
14
+ ],
15
+ "exclude": [
16
+ "../src/**/__tests__/*",
17
+ "../src/**/*.test.*",
18
+ "../src/**/test.*"
19
+ ],
20
+ "references": [
21
+ {
22
+ "path": "../../ds-lib/afm-cc/tsconfig.json"
23
+ },
24
+ {
25
+ "path": "../../theme/afm-cc/tsconfig.json"
26
+ },
27
+ {
28
+ "path": "../../tokens/afm-cc/tsconfig.json"
29
+ }
30
+ ]
31
+ }
@@ -16,7 +16,7 @@ The default form of a range.
16
16
 
17
17
  ## Form
18
18
 
19
- Range used with the [Form](https://atlaskit.atlassian.com/packages/design-system/form) component.
19
+ Range used with the [form component](/components/form/).
20
20
 
21
21
  <Example Component={RangeForm} packageName="@atlaskit/range" />
22
22
 
@@ -36,4 +36,6 @@ In an uncontrolled range, the state is managed by the DOM.
36
36
 
37
37
  Set `isDisabled` to disable a range when another action has to be completed before the range is usable.
38
38
 
39
+ Avoid using disabled UI where possible. This can cause accessibility problems, because disabled UI does not give enough information about what went wrong and how to proceed.
40
+
39
41
  <Example Component={RangeDisabled} packageName="@atlaskit/range" />
@@ -4,26 +4,30 @@ order: 2
4
4
 
5
5
  ## Usage
6
6
 
7
- Use ranges in [forms](/patterns/forms) to let users select a value within a given range of minimum and maximum values.
7
+ Use ranges in [forms](/patterns/forms) to let people select a value within a given range of minimum and maximum values.
8
8
 
9
9
  ## Anatomy
10
10
 
11
- ![Range anatomy](images/range-anatomy.png)
11
+ ![A diagram showing the range component UI, which is composed of a horizontal track, and a circle that indicates the current selected position on the range.](images/range-anatomy.png)
12
12
 
13
- 1. **Track:** The track displays the range available for the user to select from.
14
- 2. **Handle:** A position indicator that can be moved along the track to change the value.
13
+ 1. **Track:** The track is a horizontal line that displays the range available for the user to select from.
14
+ 2. **Handle:** A circular position indicator that people can move along the track to change the value.
15
+
16
+ ## Accessibility
17
+
18
+ - 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.
19
+ - Don't use a range for values that aren't numeric. For example, selecting weekdays (Monday to Friday).
15
20
 
16
21
  ## Best practices
17
22
 
18
23
  - Place labels directly above the input, and align to the left.
19
- - Do not use for ranges that are extremely large (for example, 1-1000).
20
- - 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.
21
- - 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.
22
-
24
+ - Don't use for ranges that are extremely large. For example, values over 100.
25
+ - Don't use for ranges that are very small (for example, 1-3). The range moves in steps when the range of values is lower.
26
+ - For left-to-right user interfaces, put the lowest value on the left of the slider. For right-to-left user interfaces, put the lowest value on the right.
23
27
 
24
28
  ## Content guidelines
25
29
 
26
- - Field label text above the range input should be short and concise.
30
+ - Keep labels short and concise.
27
31
  - If necessary, use helper text to clarify how to use the range.
28
32
 
29
33
  ## Related
package/dist/cjs/range.js CHANGED
@@ -14,14 +14,15 @@ var _react = _interopRequireWildcard(require("react"));
14
14
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
15
15
  var _styled = require("./styled");
16
16
  var _excluded = ["isDisabled", "defaultValue", "max", "min", "onChange", "step", "value", "testId"];
17
- 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); }
18
- 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; }
19
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
20
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
17
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
18
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
19
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
20
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
21
21
  // Combine omits the keys of the second from the first so in case of overlap the props of the second are used.
22
22
 
23
23
  // OwnProps is used for external documentation, but does not list every property supported by Range.
24
24
  // So we combine (a reduced list of) HTMLInputElement attributes with OwnProps to get the full type.
25
+
25
26
  var snapToStep = function snapToStep(value, min, step) {
26
27
  // Normalise the value to allow for division properly with different min values
27
28
  var adjustedValue = value - min;
@@ -39,7 +40,7 @@ var getRoundedPercentValue = function getRoundedPercentValue(value, min, max, st
39
40
  return percent;
40
41
  };
41
42
  var noop = _noop.default;
42
- var _default = /*#__PURE__*/(0, _react.forwardRef)(function Range(props, ref) {
43
+ var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(function Range(props, ref) {
43
44
  var _props$isDisabled = props.isDisabled,
44
45
  isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
45
46
  _props$defaultValue = props.defaultValue,
@@ -81,5 +82,4 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function Range(props, ref) {
81
82
  valuePercent: valuePercent,
82
83
  "data-testid": testId
83
84
  }, spreadProps));
84
- });
85
- exports.default = _default;
85
+ });
@@ -14,10 +14,10 @@ var _react2 = require("@emotion/react");
14
14
  var theme = _interopRequireWildcard(require("./theme"));
15
15
  var _excluded = ["valuePercent", "style"];
16
16
  var _hoverNotDisabled, _css;
17
- 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); }
18
- 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; }
19
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
20
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */
17
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
18
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
19
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
20
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
21
21
  var VAR_THUMB_BORDER_COLOR = '--thumb-border';
22
22
  var VAR_THUMB_SHADOW = '--thumb-shadow';
23
23
  var VAR_THUMB_BACKGROUND_COLOR = '--thumb-bg';
@@ -123,7 +123,7 @@ var themeStyles = (0, _react2.css)((_css = {}, (0, _defineProperty2.default)(_cs
123
123
  * __Input__
124
124
  * Internal-only styled input component.
125
125
  */
126
- var Input = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
126
+ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
127
127
  var valuePercent = props.valuePercent,
128
128
  style = props.style,
129
129
  strippedProps = (0, _objectWithoutProperties2.default)(props, _excluded);
@@ -133,5 +133,4 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
133
133
  css: [baseStyles, browserStyles.webkit, browserStyles.firefox, themeStyles]
134
134
  }));
135
135
  });
136
- exports.Input = Input;
137
136
  Input.displayName = 'InputRange';
package/dist/cjs/theme.js CHANGED
@@ -5,13 +5,11 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.transitionDuration = exports.track = exports.thumb = exports.input = void 0;
7
7
  var _colors = require("@atlaskit/theme/colors");
8
- var transitionDuration = '0.2s';
9
- exports.transitionDuration = transitionDuration;
10
- var input = {
8
+ var transitionDuration = exports.transitionDuration = '0.2s';
9
+ var input = exports.input = {
11
10
  height: 40
12
11
  };
13
- exports.input = input;
14
- var thumb = {
12
+ var thumb = exports.thumb = {
15
13
  size: 16,
16
14
  borderWidth: 2,
17
15
  background: {
@@ -28,8 +26,7 @@ var thumb = {
28
26
  disabled: "var(--ds-shadow-raised, ".concat("0 0 1px ".concat(_colors.N60A), ")")
29
27
  }
30
28
  };
31
- exports.thumb = thumb;
32
- var track = {
29
+ var track = exports.track = {
33
30
  height: 4,
34
31
  /**
35
32
  * borderRadius >= height / 2 to create a pill shape.
@@ -44,5 +41,4 @@ var track = {
44
41
  default: "var(--ds-background-neutral-bold, ".concat(_colors.B400, ")"),
45
42
  hovered: "var(--ds-background-neutral-bold-hovered, ".concat(_colors.B300, ")")
46
43
  }
47
- };
48
- exports.track = track;
44
+ };
@@ -7,6 +7,7 @@ import { Input } from './styled';
7
7
 
8
8
  // OwnProps is used for external documentation, but does not list every property supported by Range.
9
9
  // So we combine (a reduced list of) HTMLInputElement attributes with OwnProps to get the full type.
10
+
10
11
  const snapToStep = (value, min, step) => {
11
12
  // Normalise the value to allow for division properly with different min values
12
13
  const adjustedValue = value - min;
package/dist/esm/range.js CHANGED
@@ -3,8 +3,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
4
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
5
  var _excluded = ["isDisabled", "defaultValue", "max", "min", "onChange", "step", "value", "testId"];
6
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
7
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
7
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
8
8
  import React, { forwardRef, useCallback, useState } from 'react';
9
9
  import __noop from '@atlaskit/ds-lib/noop';
10
10
  import { Input } from './styled';
@@ -13,6 +13,7 @@ import { Input } from './styled';
13
13
 
14
14
  // OwnProps is used for external documentation, but does not list every property supported by Range.
15
15
  // So we combine (a reduced list of) HTMLInputElement attributes with OwnProps to get the full type.
16
+
16
17
  var snapToStep = function snapToStep(value, min, step) {
17
18
  // Normalise the value to allow for division properly with different min values
18
19
  var adjustedValue = value - min;
@@ -3,8 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
3
3
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
4
  var _excluded = ["valuePercent", "style"];
5
5
  var _hoverNotDisabled, _css;
6
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
7
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
7
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
8
8
  /** @jsx jsx */
9
9
 
10
10
  import { forwardRef } from 'react';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/range",
3
- "version": "7.1.7",
3
+ "version": "7.1.8",
4
4
  "description": "A range lets users choose an approximate value on a slider.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -27,8 +27,8 @@
27
27
  },
28
28
  "dependencies": {
29
29
  "@atlaskit/ds-lib": "^2.2.0",
30
- "@atlaskit/theme": "^12.5.0",
31
- "@atlaskit/tokens": "^1.14.0",
30
+ "@atlaskit/theme": "^12.6.0",
31
+ "@atlaskit/tokens": "^1.42.0",
32
32
  "@babel/runtime": "^7.0.0",
33
33
  "@emotion/react": "^11.7.1"
34
34
  },
@@ -48,7 +48,7 @@
48
48
  "lodash": "^4.17.21",
49
49
  "react-dom": "^16.8.0",
50
50
  "storybook-addon-performance": "^0.16.0",
51
- "typescript": "~4.9.5"
51
+ "typescript": "~5.4.2"
52
52
  },
53
53
  "keywords": [
54
54
  "atlaskit",
@@ -91,4 +91,4 @@
91
91
  "./theme": "./src/theme.tsx"
92
92
  },
93
93
  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
94
- }
94
+ }
@@ -6,7 +6,7 @@
6
6
  "sideEffects": false,
7
7
  "types": "../dist/types/range.d.ts",
8
8
  "typesVersions": {
9
- ">=4.5 <4.9": {
9
+ ">=4.5 <5.4": {
10
10
  "*": [
11
11
  "../dist/types-ts4.5/range.d.ts"
12
12
  ]
@@ -6,7 +6,7 @@
6
6
  "sideEffects": false,
7
7
  "types": "../dist/types/styled.d.ts",
8
8
  "typesVersions": {
9
- ">=4.5 <4.9": {
9
+ ">=4.5 <5.4": {
10
10
  "*": [
11
11
  "../dist/types-ts4.5/styled.d.ts"
12
12
  ]
@@ -6,7 +6,7 @@
6
6
  "sideEffects": false,
7
7
  "types": "../dist/types/theme.d.ts",
8
8
  "typesVersions": {
9
- ">=4.5 <4.9": {
9
+ ">=4.5 <5.4": {
10
10
  "*": [
11
11
  "../dist/types-ts4.5/theme.d.ts"
12
12
  ]
@@ -1,33 +0,0 @@
1
- ## API Report File for "@atlaskit/range"
2
-
3
- > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
4
-
5
- ```ts
6
-
7
- import { default as React_2 } from 'react';
8
-
9
- // @public (undocumented)
10
- type Combine<First, Second> = Omit<First, keyof Second> & Second;
11
-
12
- // @public (undocumented)
13
- const _default: React_2.ForwardRefExoticComponent<Omit<Omit<React_2.InputHTMLAttributes<HTMLInputElement>, "checked" | "disabled" | "required">, keyof OwnProps> & OwnProps & React_2.RefAttributes<HTMLInputElement>>;
14
- export default _default;
15
-
16
- // @public (undocumented)
17
- type OwnProps = {
18
- defaultValue?: number;
19
- isDisabled?: boolean;
20
- max?: number;
21
- min?: number;
22
- onChange?: (value: number) => void;
23
- step?: number;
24
- testId?: string;
25
- value?: number;
26
- };
27
-
28
- // @public (undocumented)
29
- export type RangeProps = Combine<Omit<React_2.InputHTMLAttributes<HTMLInputElement>, 'checked' | 'disabled' | 'required'>, OwnProps>;
30
-
31
- // (No @packageDocumentation comment for this package)
32
-
33
- ```