@atlaskit/checkbox 17.3.11 → 18.0.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 +32 -0
- package/checkbox.docs.tsx +47 -45
- package/dist/cjs/checkbox.js +1 -1
- package/dist/cjs/internal/label.compiled.css +6 -6
- package/dist/cjs/internal/label.js +1 -1
- package/dist/es2019/checkbox.js +1 -1
- package/dist/es2019/internal/label.compiled.css +6 -6
- package/dist/es2019/internal/label.js +1 -1
- package/dist/esm/checkbox.js +1 -1
- package/dist/esm/internal/label.compiled.css +6 -6
- package/dist/esm/internal/label.js +1 -1
- package/package.json +12 -19
- package/dist/types-ts4.5/checkbox.d.ts +0 -17
- package/dist/types-ts4.5/index.d.ts +0 -2
- package/dist/types-ts4.5/internal/checkbox-icon.d.ts +0 -19
- package/dist/types-ts4.5/internal/label-text.d.ts +0 -6
- package/dist/types-ts4.5/internal/label.d.ts +0 -2
- package/dist/types-ts4.5/internal/required-indicator.d.ts +0 -1
- package/dist/types-ts4.5/types.d.ts +0 -136
- package/offerings.json +0 -37
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,37 @@
|
|
|
1
1
|
# @atlaskit/checkbox
|
|
2
2
|
|
|
3
|
+
## 18.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
|
|
8
|
+
Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
|
|
9
|
+
|
|
10
|
+
Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
|
|
11
|
+
|
|
12
|
+
Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
|
|
13
|
+
|
|
14
|
+
```diff
|
|
15
|
+
- "typesVersions": {
|
|
16
|
+
- ">=4.5 <4.9": {
|
|
17
|
+
- "*": [
|
|
18
|
+
- "dist/types-ts4.5/*",
|
|
19
|
+
- "dist/types-ts4.5/index.d.ts"
|
|
20
|
+
- ]
|
|
21
|
+
- }
|
|
22
|
+
- },
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### Patch Changes
|
|
26
|
+
|
|
27
|
+
- Updated dependencies
|
|
28
|
+
|
|
29
|
+
## 17.3.12
|
|
30
|
+
|
|
31
|
+
### Patch Changes
|
|
32
|
+
|
|
33
|
+
- Updated dependencies
|
|
34
|
+
|
|
3
35
|
## 17.3.11
|
|
4
36
|
|
|
5
37
|
### Patch Changes
|
package/checkbox.docs.tsx
CHANGED
|
@@ -1,53 +1,55 @@
|
|
|
1
1
|
import path from 'path';
|
|
2
2
|
|
|
3
|
-
import type {
|
|
3
|
+
import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
|
|
4
4
|
|
|
5
|
-
const documentation:
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
description:
|
|
9
|
-
'A checkbox is an input control that allows a user to select one or more options from a number of choices.',
|
|
10
|
-
status: 'general-availability',
|
|
11
|
-
import: {
|
|
5
|
+
const documentation: StructuredContentSource = {
|
|
6
|
+
components: [
|
|
7
|
+
{
|
|
12
8
|
name: 'Checkbox',
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
},
|
|
18
|
-
usageGuidelines: [
|
|
19
|
-
'Use for multiple choice selections from a list, or for explicit confirmation (e.g. settings)',
|
|
20
|
-
'Use indeterminate state when some but not all children in a group are selected',
|
|
21
|
-
'Group related checkboxes logically',
|
|
22
|
-
'Provide clear labels for each option',
|
|
23
|
-
'Consider default states carefully',
|
|
24
|
-
'Use Radio for single selection; Dropdown for compact single choice; Toggle for on/off',
|
|
25
|
-
],
|
|
26
|
-
contentGuidelines: [
|
|
27
|
-
'Write short, descriptive labels; no punctuation after labels',
|
|
28
|
-
'Use consistent language across related options',
|
|
29
|
-
'Avoid negative phrasing when possible',
|
|
30
|
-
'Group related options together',
|
|
31
|
-
],
|
|
32
|
-
accessibilityGuidelines: [
|
|
33
|
-
'Include error messages for required or invalid checkbox state',
|
|
34
|
-
'Do not use disabled if the control must stay in tab order; use validation and error message so screen reader users hear why and how to proceed',
|
|
35
|
-
'Ensure proper labeling for all checkboxes',
|
|
36
|
-
'Use clear, descriptive labels that explain the choice',
|
|
37
|
-
'Provide keyboard navigation support',
|
|
38
|
-
'Indicate required fields clearly',
|
|
39
|
-
'Use appropriate error states and messaging',
|
|
40
|
-
],
|
|
41
|
-
examples: [
|
|
42
|
-
{
|
|
9
|
+
description:
|
|
10
|
+
'A checkbox is an input control that allows a user to select one or more options from a number of choices.',
|
|
11
|
+
status: 'general-availability',
|
|
12
|
+
import: {
|
|
43
13
|
name: 'Checkbox',
|
|
44
|
-
|
|
45
|
-
|
|
14
|
+
package: '@atlaskit/checkbox',
|
|
15
|
+
type: 'default',
|
|
16
|
+
packagePath: path.resolve(__dirname),
|
|
17
|
+
packageJson: require('./package.json'),
|
|
46
18
|
},
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
19
|
+
usageGuidelines: [
|
|
20
|
+
'Use for multiple choice selections from a list, or for explicit confirmation (e.g. settings)',
|
|
21
|
+
'Use indeterminate state when some but not all children in a group are selected',
|
|
22
|
+
'Group related checkboxes logically',
|
|
23
|
+
'Provide clear labels for each option',
|
|
24
|
+
'Consider default states carefully',
|
|
25
|
+
'Use Radio for single selection; Dropdown for compact single choice; Toggle for on/off',
|
|
26
|
+
],
|
|
27
|
+
contentGuidelines: [
|
|
28
|
+
'Write short, descriptive labels; no punctuation after labels',
|
|
29
|
+
'Use consistent language across related options',
|
|
30
|
+
'Avoid negative phrasing when possible',
|
|
31
|
+
'Group related options together',
|
|
32
|
+
],
|
|
33
|
+
accessibilityGuidelines: [
|
|
34
|
+
'Include error messages for required or invalid checkbox state',
|
|
35
|
+
'Do not use disabled if the control must stay in tab order; use validation and error message so screen reader users hear why and how to proceed',
|
|
36
|
+
'Ensure proper labeling for all checkboxes',
|
|
37
|
+
'Use clear, descriptive labels that explain the choice',
|
|
38
|
+
'Provide keyboard navigation support',
|
|
39
|
+
'Indicate required fields clearly',
|
|
40
|
+
'Use appropriate error states and messaging',
|
|
41
|
+
],
|
|
42
|
+
examples: [
|
|
43
|
+
{
|
|
44
|
+
name: 'Checkbox',
|
|
45
|
+
description: 'Checkbox example',
|
|
46
|
+
source: path.resolve(__dirname, './examples/ai/checkbox.tsx'),
|
|
47
|
+
},
|
|
48
|
+
],
|
|
49
|
+
keywords: ['checkbox', 'input', 'form', 'selection', 'choice', 'option', 'multiple'],
|
|
50
|
+
categories: ['forms-and-input'],
|
|
51
|
+
},
|
|
52
|
+
],
|
|
53
|
+
};
|
|
52
54
|
|
|
53
55
|
export default documentation;
|
package/dist/cjs/checkbox.js
CHANGED
|
@@ -76,7 +76,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
|
|
|
76
76
|
analyticsData: analyticsContext,
|
|
77
77
|
componentName: 'checkbox',
|
|
78
78
|
packageName: "@atlaskit/checkbox",
|
|
79
|
-
packageVersion: "
|
|
79
|
+
packageVersion: "17.3.12"
|
|
80
80
|
});
|
|
81
81
|
var internalRef = (0, _react.useRef)(null);
|
|
82
82
|
var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]);
|
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
._1e9d2sac{--checkbox-tick-color:var(--ds-icon-disabled,#080f214a)}
|
|
7
7
|
._1e9d5w2r{--checkbox-tick-color:var(--ds-icon-inverse,#fff)}
|
|
8
8
|
._1ejihkll{grid-auto-columns:1fr}
|
|
9
|
+
._1qwn187o{--checkbox-background-color:var(--ds-background-disabled,#0515240f)}
|
|
9
10
|
._1qwn1j9a{--checkbox-background-color:var(--ds-background-input,#fff)}
|
|
10
|
-
._1qwnby5v{--checkbox-background-color:var(--ds-background-disabled,#17171708)}
|
|
11
11
|
._1qwnjmqp{--checkbox-background-color:var(--ds-background-selected-bold,#1868db)}
|
|
12
12
|
._80om13gf{cursor:not-allowed}
|
|
13
13
|
._80om73ad{cursor:default}
|
|
14
|
+
._f0gr187o{--checkbox-border-color:var(--ds-background-disabled,#0515240f)}
|
|
14
15
|
._f0gr1bqt{--checkbox-border-color:var(--ds-border-danger,#e2483d)}
|
|
15
|
-
._f0grby5v{--checkbox-border-color:var(--ds-background-disabled,#17171708)}
|
|
16
16
|
._f0grjmqp{--checkbox-border-color:var(--ds-background-selected-bold,#1868db)}
|
|
17
17
|
._f0grrsbi{--checkbox-border-color:var(--ds-border-input,#8c8f97)}
|
|
18
18
|
._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
|
|
@@ -20,17 +20,17 @@
|
|
|
20
20
|
._umai184x{grid-auto-rows:min-content}
|
|
21
21
|
._yv0ey09t{grid-template-columns:min-content auto}
|
|
22
22
|
._ljcgdfik:focus-within{--checkbox-outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#4688ec)}
|
|
23
|
+
._1vj5187o:hover{--checkbox-background-color:var(--ds-background-disabled,#0515240f)}
|
|
23
24
|
._1vj51q28:hover{--checkbox-background-color:var(--ds-background-selected-bold-hovered,#1558bc)}
|
|
24
|
-
._1vj5by5v:hover{--checkbox-background-color:var(--ds-background-disabled,#17171708)}
|
|
25
25
|
._1vj5l4ek:hover{--checkbox-background-color:var(--ds-background-input-hovered,#f8f8f8)}
|
|
26
26
|
._9js12sac:hover{--checkbox-tick-color:var(--ds-icon-disabled,#080f214a)}
|
|
27
|
+
._q29q187o:hover{--checkbox-border-color:var(--ds-background-disabled,#0515240f)}
|
|
27
28
|
._q29q1bqt:hover{--checkbox-border-color:var(--ds-border-danger,#e2483d)}
|
|
28
29
|
._q29q1q28:hover{--checkbox-border-color:var(--ds-background-selected-bold-hovered,#1558bc)}
|
|
29
|
-
.
|
|
30
|
+
._cz1u187o:active{--checkbox-border-color:var(--ds-background-disabled,#0515240f)}
|
|
30
31
|
._cz1u1bqt:active{--checkbox-border-color:var(--ds-border-danger,#e2483d)}
|
|
31
32
|
._cz1u1l7x:active{--checkbox-border-color:var(--ds-border,#0b120e24)}
|
|
32
|
-
.
|
|
33
|
-
._dh4gby5v:active{--checkbox-background-color:var(--ds-background-disabled,#17171708)}
|
|
33
|
+
._dh4g187o:active{--checkbox-background-color:var(--ds-background-disabled,#0515240f)}
|
|
34
34
|
._dh4gr01l:active{--checkbox-background-color:var(--ds-background-input-pressed,#fff)}
|
|
35
35
|
._zoo92sac:active{--checkbox-tick-color:var(--ds-icon-disabled,#080f214a)}
|
|
36
36
|
._zoo95w2r:active{--checkbox-tick-color:var(--ds-icon-inverse,#fff)}
|
|
@@ -44,7 +44,7 @@ function Label(_ref) {
|
|
|
44
44
|
id = _ref.id,
|
|
45
45
|
xcss = _ref.xcss;
|
|
46
46
|
return /*#__PURE__*/React.createElement("label", {
|
|
47
|
-
className: (0, _runtime.ax)(["_11c8fhey _1e0c11p5 _1ejihkll _umai184x _1qwn1j9a _f0grrsbi _1c53glyw _1e9d1j28 _syazi7uo _80om73ad _ljcgdfik _1vj5l4ek _dh4gr01l _cz1u1l7x _jom5wc43 _1s071onz _106f1onz", label && "_zulp1nu5 _yv0ey09t", (isChecked || isIndeterminate) && "_1qwnjmqp _f0grjmqp _1e9d5w2r _1vj51q28 _q29q1q28 _dh4gr01l _cz1u1l7x _zoo95w2r _jom5wc43 _1s071onz _106f1onz", isInvalid && "_f0gr1bqt _q29q1bqt _cz1u1bqt _1s07gir2", isDisabled && "
|
|
47
|
+
className: (0, _runtime.ax)(["_11c8fhey _1e0c11p5 _1ejihkll _umai184x _1qwn1j9a _f0grrsbi _1c53glyw _1e9d1j28 _syazi7uo _80om73ad _ljcgdfik _1vj5l4ek _dh4gr01l _cz1u1l7x _jom5wc43 _1s071onz _106f1onz", label && "_zulp1nu5 _yv0ey09t", (isChecked || isIndeterminate) && "_1qwnjmqp _f0grjmqp _1e9d5w2r _1vj51q28 _q29q1q28 _dh4gr01l _cz1u1l7x _zoo95w2r _jom5wc43 _1s071onz _106f1onz", isInvalid && "_f0gr1bqt _q29q1bqt _cz1u1bqt _1s07gir2", isDisabled && "_1qwn187o _f0gr187o _syaz1gmx _80om13gf _1vj5187o _q29q187o _dh4g187o _cz1u187o _jom5wc43 _1s0718qt _106f18qt", isDisabled && (isChecked || isIndeterminate) && "_1e9d2sac _9js12sac _zoo92sac", xcss]),
|
|
48
48
|
"data-testid": testId,
|
|
49
49
|
"data-disabled": isDisabled || undefined,
|
|
50
50
|
id: id
|
package/dist/es2019/checkbox.js
CHANGED
|
@@ -58,7 +58,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox({
|
|
|
58
58
|
analyticsData: analyticsContext,
|
|
59
59
|
componentName: 'checkbox',
|
|
60
60
|
packageName: "@atlaskit/checkbox",
|
|
61
|
-
packageVersion: "
|
|
61
|
+
packageVersion: "17.3.12"
|
|
62
62
|
});
|
|
63
63
|
const internalRef = useRef(null);
|
|
64
64
|
const mergedRefs = mergeRefs([internalRef, ref]);
|
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
._1e9d2sac{--checkbox-tick-color:var(--ds-icon-disabled,#080f214a)}
|
|
7
7
|
._1e9d5w2r{--checkbox-tick-color:var(--ds-icon-inverse,#fff)}
|
|
8
8
|
._1ejihkll{grid-auto-columns:1fr}
|
|
9
|
+
._1qwn187o{--checkbox-background-color:var(--ds-background-disabled,#0515240f)}
|
|
9
10
|
._1qwn1j9a{--checkbox-background-color:var(--ds-background-input,#fff)}
|
|
10
|
-
._1qwnby5v{--checkbox-background-color:var(--ds-background-disabled,#17171708)}
|
|
11
11
|
._1qwnjmqp{--checkbox-background-color:var(--ds-background-selected-bold,#1868db)}
|
|
12
12
|
._80om13gf{cursor:not-allowed}
|
|
13
13
|
._80om73ad{cursor:default}
|
|
14
|
+
._f0gr187o{--checkbox-border-color:var(--ds-background-disabled,#0515240f)}
|
|
14
15
|
._f0gr1bqt{--checkbox-border-color:var(--ds-border-danger,#e2483d)}
|
|
15
|
-
._f0grby5v{--checkbox-border-color:var(--ds-background-disabled,#17171708)}
|
|
16
16
|
._f0grjmqp{--checkbox-border-color:var(--ds-background-selected-bold,#1868db)}
|
|
17
17
|
._f0grrsbi{--checkbox-border-color:var(--ds-border-input,#8c8f97)}
|
|
18
18
|
._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
|
|
@@ -20,17 +20,17 @@
|
|
|
20
20
|
._umai184x{grid-auto-rows:min-content}
|
|
21
21
|
._yv0ey09t{grid-template-columns:min-content auto}
|
|
22
22
|
._ljcgdfik:focus-within{--checkbox-outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#4688ec)}
|
|
23
|
+
._1vj5187o:hover{--checkbox-background-color:var(--ds-background-disabled,#0515240f)}
|
|
23
24
|
._1vj51q28:hover{--checkbox-background-color:var(--ds-background-selected-bold-hovered,#1558bc)}
|
|
24
|
-
._1vj5by5v:hover{--checkbox-background-color:var(--ds-background-disabled,#17171708)}
|
|
25
25
|
._1vj5l4ek:hover{--checkbox-background-color:var(--ds-background-input-hovered,#f8f8f8)}
|
|
26
26
|
._9js12sac:hover{--checkbox-tick-color:var(--ds-icon-disabled,#080f214a)}
|
|
27
|
+
._q29q187o:hover{--checkbox-border-color:var(--ds-background-disabled,#0515240f)}
|
|
27
28
|
._q29q1bqt:hover{--checkbox-border-color:var(--ds-border-danger,#e2483d)}
|
|
28
29
|
._q29q1q28:hover{--checkbox-border-color:var(--ds-background-selected-bold-hovered,#1558bc)}
|
|
29
|
-
.
|
|
30
|
+
._cz1u187o:active{--checkbox-border-color:var(--ds-background-disabled,#0515240f)}
|
|
30
31
|
._cz1u1bqt:active{--checkbox-border-color:var(--ds-border-danger,#e2483d)}
|
|
31
32
|
._cz1u1l7x:active{--checkbox-border-color:var(--ds-border,#0b120e24)}
|
|
32
|
-
.
|
|
33
|
-
._dh4gby5v:active{--checkbox-background-color:var(--ds-background-disabled,#17171708)}
|
|
33
|
+
._dh4g187o:active{--checkbox-background-color:var(--ds-background-disabled,#0515240f)}
|
|
34
34
|
._dh4gr01l:active{--checkbox-background-color:var(--ds-background-input-pressed,#fff)}
|
|
35
35
|
._zoo92sac:active{--checkbox-tick-color:var(--ds-icon-disabled,#080f214a)}
|
|
36
36
|
._zoo95w2r:active{--checkbox-tick-color:var(--ds-icon-inverse,#fff)}
|
|
@@ -37,7 +37,7 @@ export default function Label({
|
|
|
37
37
|
xcss
|
|
38
38
|
}) {
|
|
39
39
|
return /*#__PURE__*/React.createElement("label", {
|
|
40
|
-
className: ax(["_11c8fhey _1e0c11p5 _1ejihkll _umai184x _1qwn1j9a _f0grrsbi _1c53glyw _1e9d1j28 _syazi7uo _80om73ad _ljcgdfik _1vj5l4ek _dh4gr01l _cz1u1l7x _jom5wc43 _1s071onz _106f1onz", label && "_zulp1nu5 _yv0ey09t", (isChecked || isIndeterminate) && "_1qwnjmqp _f0grjmqp _1e9d5w2r _1vj51q28 _q29q1q28 _dh4gr01l _cz1u1l7x _zoo95w2r _jom5wc43 _1s071onz _106f1onz", isInvalid && "_f0gr1bqt _q29q1bqt _cz1u1bqt _1s07gir2", isDisabled && "
|
|
40
|
+
className: ax(["_11c8fhey _1e0c11p5 _1ejihkll _umai184x _1qwn1j9a _f0grrsbi _1c53glyw _1e9d1j28 _syazi7uo _80om73ad _ljcgdfik _1vj5l4ek _dh4gr01l _cz1u1l7x _jom5wc43 _1s071onz _106f1onz", label && "_zulp1nu5 _yv0ey09t", (isChecked || isIndeterminate) && "_1qwnjmqp _f0grjmqp _1e9d5w2r _1vj51q28 _q29q1q28 _dh4gr01l _cz1u1l7x _zoo95w2r _jom5wc43 _1s071onz _106f1onz", isInvalid && "_f0gr1bqt _q29q1bqt _cz1u1bqt _1s07gir2", isDisabled && "_1qwn187o _f0gr187o _syaz1gmx _80om13gf _1vj5187o _q29q187o _dh4g187o _cz1u187o _jom5wc43 _1s0718qt _106f18qt", isDisabled && (isChecked || isIndeterminate) && "_1e9d2sac _9js12sac _zoo92sac", xcss]),
|
|
41
41
|
"data-testid": testId,
|
|
42
42
|
"data-disabled": isDisabled || undefined,
|
|
43
43
|
id: id
|
package/dist/esm/checkbox.js
CHANGED
|
@@ -67,7 +67,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(_ref
|
|
|
67
67
|
analyticsData: analyticsContext,
|
|
68
68
|
componentName: 'checkbox',
|
|
69
69
|
packageName: "@atlaskit/checkbox",
|
|
70
|
-
packageVersion: "
|
|
70
|
+
packageVersion: "17.3.12"
|
|
71
71
|
});
|
|
72
72
|
var internalRef = useRef(null);
|
|
73
73
|
var mergedRefs = mergeRefs([internalRef, ref]);
|
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
._1e9d2sac{--checkbox-tick-color:var(--ds-icon-disabled,#080f214a)}
|
|
7
7
|
._1e9d5w2r{--checkbox-tick-color:var(--ds-icon-inverse,#fff)}
|
|
8
8
|
._1ejihkll{grid-auto-columns:1fr}
|
|
9
|
+
._1qwn187o{--checkbox-background-color:var(--ds-background-disabled,#0515240f)}
|
|
9
10
|
._1qwn1j9a{--checkbox-background-color:var(--ds-background-input,#fff)}
|
|
10
|
-
._1qwnby5v{--checkbox-background-color:var(--ds-background-disabled,#17171708)}
|
|
11
11
|
._1qwnjmqp{--checkbox-background-color:var(--ds-background-selected-bold,#1868db)}
|
|
12
12
|
._80om13gf{cursor:not-allowed}
|
|
13
13
|
._80om73ad{cursor:default}
|
|
14
|
+
._f0gr187o{--checkbox-border-color:var(--ds-background-disabled,#0515240f)}
|
|
14
15
|
._f0gr1bqt{--checkbox-border-color:var(--ds-border-danger,#e2483d)}
|
|
15
|
-
._f0grby5v{--checkbox-border-color:var(--ds-background-disabled,#17171708)}
|
|
16
16
|
._f0grjmqp{--checkbox-border-color:var(--ds-background-selected-bold,#1868db)}
|
|
17
17
|
._f0grrsbi{--checkbox-border-color:var(--ds-border-input,#8c8f97)}
|
|
18
18
|
._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
|
|
@@ -20,17 +20,17 @@
|
|
|
20
20
|
._umai184x{grid-auto-rows:min-content}
|
|
21
21
|
._yv0ey09t{grid-template-columns:min-content auto}
|
|
22
22
|
._ljcgdfik:focus-within{--checkbox-outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#4688ec)}
|
|
23
|
+
._1vj5187o:hover{--checkbox-background-color:var(--ds-background-disabled,#0515240f)}
|
|
23
24
|
._1vj51q28:hover{--checkbox-background-color:var(--ds-background-selected-bold-hovered,#1558bc)}
|
|
24
|
-
._1vj5by5v:hover{--checkbox-background-color:var(--ds-background-disabled,#17171708)}
|
|
25
25
|
._1vj5l4ek:hover{--checkbox-background-color:var(--ds-background-input-hovered,#f8f8f8)}
|
|
26
26
|
._9js12sac:hover{--checkbox-tick-color:var(--ds-icon-disabled,#080f214a)}
|
|
27
|
+
._q29q187o:hover{--checkbox-border-color:var(--ds-background-disabled,#0515240f)}
|
|
27
28
|
._q29q1bqt:hover{--checkbox-border-color:var(--ds-border-danger,#e2483d)}
|
|
28
29
|
._q29q1q28:hover{--checkbox-border-color:var(--ds-background-selected-bold-hovered,#1558bc)}
|
|
29
|
-
.
|
|
30
|
+
._cz1u187o:active{--checkbox-border-color:var(--ds-background-disabled,#0515240f)}
|
|
30
31
|
._cz1u1bqt:active{--checkbox-border-color:var(--ds-border-danger,#e2483d)}
|
|
31
32
|
._cz1u1l7x:active{--checkbox-border-color:var(--ds-border,#0b120e24)}
|
|
32
|
-
.
|
|
33
|
-
._dh4gby5v:active{--checkbox-background-color:var(--ds-background-disabled,#17171708)}
|
|
33
|
+
._dh4g187o:active{--checkbox-background-color:var(--ds-background-disabled,#0515240f)}
|
|
34
34
|
._dh4gr01l:active{--checkbox-background-color:var(--ds-background-input-pressed,#fff)}
|
|
35
35
|
._zoo92sac:active{--checkbox-tick-color:var(--ds-icon-disabled,#080f214a)}
|
|
36
36
|
._zoo95w2r:active{--checkbox-tick-color:var(--ds-icon-inverse,#fff)}
|
|
@@ -36,7 +36,7 @@ export default function Label(_ref) {
|
|
|
36
36
|
id = _ref.id,
|
|
37
37
|
xcss = _ref.xcss;
|
|
38
38
|
return /*#__PURE__*/React.createElement("label", {
|
|
39
|
-
className: ax(["_11c8fhey _1e0c11p5 _1ejihkll _umai184x _1qwn1j9a _f0grrsbi _1c53glyw _1e9d1j28 _syazi7uo _80om73ad _ljcgdfik _1vj5l4ek _dh4gr01l _cz1u1l7x _jom5wc43 _1s071onz _106f1onz", label && "_zulp1nu5 _yv0ey09t", (isChecked || isIndeterminate) && "_1qwnjmqp _f0grjmqp _1e9d5w2r _1vj51q28 _q29q1q28 _dh4gr01l _cz1u1l7x _zoo95w2r _jom5wc43 _1s071onz _106f1onz", isInvalid && "_f0gr1bqt _q29q1bqt _cz1u1bqt _1s07gir2", isDisabled && "
|
|
39
|
+
className: ax(["_11c8fhey _1e0c11p5 _1ejihkll _umai184x _1qwn1j9a _f0grrsbi _1c53glyw _1e9d1j28 _syazi7uo _80om73ad _ljcgdfik _1vj5l4ek _dh4gr01l _cz1u1l7x _jom5wc43 _1s071onz _106f1onz", label && "_zulp1nu5 _yv0ey09t", (isChecked || isIndeterminate) && "_1qwnjmqp _f0grjmqp _1e9d5w2r _1vj51q28 _q29q1q28 _dh4gr01l _cz1u1l7x _zoo95w2r _jom5wc43 _1s071onz _106f1onz", isInvalid && "_f0gr1bqt _q29q1bqt _cz1u1bqt _1s07gir2", isDisabled && "_1qwn187o _f0gr187o _syaz1gmx _80om13gf _1vj5187o _q29q187o _dh4g187o _cz1u187o _jom5wc43 _1s0718qt _106f18qt", isDisabled && (isChecked || isIndeterminate) && "_1e9d2sac _9js12sac _zoo92sac", xcss]),
|
|
40
40
|
"data-testid": testId,
|
|
41
41
|
"data-disabled": isDisabled || undefined,
|
|
42
42
|
id: id
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/checkbox",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "18.0.0",
|
|
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/"
|
|
@@ -12,14 +12,6 @@
|
|
|
12
12
|
"module": "dist/esm/index.js",
|
|
13
13
|
"module:es2019": "dist/es2019/index.js",
|
|
14
14
|
"types": "dist/types/index.d.ts",
|
|
15
|
-
"typesVersions": {
|
|
16
|
-
">=4.5 <4.9": {
|
|
17
|
-
"*": [
|
|
18
|
-
"dist/types-ts4.5/*",
|
|
19
|
-
"dist/types-ts4.5/index.d.ts"
|
|
20
|
-
]
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
15
|
"sideEffects": [
|
|
24
16
|
"**/*.compiled.css"
|
|
25
17
|
],
|
|
@@ -39,10 +31,10 @@
|
|
|
39
31
|
}
|
|
40
32
|
},
|
|
41
33
|
"dependencies": {
|
|
42
|
-
"@atlaskit/analytics-next": "^
|
|
43
|
-
"@atlaskit/css": "^0.
|
|
44
|
-
"@atlaskit/ds-lib": "^
|
|
45
|
-
"@atlaskit/tokens": "^
|
|
34
|
+
"@atlaskit/analytics-next": "^12.0.0",
|
|
35
|
+
"@atlaskit/css": "^1.0.0",
|
|
36
|
+
"@atlaskit/ds-lib": "^8.0.0",
|
|
37
|
+
"@atlaskit/tokens": "^14.0.0",
|
|
46
38
|
"@babel/runtime": "^7.0.0",
|
|
47
39
|
"@compiled/react": "^0.20.0"
|
|
48
40
|
},
|
|
@@ -54,17 +46,18 @@
|
|
|
54
46
|
"@af/integration-testing": "workspace:^",
|
|
55
47
|
"@af/suppress-react-warnings": "workspace:^",
|
|
56
48
|
"@af/visual-regression": "workspace:^",
|
|
57
|
-
"@atlaskit/button": "^
|
|
58
|
-
"@atlaskit/docs": "^
|
|
59
|
-
"@atlaskit/form": "^
|
|
60
|
-
"@atlaskit/link": "^
|
|
61
|
-
"@atlaskit/primitives": "^
|
|
62
|
-
"@atlaskit/section-message": "^
|
|
49
|
+
"@atlaskit/button": "^24.0.0",
|
|
50
|
+
"@atlaskit/docs": "^12.0.0",
|
|
51
|
+
"@atlaskit/form": "^16.0.0",
|
|
52
|
+
"@atlaskit/link": "^4.0.0",
|
|
53
|
+
"@atlaskit/primitives": "^20.0.0",
|
|
54
|
+
"@atlaskit/section-message": "^9.0.0",
|
|
63
55
|
"@atlassian/react-compiler-gating": "workspace:^",
|
|
64
56
|
"@atlassian/ssr-tests": "workspace:^",
|
|
65
57
|
"@atlassian/structured-docs-types": "workspace:^",
|
|
66
58
|
"@testing-library/react": "^16.3.0",
|
|
67
59
|
"jscodeshift": "^17.0.0",
|
|
60
|
+
"react": "^18.2.0",
|
|
68
61
|
"react-dom": "^18.2.0",
|
|
69
62
|
"storybook-addon-performance": "^0.17.3"
|
|
70
63
|
},
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type ForwardRefExoticComponent, type MemoExoticComponent, type RefAttributes } from 'react';
|
|
6
|
-
import type { CheckboxProps } from './types';
|
|
7
|
-
/**
|
|
8
|
-
* __Checkbox__
|
|
9
|
-
*
|
|
10
|
-
* A checkbox an input control that allows a user to select one or more options from a number of choices.
|
|
11
|
-
*
|
|
12
|
-
* - [Examples](https://atlassian.design/components/checkbox/examples)
|
|
13
|
-
* - [Code](https://atlassian.design/components/checkbox/code)
|
|
14
|
-
* - [Usage](https://atlassian.design/components/checkbox/usage)
|
|
15
|
-
*/
|
|
16
|
-
declare const Checkbox: MemoExoticComponent<ForwardRefExoticComponent<React.PropsWithoutRef<CheckboxProps> & RefAttributes<HTMLInputElement>>>;
|
|
17
|
-
export default Checkbox;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type NamedExoticComponent } from 'react';
|
|
6
|
-
type CheckboxIconProps = {
|
|
7
|
-
isIndeterminate: boolean;
|
|
8
|
-
isChecked: boolean;
|
|
9
|
-
};
|
|
10
|
-
/**
|
|
11
|
-
* __Checkbox icon__
|
|
12
|
-
*
|
|
13
|
-
* A checkbox icon is the visual representation of checkbox state,
|
|
14
|
-
* which is shown instead of the native input.
|
|
15
|
-
*
|
|
16
|
-
* @internal
|
|
17
|
-
*/
|
|
18
|
-
declare const CheckboxIcon: NamedExoticComponent<CheckboxIconProps>;
|
|
19
|
-
export default CheckboxIcon;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export default function RequiredIndicator(): JSX.Element;
|
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
import type React from 'react';
|
|
2
|
-
import type UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
|
|
3
|
-
import { type StrictXCSSProp } from '@atlaskit/css';
|
|
4
|
-
/**
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
* CHECKBOX PROPTYPES
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*/
|
|
11
|
-
type OwnProps = {
|
|
12
|
-
/**
|
|
13
|
-
* Sets whether the checkbox begins as checked or unchecked.
|
|
14
|
-
*/
|
|
15
|
-
defaultChecked?: boolean;
|
|
16
|
-
/**
|
|
17
|
-
* The ID assigned to the input.
|
|
18
|
-
*/
|
|
19
|
-
id?: string;
|
|
20
|
-
/**
|
|
21
|
-
* Sets whether the checkbox is checked or unchecked.
|
|
22
|
-
*/
|
|
23
|
-
isChecked?: boolean;
|
|
24
|
-
/**
|
|
25
|
-
* Sets whether the checkbox is disabled. Don’t use a disabled checkbox if it needs to remain in the tab order for assistive technologies.
|
|
26
|
-
*/
|
|
27
|
-
isDisabled?: boolean;
|
|
28
|
-
/**
|
|
29
|
-
* Sets whether the checkbox is indeterminate. This only affects the
|
|
30
|
-
* style and does not modify the isChecked property.
|
|
31
|
-
*/
|
|
32
|
-
isIndeterminate?: boolean;
|
|
33
|
-
/**
|
|
34
|
-
* Marks the field as invalid. Changes style of unchecked component.
|
|
35
|
-
*/
|
|
36
|
-
isInvalid?: boolean;
|
|
37
|
-
/**
|
|
38
|
-
* Marks the field as required & changes the label style.
|
|
39
|
-
*/
|
|
40
|
-
isRequired?: boolean;
|
|
41
|
-
/**
|
|
42
|
-
* The label to be displayed to the right of the checkbox. The label is part
|
|
43
|
-
* of the clickable element to select the checkbox.
|
|
44
|
-
*/
|
|
45
|
-
label?: React.ReactChild;
|
|
46
|
-
/**
|
|
47
|
-
* The name of the submitted field in a checkbox.
|
|
48
|
-
*/
|
|
49
|
-
name?: string;
|
|
50
|
-
/**
|
|
51
|
-
* Function that is called whenever the state of the checkbox changes. It will
|
|
52
|
-
* be called with an object containing the react synthetic event. Use `currentTarget` to get value, name and checked.
|
|
53
|
-
*/
|
|
54
|
-
onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
55
|
-
/**
|
|
56
|
-
* The value to be used in the checkbox input. This is the value that will be returned on form submission.
|
|
57
|
-
*/
|
|
58
|
-
value?: number | string;
|
|
59
|
-
/**
|
|
60
|
-
* A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
|
|
61
|
-
* we have generated testid based on the one you pass to the Checkbox component:
|
|
62
|
-
* - `{testId}--hidden-checkbox` to check if it got changed to checked/unchecked.
|
|
63
|
-
*/
|
|
64
|
-
testId?: string;
|
|
65
|
-
/**
|
|
66
|
-
* Additional information to be included in the `context` of analytics events that come from radio.
|
|
67
|
-
*/
|
|
68
|
-
analyticsContext?: Record<string, any>;
|
|
69
|
-
/**
|
|
70
|
-
* Bounded style API. Defining allowed styles through this prop will be supported for future component
|
|
71
|
-
* iterations. Any styles that are not allowed by this API will result in type and land blocking violations.
|
|
72
|
-
*/
|
|
73
|
-
xcss?: StrictXCSSProp<'alignItems', never>;
|
|
74
|
-
};
|
|
75
|
-
type Combine<First, Second> = Omit<First, keyof Second> & Second;
|
|
76
|
-
export type CheckboxProps = Combine<Omit<React.InputHTMLAttributes<HTMLInputElement>,
|
|
77
|
-
/**
|
|
78
|
-
* 'disabled', 'required', and 'checked' are omitted so that
|
|
79
|
-
* consumers must handle state using our props.
|
|
80
|
-
*
|
|
81
|
-
* 'css' is added globally to element attributes by emotion.
|
|
82
|
-
* This was causing a bug, making the css prop required in
|
|
83
|
-
* some cases. We explicitly omit it to avoid that.
|
|
84
|
-
*
|
|
85
|
-
* Because 'className' (which the css prop uses internally)
|
|
86
|
-
* is still available, this should not break existing usage.
|
|
87
|
-
*/
|
|
88
|
-
'disabled' | 'required' | 'checked' | 'css'>, OwnProps>;
|
|
89
|
-
export interface LabelTextProps extends React.HTMLProps<HTMLSpanElement> {
|
|
90
|
-
children: React.ReactNode;
|
|
91
|
-
}
|
|
92
|
-
export interface LabelProps extends React.HTMLProps<HTMLInputElement> {
|
|
93
|
-
isDisabled?: boolean;
|
|
94
|
-
/**
|
|
95
|
-
* Whether the checkbox is checked.
|
|
96
|
-
* Used for conditional styling of the label.
|
|
97
|
-
*/
|
|
98
|
-
isChecked?: boolean;
|
|
99
|
-
/**
|
|
100
|
-
* Whether the checkbox is in an indeterminate state.
|
|
101
|
-
* Used for conditional styling of the label.
|
|
102
|
-
*/
|
|
103
|
-
isIndeterminate?: boolean;
|
|
104
|
-
/**
|
|
105
|
-
* Whether the checkbox is in an invalid state.
|
|
106
|
-
* Used for conditional styling of the label.
|
|
107
|
-
*/
|
|
108
|
-
isInvalid?: boolean;
|
|
109
|
-
/**
|
|
110
|
-
* A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
|
|
111
|
-
*/
|
|
112
|
-
testId?: string;
|
|
113
|
-
/**
|
|
114
|
-
* Click handler that is conditionally applied for Firefox
|
|
115
|
-
* as Firefox does not dispatch modified click events (e.g. Ctrl+Click) down to the underlying input element.
|
|
116
|
-
*/
|
|
117
|
-
onClick?: React.MouseEventHandler;
|
|
118
|
-
/**
|
|
119
|
-
* Bounded style overrides. Defining allowed styles through this prop will be supported for future component
|
|
120
|
-
* iterations. Any styles that are not allowed by this API will result in type and land blocking violations.
|
|
121
|
-
*
|
|
122
|
-
* @example
|
|
123
|
-
* ```tsx
|
|
124
|
-
* import { cssMap } from '@atlaskit/css';
|
|
125
|
-
* import { Checkbox } from '@atlaskit/checkbox';
|
|
126
|
-
*
|
|
127
|
-
* const styles = cssMap({
|
|
128
|
-
* checkbox: { alignItems: 'center' },
|
|
129
|
-
* });
|
|
130
|
-
*
|
|
131
|
-
* <Checkbox xcss={styles.checkbox} />
|
|
132
|
-
* ```
|
|
133
|
-
*/
|
|
134
|
-
xcss?: StrictXCSSProp<'alignItems', never>;
|
|
135
|
-
}
|
|
136
|
-
export {};
|
package/offerings.json
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
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
|
-
]
|