@atlaskit/range 7.1.6 → 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,46 +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
+
9
+ ## 7.1.7
10
+
11
+ ### Patch Changes
12
+
13
+ - [#38731](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38731) [`9af31f3c1ae`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9af31f3c1ae) - Delete version.json
14
+
3
15
  ## 7.1.6
4
16
 
5
17
  ### Patch Changes
6
18
 
7
- - [`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.
8
20
 
9
21
  ## 7.1.5
10
22
 
11
23
  ### Patch Changes
12
24
 
13
- - [`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.
14
26
 
15
27
  ## 7.1.4
16
28
 
17
29
  ### Patch Changes
18
30
 
19
- - [`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.
20
32
 
21
33
  ## 7.1.3
22
34
 
23
35
  ### Patch Changes
24
36
 
25
- - [`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.
26
38
 
27
39
  ## 7.1.2
28
40
 
29
41
  ### Patch Changes
30
42
 
31
- - [`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
32
44
 
33
45
  ## 7.1.1
34
46
 
35
47
  ### Patch Changes
36
48
 
37
- - [`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`
38
50
 
39
51
  ## 7.1.0
40
52
 
41
53
  ### Minor Changes
42
54
 
43
- - [`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
44
56
 
45
57
  ### Patch Changes
46
58
 
@@ -50,7 +62,7 @@
50
62
 
51
63
  ### Patch Changes
52
64
 
53
- - [`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`
54
66
  - Updated dependencies
55
67
 
56
68
  ## 7.0.3
@@ -75,7 +87,7 @@
75
87
 
76
88
  ### Major Changes
77
89
 
78
- - [`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:
79
91
 
80
92
  - The scrubber now applies the same color as the foreground
81
93
  - The disabled state has been altered; it's now a consistently applied opacity state overlay across the whole element
@@ -85,38 +97,38 @@
85
97
 
86
98
  ### Patch Changes
87
99
 
88
- - [`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.
89
101
 
90
102
  ## 6.1.0
91
103
 
92
104
  ### Minor Changes
93
105
 
94
- - [`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.
95
107
 
96
108
  ## 6.0.9
97
109
 
98
110
  ### Patch Changes
99
111
 
100
- - [`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`
101
113
 
102
114
  ## 6.0.8
103
115
 
104
116
  ### Patch Changes
105
117
 
106
- - [`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`.
107
119
 
108
120
  ## 6.0.7
109
121
 
110
122
  ### Patch Changes
111
123
 
112
- - [`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.
113
125
  - Updated dependencies
114
126
 
115
127
  ## 6.0.6
116
128
 
117
129
  ### Patch Changes
118
130
 
119
- - [`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.
120
132
 
121
133
  ## 6.0.5
122
134
 
@@ -128,7 +140,7 @@
128
140
 
129
141
  ### Patch Changes
130
142
 
131
- - [`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
132
144
 
133
145
  ## 6.0.3
134
146
 
@@ -152,7 +164,7 @@
152
164
 
153
165
  ### Major Changes
154
166
 
155
- - [`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.
156
168
  This includes custom theming using the `theme` prop, which has been removed.
157
169
 
158
170
  If you are not using the `theme` prop, there should be no breaking changes.
@@ -161,7 +173,7 @@
161
173
 
162
174
  ### Patch Changes
163
175
 
164
- - [`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.
165
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.
166
178
  - Updated dependencies
167
179
 
@@ -175,20 +187,20 @@
175
187
 
176
188
  ### Patch Changes
177
189
 
178
- - [`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
179
191
 
180
192
  ## 5.1.1
181
193
 
182
194
  ### Patch Changes
183
195
 
184
- - [`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.
185
197
  - Updated dependencies
186
198
 
187
199
  ## 5.1.0
188
200
 
189
201
  ### Minor Changes
190
202
 
191
- - [`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`.
192
204
 
193
205
  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
194
206
  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
@@ -207,43 +219,43 @@
207
219
 
208
220
  ### Patch Changes
209
221
 
210
- - [`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`.
211
223
 
212
224
  ## 5.0.9
213
225
 
214
226
  ### Patch Changes
215
227
 
216
- - [`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
217
229
 
218
230
  ## 5.0.8
219
231
 
220
232
  ### Patch Changes
221
233
 
222
- - [`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`
223
235
 
224
236
  ## 5.0.7
225
237
 
226
238
  ### Patch Changes
227
239
 
228
- - [`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.
229
241
 
230
242
  ## 5.0.6
231
243
 
232
244
  ### Patch Changes
233
245
 
234
- - [`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.
235
247
 
236
248
  ## 5.0.5
237
249
 
238
250
  ### Patch Changes
239
251
 
240
- - [`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
241
253
 
242
254
  ## 5.0.4
243
255
 
244
256
  ### Patch Changes
245
257
 
246
- - [`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.
247
259
  This requires version 3.8 of Typescript, read more about how we handle Typescript versions here: https://atlaskit.atlassian.com/get-started
248
260
  Also add `typescript` to `devDependencies` to denote version that the package was built with.
249
261
 
@@ -257,7 +269,7 @@
257
269
 
258
270
  ### Patch Changes
259
271
 
260
- - [`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
261
273
 
262
274
  Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade
263
275
  to prevent duplicates of tslib being bundled.
@@ -266,14 +278,14 @@
266
278
 
267
279
  ### Patch Changes
268
280
 
269
- - [`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
270
282
  - [`e99262c6f0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e99262c6f0) - All form elements now have a default font explicitly set
271
283
 
272
284
  ## 5.0.0
273
285
 
274
286
  ### Major Changes
275
287
 
276
- - [`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.
277
289
  For more information see: https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/39534
278
290
 
279
291
  ### Patch Changes
@@ -284,13 +296,13 @@
284
296
 
285
297
  ### Patch Changes
286
298
 
287
- - [`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
288
300
 
289
301
  ## 4.0.0
290
302
 
291
303
  ### Major Changes
292
304
 
293
- - [`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 🤩
294
306
 
295
307
  ### Changes
296
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.6",
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,5 +0,0 @@
1
- {
2
- "name": "@atlaskit/range",
3
- "version": "7.1.6",
4
- "sideEffects": false
5
- }
@@ -1,5 +0,0 @@
1
- {
2
- "name": "@atlaskit/range",
3
- "version": "7.1.6",
4
- "sideEffects": false
5
- }
@@ -1,5 +0,0 @@
1
- {
2
- "name": "@atlaskit/range",
3
- "version": "7.1.6",
4
- "sideEffects": false
5
- }
@@ -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
- ```