@atlaskit/checkbox 13.4.0 → 13.5.0
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 +868 -861
- package/README.md +2 -1
- package/__perf__/checkbox.tsx +54 -72
- package/__perf__/default.tsx +7 -7
- package/codemods/12.0.0-lite-mode.tsx +12 -16
- package/codemods/__tests__/12.0.0-lite-mode.tsx +105 -105
- package/codemods/migrations/remove-imports.tsx +3 -3
- package/codemods/migrations/remove-props.tsx +9 -13
- package/codemods/migrations/rename-import.tsx +10 -10
- package/codemods/migrations/rename-input-ref-to-ref.tsx +4 -4
- package/codemods/utils.tsx +360 -400
- package/dist/cjs/checkbox.js +20 -1
- package/dist/cjs/internal/checkbox-icon.js +2 -0
- package/dist/cjs/internal/label-text.js +4 -0
- package/dist/cjs/internal/label.js +5 -0
- package/dist/cjs/internal/required-indicator.js +6 -2
- package/dist/es2019/checkbox.js +21 -1
- package/dist/es2019/internal/checkbox-icon.js +2 -0
- package/dist/es2019/internal/label-text.js +4 -0
- package/dist/es2019/internal/label.js +5 -0
- package/dist/es2019/internal/required-indicator.js +6 -2
- package/dist/esm/checkbox.js +21 -1
- package/dist/esm/internal/checkbox-icon.js +2 -0
- package/dist/esm/internal/label-text.js +4 -0
- package/dist/esm/internal/label.js +5 -0
- package/dist/esm/internal/required-indicator.js +6 -2
- package/dist/types/internal/label-text.d.ts +3 -0
- package/dist/types/internal/label.d.ts +4 -1
- package/dist/types/internal/required-indicator.d.ts +3 -0
- package/dist/types-ts4.5/internal/label-text.d.ts +3 -0
- package/dist/types-ts4.5/internal/label.d.ts +4 -1
- package/dist/types-ts4.5/internal/required-indicator.d.ts +3 -0
- package/extract-react-types/checkbox-props.tsx +1 -1
- package/package.json +93 -95
- package/report.api.md +41 -46
package/dist/cjs/checkbox.js
CHANGED
|
@@ -16,6 +16,7 @@ var _colors = require("@atlaskit/theme/colors");
|
|
|
16
16
|
var _internal = require("./internal");
|
|
17
17
|
var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId", "xcss"];
|
|
18
18
|
/** @jsx jsx */
|
|
19
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
19
20
|
/* eslint-disable @atlaskit/design-system/no-nested-styles */
|
|
20
21
|
var checkboxStyles = (0, _react2.css)({
|
|
21
22
|
width: '100%',
|
|
@@ -26,6 +27,7 @@ var checkboxStyles = (0, _react2.css)({
|
|
|
26
27
|
gridArea: '1 / 1 / 2 / 2',
|
|
27
28
|
opacity: 0,
|
|
28
29
|
outline: 'none',
|
|
30
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
29
31
|
'& + svg': {
|
|
30
32
|
/**
|
|
31
33
|
* Change the variables --checkbox-background-color, --checkbox-border-color
|
|
@@ -41,74 +43,91 @@ var checkboxStyles = (0, _react2.css)({
|
|
|
41
43
|
gridArea: '1 / 1 / 2 / 2',
|
|
42
44
|
pointerEvents: 'none',
|
|
43
45
|
transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
|
|
46
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
44
47
|
'rect:first-of-type': {
|
|
45
48
|
stroke: 'var(--checkbox-border-color)',
|
|
46
49
|
strokeWidth: "var(--ds-border-width, 1px)",
|
|
47
50
|
transition: 'stroke 0.2s ease-in-out'
|
|
48
51
|
}
|
|
49
52
|
},
|
|
53
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
50
54
|
'&&:focus + svg, &&:checked:focus + svg': {
|
|
51
55
|
borderRadius: "var(--ds-border-radius, 0.25rem)",
|
|
52
56
|
outline: "var(--ds-border-width-outline, 2px)".concat(" solid ", "var(--ds-border-focused, ".concat(_colors.B200, ")")),
|
|
53
57
|
outlineOffset: "var(--ds-space-negative-025, -2px)"
|
|
54
58
|
},
|
|
59
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
55
60
|
'&:hover + svg': {
|
|
56
61
|
'--checkbox-background-color': 'var(--local-background-hover)',
|
|
57
62
|
'--checkbox-border-color': 'var(--local-border-hover)'
|
|
58
63
|
},
|
|
64
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
59
65
|
'&:checked:hover + svg': {
|
|
60
66
|
'--checkbox-background-color': 'var(--local-background-checked-hover)',
|
|
61
67
|
'--checkbox-border-color': 'var(--local-border-checked-hover)'
|
|
62
68
|
},
|
|
69
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
63
70
|
'&:checked + svg': {
|
|
64
71
|
'--checkbox-background-color': 'var(--local-background-checked)',
|
|
65
72
|
'--checkbox-border-color': 'var(--local-border-checked)',
|
|
66
73
|
'--checkbox-tick-color': 'var(--local-tick-checked)'
|
|
67
74
|
},
|
|
75
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
68
76
|
'&[data-invalid] + svg': {
|
|
69
77
|
'--checkbox-border-color': 'var(--local-border-invalid)'
|
|
70
78
|
},
|
|
79
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
71
80
|
'&:checked[data-invalid] + svg': {
|
|
72
81
|
'--checkbox-border-color': 'var(--local-border-checked-invalid)'
|
|
73
82
|
},
|
|
83
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
74
84
|
'&:active + svg': {
|
|
75
85
|
'--checkbox-background-color': 'var(--local-background-active)',
|
|
76
86
|
'--checkbox-border-color': 'var(--local-border-active)'
|
|
77
87
|
},
|
|
88
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
78
89
|
'&:checked:active + svg': {
|
|
79
90
|
'--checkbox-background-color': 'var(--local-background-active)',
|
|
80
91
|
'--checkbox-border-color': 'var(--local-border-active)',
|
|
81
92
|
'--checkbox-tick-color': 'var(--local-tick-active)'
|
|
82
93
|
},
|
|
94
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
83
95
|
'&:disabled + svg, &:disabled:hover + svg, &:disabled:focus + svg, &:disabled:active + svg, &:disabled[data-invalid] + svg': {
|
|
84
96
|
'--checkbox-background-color': 'var(--local-background-disabled)',
|
|
85
97
|
'--checkbox-border-color': 'var(--local-border-disabled)',
|
|
86
98
|
cursor: 'not-allowed',
|
|
87
99
|
pointerEvents: 'none'
|
|
88
100
|
},
|
|
101
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
89
102
|
'&:disabled:checked + svg': {
|
|
90
103
|
'--checkbox-tick-color': 'var(--local-tick-disabled)'
|
|
91
104
|
},
|
|
92
105
|
'@media screen and (forced-colors: active)': {
|
|
106
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
93
107
|
'& + svg': {
|
|
94
108
|
'--checkbox-background-color': 'Canvas',
|
|
95
109
|
'--checkbox-border-color': 'CanvasText',
|
|
96
110
|
'--checkbox-tick-color': 'CanvasText'
|
|
97
111
|
},
|
|
112
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
98
113
|
'&:checked + svg, &:checked:hover + svg': {
|
|
99
114
|
'--checkbox-background-color': 'Canvas',
|
|
100
115
|
'--checkbox-border-color': 'CanvasText',
|
|
101
116
|
'--checkbox-tick-color': 'CanvasText'
|
|
102
117
|
},
|
|
118
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
103
119
|
'&:focus + svg rect:first-of-type': {
|
|
104
120
|
stroke: 'Highlight'
|
|
105
121
|
},
|
|
122
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
106
123
|
'&[data-invalid] + svg': {
|
|
107
124
|
'--checkbox-border-color': 'Highlight'
|
|
108
125
|
},
|
|
126
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
109
127
|
'&:checked[data-invalid] + svg': {
|
|
110
128
|
'--checkbox-border-color': 'Highlight'
|
|
111
129
|
},
|
|
130
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
112
131
|
'&:disabled + svg, &:disabled:hover + svg, &:disabled:focus + svg, &:disabled:active + svg, &:disabled[data-invalid] + svg': {
|
|
113
132
|
'--checkbox-background-color': 'Canvas',
|
|
114
133
|
'--checkbox-border-color': 'GrayText',
|
|
@@ -164,7 +183,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
|
|
|
164
183
|
analyticsData: analyticsContext,
|
|
165
184
|
componentName: 'checkbox',
|
|
166
185
|
packageName: "@atlaskit/checkbox",
|
|
167
|
-
packageVersion: "13.
|
|
186
|
+
packageVersion: "13.5.0"
|
|
168
187
|
});
|
|
169
188
|
var internalRef = (0, _react.useRef)(null);
|
|
170
189
|
var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]);
|
|
@@ -10,6 +10,8 @@ var _react2 = require("@emotion/react");
|
|
|
10
10
|
var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
|
|
11
11
|
/** @jsx jsx */
|
|
12
12
|
|
|
13
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
14
|
+
|
|
13
15
|
function getIcon(isIndeterminate, isChecked) {
|
|
14
16
|
if (isIndeterminate) {
|
|
15
17
|
return (0, _react2.jsx)("rect", {
|
|
@@ -5,7 +5,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = LabelText;
|
|
7
7
|
var _react = require("@emotion/react");
|
|
8
|
+
/**
|
|
9
|
+
* @jsxRuntime classic
|
|
10
|
+
*/
|
|
8
11
|
/** @jsx jsx */
|
|
12
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
9
13
|
|
|
10
14
|
var labelTextStyles = (0, _react.css)({
|
|
11
15
|
alignSelf: 'center',
|
|
@@ -6,7 +6,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = Label;
|
|
7
7
|
var _react = require("@emotion/react");
|
|
8
8
|
var _colors = require("@atlaskit/theme/colors");
|
|
9
|
+
/**
|
|
10
|
+
* @jsxRuntime classic
|
|
11
|
+
*/
|
|
9
12
|
/** @jsx jsx */
|
|
13
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
10
14
|
|
|
11
15
|
var baseStyles = (0, _react.css)({
|
|
12
16
|
display: 'grid',
|
|
@@ -64,6 +68,7 @@ function Label(_ref) {
|
|
|
64
68
|
return (0, _react.jsx)("label", {
|
|
65
69
|
// Because we're using Emotion local jsx namespace we have to coerce xcss prop to a string.
|
|
66
70
|
// When we're fully on Compiled its local jsx namespace accepts the output of xcss prop.
|
|
71
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
67
72
|
className: xcss,
|
|
68
73
|
css: [baseStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, labelStyles],
|
|
69
74
|
"data-testid": testId,
|
|
@@ -6,11 +6,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = RequiredIndicator;
|
|
7
7
|
var _react = require("@emotion/react");
|
|
8
8
|
var _colors = require("@atlaskit/theme/colors");
|
|
9
|
+
/**
|
|
10
|
+
* @jsxRuntime classic
|
|
11
|
+
*/
|
|
9
12
|
/** @jsx jsx */
|
|
13
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
10
14
|
|
|
11
15
|
var requiredIndicatorStyles = (0, _react.css)({
|
|
12
|
-
|
|
13
|
-
|
|
16
|
+
color: "var(--ds-text-danger, ".concat(_colors.R500, ")"),
|
|
17
|
+
paddingInlineStart: "var(--ds-space-025, 2px)"
|
|
14
18
|
});
|
|
15
19
|
function RequiredIndicator() {
|
|
16
20
|
return (0, _react.jsx)("span", {
|
package/dist/es2019/checkbox.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
/** @jsx jsx */
|
|
3
3
|
import { forwardRef, memo, useCallback, useRef, useState } from 'react';
|
|
4
|
+
|
|
5
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
4
6
|
import { css, jsx } from '@emotion/react';
|
|
5
7
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
|
|
6
8
|
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
|
|
@@ -16,6 +18,7 @@ const checkboxStyles = css({
|
|
|
16
18
|
gridArea: '1 / 1 / 2 / 2',
|
|
17
19
|
opacity: 0,
|
|
18
20
|
outline: 'none',
|
|
21
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
19
22
|
'& + svg': {
|
|
20
23
|
/**
|
|
21
24
|
* Change the variables --checkbox-background-color, --checkbox-border-color
|
|
@@ -31,74 +34,91 @@ const checkboxStyles = css({
|
|
|
31
34
|
gridArea: '1 / 1 / 2 / 2',
|
|
32
35
|
pointerEvents: 'none',
|
|
33
36
|
transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
|
|
37
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
34
38
|
'rect:first-of-type': {
|
|
35
39
|
stroke: 'var(--checkbox-border-color)',
|
|
36
40
|
strokeWidth: "var(--ds-border-width, 1px)",
|
|
37
41
|
transition: 'stroke 0.2s ease-in-out'
|
|
38
42
|
}
|
|
39
43
|
},
|
|
44
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
40
45
|
'&&:focus + svg, &&:checked:focus + svg': {
|
|
41
46
|
borderRadius: "var(--ds-border-radius, 0.25rem)",
|
|
42
47
|
outline: `${"var(--ds-border-width-outline, 2px)"} solid ${`var(--ds-border-focused, ${B200})`}`,
|
|
43
48
|
outlineOffset: "var(--ds-space-negative-025, -2px)"
|
|
44
49
|
},
|
|
50
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
45
51
|
'&:hover + svg': {
|
|
46
52
|
'--checkbox-background-color': 'var(--local-background-hover)',
|
|
47
53
|
'--checkbox-border-color': 'var(--local-border-hover)'
|
|
48
54
|
},
|
|
55
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
49
56
|
'&:checked:hover + svg': {
|
|
50
57
|
'--checkbox-background-color': 'var(--local-background-checked-hover)',
|
|
51
58
|
'--checkbox-border-color': 'var(--local-border-checked-hover)'
|
|
52
59
|
},
|
|
60
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
53
61
|
'&:checked + svg': {
|
|
54
62
|
'--checkbox-background-color': 'var(--local-background-checked)',
|
|
55
63
|
'--checkbox-border-color': 'var(--local-border-checked)',
|
|
56
64
|
'--checkbox-tick-color': 'var(--local-tick-checked)'
|
|
57
65
|
},
|
|
66
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
58
67
|
'&[data-invalid] + svg': {
|
|
59
68
|
'--checkbox-border-color': 'var(--local-border-invalid)'
|
|
60
69
|
},
|
|
70
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
61
71
|
'&:checked[data-invalid] + svg': {
|
|
62
72
|
'--checkbox-border-color': 'var(--local-border-checked-invalid)'
|
|
63
73
|
},
|
|
74
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
64
75
|
'&:active + svg': {
|
|
65
76
|
'--checkbox-background-color': 'var(--local-background-active)',
|
|
66
77
|
'--checkbox-border-color': 'var(--local-border-active)'
|
|
67
78
|
},
|
|
79
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
68
80
|
'&:checked:active + svg': {
|
|
69
81
|
'--checkbox-background-color': 'var(--local-background-active)',
|
|
70
82
|
'--checkbox-border-color': 'var(--local-border-active)',
|
|
71
83
|
'--checkbox-tick-color': 'var(--local-tick-active)'
|
|
72
84
|
},
|
|
85
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
73
86
|
'&:disabled + svg, &:disabled:hover + svg, &:disabled:focus + svg, &:disabled:active + svg, &:disabled[data-invalid] + svg': {
|
|
74
87
|
'--checkbox-background-color': 'var(--local-background-disabled)',
|
|
75
88
|
'--checkbox-border-color': 'var(--local-border-disabled)',
|
|
76
89
|
cursor: 'not-allowed',
|
|
77
90
|
pointerEvents: 'none'
|
|
78
91
|
},
|
|
92
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
79
93
|
'&:disabled:checked + svg': {
|
|
80
94
|
'--checkbox-tick-color': 'var(--local-tick-disabled)'
|
|
81
95
|
},
|
|
82
96
|
'@media screen and (forced-colors: active)': {
|
|
97
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
83
98
|
'& + svg': {
|
|
84
99
|
'--checkbox-background-color': 'Canvas',
|
|
85
100
|
'--checkbox-border-color': 'CanvasText',
|
|
86
101
|
'--checkbox-tick-color': 'CanvasText'
|
|
87
102
|
},
|
|
103
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
88
104
|
'&:checked + svg, &:checked:hover + svg': {
|
|
89
105
|
'--checkbox-background-color': 'Canvas',
|
|
90
106
|
'--checkbox-border-color': 'CanvasText',
|
|
91
107
|
'--checkbox-tick-color': 'CanvasText'
|
|
92
108
|
},
|
|
109
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
93
110
|
'&:focus + svg rect:first-of-type': {
|
|
94
111
|
stroke: 'Highlight'
|
|
95
112
|
},
|
|
113
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
96
114
|
'&[data-invalid] + svg': {
|
|
97
115
|
'--checkbox-border-color': 'Highlight'
|
|
98
116
|
},
|
|
117
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
99
118
|
'&:checked[data-invalid] + svg': {
|
|
100
119
|
'--checkbox-border-color': 'Highlight'
|
|
101
120
|
},
|
|
121
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
102
122
|
'&:disabled + svg, &:disabled:hover + svg, &:disabled:focus + svg, &:disabled:active + svg, &:disabled[data-invalid] + svg': {
|
|
103
123
|
'--checkbox-background-color': 'Canvas',
|
|
104
124
|
'--checkbox-border-color': 'GrayText',
|
|
@@ -148,7 +168,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
|
|
|
148
168
|
analyticsData: analyticsContext,
|
|
149
169
|
componentName: 'checkbox',
|
|
150
170
|
packageName: "@atlaskit/checkbox",
|
|
151
|
-
packageVersion: "13.
|
|
171
|
+
packageVersion: "13.5.0"
|
|
152
172
|
});
|
|
153
173
|
const internalRef = useRef(null);
|
|
154
174
|
const mergedRefs = mergeRefs([internalRef, ref]);
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
import { memo, useMemo } from 'react';
|
|
3
|
+
|
|
4
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
5
|
import { jsx } from '@emotion/react';
|
|
4
6
|
import PrimitiveSVGIcon from '@atlaskit/icon/svg';
|
|
5
7
|
function getIcon(isIndeterminate, isChecked) {
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
5
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
6
|
import { css, jsx } from '@emotion/react';
|
|
3
7
|
import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
|
|
4
8
|
const baseStyles = css({
|
|
@@ -58,6 +62,7 @@ export default function Label({
|
|
|
58
62
|
return jsx("label", {
|
|
59
63
|
// Because we're using Emotion local jsx namespace we have to coerce xcss prop to a string.
|
|
60
64
|
// When we're fully on Compiled its local jsx namespace accepts the output of xcss prop.
|
|
65
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
61
66
|
className: xcss,
|
|
62
67
|
css: [baseStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, labelStyles],
|
|
63
68
|
"data-testid": testId,
|
|
@@ -1,9 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
5
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
6
|
import { css, jsx } from '@emotion/react';
|
|
3
7
|
import { R500 } from '@atlaskit/theme/colors';
|
|
4
8
|
const requiredIndicatorStyles = css({
|
|
5
|
-
|
|
6
|
-
|
|
9
|
+
color: `var(--ds-text-danger, ${R500})`,
|
|
10
|
+
paddingInlineStart: "var(--ds-space-025, 2px)"
|
|
7
11
|
});
|
|
8
12
|
export default function RequiredIndicator() {
|
|
9
13
|
return jsx("span", {
|
package/dist/esm/checkbox.js
CHANGED
|
@@ -4,6 +4,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
|
|
|
4
4
|
var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId", "xcss"];
|
|
5
5
|
/** @jsx jsx */
|
|
6
6
|
import { forwardRef, memo, useCallback, useRef, useState } from 'react';
|
|
7
|
+
|
|
8
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
7
9
|
import { css, jsx } from '@emotion/react';
|
|
8
10
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
|
|
9
11
|
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
|
|
@@ -19,6 +21,7 @@ var checkboxStyles = css({
|
|
|
19
21
|
gridArea: '1 / 1 / 2 / 2',
|
|
20
22
|
opacity: 0,
|
|
21
23
|
outline: 'none',
|
|
24
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
22
25
|
'& + svg': {
|
|
23
26
|
/**
|
|
24
27
|
* Change the variables --checkbox-background-color, --checkbox-border-color
|
|
@@ -34,74 +37,91 @@ var checkboxStyles = css({
|
|
|
34
37
|
gridArea: '1 / 1 / 2 / 2',
|
|
35
38
|
pointerEvents: 'none',
|
|
36
39
|
transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
|
|
40
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
37
41
|
'rect:first-of-type': {
|
|
38
42
|
stroke: 'var(--checkbox-border-color)',
|
|
39
43
|
strokeWidth: "var(--ds-border-width, 1px)",
|
|
40
44
|
transition: 'stroke 0.2s ease-in-out'
|
|
41
45
|
}
|
|
42
46
|
},
|
|
47
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
43
48
|
'&&:focus + svg, &&:checked:focus + svg': {
|
|
44
49
|
borderRadius: "var(--ds-border-radius, 0.25rem)",
|
|
45
50
|
outline: "var(--ds-border-width-outline, 2px)".concat(" solid ", "var(--ds-border-focused, ".concat(B200, ")")),
|
|
46
51
|
outlineOffset: "var(--ds-space-negative-025, -2px)"
|
|
47
52
|
},
|
|
53
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
48
54
|
'&:hover + svg': {
|
|
49
55
|
'--checkbox-background-color': 'var(--local-background-hover)',
|
|
50
56
|
'--checkbox-border-color': 'var(--local-border-hover)'
|
|
51
57
|
},
|
|
58
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
52
59
|
'&:checked:hover + svg': {
|
|
53
60
|
'--checkbox-background-color': 'var(--local-background-checked-hover)',
|
|
54
61
|
'--checkbox-border-color': 'var(--local-border-checked-hover)'
|
|
55
62
|
},
|
|
63
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
56
64
|
'&:checked + svg': {
|
|
57
65
|
'--checkbox-background-color': 'var(--local-background-checked)',
|
|
58
66
|
'--checkbox-border-color': 'var(--local-border-checked)',
|
|
59
67
|
'--checkbox-tick-color': 'var(--local-tick-checked)'
|
|
60
68
|
},
|
|
69
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
61
70
|
'&[data-invalid] + svg': {
|
|
62
71
|
'--checkbox-border-color': 'var(--local-border-invalid)'
|
|
63
72
|
},
|
|
73
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
64
74
|
'&:checked[data-invalid] + svg': {
|
|
65
75
|
'--checkbox-border-color': 'var(--local-border-checked-invalid)'
|
|
66
76
|
},
|
|
77
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
67
78
|
'&:active + svg': {
|
|
68
79
|
'--checkbox-background-color': 'var(--local-background-active)',
|
|
69
80
|
'--checkbox-border-color': 'var(--local-border-active)'
|
|
70
81
|
},
|
|
82
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
71
83
|
'&:checked:active + svg': {
|
|
72
84
|
'--checkbox-background-color': 'var(--local-background-active)',
|
|
73
85
|
'--checkbox-border-color': 'var(--local-border-active)',
|
|
74
86
|
'--checkbox-tick-color': 'var(--local-tick-active)'
|
|
75
87
|
},
|
|
88
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
76
89
|
'&:disabled + svg, &:disabled:hover + svg, &:disabled:focus + svg, &:disabled:active + svg, &:disabled[data-invalid] + svg': {
|
|
77
90
|
'--checkbox-background-color': 'var(--local-background-disabled)',
|
|
78
91
|
'--checkbox-border-color': 'var(--local-border-disabled)',
|
|
79
92
|
cursor: 'not-allowed',
|
|
80
93
|
pointerEvents: 'none'
|
|
81
94
|
},
|
|
95
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
82
96
|
'&:disabled:checked + svg': {
|
|
83
97
|
'--checkbox-tick-color': 'var(--local-tick-disabled)'
|
|
84
98
|
},
|
|
85
99
|
'@media screen and (forced-colors: active)': {
|
|
100
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
86
101
|
'& + svg': {
|
|
87
102
|
'--checkbox-background-color': 'Canvas',
|
|
88
103
|
'--checkbox-border-color': 'CanvasText',
|
|
89
104
|
'--checkbox-tick-color': 'CanvasText'
|
|
90
105
|
},
|
|
106
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
91
107
|
'&:checked + svg, &:checked:hover + svg': {
|
|
92
108
|
'--checkbox-background-color': 'Canvas',
|
|
93
109
|
'--checkbox-border-color': 'CanvasText',
|
|
94
110
|
'--checkbox-tick-color': 'CanvasText'
|
|
95
111
|
},
|
|
112
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
96
113
|
'&:focus + svg rect:first-of-type': {
|
|
97
114
|
stroke: 'Highlight'
|
|
98
115
|
},
|
|
116
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
99
117
|
'&[data-invalid] + svg': {
|
|
100
118
|
'--checkbox-border-color': 'Highlight'
|
|
101
119
|
},
|
|
120
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
102
121
|
'&:checked[data-invalid] + svg': {
|
|
103
122
|
'--checkbox-border-color': 'Highlight'
|
|
104
123
|
},
|
|
124
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
105
125
|
'&:disabled + svg, &:disabled:hover + svg, &:disabled:focus + svg, &:disabled:active + svg, &:disabled[data-invalid] + svg': {
|
|
106
126
|
'--checkbox-background-color': 'Canvas',
|
|
107
127
|
'--checkbox-border-color': 'GrayText',
|
|
@@ -157,7 +177,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
|
|
|
157
177
|
analyticsData: analyticsContext,
|
|
158
178
|
componentName: 'checkbox',
|
|
159
179
|
packageName: "@atlaskit/checkbox",
|
|
160
|
-
packageVersion: "13.
|
|
180
|
+
packageVersion: "13.5.0"
|
|
161
181
|
});
|
|
162
182
|
var internalRef = useRef(null);
|
|
163
183
|
var mergedRefs = mergeRefs([internalRef, ref]);
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
import { memo, useMemo } from 'react';
|
|
3
|
+
|
|
4
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
5
|
import { jsx } from '@emotion/react';
|
|
4
6
|
import PrimitiveSVGIcon from '@atlaskit/icon/svg';
|
|
5
7
|
function getIcon(isIndeterminate, isChecked) {
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
5
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
6
|
import { css, jsx } from '@emotion/react';
|
|
3
7
|
import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
|
|
4
8
|
var baseStyles = css({
|
|
@@ -57,6 +61,7 @@ export default function Label(_ref) {
|
|
|
57
61
|
return jsx("label", {
|
|
58
62
|
// Because we're using Emotion local jsx namespace we have to coerce xcss prop to a string.
|
|
59
63
|
// When we're fully on Compiled its local jsx namespace accepts the output of xcss prop.
|
|
64
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
60
65
|
className: xcss,
|
|
61
66
|
css: [baseStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, labelStyles],
|
|
62
67
|
"data-testid": testId,
|
|
@@ -1,9 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
5
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
6
|
import { css, jsx } from '@emotion/react';
|
|
3
7
|
import { R500 } from '@atlaskit/theme/colors';
|
|
4
8
|
var requiredIndicatorStyles = css({
|
|
5
|
-
|
|
6
|
-
|
|
9
|
+
color: "var(--ds-text-danger, ".concat(R500, ")"),
|
|
10
|
+
paddingInlineStart: "var(--ds-space-025, 2px)"
|
|
7
11
|
});
|
|
8
12
|
export default function RequiredIndicator() {
|
|
9
13
|
return jsx("span", {
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
import { jsx } from '@emotion/react';
|
|
3
6
|
import { type LabelProps } from '../types';
|
|
4
|
-
export default function Label({ children, isDisabled, testId, label, id, xcss
|
|
7
|
+
export default function Label({ children, isDisabled, testId, label, id, xcss }: LabelProps): jsx.JSX.Element;
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
import { jsx } from '@emotion/react';
|
|
3
6
|
import { type LabelProps } from '../types';
|
|
4
|
-
export default function Label({ children, isDisabled, testId, label, id, xcss
|
|
7
|
+
export default function Label({ children, isDisabled, testId, label, id, xcss }: LabelProps): jsx.JSX.Element;
|