@atlaskit/range 10.0.0 → 10.0.1
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 +8 -0
- package/dist/cjs/styled.compiled.css +10 -10
- package/dist/cjs/styled.js +4 -17
- package/dist/es2019/styled.compiled.css +10 -10
- package/dist/es2019/styled.js +1 -2
- package/dist/esm/styled.compiled.css +10 -10
- package/dist/esm/styled.js +4 -17
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/range
|
|
2
2
|
|
|
3
|
+
## 10.0.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`7aef1e49e90ea`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7aef1e49e90ea) -
|
|
8
|
+
Removes redundant fallback color values via @atlaskit/theme
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
3
11
|
## 10.0.0
|
|
4
12
|
|
|
5
13
|
### Major Changes
|
|
@@ -23,15 +23,15 @@
|
|
|
23
23
|
._ru37idpf::-moz-range-track{border:0}
|
|
24
24
|
._vi4t2hjt::-webkit-slider-runnable-track{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out}
|
|
25
25
|
._10o7tlke::-moz-range-thumb{cursor:pointer}
|
|
26
|
-
.
|
|
26
|
+
._12el1w0t::-moz-range-thumb{background-color:var(--thumb-bg,var(--ds-background-neutral-bold,#292a2e))}
|
|
27
27
|
._142y1y44::-moz-range-track{height:4px}
|
|
28
|
-
.
|
|
28
|
+
._14h1b1q9{--thumb-shadow:var(--ds-UNSAFE-transparent,transparent)}
|
|
29
29
|
._15dp1vck{--track-bg:var(--ds-background-inverse-subtle,#00000029)}
|
|
30
|
-
.
|
|
30
|
+
._15dpi8nm{--track-bg:var(--ds-background-neutral,#0515240f)}
|
|
31
31
|
._168l1y44::-webkit-slider-runnable-track{height:4px}
|
|
32
32
|
._168li2wt::-webkit-slider-runnable-track{height:6px}
|
|
33
33
|
._18k7v77o::-webkit-slider-thumb{outline-offset:var(--ds-space-025,2px)}
|
|
34
|
-
.
|
|
34
|
+
._18lx1aqn{--track-fg:var(--ds-background-neutral-bold,#292a2e)}
|
|
35
35
|
._18lxof27{--track-fg:var(--ds-background-neutral-bold-pressed,#505258)}
|
|
36
36
|
._18postnw:after{position:absolute}
|
|
37
37
|
._18tdtlke::-webkit-slider-runnable-track{cursor:pointer}
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
._1cdcglyw::-webkit-slider-thumb{-webkit-appearance:none}
|
|
42
42
|
._1d8tmgnk::-webkit-slider-runnable-track{background-repeat:no-repeat}
|
|
43
43
|
._1drqof27{--thumb-bg:var(--ds-background-neutral-bold-pressed,#505258)}
|
|
44
|
-
.
|
|
44
|
+
._1esf1w0t::-webkit-slider-thumb{background-color:var(--thumb-bg,var(--ds-background-neutral-bold,#292a2e))}
|
|
45
45
|
._1f5t1osq::-moz-range-track{width:100%}
|
|
46
46
|
._1fov13gf:disabled::-moz-range-progress{cursor:not-allowed}
|
|
47
47
|
._1g2h1osq::-webkit-slider-runnable-track{width:100%}
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
._1hfkof27:after{background-color:var(--ds-background-neutral-bold-pressed,#505258)}
|
|
50
50
|
._1j552wxo:disabled{opacity:var(--ds-opacity-disabled,.4)}
|
|
51
51
|
._1j70pxbi::-webkit-slider-thumb{height:var(--ds-space-200,1pc)}
|
|
52
|
-
.
|
|
52
|
+
._1jhc1ibz:hover:not(:disabled){--track-fg:var(--ds-background-neutral-bold-hovered,#3b3d42)}
|
|
53
53
|
._1kd2i2wt::-moz-range-progress{height:6px}
|
|
54
54
|
._1kzev77o::-moz-range-thumb{outline-offset:var(--ds-space-025,2px)}
|
|
55
55
|
._1mn5pxbi::-moz-range-thumb{height:var(--ds-space-200,1pc)}
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
._1p201osq:dir(rtl)::-webkit-slider-runnable-track{background-position:100%}
|
|
58
58
|
._1peq2wxo:after{opacity:var(--ds-opacity-disabled,.4)}
|
|
59
59
|
._1qdg1y44:after{height:4px}
|
|
60
|
-
.
|
|
60
|
+
._1rucof27:active:not(:disabled){--thumb-bg:var(--ds-background-neutral-bold-pressed,#505258)}
|
|
61
61
|
._1sdc196n::-webkit-slider-thumb{margin-block-start:var(--ds-space-negative-075,-6px)}
|
|
62
62
|
._1sdc1lpd::-webkit-slider-thumb{margin-block-start:-5px}
|
|
63
63
|
._1ssqtlke::-moz-range-progress{cursor:pointer}
|
|
@@ -77,18 +77,18 @@
|
|
|
77
77
|
._g0nfo1yi:after{inset-inline-start:calc(100% - 3px)}
|
|
78
78
|
._g4ppusvi::-moz-range-thumb{box-sizing:border-box}
|
|
79
79
|
._j5dh13gf:disabled{cursor:not-allowed}
|
|
80
|
-
.
|
|
80
|
+
._jxar1ibz:hover:not(:disabled){--thumb-bg:var(--ds-background-neutral-bold-hovered,#3b3d42)}
|
|
81
81
|
._kqswh2mm{position:relative}
|
|
82
82
|
._np53xlkz::-webkit-slider-runnable-track{background-size:var(--track-fg-width) 100%}
|
|
83
83
|
._r763pxbi::-moz-range-thumb{width:var(--ds-space-200,1pc)}
|
|
84
84
|
._u98zpxbi::-webkit-slider-thumb{width:var(--ds-space-200,1pc)}
|
|
85
85
|
._vt2s1w6o::-moz-range-progress{background-color:var(--track-fg)}
|
|
86
86
|
._wstuglyw{-webkit-appearance:none}
|
|
87
|
-
._ydqg1xpu:hover:not(:disabled){--track-bg:var(--_rf9ekb)}
|
|
88
87
|
._ydqgmpja:hover:not(:disabled){--track-bg:var(--ds-background-inverse-subtle-hovered,#0000003d)}
|
|
88
|
+
._ydqgplhp:hover:not(:disabled){--track-bg:var(--ds-background-neutral-hovered,#0b120e24)}
|
|
89
89
|
._yfyntlke::-webkit-slider-thumb{cursor:pointer}
|
|
90
90
|
._z0ai1y44:after{width:4px}
|
|
91
91
|
._1hvw1o36:focus{outline-width:medium}
|
|
92
92
|
._49pcglyw:focus{outline-style:none}
|
|
93
93
|
._nt751r31:focus{outline-color:currentColor}
|
|
94
|
-
.
|
|
94
|
+
._164c1v1w:focus-visible{--thumb-border:var(--ds-border-focused,#4688ec)}
|
package/dist/cjs/styled.js
CHANGED
|
@@ -12,14 +12,10 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
12
12
|
var React = _react;
|
|
13
13
|
var _runtime = require("@compiled/react/runtime");
|
|
14
14
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
15
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
16
15
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
17
16
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
18
|
-
var _colors = require("@atlaskit/theme/colors");
|
|
19
17
|
var _excluded = ["valuePercent", "style"];
|
|
20
18
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
21
|
-
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; }
|
|
22
|
-
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; }
|
|
23
19
|
var rangeHeight = 40; // Height of the range input, used for the track and thumb
|
|
24
20
|
var trackHeight = 6; // Height of the track, used for the track and thumb
|
|
25
21
|
var thumbSize = "var(--ds-space-200, 16px)"; // Size of the thumb, used for the thumb styles
|
|
@@ -43,22 +39,13 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (props,
|
|
|
43
39
|
style = props.style,
|
|
44
40
|
strippedProps = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
45
41
|
var input = /*#__PURE__*/React.createElement("input", (0, _extends2.default)({}, strippedProps, {
|
|
46
|
-
|
|
47
|
-
className: (0, _runtime.ax)(["_1bsb1osq _4t3i1ylp _bfhk1j28 _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1qll _m8f8bpmo _1yz62hjt _1bdkusvi _u98zpxbi _1j70pxbi _1esf4alp _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6tdlb4i _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1qll _1rf3bpmo _1yeu2hjt _g4ppusvi _r763pxbi _1mn5pxbi _12el4alp _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywlb4i _1tcb2hjt _aoww1osq _1kd2i2wt _vt2s1w6o _1ssqtlke _ru37idpf _1gvolb4i _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h11gpr _15dpptpz _18lx1n8f _jxarjiw3 _ydqg1xpu _1jhcjiw3 _1rucy2jz _164c3zdg", "_1drqof27 _15dp1vck _18lxof27 _g6tdfajl _168li2wt _37ywfajl _1kd2i2wt _1sdc1lpd _ydqgmpja", (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && "_g6td1rr0 _37yw1rr0 _1gvo1rr0"]),
|
|
48
|
-
style: _objectSpread(_objectSpread({}, {
|
|
42
|
+
style: {
|
|
49
43
|
// We are creating a css variable to control the "progress" portion of the range input
|
|
50
44
|
// This avoids us needing to create a new css class for each new percentage value
|
|
51
45
|
'--track-fg-width': "".concat(valuePercent, "%")
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
"--_19g1tth": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(_colors.N30, ")")),
|
|
56
|
-
"--_1eby16r": (0, _runtime.ix)("var(--ds-background-neutral-bold, ".concat(_colors.B400, ")")),
|
|
57
|
-
"--_14t3dsg": (0, _runtime.ix)("var(--ds-background-neutral-bold-hovered, ".concat(_colors.B300, ")")),
|
|
58
|
-
"--_rf9ekb": (0, _runtime.ix)("var(--ds-background-neutral-hovered, ".concat(_colors.N40, ")")),
|
|
59
|
-
"--_1pam7of": (0, _runtime.ix)("var(--ds-background-neutral-bold-pressed, ".concat(_colors.B200, ")")),
|
|
60
|
-
"--_xjqa3d": (0, _runtime.ix)("var(--ds-border-focused, ".concat(_colors.B200, ")"))
|
|
61
|
-
})
|
|
46
|
+
},
|
|
47
|
+
ref: ref,
|
|
48
|
+
className: (0, _runtime.ax)(["_1bsb1osq _4t3i1ylp _bfhk1j28 _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1qll _m8f8bpmo _1yz62hjt _1bdkusvi _u98zpxbi _1j70pxbi _1esf1w0t _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6tdlb4i _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1qll _1rf3bpmo _1yeu2hjt _g4ppusvi _r763pxbi _1mn5pxbi _12el1w0t _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywlb4i _1tcb2hjt _aoww1osq _1kd2i2wt _vt2s1w6o _1ssqtlke _ru37idpf _1gvolb4i _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h1b1q9 _15dpi8nm _18lx1aqn _jxar1ibz _ydqgplhp _1jhc1ibz _1rucof27 _164c1v1w", "_1drqof27 _15dp1vck _18lxof27 _g6tdfajl _168li2wt _37ywfajl _1kd2i2wt _1sdc1lpd _ydqgmpja", (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && "_g6td1rr0 _37yw1rr0 _1gvo1rr0"])
|
|
62
49
|
}));
|
|
63
50
|
return /*#__PURE__*/React.createElement("div", {
|
|
64
51
|
className: (0, _runtime.ax)([trackStyles.root, strippedProps.disabled && trackStyles.disabled])
|
|
@@ -23,16 +23,16 @@
|
|
|
23
23
|
._ru37idpf::-moz-range-track{border:0}
|
|
24
24
|
._vi4t2hjt::-webkit-slider-runnable-track{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out}
|
|
25
25
|
._10o7tlke::-moz-range-thumb{cursor:pointer}
|
|
26
|
-
.
|
|
26
|
+
._12el1w0t::-moz-range-thumb{background-color:var(--thumb-bg,var(--ds-background-neutral-bold,#292a2e))}
|
|
27
27
|
._142y1y44::-moz-range-track{height:4px}
|
|
28
|
-
.
|
|
28
|
+
._14h1b1q9{--thumb-shadow:var(--ds-UNSAFE-transparent,transparent)}
|
|
29
29
|
._15dp1vck{--track-bg:var(--ds-background-inverse-subtle,#00000029)}
|
|
30
|
-
.
|
|
30
|
+
._15dpi8nm{--track-bg:var(--ds-background-neutral,#0515240f)}
|
|
31
31
|
._168l1y44::-webkit-slider-runnable-track{height:4px}
|
|
32
32
|
._168li2wt::-webkit-slider-runnable-track{height:6px}
|
|
33
33
|
._18k7v77o::-webkit-slider-thumb{outline-offset:var(--ds-space-025,2px)}
|
|
34
|
+
._18lx1aqn{--track-fg:var(--ds-background-neutral-bold,#292a2e)}
|
|
34
35
|
._18lxof27{--track-fg:var(--ds-background-neutral-bold-pressed,#505258)}
|
|
35
|
-
._18lxyvsn{--track-fg:var(--ds-background-neutral-bold,#0052cc)}
|
|
36
36
|
._18postnw:after{position:absolute}
|
|
37
37
|
._18tdtlke::-webkit-slider-runnable-track{cursor:pointer}
|
|
38
38
|
._19nq1ssb:after{inset-block-start:50%}
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
._1cdcglyw::-webkit-slider-thumb{-webkit-appearance:none}
|
|
42
42
|
._1d8tmgnk::-webkit-slider-runnable-track{background-repeat:no-repeat}
|
|
43
43
|
._1drqof27{--thumb-bg:var(--ds-background-neutral-bold-pressed,#505258)}
|
|
44
|
-
.
|
|
44
|
+
._1esf1w0t::-webkit-slider-thumb{background-color:var(--thumb-bg,var(--ds-background-neutral-bold,#292a2e))}
|
|
45
45
|
._1f5t1osq::-moz-range-track{width:100%}
|
|
46
46
|
._1fov13gf:disabled::-moz-range-progress{cursor:not-allowed}
|
|
47
47
|
._1g2h1osq::-webkit-slider-runnable-track{width:100%}
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
._1hfkof27:after{background-color:var(--ds-background-neutral-bold-pressed,#505258)}
|
|
50
50
|
._1j552wxo:disabled{opacity:var(--ds-opacity-disabled,.4)}
|
|
51
51
|
._1j70pxbi::-webkit-slider-thumb{height:var(--ds-space-200,1pc)}
|
|
52
|
-
.
|
|
52
|
+
._1jhc1ibz:hover:not(:disabled){--track-fg:var(--ds-background-neutral-bold-hovered,#3b3d42)}
|
|
53
53
|
._1kd2i2wt::-moz-range-progress{height:6px}
|
|
54
54
|
._1kzev77o::-moz-range-thumb{outline-offset:var(--ds-space-025,2px)}
|
|
55
55
|
._1mn5pxbi::-moz-range-thumb{height:var(--ds-space-200,1pc)}
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
._1p201osq:dir(rtl)::-webkit-slider-runnable-track{background-position:100%}
|
|
58
58
|
._1peq2wxo:after{opacity:var(--ds-opacity-disabled,.4)}
|
|
59
59
|
._1qdg1y44:after{height:4px}
|
|
60
|
-
.
|
|
60
|
+
._1rucof27:active:not(:disabled){--thumb-bg:var(--ds-background-neutral-bold-pressed,#505258)}
|
|
61
61
|
._1sdc196n::-webkit-slider-thumb{margin-block-start:var(--ds-space-negative-075,-6px)}
|
|
62
62
|
._1sdc1lpd::-webkit-slider-thumb{margin-block-start:-5px}
|
|
63
63
|
._1ssqtlke::-moz-range-progress{cursor:pointer}
|
|
@@ -77,18 +77,18 @@
|
|
|
77
77
|
._g0nfo1yi:after{inset-inline-start:calc(100% - 3px)}
|
|
78
78
|
._g4ppusvi::-moz-range-thumb{box-sizing:border-box}
|
|
79
79
|
._j5dh13gf:disabled{cursor:not-allowed}
|
|
80
|
-
.
|
|
80
|
+
._jxar1ibz:hover:not(:disabled){--thumb-bg:var(--ds-background-neutral-bold-hovered,#3b3d42)}
|
|
81
81
|
._kqswh2mm{position:relative}
|
|
82
82
|
._np53xlkz::-webkit-slider-runnable-track{background-size:var(--track-fg-width) 100%}
|
|
83
83
|
._r763pxbi::-moz-range-thumb{width:var(--ds-space-200,1pc)}
|
|
84
84
|
._u98zpxbi::-webkit-slider-thumb{width:var(--ds-space-200,1pc)}
|
|
85
85
|
._vt2s1w6o::-moz-range-progress{background-color:var(--track-fg)}
|
|
86
86
|
._wstuglyw{-webkit-appearance:none}
|
|
87
|
-
._ydqghkel:hover:not(:disabled){--track-bg:var(--ds-background-neutral-hovered,#dfe1e6)}
|
|
88
87
|
._ydqgmpja:hover:not(:disabled){--track-bg:var(--ds-background-inverse-subtle-hovered,#0000003d)}
|
|
88
|
+
._ydqgplhp:hover:not(:disabled){--track-bg:var(--ds-background-neutral-hovered,#0b120e24)}
|
|
89
89
|
._yfyntlke::-webkit-slider-thumb{cursor:pointer}
|
|
90
90
|
._z0ai1y44:after{width:4px}
|
|
91
91
|
._1hvw1o36:focus{outline-width:medium}
|
|
92
92
|
._49pcglyw:focus{outline-style:none}
|
|
93
93
|
._nt751r31:focus{outline-color:currentColor}
|
|
94
|
-
.
|
|
94
|
+
._164c1v1w:focus-visible{--thumb-border:var(--ds-border-focused,#4688ec)}
|
package/dist/es2019/styled.js
CHANGED
|
@@ -5,7 +5,6 @@ import * as React from 'react';
|
|
|
5
5
|
import { ax, ix } from "@compiled/react/runtime";
|
|
6
6
|
import { forwardRef } from 'react';
|
|
7
7
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
|
-
import { B200, B300, B400, N30, N40, N50A, N60A } from '@atlaskit/theme/colors';
|
|
9
8
|
const rangeHeight = 40; // Height of the range input, used for the track and thumb
|
|
10
9
|
const trackHeight = 6; // Height of the track, used for the track and thumb
|
|
11
10
|
const thumbSize = "var(--ds-space-200, 16px)"; // Size of the thumb, used for the thumb styles
|
|
@@ -37,7 +36,7 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
37
36
|
'--track-fg-width': `${valuePercent}%`
|
|
38
37
|
},
|
|
39
38
|
ref: ref,
|
|
40
|
-
className: ax(["_1bsb1osq _4t3i1ylp _bfhk1j28 _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1qll _m8f8bpmo _1yz62hjt _1bdkusvi _u98zpxbi _1j70pxbi
|
|
39
|
+
className: ax(["_1bsb1osq _4t3i1ylp _bfhk1j28 _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1qll _m8f8bpmo _1yz62hjt _1bdkusvi _u98zpxbi _1j70pxbi _1esf1w0t _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6tdlb4i _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1qll _1rf3bpmo _1yeu2hjt _g4ppusvi _r763pxbi _1mn5pxbi _12el1w0t _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywlb4i _1tcb2hjt _aoww1osq _1kd2i2wt _vt2s1w6o _1ssqtlke _ru37idpf _1gvolb4i _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h1b1q9 _15dpi8nm _18lx1aqn _jxar1ibz _ydqgplhp _1jhc1ibz _1rucof27 _164c1v1w", "_1drqof27 _15dp1vck _18lxof27 _g6tdfajl _168li2wt _37ywfajl _1kd2i2wt _1sdc1lpd _ydqgmpja", fg('platform-dst-shape-theme-default') && "_g6td1rr0 _37yw1rr0 _1gvo1rr0"])
|
|
41
40
|
}));
|
|
42
41
|
return /*#__PURE__*/React.createElement("div", {
|
|
43
42
|
className: ax([trackStyles.root, strippedProps.disabled && trackStyles.disabled])
|
|
@@ -23,15 +23,15 @@
|
|
|
23
23
|
._ru37idpf::-moz-range-track{border:0}
|
|
24
24
|
._vi4t2hjt::-webkit-slider-runnable-track{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out}
|
|
25
25
|
._10o7tlke::-moz-range-thumb{cursor:pointer}
|
|
26
|
-
.
|
|
26
|
+
._12el1w0t::-moz-range-thumb{background-color:var(--thumb-bg,var(--ds-background-neutral-bold,#292a2e))}
|
|
27
27
|
._142y1y44::-moz-range-track{height:4px}
|
|
28
|
-
.
|
|
28
|
+
._14h1b1q9{--thumb-shadow:var(--ds-UNSAFE-transparent,transparent)}
|
|
29
29
|
._15dp1vck{--track-bg:var(--ds-background-inverse-subtle,#00000029)}
|
|
30
|
-
.
|
|
30
|
+
._15dpi8nm{--track-bg:var(--ds-background-neutral,#0515240f)}
|
|
31
31
|
._168l1y44::-webkit-slider-runnable-track{height:4px}
|
|
32
32
|
._168li2wt::-webkit-slider-runnable-track{height:6px}
|
|
33
33
|
._18k7v77o::-webkit-slider-thumb{outline-offset:var(--ds-space-025,2px)}
|
|
34
|
-
.
|
|
34
|
+
._18lx1aqn{--track-fg:var(--ds-background-neutral-bold,#292a2e)}
|
|
35
35
|
._18lxof27{--track-fg:var(--ds-background-neutral-bold-pressed,#505258)}
|
|
36
36
|
._18postnw:after{position:absolute}
|
|
37
37
|
._18tdtlke::-webkit-slider-runnable-track{cursor:pointer}
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
._1cdcglyw::-webkit-slider-thumb{-webkit-appearance:none}
|
|
42
42
|
._1d8tmgnk::-webkit-slider-runnable-track{background-repeat:no-repeat}
|
|
43
43
|
._1drqof27{--thumb-bg:var(--ds-background-neutral-bold-pressed,#505258)}
|
|
44
|
-
.
|
|
44
|
+
._1esf1w0t::-webkit-slider-thumb{background-color:var(--thumb-bg,var(--ds-background-neutral-bold,#292a2e))}
|
|
45
45
|
._1f5t1osq::-moz-range-track{width:100%}
|
|
46
46
|
._1fov13gf:disabled::-moz-range-progress{cursor:not-allowed}
|
|
47
47
|
._1g2h1osq::-webkit-slider-runnable-track{width:100%}
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
._1hfkof27:after{background-color:var(--ds-background-neutral-bold-pressed,#505258)}
|
|
50
50
|
._1j552wxo:disabled{opacity:var(--ds-opacity-disabled,.4)}
|
|
51
51
|
._1j70pxbi::-webkit-slider-thumb{height:var(--ds-space-200,1pc)}
|
|
52
|
-
.
|
|
52
|
+
._1jhc1ibz:hover:not(:disabled){--track-fg:var(--ds-background-neutral-bold-hovered,#3b3d42)}
|
|
53
53
|
._1kd2i2wt::-moz-range-progress{height:6px}
|
|
54
54
|
._1kzev77o::-moz-range-thumb{outline-offset:var(--ds-space-025,2px)}
|
|
55
55
|
._1mn5pxbi::-moz-range-thumb{height:var(--ds-space-200,1pc)}
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
._1p201osq:dir(rtl)::-webkit-slider-runnable-track{background-position:100%}
|
|
58
58
|
._1peq2wxo:after{opacity:var(--ds-opacity-disabled,.4)}
|
|
59
59
|
._1qdg1y44:after{height:4px}
|
|
60
|
-
.
|
|
60
|
+
._1rucof27:active:not(:disabled){--thumb-bg:var(--ds-background-neutral-bold-pressed,#505258)}
|
|
61
61
|
._1sdc196n::-webkit-slider-thumb{margin-block-start:var(--ds-space-negative-075,-6px)}
|
|
62
62
|
._1sdc1lpd::-webkit-slider-thumb{margin-block-start:-5px}
|
|
63
63
|
._1ssqtlke::-moz-range-progress{cursor:pointer}
|
|
@@ -77,18 +77,18 @@
|
|
|
77
77
|
._g0nfo1yi:after{inset-inline-start:calc(100% - 3px)}
|
|
78
78
|
._g4ppusvi::-moz-range-thumb{box-sizing:border-box}
|
|
79
79
|
._j5dh13gf:disabled{cursor:not-allowed}
|
|
80
|
-
.
|
|
80
|
+
._jxar1ibz:hover:not(:disabled){--thumb-bg:var(--ds-background-neutral-bold-hovered,#3b3d42)}
|
|
81
81
|
._kqswh2mm{position:relative}
|
|
82
82
|
._np53xlkz::-webkit-slider-runnable-track{background-size:var(--track-fg-width) 100%}
|
|
83
83
|
._r763pxbi::-moz-range-thumb{width:var(--ds-space-200,1pc)}
|
|
84
84
|
._u98zpxbi::-webkit-slider-thumb{width:var(--ds-space-200,1pc)}
|
|
85
85
|
._vt2s1w6o::-moz-range-progress{background-color:var(--track-fg)}
|
|
86
86
|
._wstuglyw{-webkit-appearance:none}
|
|
87
|
-
._ydqg1xpu:hover:not(:disabled){--track-bg:var(--_rf9ekb)}
|
|
88
87
|
._ydqgmpja:hover:not(:disabled){--track-bg:var(--ds-background-inverse-subtle-hovered,#0000003d)}
|
|
88
|
+
._ydqgplhp:hover:not(:disabled){--track-bg:var(--ds-background-neutral-hovered,#0b120e24)}
|
|
89
89
|
._yfyntlke::-webkit-slider-thumb{cursor:pointer}
|
|
90
90
|
._z0ai1y44:after{width:4px}
|
|
91
91
|
._1hvw1o36:focus{outline-width:medium}
|
|
92
92
|
._49pcglyw:focus{outline-style:none}
|
|
93
93
|
._nt751r31:focus{outline-color:currentColor}
|
|
94
|
-
.
|
|
94
|
+
._164c1v1w:focus-visible{--thumb-border:var(--ds-border-focused,#4688ec)}
|
package/dist/esm/styled.js
CHANGED
|
@@ -1,16 +1,12 @@
|
|
|
1
1
|
/* styled.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
5
4
|
var _excluded = ["valuePercent", "style"];
|
|
6
5
|
import "./styled.compiled.css";
|
|
7
6
|
import * as React from 'react';
|
|
8
7
|
import { ax, ix } from "@compiled/react/runtime";
|
|
9
|
-
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; }
|
|
10
|
-
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; }
|
|
11
8
|
import { forwardRef } from 'react';
|
|
12
9
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
13
|
-
import { B200, B300, B400, N30, N40, N50A, N60A } from '@atlaskit/theme/colors';
|
|
14
10
|
var rangeHeight = 40; // Height of the range input, used for the track and thumb
|
|
15
11
|
var trackHeight = 6; // Height of the track, used for the track and thumb
|
|
16
12
|
var thumbSize = "var(--ds-space-200, 16px)"; // Size of the thumb, used for the thumb styles
|
|
@@ -34,22 +30,13 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
34
30
|
style = props.style,
|
|
35
31
|
strippedProps = _objectWithoutProperties(props, _excluded);
|
|
36
32
|
var input = /*#__PURE__*/React.createElement("input", _extends({}, strippedProps, {
|
|
37
|
-
|
|
38
|
-
className: ax(["_1bsb1osq _4t3i1ylp _bfhk1j28 _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1qll _m8f8bpmo _1yz62hjt _1bdkusvi _u98zpxbi _1j70pxbi _1esf4alp _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6tdlb4i _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1qll _1rf3bpmo _1yeu2hjt _g4ppusvi _r763pxbi _1mn5pxbi _12el4alp _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywlb4i _1tcb2hjt _aoww1osq _1kd2i2wt _vt2s1w6o _1ssqtlke _ru37idpf _1gvolb4i _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h11gpr _15dpptpz _18lx1n8f _jxarjiw3 _ydqg1xpu _1jhcjiw3 _1rucy2jz _164c3zdg", "_1drqof27 _15dp1vck _18lxof27 _g6tdfajl _168li2wt _37ywfajl _1kd2i2wt _1sdc1lpd _ydqgmpja", fg('platform-dst-shape-theme-default') && "_g6td1rr0 _37yw1rr0 _1gvo1rr0"]),
|
|
39
|
-
style: _objectSpread(_objectSpread({}, {
|
|
33
|
+
style: {
|
|
40
34
|
// We are creating a css variable to control the "progress" portion of the range input
|
|
41
35
|
// This avoids us needing to create a new css class for each new percentage value
|
|
42
36
|
'--track-fg-width': "".concat(valuePercent, "%")
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
"--_19g1tth": ix("var(--ds-background-neutral, ".concat(N30, ")")),
|
|
47
|
-
"--_1eby16r": ix("var(--ds-background-neutral-bold, ".concat(B400, ")")),
|
|
48
|
-
"--_14t3dsg": ix("var(--ds-background-neutral-bold-hovered, ".concat(B300, ")")),
|
|
49
|
-
"--_rf9ekb": ix("var(--ds-background-neutral-hovered, ".concat(N40, ")")),
|
|
50
|
-
"--_1pam7of": ix("var(--ds-background-neutral-bold-pressed, ".concat(B200, ")")),
|
|
51
|
-
"--_xjqa3d": ix("var(--ds-border-focused, ".concat(B200, ")"))
|
|
52
|
-
})
|
|
37
|
+
},
|
|
38
|
+
ref: ref,
|
|
39
|
+
className: ax(["_1bsb1osq _4t3i1ylp _bfhk1j28 _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1qll _m8f8bpmo _1yz62hjt _1bdkusvi _u98zpxbi _1j70pxbi _1esf1w0t _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6tdlb4i _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1qll _1rf3bpmo _1yeu2hjt _g4ppusvi _r763pxbi _1mn5pxbi _12el1w0t _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywlb4i _1tcb2hjt _aoww1osq _1kd2i2wt _vt2s1w6o _1ssqtlke _ru37idpf _1gvolb4i _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h1b1q9 _15dpi8nm _18lx1aqn _jxar1ibz _ydqgplhp _1jhc1ibz _1rucof27 _164c1v1w", "_1drqof27 _15dp1vck _18lxof27 _g6tdfajl _168li2wt _37ywfajl _1kd2i2wt _1sdc1lpd _ydqgmpja", fg('platform-dst-shape-theme-default') && "_g6td1rr0 _37yw1rr0 _1gvo1rr0"])
|
|
53
40
|
}));
|
|
54
41
|
return /*#__PURE__*/React.createElement("div", {
|
|
55
42
|
className: ax([trackStyles.root, strippedProps.disabled && trackStyles.disabled])
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/range",
|
|
3
|
-
"version": "10.0.
|
|
3
|
+
"version": "10.0.1",
|
|
4
4
|
"description": "A range lets users choose an approximate value on a slider.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"@atlaskit/ds-lib": "^6.0.0",
|
|
29
29
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
30
30
|
"@atlaskit/theme": "^22.0.0",
|
|
31
|
-
"@atlaskit/tokens": "^11.
|
|
31
|
+
"@atlaskit/tokens": "^11.4.0",
|
|
32
32
|
"@babel/runtime": "^7.0.0",
|
|
33
33
|
"@compiled/react": "^0.20.0"
|
|
34
34
|
},
|
|
@@ -42,11 +42,11 @@
|
|
|
42
42
|
"@atlaskit/button": "^23.10.0",
|
|
43
43
|
"@atlaskit/checkbox": "^17.3.0",
|
|
44
44
|
"@atlaskit/docs": "^11.7.0",
|
|
45
|
-
"@atlaskit/form": "^15.
|
|
45
|
+
"@atlaskit/form": "^15.5.0",
|
|
46
46
|
"@atlaskit/link": "^3.3.0",
|
|
47
|
-
"@atlaskit/primitives": "^18.
|
|
47
|
+
"@atlaskit/primitives": "^18.1.0",
|
|
48
48
|
"@atlaskit/section-message": "^8.12.0",
|
|
49
|
-
"@atlaskit/tooltip": "^
|
|
49
|
+
"@atlaskit/tooltip": "^21.0.0",
|
|
50
50
|
"@atlassian/ssr-tests": "workspace:^",
|
|
51
51
|
"@atlassian/structured-docs-types": "workspace:^",
|
|
52
52
|
"@testing-library/react": "^16.3.0",
|