@atlaskit/checkbox 17.1.14 → 17.1.16
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 +16 -0
- package/codemods/15.0.0-size-removal.tsx +4 -1
- package/dist/cjs/checkbox.compiled.css +27 -8
- package/dist/cjs/checkbox.js +3 -3
- package/dist/cjs/internal/checkbox-icon.js +28 -24
- package/dist/cjs/internal/label-text.js +1 -1
- package/dist/cjs/internal/label.compiled.css +1 -1
- package/dist/cjs/internal/label.js +2 -3
- package/dist/cjs/internal/required-indicator.js +1 -1
- package/dist/es2019/checkbox.compiled.css +27 -8
- package/dist/es2019/checkbox.js +3 -3
- package/dist/es2019/internal/checkbox-icon.js +28 -24
- package/dist/es2019/internal/label-text.js +1 -1
- package/dist/es2019/internal/label.js +1 -1
- package/dist/es2019/internal/required-indicator.js +1 -1
- package/dist/esm/checkbox.compiled.css +27 -8
- package/dist/esm/checkbox.js +3 -3
- package/dist/esm/internal/checkbox-icon.js +28 -24
- package/dist/esm/internal/label-text.js +1 -1
- package/dist/esm/internal/label.compiled.css +1 -1
- package/dist/esm/internal/label.js +2 -3
- package/dist/esm/internal/required-indicator.js +1 -1
- package/dist/types/checkbox.d.ts +7 -32
- package/dist/types-ts4.5/checkbox.d.ts +7 -32
- package/offerings.json +37 -0
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/checkbox
|
|
2
2
|
|
|
3
|
+
## 17.1.16
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`437668dfbdec9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/437668dfbdec9) -
|
|
8
|
+
Add explicit types to a number of DST components
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 17.1.15
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`f0662cd7a143e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f0662cd7a143e) -
|
|
16
|
+
Internal changes to how borders are applied.
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
|
|
3
19
|
## 17.1.14
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
import type { API, FileInfo, Options } from 'jscodeshift';
|
|
2
|
+
|
|
1
3
|
import { removeSize } from './migrations/remove-props';
|
|
2
4
|
import { createTransformer } from './utils';
|
|
3
5
|
|
|
4
|
-
const transformer
|
|
6
|
+
const transformer: (fileInfo: FileInfo, { jscodeshift }: API, options: Options) => string =
|
|
7
|
+
createTransformer('@atlaskit/checkbox', [removeSize]);
|
|
5
8
|
|
|
6
9
|
export default transformer;
|
|
@@ -1,53 +1,72 @@
|
|
|
1
1
|
|
|
2
2
|
._19itglyw{border:none}
|
|
3
3
|
._19op11so+svg rect:first-of-type{transition:stroke .2s ease-in-out}
|
|
4
|
-
.
|
|
4
|
+
._1dk71nfn._1dk71nfn:focus+svg{outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#2684ff)}
|
|
5
|
+
._1ef78r4n._1ef78r4n:checked:focus+svg{border-radius:var(--ds-radius-small,.25rem)}
|
|
6
|
+
._1h6r8r4n._1h6r8r4n:focus+svg{border-radius:var(--ds-radius-small,.25rem)}
|
|
5
7
|
._9bg71mn3+svg{transition:color .2s ease-in-out,fill .2s ease-in-out}
|
|
6
8
|
._nd5lfibj{grid-area:1/1/2/2}
|
|
7
9
|
._r050fibj+svg{grid-area:1/1/2/2}
|
|
8
|
-
.
|
|
9
|
-
._10y313gf:disabled+svg
|
|
10
|
+
._smzg1nfn._smzg1nfn:checked:focus+svg{outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#2684ff)}._10oaq2ws:checked[data-invalid]+svg{--checkbox-border-color:var(--local-border-checked-invalid)}
|
|
11
|
+
._10y313gf:disabled+svg{cursor:not-allowed}
|
|
10
12
|
._12ji1r31{outline-color:currentColor}
|
|
11
13
|
._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
|
|
14
|
+
._12sr13gf:disabled[data-invalid]+svg{cursor:not-allowed}
|
|
12
15
|
._12y31o36{outline-width:medium}
|
|
13
16
|
._13wo93zu+svg{--checkbox-background-color:var(--local-background)}
|
|
17
|
+
._141bmz2b:disabled:active+svg{--checkbox-background-color:var(--local-background-disabled)}
|
|
14
18
|
._15y61vek:active+svg{--checkbox-border-color:var(--local-border-active)}
|
|
15
19
|
._1610e4h9+svg rect:first-of-type{stroke-width:var(--ds-border-width,1px)}
|
|
16
|
-
._16jiglyw:disabled+svg
|
|
20
|
+
._16jiglyw:disabled+svg{pointer-events:none}
|
|
17
21
|
._18qu1ps2:indeterminate+svg{--checkbox-background-color:var(--local-background-checked)}
|
|
22
|
+
._1adw13gf:disabled:hover+svg{cursor:not-allowed}
|
|
18
23
|
._1ah9199y:hover+svg{--checkbox-border-color:var(--local-border-hover)}
|
|
19
24
|
._1bok170n:checked+svg{--checkbox-border-color:var(--local-border-checked)}
|
|
20
25
|
._1bsb1osq{width:100%}
|
|
26
|
+
._1efy1diq:disabled:hover+svg{--checkbox-border-color:var(--local-border-disabled)}
|
|
21
27
|
._1fo21cni+svg{fill:var(--checkbox-tick-color)}
|
|
22
28
|
._1frj180l:checked:hover+svg{--checkbox-background-color:var(--local-background-checked-hover)}
|
|
23
29
|
._1g52170n:indeterminate+svg{--checkbox-border-color:var(--local-border-checked)}
|
|
30
|
+
._1jbnglyw:disabled[data-invalid]+svg{pointer-events:none}
|
|
31
|
+
._1jiz1diq:disabled:active+svg{--checkbox-border-color:var(--local-border-disabled)}
|
|
24
32
|
._1log17cl:indeterminate+svg{--checkbox-tick-color:var(--local-tick-checked)}
|
|
25
33
|
._1mhr17cl:checked+svg{--checkbox-tick-color:var(--local-tick-checked)}
|
|
34
|
+
._1niqglyw:disabled:focus+svg{pointer-events:none}
|
|
35
|
+
._1oav1diq:disabled[data-invalid]+svg{--checkbox-border-color:var(--local-border-disabled)}
|
|
26
36
|
._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
|
|
27
37
|
._1qu2glyw{outline-style:none}
|
|
28
38
|
._1vv91diq:disabled:indeterminate+svg{--checkbox-border-color:var(--local-border-disabled)}
|
|
39
|
+
._1wt913gf:disabled:active+svg{cursor:not-allowed}
|
|
40
|
+
._255gmz2b:disabled:focus+svg{--checkbox-background-color:var(--local-background-disabled)}
|
|
29
41
|
._32hzmz2b:disabled:indeterminate+svg{--checkbox-background-color:var(--local-background-disabled)}
|
|
30
42
|
._4t3i1osq{height:100%}
|
|
43
|
+
._693jglyw:disabled:active+svg{pointer-events:none}
|
|
31
44
|
._6rthze3t{margin-block-end:var(--ds-space-0,0)}
|
|
32
45
|
._8gq114p8+svg{--checkbox-tick-color:var(--local-tick-rest)}
|
|
33
46
|
._a30fhteq+svg rect:first-of-type{stroke:var(--checkbox-border-color)}
|
|
34
47
|
._ahbqze3t{margin-inline-start:var(--ds-space-0,0)}
|
|
35
|
-
._axq81diq:disabled+svg
|
|
48
|
+
._axq81diq:disabled+svg{--checkbox-border-color:var(--local-border-disabled)}
|
|
49
|
+
._cl9tglyw:disabled:hover+svg{pointer-events:none}
|
|
36
50
|
._dwvb1ps2:checked+svg{--checkbox-background-color:var(--local-background-checked)}
|
|
37
51
|
._e6ww155b:checked:active+svg{--checkbox-background-color:var(--local-background-active)}
|
|
38
52
|
._eyedglyw+svg{pointer-events:none}
|
|
39
53
|
._fx2i3rva[data-invalid]+svg{--checkbox-border-color:var(--local-border-invalid)}
|
|
40
54
|
._h78e1g3k:checked:hover+svg{--checkbox-border-color:var(--local-border-checked-hover)}
|
|
41
55
|
._j1ta1hou:disabled:checked+svg{--checkbox-tick-color:var(--local-tick-disabled)}
|
|
42
|
-
.
|
|
56
|
+
._jj67mz2b:disabled:hover+svg{--checkbox-background-color:var(--local-background-disabled)}
|
|
57
|
+
._l71j1i6y._l71j1i6y:checked:focus+svg{outline-offset:var(--ds-space-negative-025,-2px)}
|
|
43
58
|
._q5a61gyf+svg{--checkbox-border-color:var(--local-border)}
|
|
59
|
+
._qq8613gf:disabled:focus+svg{cursor:not-allowed}
|
|
44
60
|
._r06hglyw{-webkit-appearance:none;appearance:none}
|
|
45
61
|
._rphw18jz:checked:active+svg{--checkbox-tick-color:var(--local-tick-active)}
|
|
62
|
+
._s9051diq:disabled:focus+svg{--checkbox-border-color:var(--local-border-disabled)}
|
|
46
63
|
._sg1j1vek:checked:active+svg{--checkbox-border-color:var(--local-border-active)}
|
|
64
|
+
._swhgmz2b:disabled[data-invalid]+svg{--checkbox-background-color:var(--local-background-disabled)}
|
|
65
|
+
._t34a1i6y._t34a1i6y:focus+svg{outline-offset:var(--ds-space-negative-025,-2px)}
|
|
47
66
|
._tzy4idpf{opacity:0}
|
|
48
67
|
._w12s155b:active+svg{--checkbox-background-color:var(--local-background-active)}
|
|
49
68
|
._wje2mov0+svg{color:var(--checkbox-background-color)}
|
|
50
69
|
._y32gkivo:hover+svg{--checkbox-background-color:var(--local-background-hover)}
|
|
51
|
-
._y9y9mz2b:disabled+svg
|
|
70
|
+
._y9y9mz2b:disabled+svg{--checkbox-background-color:var(--local-background-disabled)}
|
|
52
71
|
._yjhd1hou:disabled:indeterminate+svg{--checkbox-tick-color:var(--local-tick-disabled)}
|
|
53
|
-
@media screen and (forced-colors:active){._w1cowc43+svg{--checkbox-background-color:Canvas}._jdqn1onz+svg{--checkbox-border-color:CanvasText}._4y4t1onz+svg{--checkbox-tick-color:CanvasText}._lvfrwc43:checked+svg
|
|
72
|
+
@media screen and (forced-colors:active){._w1cowc43+svg{--checkbox-background-color:Canvas}._jdqn1onz+svg{--checkbox-border-color:CanvasText}._4y4t1onz+svg{--checkbox-tick-color:CanvasText}._lvfrwc43:checked+svg{--checkbox-background-color:Canvas}._g68dwc43:checked:hover+svg{--checkbox-background-color:Canvas}._13dk1onz:checked+svg{--checkbox-border-color:CanvasText}._w1el1onz:checked:hover+svg{--checkbox-border-color:CanvasText}._a9yw1onz:checked+svg{--checkbox-tick-color:CanvasText}._1l3g1onz:checked:hover+svg{--checkbox-tick-color:CanvasText}._dcdpgir2:focus+svg rect:first-of-type{stroke:Highlight}._wobcgir2[data-invalid]+svg{--checkbox-border-color:Highlight}._rp9wgir2:checked[data-invalid]+svg{--checkbox-border-color:Highlight}._9ebfwc43:disabled+svg{--checkbox-background-color:Canvas}._e43iwc43:disabled:active+svg{--checkbox-background-color:Canvas}._1tkuwc43:disabled:focus+svg{--checkbox-background-color:Canvas}._1lehwc43:disabled:hover+svg{--checkbox-background-color:Canvas}._b9q3wc43:disabled[data-invalid]+svg{--checkbox-background-color:Canvas}._tu2918qt:disabled+svg{--checkbox-border-color:GrayText}._1uxv18qt:disabled:active+svg{--checkbox-border-color:GrayText}._1ufw18qt:disabled:focus+svg{--checkbox-border-color:GrayText}._opo918qt:disabled:hover+svg{--checkbox-border-color:GrayText}._1e8318qt:disabled[data-invalid]+svg{--checkbox-border-color:GrayText}._1k3d18qt:disabled+svg{--checkbox-tick-color:GrayText}._25yv18qt:disabled:active+svg{--checkbox-tick-color:GrayText}._1igz18qt:disabled:focus+svg{--checkbox-tick-color:GrayText}._c7cc18qt:disabled:hover+svg{--checkbox-tick-color:GrayText}._1swg18qt:disabled[data-invalid]+svg{--checkbox-tick-color:GrayText}}
|
package/dist/cjs/checkbox.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* checkbox.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* checkbox.tsx generated by @compiled/babel-plugin v0.38.1 */
|
|
2
2
|
"use strict";
|
|
3
3
|
|
|
4
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
@@ -29,7 +29,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
29
29
|
* Using `cssMap` seems to be a workaround for this.
|
|
30
30
|
*/
|
|
31
31
|
var checkboxStyles = {
|
|
32
|
-
root: "_19itglyw _nd5lfibj _12ji1r31 _1qu2glyw _12y31o36 _1bsb1osq _4t3i1osq _r06hglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _tzy4idpf _r050fibj _9bg71mn3 _19op11so _a30fhteq _1610e4h9 _13wo93zu _q5a61gyf _8gq114p8 _wje2mov0 _1fo21cni _eyedglyw _1ef78r4n _1h6r8r4n
|
|
32
|
+
root: "_19itglyw _nd5lfibj _12ji1r31 _1qu2glyw _12y31o36 _1bsb1osq _4t3i1osq _r06hglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _tzy4idpf _r050fibj _9bg71mn3 _19op11so _a30fhteq _1610e4h9 _13wo93zu _q5a61gyf _8gq114p8 _wje2mov0 _1fo21cni _eyedglyw _1ef78r4n _1h6r8r4n _smzg1nfn _1dk71nfn _l71j1i6y _t34a1i6y _y32gkivo _1ah9199y _1frj180l _h78e1g3k _dwvb1ps2 _1bok170n _1mhr17cl _fx2i3rva _10oaq2ws _w12s155b _15y61vek _e6ww155b _sg1j1vek _rphw18jz _y9y9mz2b _141bmz2b _255gmz2b _jj67mz2b _swhgmz2b _axq81diq _1jiz1diq _s9051diq _1efy1diq _1oav1diq _10y313gf _1wt913gf _qq8613gf _1adw13gf _12sr13gf _16jiglyw _693jglyw _1niqglyw _cl9tglyw _1jbnglyw _j1ta1hou _18qu1ps2 _1g52170n _1log17cl _32hzmz2b _1vv91diq _yjhd1hou _w1cowc43 _jdqn1onz _4y4t1onz _lvfrwc43 _g68dwc43 _13dk1onz _w1el1onz _a9yw1onz _1l3g1onz _dcdpgir2 _wobcgir2 _rp9wgir2 _9ebfwc43 _e43iwc43 _1tkuwc43 _1lehwc43 _b9q3wc43 _tu2918qt _1uxv18qt _1ufw18qt _opo918qt _1e8318qt _1k3d18qt _25yv18qt _1igz18qt _c7cc18qt _1swg18qt"
|
|
33
33
|
};
|
|
34
34
|
|
|
35
35
|
/**
|
|
@@ -77,7 +77,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
|
|
|
77
77
|
analyticsData: analyticsContext,
|
|
78
78
|
componentName: 'checkbox',
|
|
79
79
|
packageName: "@atlaskit/checkbox",
|
|
80
|
-
packageVersion: "
|
|
80
|
+
packageVersion: "0.0.0-development"
|
|
81
81
|
});
|
|
82
82
|
var internalRef = (0, _react.useRef)(null);
|
|
83
83
|
var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* checkbox-icon.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* checkbox-icon.tsx generated by @compiled/babel-plugin v0.38.1 */
|
|
2
2
|
"use strict";
|
|
3
3
|
|
|
4
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
@@ -69,28 +69,32 @@ var CheckboxIcon = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
69
69
|
var icon = (0, _react.useMemo)(function () {
|
|
70
70
|
return getIcon(isIndeterminate, isChecked);
|
|
71
71
|
}, [isIndeterminate, isChecked]);
|
|
72
|
-
return
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
72
|
+
return (
|
|
73
|
+
/*#__PURE__*/
|
|
74
|
+
// eslint-disable-next-line @atlaskit/design-system/no-custom-icons
|
|
75
|
+
React.createElement(_svg.default, {
|
|
76
|
+
label: "",
|
|
77
|
+
primaryColor: "var(--checkbox-background-color)",
|
|
78
|
+
secondaryColor: "var(--checkbox-tick-color)"
|
|
79
|
+
}, /*#__PURE__*/React.createElement("g", {
|
|
80
|
+
fillRule: "evenodd"
|
|
81
|
+
},
|
|
82
|
+
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
83
|
+
(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? /*#__PURE__*/React.createElement("rect", {
|
|
84
|
+
fill: "currentColor",
|
|
85
|
+
x: "5.5",
|
|
86
|
+
y: "5.5",
|
|
87
|
+
width: "13",
|
|
88
|
+
height: "13",
|
|
89
|
+
rx: "1.5"
|
|
90
|
+
}) : /*#__PURE__*/React.createElement("rect", {
|
|
91
|
+
fill: "currentColor",
|
|
92
|
+
x: "6",
|
|
93
|
+
y: "6",
|
|
94
|
+
width: "12",
|
|
95
|
+
height: "12",
|
|
96
|
+
rx: "2"
|
|
97
|
+
}), icon))
|
|
98
|
+
);
|
|
95
99
|
});
|
|
96
100
|
var _default = exports.default = CheckboxIcon;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
|
-
.
|
|
2
|
+
._zulp1nu5{gap:var(--ds-space-0,0) var(--ds-space-050,4px)}
|
|
3
3
|
._13hr1j28{--local-tick-rest:transparent}
|
|
4
4
|
._18q0snw8{--local-tick-disabled:var(--_1xmcmw9)}
|
|
5
5
|
._1dik1ehr{--local-border-checked-hover:var(--_14y1fod)}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* label.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* label.tsx generated by @compiled/babel-plugin v0.38.1 */
|
|
2
2
|
"use strict";
|
|
3
3
|
|
|
4
4
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
@@ -23,13 +23,12 @@ function Label(_ref) {
|
|
|
23
23
|
id = _ref.id,
|
|
24
24
|
xcss = _ref.xcss;
|
|
25
25
|
return /*#__PURE__*/React.createElement("label", {
|
|
26
|
-
className: (0, _runtime.ax)(["_11c82smr _1e0c11p5 _1ejihkll _umai184x _syazovqm _80om73ad", label && "
|
|
26
|
+
className: (0, _runtime.ax)(["_11c82smr _1e0c11p5 _1ejihkll _umai184x _syazovqm _80om73ad", label && "_zulp1nu5 _yv0ey09t", isDisabled && "_syaz7wap _80om13gf", "_h5e31kd8 _1nzs1kc0 _1esz1j4g _yp0j1ehr _ay2w1ouc _d51u12ci _phftddza _1g1fe69j _l6wk1j4g _1dik1ehr _1sfg1380 _fpdj1ouc _1yjc3zdg _oaj1ddza _1j3h1380 _eawbxz7c _1rdaeh7q _18q0snw8 _13hr1j28", xcss]),
|
|
27
27
|
"data-testid": testId,
|
|
28
28
|
"data-disabled": isDisabled || undefined,
|
|
29
29
|
id: id,
|
|
30
30
|
style: {
|
|
31
31
|
"--_5xk3r4": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N900, ")")),
|
|
32
|
-
"--_1l71759": (0, _runtime.ix)("var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)")),
|
|
33
32
|
"--_1ynhf1h": (0, _runtime.ix)("var(--ds-text-disabled, ".concat(_colors.N80, ")")),
|
|
34
33
|
"--_4mkb4g": (0, _runtime.ix)("var(--ds-background-input, ".concat(_colors.N10, ")")),
|
|
35
34
|
"--_1cd0fcx": (0, _runtime.ix)("var(--ds-background-input-pressed, ".concat(_colors.B50, ")")),
|
|
@@ -1,53 +1,72 @@
|
|
|
1
1
|
|
|
2
2
|
._19itglyw{border:none}
|
|
3
3
|
._19op11so+svg rect:first-of-type{transition:stroke .2s ease-in-out}
|
|
4
|
-
.
|
|
4
|
+
._1dk71nfn._1dk71nfn:focus+svg{outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#2684ff)}
|
|
5
|
+
._1ef78r4n._1ef78r4n:checked:focus+svg{border-radius:var(--ds-radius-small,.25rem)}
|
|
6
|
+
._1h6r8r4n._1h6r8r4n:focus+svg{border-radius:var(--ds-radius-small,.25rem)}
|
|
5
7
|
._9bg71mn3+svg{transition:color .2s ease-in-out,fill .2s ease-in-out}
|
|
6
8
|
._nd5lfibj{grid-area:1/1/2/2}
|
|
7
9
|
._r050fibj+svg{grid-area:1/1/2/2}
|
|
8
|
-
.
|
|
9
|
-
._10y313gf:disabled+svg
|
|
10
|
+
._smzg1nfn._smzg1nfn:checked:focus+svg{outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#2684ff)}._10oaq2ws:checked[data-invalid]+svg{--checkbox-border-color:var(--local-border-checked-invalid)}
|
|
11
|
+
._10y313gf:disabled+svg{cursor:not-allowed}
|
|
10
12
|
._12ji1r31{outline-color:currentColor}
|
|
11
13
|
._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
|
|
14
|
+
._12sr13gf:disabled[data-invalid]+svg{cursor:not-allowed}
|
|
12
15
|
._12y31o36{outline-width:medium}
|
|
13
16
|
._13wo93zu+svg{--checkbox-background-color:var(--local-background)}
|
|
17
|
+
._141bmz2b:disabled:active+svg{--checkbox-background-color:var(--local-background-disabled)}
|
|
14
18
|
._15y61vek:active+svg{--checkbox-border-color:var(--local-border-active)}
|
|
15
19
|
._1610e4h9+svg rect:first-of-type{stroke-width:var(--ds-border-width,1px)}
|
|
16
|
-
._16jiglyw:disabled+svg
|
|
20
|
+
._16jiglyw:disabled+svg{pointer-events:none}
|
|
17
21
|
._18qu1ps2:indeterminate+svg{--checkbox-background-color:var(--local-background-checked)}
|
|
22
|
+
._1adw13gf:disabled:hover+svg{cursor:not-allowed}
|
|
18
23
|
._1ah9199y:hover+svg{--checkbox-border-color:var(--local-border-hover)}
|
|
19
24
|
._1bok170n:checked+svg{--checkbox-border-color:var(--local-border-checked)}
|
|
20
25
|
._1bsb1osq{width:100%}
|
|
26
|
+
._1efy1diq:disabled:hover+svg{--checkbox-border-color:var(--local-border-disabled)}
|
|
21
27
|
._1fo21cni+svg{fill:var(--checkbox-tick-color)}
|
|
22
28
|
._1frj180l:checked:hover+svg{--checkbox-background-color:var(--local-background-checked-hover)}
|
|
23
29
|
._1g52170n:indeterminate+svg{--checkbox-border-color:var(--local-border-checked)}
|
|
30
|
+
._1jbnglyw:disabled[data-invalid]+svg{pointer-events:none}
|
|
31
|
+
._1jiz1diq:disabled:active+svg{--checkbox-border-color:var(--local-border-disabled)}
|
|
24
32
|
._1log17cl:indeterminate+svg{--checkbox-tick-color:var(--local-tick-checked)}
|
|
25
33
|
._1mhr17cl:checked+svg{--checkbox-tick-color:var(--local-tick-checked)}
|
|
34
|
+
._1niqglyw:disabled:focus+svg{pointer-events:none}
|
|
35
|
+
._1oav1diq:disabled[data-invalid]+svg{--checkbox-border-color:var(--local-border-disabled)}
|
|
26
36
|
._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
|
|
27
37
|
._1qu2glyw{outline-style:none}
|
|
28
38
|
._1vv91diq:disabled:indeterminate+svg{--checkbox-border-color:var(--local-border-disabled)}
|
|
39
|
+
._1wt913gf:disabled:active+svg{cursor:not-allowed}
|
|
40
|
+
._255gmz2b:disabled:focus+svg{--checkbox-background-color:var(--local-background-disabled)}
|
|
29
41
|
._32hzmz2b:disabled:indeterminate+svg{--checkbox-background-color:var(--local-background-disabled)}
|
|
30
42
|
._4t3i1osq{height:100%}
|
|
43
|
+
._693jglyw:disabled:active+svg{pointer-events:none}
|
|
31
44
|
._6rthze3t{margin-block-end:var(--ds-space-0,0)}
|
|
32
45
|
._8gq114p8+svg{--checkbox-tick-color:var(--local-tick-rest)}
|
|
33
46
|
._a30fhteq+svg rect:first-of-type{stroke:var(--checkbox-border-color)}
|
|
34
47
|
._ahbqze3t{margin-inline-start:var(--ds-space-0,0)}
|
|
35
|
-
._axq81diq:disabled+svg
|
|
48
|
+
._axq81diq:disabled+svg{--checkbox-border-color:var(--local-border-disabled)}
|
|
49
|
+
._cl9tglyw:disabled:hover+svg{pointer-events:none}
|
|
36
50
|
._dwvb1ps2:checked+svg{--checkbox-background-color:var(--local-background-checked)}
|
|
37
51
|
._e6ww155b:checked:active+svg{--checkbox-background-color:var(--local-background-active)}
|
|
38
52
|
._eyedglyw+svg{pointer-events:none}
|
|
39
53
|
._fx2i3rva[data-invalid]+svg{--checkbox-border-color:var(--local-border-invalid)}
|
|
40
54
|
._h78e1g3k:checked:hover+svg{--checkbox-border-color:var(--local-border-checked-hover)}
|
|
41
55
|
._j1ta1hou:disabled:checked+svg{--checkbox-tick-color:var(--local-tick-disabled)}
|
|
42
|
-
.
|
|
56
|
+
._jj67mz2b:disabled:hover+svg{--checkbox-background-color:var(--local-background-disabled)}
|
|
57
|
+
._l71j1i6y._l71j1i6y:checked:focus+svg{outline-offset:var(--ds-space-negative-025,-2px)}
|
|
43
58
|
._q5a61gyf+svg{--checkbox-border-color:var(--local-border)}
|
|
59
|
+
._qq8613gf:disabled:focus+svg{cursor:not-allowed}
|
|
44
60
|
._r06hglyw{-webkit-appearance:none;appearance:none}
|
|
45
61
|
._rphw18jz:checked:active+svg{--checkbox-tick-color:var(--local-tick-active)}
|
|
62
|
+
._s9051diq:disabled:focus+svg{--checkbox-border-color:var(--local-border-disabled)}
|
|
46
63
|
._sg1j1vek:checked:active+svg{--checkbox-border-color:var(--local-border-active)}
|
|
64
|
+
._swhgmz2b:disabled[data-invalid]+svg{--checkbox-background-color:var(--local-background-disabled)}
|
|
65
|
+
._t34a1i6y._t34a1i6y:focus+svg{outline-offset:var(--ds-space-negative-025,-2px)}
|
|
47
66
|
._tzy4idpf{opacity:0}
|
|
48
67
|
._w12s155b:active+svg{--checkbox-background-color:var(--local-background-active)}
|
|
49
68
|
._wje2mov0+svg{color:var(--checkbox-background-color)}
|
|
50
69
|
._y32gkivo:hover+svg{--checkbox-background-color:var(--local-background-hover)}
|
|
51
|
-
._y9y9mz2b:disabled+svg
|
|
70
|
+
._y9y9mz2b:disabled+svg{--checkbox-background-color:var(--local-background-disabled)}
|
|
52
71
|
._yjhd1hou:disabled:indeterminate+svg{--checkbox-tick-color:var(--local-tick-disabled)}
|
|
53
|
-
@media screen and (forced-colors:active){._w1cowc43+svg{--checkbox-background-color:Canvas}._jdqn1onz+svg{--checkbox-border-color:CanvasText}._4y4t1onz+svg{--checkbox-tick-color:CanvasText}._lvfrwc43:checked+svg
|
|
72
|
+
@media screen and (forced-colors:active){._w1cowc43+svg{--checkbox-background-color:Canvas}._jdqn1onz+svg{--checkbox-border-color:CanvasText}._4y4t1onz+svg{--checkbox-tick-color:CanvasText}._lvfrwc43:checked+svg{--checkbox-background-color:Canvas}._g68dwc43:checked:hover+svg{--checkbox-background-color:Canvas}._13dk1onz:checked+svg{--checkbox-border-color:CanvasText}._w1el1onz:checked:hover+svg{--checkbox-border-color:CanvasText}._a9yw1onz:checked+svg{--checkbox-tick-color:CanvasText}._1l3g1onz:checked:hover+svg{--checkbox-tick-color:CanvasText}._dcdpgir2:focus+svg rect:first-of-type{stroke:Highlight}._wobcgir2[data-invalid]+svg{--checkbox-border-color:Highlight}._rp9wgir2:checked[data-invalid]+svg{--checkbox-border-color:Highlight}._9ebfwc43:disabled+svg{--checkbox-background-color:Canvas}._e43iwc43:disabled:active+svg{--checkbox-background-color:Canvas}._1tkuwc43:disabled:focus+svg{--checkbox-background-color:Canvas}._1lehwc43:disabled:hover+svg{--checkbox-background-color:Canvas}._b9q3wc43:disabled[data-invalid]+svg{--checkbox-background-color:Canvas}._tu2918qt:disabled+svg{--checkbox-border-color:GrayText}._1uxv18qt:disabled:active+svg{--checkbox-border-color:GrayText}._1ufw18qt:disabled:focus+svg{--checkbox-border-color:GrayText}._opo918qt:disabled:hover+svg{--checkbox-border-color:GrayText}._1e8318qt:disabled[data-invalid]+svg{--checkbox-border-color:GrayText}._1k3d18qt:disabled+svg{--checkbox-tick-color:GrayText}._25yv18qt:disabled:active+svg{--checkbox-tick-color:GrayText}._1igz18qt:disabled:focus+svg{--checkbox-tick-color:GrayText}._c7cc18qt:disabled:hover+svg{--checkbox-tick-color:GrayText}._1swg18qt:disabled[data-invalid]+svg{--checkbox-tick-color:GrayText}}
|
package/dist/es2019/checkbox.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* checkbox.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* checkbox.tsx generated by @compiled/babel-plugin v0.38.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import "./checkbox.compiled.css";
|
|
4
4
|
import * as React from 'react';
|
|
@@ -17,7 +17,7 @@ import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
|
|
|
17
17
|
* Using `cssMap` seems to be a workaround for this.
|
|
18
18
|
*/
|
|
19
19
|
const checkboxStyles = {
|
|
20
|
-
root: "_19itglyw _nd5lfibj _12ji1r31 _1qu2glyw _12y31o36 _1bsb1osq _4t3i1osq _r06hglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _tzy4idpf _r050fibj _9bg71mn3 _19op11so _a30fhteq _1610e4h9 _13wo93zu _q5a61gyf _8gq114p8 _wje2mov0 _1fo21cni _eyedglyw _1ef78r4n _1h6r8r4n
|
|
20
|
+
root: "_19itglyw _nd5lfibj _12ji1r31 _1qu2glyw _12y31o36 _1bsb1osq _4t3i1osq _r06hglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _tzy4idpf _r050fibj _9bg71mn3 _19op11so _a30fhteq _1610e4h9 _13wo93zu _q5a61gyf _8gq114p8 _wje2mov0 _1fo21cni _eyedglyw _1ef78r4n _1h6r8r4n _smzg1nfn _1dk71nfn _l71j1i6y _t34a1i6y _y32gkivo _1ah9199y _1frj180l _h78e1g3k _dwvb1ps2 _1bok170n _1mhr17cl _fx2i3rva _10oaq2ws _w12s155b _15y61vek _e6ww155b _sg1j1vek _rphw18jz _y9y9mz2b _141bmz2b _255gmz2b _jj67mz2b _swhgmz2b _axq81diq _1jiz1diq _s9051diq _1efy1diq _1oav1diq _10y313gf _1wt913gf _qq8613gf _1adw13gf _12sr13gf _16jiglyw _693jglyw _1niqglyw _cl9tglyw _1jbnglyw _j1ta1hou _18qu1ps2 _1g52170n _1log17cl _32hzmz2b _1vv91diq _yjhd1hou _w1cowc43 _jdqn1onz _4y4t1onz _lvfrwc43 _g68dwc43 _13dk1onz _w1el1onz _a9yw1onz _1l3g1onz _dcdpgir2 _wobcgir2 _rp9wgir2 _9ebfwc43 _e43iwc43 _1tkuwc43 _1lehwc43 _b9q3wc43 _tu2918qt _1uxv18qt _1ufw18qt _opo918qt _1e8318qt _1k3d18qt _25yv18qt _1igz18qt _c7cc18qt _1swg18qt"
|
|
21
21
|
};
|
|
22
22
|
|
|
23
23
|
/**
|
|
@@ -59,7 +59,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox({
|
|
|
59
59
|
analyticsData: analyticsContext,
|
|
60
60
|
componentName: 'checkbox',
|
|
61
61
|
packageName: "@atlaskit/checkbox",
|
|
62
|
-
packageVersion: "
|
|
62
|
+
packageVersion: "0.0.0-development"
|
|
63
63
|
});
|
|
64
64
|
const internalRef = useRef(null);
|
|
65
65
|
const mergedRefs = mergeRefs([internalRef, ref]);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* checkbox-icon.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* checkbox-icon.tsx generated by @compiled/babel-plugin v0.38.1 */
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
4
|
import { memo, useMemo } from 'react';
|
|
@@ -59,28 +59,32 @@ const CheckboxIcon = /*#__PURE__*/memo(({
|
|
|
59
59
|
isChecked
|
|
60
60
|
}) => {
|
|
61
61
|
const icon = useMemo(() => getIcon(isIndeterminate, isChecked), [isIndeterminate, isChecked]);
|
|
62
|
-
return
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
62
|
+
return (
|
|
63
|
+
/*#__PURE__*/
|
|
64
|
+
// eslint-disable-next-line @atlaskit/design-system/no-custom-icons
|
|
65
|
+
React.createElement(PrimitiveSVGIcon, {
|
|
66
|
+
label: "",
|
|
67
|
+
primaryColor: "var(--checkbox-background-color)",
|
|
68
|
+
secondaryColor: "var(--checkbox-tick-color)"
|
|
69
|
+
}, /*#__PURE__*/React.createElement("g", {
|
|
70
|
+
fillRule: "evenodd"
|
|
71
|
+
},
|
|
72
|
+
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
73
|
+
fg('platform-visual-refresh-icons') ? /*#__PURE__*/React.createElement("rect", {
|
|
74
|
+
fill: "currentColor",
|
|
75
|
+
x: "5.5",
|
|
76
|
+
y: "5.5",
|
|
77
|
+
width: "13",
|
|
78
|
+
height: "13",
|
|
79
|
+
rx: "1.5"
|
|
80
|
+
}) : /*#__PURE__*/React.createElement("rect", {
|
|
81
|
+
fill: "currentColor",
|
|
82
|
+
x: "6",
|
|
83
|
+
y: "6",
|
|
84
|
+
width: "12",
|
|
85
|
+
height: "12",
|
|
86
|
+
rx: "2"
|
|
87
|
+
}), icon))
|
|
88
|
+
);
|
|
85
89
|
});
|
|
86
90
|
export default CheckboxIcon;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* required-indicator.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* required-indicator.tsx generated by @compiled/babel-plugin v0.38.1 */
|
|
2
2
|
import "./required-indicator.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,53 +1,72 @@
|
|
|
1
1
|
|
|
2
2
|
._19itglyw{border:none}
|
|
3
3
|
._19op11so+svg rect:first-of-type{transition:stroke .2s ease-in-out}
|
|
4
|
-
.
|
|
4
|
+
._1dk71nfn._1dk71nfn:focus+svg{outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#2684ff)}
|
|
5
|
+
._1ef78r4n._1ef78r4n:checked:focus+svg{border-radius:var(--ds-radius-small,.25rem)}
|
|
6
|
+
._1h6r8r4n._1h6r8r4n:focus+svg{border-radius:var(--ds-radius-small,.25rem)}
|
|
5
7
|
._9bg71mn3+svg{transition:color .2s ease-in-out,fill .2s ease-in-out}
|
|
6
8
|
._nd5lfibj{grid-area:1/1/2/2}
|
|
7
9
|
._r050fibj+svg{grid-area:1/1/2/2}
|
|
8
|
-
.
|
|
9
|
-
._10y313gf:disabled+svg
|
|
10
|
+
._smzg1nfn._smzg1nfn:checked:focus+svg{outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#2684ff)}._10oaq2ws:checked[data-invalid]+svg{--checkbox-border-color:var(--local-border-checked-invalid)}
|
|
11
|
+
._10y313gf:disabled+svg{cursor:not-allowed}
|
|
10
12
|
._12ji1r31{outline-color:currentColor}
|
|
11
13
|
._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
|
|
14
|
+
._12sr13gf:disabled[data-invalid]+svg{cursor:not-allowed}
|
|
12
15
|
._12y31o36{outline-width:medium}
|
|
13
16
|
._13wo93zu+svg{--checkbox-background-color:var(--local-background)}
|
|
17
|
+
._141bmz2b:disabled:active+svg{--checkbox-background-color:var(--local-background-disabled)}
|
|
14
18
|
._15y61vek:active+svg{--checkbox-border-color:var(--local-border-active)}
|
|
15
19
|
._1610e4h9+svg rect:first-of-type{stroke-width:var(--ds-border-width,1px)}
|
|
16
|
-
._16jiglyw:disabled+svg
|
|
20
|
+
._16jiglyw:disabled+svg{pointer-events:none}
|
|
17
21
|
._18qu1ps2:indeterminate+svg{--checkbox-background-color:var(--local-background-checked)}
|
|
22
|
+
._1adw13gf:disabled:hover+svg{cursor:not-allowed}
|
|
18
23
|
._1ah9199y:hover+svg{--checkbox-border-color:var(--local-border-hover)}
|
|
19
24
|
._1bok170n:checked+svg{--checkbox-border-color:var(--local-border-checked)}
|
|
20
25
|
._1bsb1osq{width:100%}
|
|
26
|
+
._1efy1diq:disabled:hover+svg{--checkbox-border-color:var(--local-border-disabled)}
|
|
21
27
|
._1fo21cni+svg{fill:var(--checkbox-tick-color)}
|
|
22
28
|
._1frj180l:checked:hover+svg{--checkbox-background-color:var(--local-background-checked-hover)}
|
|
23
29
|
._1g52170n:indeterminate+svg{--checkbox-border-color:var(--local-border-checked)}
|
|
30
|
+
._1jbnglyw:disabled[data-invalid]+svg{pointer-events:none}
|
|
31
|
+
._1jiz1diq:disabled:active+svg{--checkbox-border-color:var(--local-border-disabled)}
|
|
24
32
|
._1log17cl:indeterminate+svg{--checkbox-tick-color:var(--local-tick-checked)}
|
|
25
33
|
._1mhr17cl:checked+svg{--checkbox-tick-color:var(--local-tick-checked)}
|
|
34
|
+
._1niqglyw:disabled:focus+svg{pointer-events:none}
|
|
35
|
+
._1oav1diq:disabled[data-invalid]+svg{--checkbox-border-color:var(--local-border-disabled)}
|
|
26
36
|
._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
|
|
27
37
|
._1qu2glyw{outline-style:none}
|
|
28
38
|
._1vv91diq:disabled:indeterminate+svg{--checkbox-border-color:var(--local-border-disabled)}
|
|
39
|
+
._1wt913gf:disabled:active+svg{cursor:not-allowed}
|
|
40
|
+
._255gmz2b:disabled:focus+svg{--checkbox-background-color:var(--local-background-disabled)}
|
|
29
41
|
._32hzmz2b:disabled:indeterminate+svg{--checkbox-background-color:var(--local-background-disabled)}
|
|
30
42
|
._4t3i1osq{height:100%}
|
|
43
|
+
._693jglyw:disabled:active+svg{pointer-events:none}
|
|
31
44
|
._6rthze3t{margin-block-end:var(--ds-space-0,0)}
|
|
32
45
|
._8gq114p8+svg{--checkbox-tick-color:var(--local-tick-rest)}
|
|
33
46
|
._a30fhteq+svg rect:first-of-type{stroke:var(--checkbox-border-color)}
|
|
34
47
|
._ahbqze3t{margin-inline-start:var(--ds-space-0,0)}
|
|
35
|
-
._axq81diq:disabled+svg
|
|
48
|
+
._axq81diq:disabled+svg{--checkbox-border-color:var(--local-border-disabled)}
|
|
49
|
+
._cl9tglyw:disabled:hover+svg{pointer-events:none}
|
|
36
50
|
._dwvb1ps2:checked+svg{--checkbox-background-color:var(--local-background-checked)}
|
|
37
51
|
._e6ww155b:checked:active+svg{--checkbox-background-color:var(--local-background-active)}
|
|
38
52
|
._eyedglyw+svg{pointer-events:none}
|
|
39
53
|
._fx2i3rva[data-invalid]+svg{--checkbox-border-color:var(--local-border-invalid)}
|
|
40
54
|
._h78e1g3k:checked:hover+svg{--checkbox-border-color:var(--local-border-checked-hover)}
|
|
41
55
|
._j1ta1hou:disabled:checked+svg{--checkbox-tick-color:var(--local-tick-disabled)}
|
|
42
|
-
.
|
|
56
|
+
._jj67mz2b:disabled:hover+svg{--checkbox-background-color:var(--local-background-disabled)}
|
|
57
|
+
._l71j1i6y._l71j1i6y:checked:focus+svg{outline-offset:var(--ds-space-negative-025,-2px)}
|
|
43
58
|
._q5a61gyf+svg{--checkbox-border-color:var(--local-border)}
|
|
59
|
+
._qq8613gf:disabled:focus+svg{cursor:not-allowed}
|
|
44
60
|
._r06hglyw{-webkit-appearance:none;appearance:none}
|
|
45
61
|
._rphw18jz:checked:active+svg{--checkbox-tick-color:var(--local-tick-active)}
|
|
62
|
+
._s9051diq:disabled:focus+svg{--checkbox-border-color:var(--local-border-disabled)}
|
|
46
63
|
._sg1j1vek:checked:active+svg{--checkbox-border-color:var(--local-border-active)}
|
|
64
|
+
._swhgmz2b:disabled[data-invalid]+svg{--checkbox-background-color:var(--local-background-disabled)}
|
|
65
|
+
._t34a1i6y._t34a1i6y:focus+svg{outline-offset:var(--ds-space-negative-025,-2px)}
|
|
47
66
|
._tzy4idpf{opacity:0}
|
|
48
67
|
._w12s155b:active+svg{--checkbox-background-color:var(--local-background-active)}
|
|
49
68
|
._wje2mov0+svg{color:var(--checkbox-background-color)}
|
|
50
69
|
._y32gkivo:hover+svg{--checkbox-background-color:var(--local-background-hover)}
|
|
51
|
-
._y9y9mz2b:disabled+svg
|
|
70
|
+
._y9y9mz2b:disabled+svg{--checkbox-background-color:var(--local-background-disabled)}
|
|
52
71
|
._yjhd1hou:disabled:indeterminate+svg{--checkbox-tick-color:var(--local-tick-disabled)}
|
|
53
|
-
@media screen and (forced-colors:active){._w1cowc43+svg{--checkbox-background-color:Canvas}._jdqn1onz+svg{--checkbox-border-color:CanvasText}._4y4t1onz+svg{--checkbox-tick-color:CanvasText}._lvfrwc43:checked+svg
|
|
72
|
+
@media screen and (forced-colors:active){._w1cowc43+svg{--checkbox-background-color:Canvas}._jdqn1onz+svg{--checkbox-border-color:CanvasText}._4y4t1onz+svg{--checkbox-tick-color:CanvasText}._lvfrwc43:checked+svg{--checkbox-background-color:Canvas}._g68dwc43:checked:hover+svg{--checkbox-background-color:Canvas}._13dk1onz:checked+svg{--checkbox-border-color:CanvasText}._w1el1onz:checked:hover+svg{--checkbox-border-color:CanvasText}._a9yw1onz:checked+svg{--checkbox-tick-color:CanvasText}._1l3g1onz:checked:hover+svg{--checkbox-tick-color:CanvasText}._dcdpgir2:focus+svg rect:first-of-type{stroke:Highlight}._wobcgir2[data-invalid]+svg{--checkbox-border-color:Highlight}._rp9wgir2:checked[data-invalid]+svg{--checkbox-border-color:Highlight}._9ebfwc43:disabled+svg{--checkbox-background-color:Canvas}._e43iwc43:disabled:active+svg{--checkbox-background-color:Canvas}._1tkuwc43:disabled:focus+svg{--checkbox-background-color:Canvas}._1lehwc43:disabled:hover+svg{--checkbox-background-color:Canvas}._b9q3wc43:disabled[data-invalid]+svg{--checkbox-background-color:Canvas}._tu2918qt:disabled+svg{--checkbox-border-color:GrayText}._1uxv18qt:disabled:active+svg{--checkbox-border-color:GrayText}._1ufw18qt:disabled:focus+svg{--checkbox-border-color:GrayText}._opo918qt:disabled:hover+svg{--checkbox-border-color:GrayText}._1e8318qt:disabled[data-invalid]+svg{--checkbox-border-color:GrayText}._1k3d18qt:disabled+svg{--checkbox-tick-color:GrayText}._25yv18qt:disabled:active+svg{--checkbox-tick-color:GrayText}._1igz18qt:disabled:focus+svg{--checkbox-tick-color:GrayText}._c7cc18qt:disabled:hover+svg{--checkbox-tick-color:GrayText}._1swg18qt:disabled[data-invalid]+svg{--checkbox-tick-color:GrayText}}
|
package/dist/esm/checkbox.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* checkbox.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* checkbox.tsx generated by @compiled/babel-plugin v0.38.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
4
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
@@ -20,7 +20,7 @@ import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
|
|
|
20
20
|
* Using `cssMap` seems to be a workaround for this.
|
|
21
21
|
*/
|
|
22
22
|
var checkboxStyles = {
|
|
23
|
-
root: "_19itglyw _nd5lfibj _12ji1r31 _1qu2glyw _12y31o36 _1bsb1osq _4t3i1osq _r06hglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _tzy4idpf _r050fibj _9bg71mn3 _19op11so _a30fhteq _1610e4h9 _13wo93zu _q5a61gyf _8gq114p8 _wje2mov0 _1fo21cni _eyedglyw _1ef78r4n _1h6r8r4n
|
|
23
|
+
root: "_19itglyw _nd5lfibj _12ji1r31 _1qu2glyw _12y31o36 _1bsb1osq _4t3i1osq _r06hglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _tzy4idpf _r050fibj _9bg71mn3 _19op11so _a30fhteq _1610e4h9 _13wo93zu _q5a61gyf _8gq114p8 _wje2mov0 _1fo21cni _eyedglyw _1ef78r4n _1h6r8r4n _smzg1nfn _1dk71nfn _l71j1i6y _t34a1i6y _y32gkivo _1ah9199y _1frj180l _h78e1g3k _dwvb1ps2 _1bok170n _1mhr17cl _fx2i3rva _10oaq2ws _w12s155b _15y61vek _e6ww155b _sg1j1vek _rphw18jz _y9y9mz2b _141bmz2b _255gmz2b _jj67mz2b _swhgmz2b _axq81diq _1jiz1diq _s9051diq _1efy1diq _1oav1diq _10y313gf _1wt913gf _qq8613gf _1adw13gf _12sr13gf _16jiglyw _693jglyw _1niqglyw _cl9tglyw _1jbnglyw _j1ta1hou _18qu1ps2 _1g52170n _1log17cl _32hzmz2b _1vv91diq _yjhd1hou _w1cowc43 _jdqn1onz _4y4t1onz _lvfrwc43 _g68dwc43 _13dk1onz _w1el1onz _a9yw1onz _1l3g1onz _dcdpgir2 _wobcgir2 _rp9wgir2 _9ebfwc43 _e43iwc43 _1tkuwc43 _1lehwc43 _b9q3wc43 _tu2918qt _1uxv18qt _1ufw18qt _opo918qt _1e8318qt _1k3d18qt _25yv18qt _1igz18qt _c7cc18qt _1swg18qt"
|
|
24
24
|
};
|
|
25
25
|
|
|
26
26
|
/**
|
|
@@ -68,7 +68,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(_ref
|
|
|
68
68
|
analyticsData: analyticsContext,
|
|
69
69
|
componentName: 'checkbox',
|
|
70
70
|
packageName: "@atlaskit/checkbox",
|
|
71
|
-
packageVersion: "
|
|
71
|
+
packageVersion: "0.0.0-development"
|
|
72
72
|
});
|
|
73
73
|
var internalRef = useRef(null);
|
|
74
74
|
var mergedRefs = mergeRefs([internalRef, ref]);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* checkbox-icon.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* checkbox-icon.tsx generated by @compiled/babel-plugin v0.38.1 */
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
4
|
import { memo, useMemo } from 'react';
|
|
@@ -60,28 +60,32 @@ var CheckboxIcon = /*#__PURE__*/memo(function (_ref) {
|
|
|
60
60
|
var icon = useMemo(function () {
|
|
61
61
|
return getIcon(isIndeterminate, isChecked);
|
|
62
62
|
}, [isIndeterminate, isChecked]);
|
|
63
|
-
return
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
63
|
+
return (
|
|
64
|
+
/*#__PURE__*/
|
|
65
|
+
// eslint-disable-next-line @atlaskit/design-system/no-custom-icons
|
|
66
|
+
React.createElement(PrimitiveSVGIcon, {
|
|
67
|
+
label: "",
|
|
68
|
+
primaryColor: "var(--checkbox-background-color)",
|
|
69
|
+
secondaryColor: "var(--checkbox-tick-color)"
|
|
70
|
+
}, /*#__PURE__*/React.createElement("g", {
|
|
71
|
+
fillRule: "evenodd"
|
|
72
|
+
},
|
|
73
|
+
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
74
|
+
fg('platform-visual-refresh-icons') ? /*#__PURE__*/React.createElement("rect", {
|
|
75
|
+
fill: "currentColor",
|
|
76
|
+
x: "5.5",
|
|
77
|
+
y: "5.5",
|
|
78
|
+
width: "13",
|
|
79
|
+
height: "13",
|
|
80
|
+
rx: "1.5"
|
|
81
|
+
}) : /*#__PURE__*/React.createElement("rect", {
|
|
82
|
+
fill: "currentColor",
|
|
83
|
+
x: "6",
|
|
84
|
+
y: "6",
|
|
85
|
+
width: "12",
|
|
86
|
+
height: "12",
|
|
87
|
+
rx: "2"
|
|
88
|
+
}), icon))
|
|
89
|
+
);
|
|
86
90
|
});
|
|
87
91
|
export default CheckboxIcon;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
|
-
.
|
|
2
|
+
._zulp1nu5{gap:var(--ds-space-0,0) var(--ds-space-050,4px)}
|
|
3
3
|
._13hr1j28{--local-tick-rest:transparent}
|
|
4
4
|
._18q0snw8{--local-tick-disabled:var(--_1xmcmw9)}
|
|
5
5
|
._1dik1ehr{--local-border-checked-hover:var(--_14y1fod)}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* label.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* label.tsx generated by @compiled/babel-plugin v0.38.1 */
|
|
2
2
|
import "./label.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -15,13 +15,12 @@ export default function Label(_ref) {
|
|
|
15
15
|
id = _ref.id,
|
|
16
16
|
xcss = _ref.xcss;
|
|
17
17
|
return /*#__PURE__*/React.createElement("label", {
|
|
18
|
-
className: ax(["_11c82smr _1e0c11p5 _1ejihkll _umai184x _syazovqm _80om73ad", label && "
|
|
18
|
+
className: ax(["_11c82smr _1e0c11p5 _1ejihkll _umai184x _syazovqm _80om73ad", label && "_zulp1nu5 _yv0ey09t", isDisabled && "_syaz7wap _80om13gf", "_h5e31kd8 _1nzs1kc0 _1esz1j4g _yp0j1ehr _ay2w1ouc _d51u12ci _phftddza _1g1fe69j _l6wk1j4g _1dik1ehr _1sfg1380 _fpdj1ouc _1yjc3zdg _oaj1ddza _1j3h1380 _eawbxz7c _1rdaeh7q _18q0snw8 _13hr1j28", xcss]),
|
|
19
19
|
"data-testid": testId,
|
|
20
20
|
"data-disabled": isDisabled || undefined,
|
|
21
21
|
id: id,
|
|
22
22
|
style: {
|
|
23
23
|
"--_5xk3r4": ix("var(--ds-text, ".concat(N900, ")")),
|
|
24
|
-
"--_1l71759": ix("var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)")),
|
|
25
24
|
"--_1ynhf1h": ix("var(--ds-text-disabled, ".concat(N80, ")")),
|
|
26
25
|
"--_4mkb4g": ix("var(--ds-background-input, ".concat(N10, ")")),
|
|
27
26
|
"--_1cd0fcx": ix("var(--ds-background-input-pressed, ".concat(B50, ")")),
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* required-indicator.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* required-indicator.tsx generated by @compiled/babel-plugin v0.38.1 */
|
|
2
2
|
import "./required-indicator.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
package/dist/types/checkbox.d.ts
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { type ForwardRefExoticComponent, type MemoExoticComponent, type RefAttributes } from 'react';
|
|
6
|
+
import type { CheckboxProps } from './types';
|
|
2
7
|
/**
|
|
3
8
|
* __Checkbox__
|
|
4
9
|
*
|
|
@@ -8,35 +13,5 @@ import type UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
|
|
|
8
13
|
* - [Code](https://atlassian.design/components/checkbox/code)
|
|
9
14
|
* - [Usage](https://atlassian.design/components/checkbox/usage)
|
|
10
15
|
*/
|
|
11
|
-
declare const Checkbox:
|
|
12
|
-
defaultChecked?: boolean;
|
|
13
|
-
id?: string;
|
|
14
|
-
isChecked?: boolean;
|
|
15
|
-
isDisabled?: boolean;
|
|
16
|
-
isIndeterminate?: boolean;
|
|
17
|
-
isInvalid?: boolean;
|
|
18
|
-
isRequired?: boolean;
|
|
19
|
-
label?: React.ReactChild;
|
|
20
|
-
name?: string;
|
|
21
|
-
onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
22
|
-
value?: number | string;
|
|
23
|
-
testId?: string;
|
|
24
|
-
analyticsContext?: Record<string, any>;
|
|
25
|
-
xcss?: import("@atlaskit/css").StrictXCSSProp<"alignItems", never>;
|
|
26
|
-
}> & {
|
|
27
|
-
defaultChecked?: boolean;
|
|
28
|
-
id?: string;
|
|
29
|
-
isChecked?: boolean;
|
|
30
|
-
isDisabled?: boolean;
|
|
31
|
-
isIndeterminate?: boolean;
|
|
32
|
-
isInvalid?: boolean;
|
|
33
|
-
isRequired?: boolean;
|
|
34
|
-
label?: React.ReactChild;
|
|
35
|
-
name?: string;
|
|
36
|
-
onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
37
|
-
value?: number | string;
|
|
38
|
-
testId?: string;
|
|
39
|
-
analyticsContext?: Record<string, any>;
|
|
40
|
-
xcss?: import("@atlaskit/css").StrictXCSSProp<"alignItems", never>;
|
|
41
|
-
} & import("react").RefAttributes<HTMLInputElement>>>;
|
|
16
|
+
declare const Checkbox: MemoExoticComponent<ForwardRefExoticComponent<React.PropsWithoutRef<CheckboxProps> & RefAttributes<HTMLInputElement>>>;
|
|
42
17
|
export default Checkbox;
|
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { type ForwardRefExoticComponent, type MemoExoticComponent, type RefAttributes } from 'react';
|
|
6
|
+
import type { CheckboxProps } from './types';
|
|
2
7
|
/**
|
|
3
8
|
* __Checkbox__
|
|
4
9
|
*
|
|
@@ -8,35 +13,5 @@ import type UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
|
|
|
8
13
|
* - [Code](https://atlassian.design/components/checkbox/code)
|
|
9
14
|
* - [Usage](https://atlassian.design/components/checkbox/usage)
|
|
10
15
|
*/
|
|
11
|
-
declare const Checkbox:
|
|
12
|
-
defaultChecked?: boolean;
|
|
13
|
-
id?: string;
|
|
14
|
-
isChecked?: boolean;
|
|
15
|
-
isDisabled?: boolean;
|
|
16
|
-
isIndeterminate?: boolean;
|
|
17
|
-
isInvalid?: boolean;
|
|
18
|
-
isRequired?: boolean;
|
|
19
|
-
label?: React.ReactChild;
|
|
20
|
-
name?: string;
|
|
21
|
-
onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
22
|
-
value?: number | string;
|
|
23
|
-
testId?: string;
|
|
24
|
-
analyticsContext?: Record<string, any>;
|
|
25
|
-
xcss?: import("@atlaskit/css").StrictXCSSProp<"alignItems", never>;
|
|
26
|
-
}> & {
|
|
27
|
-
defaultChecked?: boolean;
|
|
28
|
-
id?: string;
|
|
29
|
-
isChecked?: boolean;
|
|
30
|
-
isDisabled?: boolean;
|
|
31
|
-
isIndeterminate?: boolean;
|
|
32
|
-
isInvalid?: boolean;
|
|
33
|
-
isRequired?: boolean;
|
|
34
|
-
label?: React.ReactChild;
|
|
35
|
-
name?: string;
|
|
36
|
-
onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
37
|
-
value?: number | string;
|
|
38
|
-
testId?: string;
|
|
39
|
-
analyticsContext?: Record<string, any>;
|
|
40
|
-
xcss?: import("@atlaskit/css").StrictXCSSProp<"alignItems", never>;
|
|
41
|
-
} & import("react").RefAttributes<HTMLInputElement>>>;
|
|
16
|
+
declare const Checkbox: MemoExoticComponent<ForwardRefExoticComponent<React.PropsWithoutRef<CheckboxProps> & RefAttributes<HTMLInputElement>>>;
|
|
42
17
|
export default Checkbox;
|
package/offerings.json
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"name": "Checkbox",
|
|
4
|
+
"package": "@atlaskit/checkbox",
|
|
5
|
+
"import": {
|
|
6
|
+
"name": "Checkbox",
|
|
7
|
+
"package": "@atlaskit/checkbox",
|
|
8
|
+
"type": "default"
|
|
9
|
+
},
|
|
10
|
+
"keywords": ["checkbox", "input", "form", "selection", "choice", "option", "multiple"],
|
|
11
|
+
"categories": ["forms-and-input"],
|
|
12
|
+
"shortDescription": "A checkbox is an input control that allows a user to select one or more options from a number of choices.",
|
|
13
|
+
"status": "general-availability",
|
|
14
|
+
"accessibilityGuidelines": [
|
|
15
|
+
"Ensure proper labeling for all checkboxes",
|
|
16
|
+
"Use clear, descriptive labels that explain the choice",
|
|
17
|
+
"Provide keyboard navigation support",
|
|
18
|
+
"Indicate required fields clearly",
|
|
19
|
+
"Use appropriate error states and messaging"
|
|
20
|
+
],
|
|
21
|
+
"usageGuidelines": [
|
|
22
|
+
"Use for multiple choice selections",
|
|
23
|
+
"Group related checkboxes logically",
|
|
24
|
+
"Provide clear labels for each option",
|
|
25
|
+
"Use indeterminate state for partial selections",
|
|
26
|
+
"Consider default states carefully"
|
|
27
|
+
],
|
|
28
|
+
"contentGuidelines": [
|
|
29
|
+
"Write clear, descriptive labels",
|
|
30
|
+
"Use consistent language across related options",
|
|
31
|
+
"Avoid negative phrasing when possible",
|
|
32
|
+
"Group related options together"
|
|
33
|
+
],
|
|
34
|
+
"generativeInstructions": "./docs/ai/checkbox-instructions.md",
|
|
35
|
+
"examples": ["./examples/ai/checkbox.tsx"]
|
|
36
|
+
}
|
|
37
|
+
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/checkbox",
|
|
3
|
-
"version": "17.1.
|
|
3
|
+
"version": "17.1.16",
|
|
4
4
|
"description": "A checkbox is an input control that allows a user to select one or more options from a number of choices.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -34,11 +34,11 @@
|
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@atlaskit/analytics-next": "^11.1.0",
|
|
36
36
|
"@atlaskit/css": "^0.14.0",
|
|
37
|
-
"@atlaskit/ds-lib": "^5.
|
|
38
|
-
"@atlaskit/icon": "^28.
|
|
37
|
+
"@atlaskit/ds-lib": "^5.1.0",
|
|
38
|
+
"@atlaskit/icon": "^28.3.0",
|
|
39
39
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
40
|
-
"@atlaskit/theme": "^
|
|
41
|
-
"@atlaskit/tokens": "^6.
|
|
40
|
+
"@atlaskit/theme": "^21.0.0",
|
|
41
|
+
"@atlaskit/tokens": "^6.4.0",
|
|
42
42
|
"@babel/runtime": "^7.0.0",
|
|
43
43
|
"@compiled/react": "^0.18.3"
|
|
44
44
|
},
|
|
@@ -50,10 +50,10 @@
|
|
|
50
50
|
"@af/integration-testing": "workspace:^",
|
|
51
51
|
"@af/visual-regression": "workspace:^",
|
|
52
52
|
"@atlaskit/button": "^23.4.0",
|
|
53
|
-
"@atlaskit/docs": "^11.
|
|
54
|
-
"@atlaskit/form": "^
|
|
53
|
+
"@atlaskit/docs": "^11.1.0",
|
|
54
|
+
"@atlaskit/form": "^14.2.0",
|
|
55
55
|
"@atlaskit/link": "^3.2.0",
|
|
56
|
-
"@atlaskit/primitives": "^14.
|
|
56
|
+
"@atlaskit/primitives": "^14.15.0",
|
|
57
57
|
"@atlaskit/section-message": "^8.7.0",
|
|
58
58
|
"@atlaskit/ssr": "workspace:^",
|
|
59
59
|
"@atlassian/feature-flags-test-utils": "^0.3.0",
|