@atlaskit/radio 8.6.1 → 9.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/Radio/package.json +1 -8
- package/RadioGroup/package.json +1 -8
- package/dist/cjs/radio.compiled.css +1 -1
- package/dist/cjs/radio.js +2 -2
- package/dist/es2019/radio.compiled.css +1 -1
- package/dist/es2019/radio.js +2 -2
- package/dist/esm/radio.compiled.css +1 -1
- package/dist/esm/radio.js +2 -2
- package/package.json +14 -22
- package/radio/package.json +1 -8
- package/radio-group/package.json +1 -8
- package/radio.docs.tsx +85 -83
- package/types/package.json +1 -8
- package/dist/types-ts4.5/entry-points/radio-group.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/radio.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/types.d.ts +0 -1
- package/dist/types-ts4.5/index.d.ts +0 -2
- package/dist/types-ts4.5/radio-group.d.ts +0 -67
- package/dist/types-ts4.5/radio.d.ts +0 -17
- package/dist/types-ts4.5/types.d.ts +0 -65
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,37 @@
|
|
|
1
1
|
# @atlaskit/radio
|
|
2
2
|
|
|
3
|
+
## 9.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
|
+
## 8.6.2
|
|
30
|
+
|
|
31
|
+
### Patch Changes
|
|
32
|
+
|
|
33
|
+
- Updated dependencies
|
|
34
|
+
|
|
3
35
|
## 8.6.1
|
|
4
36
|
|
|
5
37
|
### Patch Changes
|
package/Radio/package.json
CHANGED
|
@@ -6,12 +6,5 @@
|
|
|
6
6
|
"sideEffects": [
|
|
7
7
|
"**/*.compiled.css"
|
|
8
8
|
],
|
|
9
|
-
"types": "../dist/types/entry-points/radio.d.ts"
|
|
10
|
-
"typesVersions": {
|
|
11
|
-
">=4.5 <5.9": {
|
|
12
|
-
"*": [
|
|
13
|
-
"../dist/types-ts4.5/entry-points/radio.d.ts"
|
|
14
|
-
]
|
|
15
|
-
}
|
|
16
|
-
}
|
|
9
|
+
"types": "../dist/types/entry-points/radio.d.ts"
|
|
17
10
|
}
|
package/RadioGroup/package.json
CHANGED
|
@@ -6,12 +6,5 @@
|
|
|
6
6
|
"sideEffects": [
|
|
7
7
|
"**/*.compiled.css"
|
|
8
8
|
],
|
|
9
|
-
"types": "../dist/types/entry-points/radio-group.d.ts"
|
|
10
|
-
"typesVersions": {
|
|
11
|
-
">=4.5 <5.9": {
|
|
12
|
-
"*": [
|
|
13
|
-
"../dist/types-ts4.5/entry-points/radio-group.d.ts"
|
|
14
|
-
]
|
|
15
|
-
}
|
|
16
|
-
}
|
|
9
|
+
"types": "../dist/types/entry-points/radio-group.d.ts"
|
|
17
10
|
}
|
|
@@ -21,8 +21,8 @@
|
|
|
21
21
|
._1o9zidpf{flex-shrink:0}
|
|
22
22
|
._1peq1xmd:after{opacity:var(--radio-dot-opacity)}
|
|
23
23
|
._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
|
|
24
|
+
._1q6q187o{--radio-background-color:var(--ds-background-disabled,#0515240f)}
|
|
24
25
|
._1q6q1j9a{--radio-background-color:var(--ds-background-input,#fff)}
|
|
25
|
-
._1q6qby5v{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
26
26
|
._1qdg120g:after{height:.6pc}
|
|
27
27
|
._1qu2glyw{outline-style:none}
|
|
28
28
|
._1s6w2sac{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
package/dist/cjs/radio.js
CHANGED
|
@@ -19,7 +19,7 @@ var _excluded = ["ariaLabel", "aria-labelledby", "isDisabled", "isRequired", "is
|
|
|
19
19
|
// for typing `process`
|
|
20
20
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
21
21
|
var packageName = "@atlaskit/radio";
|
|
22
|
-
var packageVersion = "8.6.
|
|
22
|
+
var packageVersion = "8.6.2";
|
|
23
23
|
var noop = _noop.default;
|
|
24
24
|
var labelPaddingStyles = null;
|
|
25
25
|
var labelStyles = null;
|
|
@@ -80,7 +80,7 @@ var InnerRadio = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, ref)
|
|
|
80
80
|
,
|
|
81
81
|
"data-invalid": isInvalid ? 'true' : undefined,
|
|
82
82
|
ref: ref,
|
|
83
|
-
className: (0, _runtime.ax)(["_18s8ze3t _19it3vzd _2rko1qll _12ji1r31 _1qu2glyw _12y31o36 _v56415j1 _1e0c1txw _1bsb1tcg _4t3i1tcg _kqswh2mm _4cvr1h6o _1bah1h6o _1o9zidpf _bfhk4t47 _13diglyw _1q6q1j9a _1151rsbi _1s6w5w2r _tqbwidpf _t9ec1soj _s7n4jp4b _wstuglyw _16r2ucr4 _14mj1qll _qc5orqeg _z0ai120g _1qdg120g _18postnw _aetrb3bt _1peq1xmd", !isDisabled && "_iosijmqp _11jyjmqp _f3ett94y _y2mvdfik _1bg41l7b _6tjkdfik _awqn1l7b _1rvql4ek _1p9jrsbi _x2tz1q28 _1iwz1q28 _sj8yr01l _jcko12kk _1dvdrsbi _60ak5w2r", isDisabled && "_80om13gf
|
|
83
|
+
className: (0, _runtime.ax)(["_18s8ze3t _19it3vzd _2rko1qll _12ji1r31 _1qu2glyw _12y31o36 _v56415j1 _1e0c1txw _1bsb1tcg _4t3i1tcg _kqswh2mm _4cvr1h6o _1bah1h6o _1o9zidpf _bfhk4t47 _13diglyw _1q6q1j9a _1151rsbi _1s6w5w2r _tqbwidpf _t9ec1soj _s7n4jp4b _wstuglyw _16r2ucr4 _14mj1qll _qc5orqeg _z0ai120g _1qdg120g _18postnw _aetrb3bt _1peq1xmd", !isDisabled && "_iosijmqp _11jyjmqp _f3ett94y _y2mvdfik _1bg41l7b _6tjkdfik _awqn1l7b _1rvql4ek _1p9jrsbi _x2tz1q28 _1iwz1q28 _sj8yr01l _jcko12kk _1dvdrsbi _60ak5w2r", isDisabled && "_80om13gf _1q6q187o _1151bk0g _1s6w2sac", isDisabled && isChecked && "_tqbwt94y", isInvalid && !isDisabled && "_1151s4qr _11jys4qr"])
|
|
84
84
|
})), label ? /*#__PURE__*/React.createElement("span", {
|
|
85
85
|
className: (0, _runtime.ax)(["_85i5v77o _1q51v77o _y4ti1b66 _bozg1b66"])
|
|
86
86
|
}, label) : null);
|
|
@@ -21,8 +21,8 @@
|
|
|
21
21
|
._1o9zidpf{flex-shrink:0}
|
|
22
22
|
._1peq1xmd:after{opacity:var(--radio-dot-opacity)}
|
|
23
23
|
._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
|
|
24
|
+
._1q6q187o{--radio-background-color:var(--ds-background-disabled,#0515240f)}
|
|
24
25
|
._1q6q1j9a{--radio-background-color:var(--ds-background-input,#fff)}
|
|
25
|
-
._1q6qby5v{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
26
26
|
._1qdg120g:after{height:.6pc}
|
|
27
27
|
._1qu2glyw{outline-style:none}
|
|
28
28
|
._1s6w2sac{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
package/dist/es2019/radio.js
CHANGED
|
@@ -9,7 +9,7 @@ import { forwardRef, memo } from 'react';
|
|
|
9
9
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
|
|
10
10
|
import __noop from '@atlaskit/ds-lib/noop';
|
|
11
11
|
const packageName = "@atlaskit/radio";
|
|
12
|
-
const packageVersion = "8.6.
|
|
12
|
+
const packageVersion = "8.6.2";
|
|
13
13
|
const noop = __noop;
|
|
14
14
|
const labelPaddingStyles = null;
|
|
15
15
|
const labelStyles = null;
|
|
@@ -69,7 +69,7 @@ const InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
|
|
|
69
69
|
,
|
|
70
70
|
"data-invalid": isInvalid ? 'true' : undefined,
|
|
71
71
|
ref: ref,
|
|
72
|
-
className: ax(["_18s8ze3t _19it3vzd _2rko1qll _12ji1r31 _1qu2glyw _12y31o36 _v56415j1 _1e0c1txw _1bsb1tcg _4t3i1tcg _kqswh2mm _4cvr1h6o _1bah1h6o _1o9zidpf _bfhk4t47 _13diglyw _1q6q1j9a _1151rsbi _1s6w5w2r _tqbwidpf _t9ec1soj _s7n4jp4b _wstuglyw _16r2ucr4 _14mj1qll _qc5orqeg _z0ai120g _1qdg120g _18postnw _aetrb3bt _1peq1xmd", !isDisabled && "_iosijmqp _11jyjmqp _f3ett94y _y2mvdfik _1bg41l7b _6tjkdfik _awqn1l7b _1rvql4ek _1p9jrsbi _x2tz1q28 _1iwz1q28 _sj8yr01l _jcko12kk _1dvdrsbi _60ak5w2r", isDisabled && "_80om13gf
|
|
72
|
+
className: ax(["_18s8ze3t _19it3vzd _2rko1qll _12ji1r31 _1qu2glyw _12y31o36 _v56415j1 _1e0c1txw _1bsb1tcg _4t3i1tcg _kqswh2mm _4cvr1h6o _1bah1h6o _1o9zidpf _bfhk4t47 _13diglyw _1q6q1j9a _1151rsbi _1s6w5w2r _tqbwidpf _t9ec1soj _s7n4jp4b _wstuglyw _16r2ucr4 _14mj1qll _qc5orqeg _z0ai120g _1qdg120g _18postnw _aetrb3bt _1peq1xmd", !isDisabled && "_iosijmqp _11jyjmqp _f3ett94y _y2mvdfik _1bg41l7b _6tjkdfik _awqn1l7b _1rvql4ek _1p9jrsbi _x2tz1q28 _1iwz1q28 _sj8yr01l _jcko12kk _1dvdrsbi _60ak5w2r", isDisabled && "_80om13gf _1q6q187o _1151bk0g _1s6w2sac", isDisabled && isChecked && "_tqbwt94y", isInvalid && !isDisabled && "_1151s4qr _11jys4qr"])
|
|
73
73
|
})), label ? /*#__PURE__*/React.createElement("span", {
|
|
74
74
|
className: ax(["_85i5v77o _1q51v77o _y4ti1b66 _bozg1b66"])
|
|
75
75
|
}, label) : null);
|
|
@@ -21,8 +21,8 @@
|
|
|
21
21
|
._1o9zidpf{flex-shrink:0}
|
|
22
22
|
._1peq1xmd:after{opacity:var(--radio-dot-opacity)}
|
|
23
23
|
._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
|
|
24
|
+
._1q6q187o{--radio-background-color:var(--ds-background-disabled,#0515240f)}
|
|
24
25
|
._1q6q1j9a{--radio-background-color:var(--ds-background-input,#fff)}
|
|
25
|
-
._1q6qby5v{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
26
26
|
._1qdg120g:after{height:.6pc}
|
|
27
27
|
._1qu2glyw{outline-style:none}
|
|
28
28
|
._1s6w2sac{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
package/dist/esm/radio.js
CHANGED
|
@@ -11,7 +11,7 @@ import { forwardRef, memo } from 'react';
|
|
|
11
11
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
|
|
12
12
|
import __noop from '@atlaskit/ds-lib/noop';
|
|
13
13
|
var packageName = "@atlaskit/radio";
|
|
14
|
-
var packageVersion = "8.6.
|
|
14
|
+
var packageVersion = "8.6.2";
|
|
15
15
|
var noop = __noop;
|
|
16
16
|
var labelPaddingStyles = null;
|
|
17
17
|
var labelStyles = null;
|
|
@@ -72,7 +72,7 @@ var InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
|
|
|
72
72
|
,
|
|
73
73
|
"data-invalid": isInvalid ? 'true' : undefined,
|
|
74
74
|
ref: ref,
|
|
75
|
-
className: ax(["_18s8ze3t _19it3vzd _2rko1qll _12ji1r31 _1qu2glyw _12y31o36 _v56415j1 _1e0c1txw _1bsb1tcg _4t3i1tcg _kqswh2mm _4cvr1h6o _1bah1h6o _1o9zidpf _bfhk4t47 _13diglyw _1q6q1j9a _1151rsbi _1s6w5w2r _tqbwidpf _t9ec1soj _s7n4jp4b _wstuglyw _16r2ucr4 _14mj1qll _qc5orqeg _z0ai120g _1qdg120g _18postnw _aetrb3bt _1peq1xmd", !isDisabled && "_iosijmqp _11jyjmqp _f3ett94y _y2mvdfik _1bg41l7b _6tjkdfik _awqn1l7b _1rvql4ek _1p9jrsbi _x2tz1q28 _1iwz1q28 _sj8yr01l _jcko12kk _1dvdrsbi _60ak5w2r", isDisabled && "_80om13gf
|
|
75
|
+
className: ax(["_18s8ze3t _19it3vzd _2rko1qll _12ji1r31 _1qu2glyw _12y31o36 _v56415j1 _1e0c1txw _1bsb1tcg _4t3i1tcg _kqswh2mm _4cvr1h6o _1bah1h6o _1o9zidpf _bfhk4t47 _13diglyw _1q6q1j9a _1151rsbi _1s6w5w2r _tqbwidpf _t9ec1soj _s7n4jp4b _wstuglyw _16r2ucr4 _14mj1qll _qc5orqeg _z0ai120g _1qdg120g _18postnw _aetrb3bt _1peq1xmd", !isDisabled && "_iosijmqp _11jyjmqp _f3ett94y _y2mvdfik _1bg41l7b _6tjkdfik _awqn1l7b _1rvql4ek _1p9jrsbi _x2tz1q28 _1iwz1q28 _sj8yr01l _jcko12kk _1dvdrsbi _60ak5w2r", isDisabled && "_80om13gf _1q6q187o _1151bk0g _1s6w2sac", isDisabled && isChecked && "_tqbwt94y", isInvalid && !isDisabled && "_1151s4qr _11jys4qr"])
|
|
76
76
|
})), label ? /*#__PURE__*/React.createElement("span", {
|
|
77
77
|
className: ax(["_85i5v77o _1q51v77o _y4ti1b66 _bozg1b66"])
|
|
78
78
|
}, label) : null);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/radio",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "9.0.0",
|
|
4
4
|
"description": "A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.",
|
|
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,12 +31,12 @@
|
|
|
39
31
|
}
|
|
40
32
|
},
|
|
41
33
|
"dependencies": {
|
|
42
|
-
"@atlaskit/analytics-next": "^
|
|
43
|
-
"@atlaskit/css": "^0.
|
|
44
|
-
"@atlaskit/ds-lib": "^
|
|
45
|
-
"@atlaskit/platform-feature-flags": "^
|
|
46
|
-
"@atlaskit/theme": "^
|
|
47
|
-
"@atlaskit/tokens": "^
|
|
34
|
+
"@atlaskit/analytics-next": "^12.0.0",
|
|
35
|
+
"@atlaskit/css": "^1.0.0",
|
|
36
|
+
"@atlaskit/ds-lib": "^8.0.0",
|
|
37
|
+
"@atlaskit/platform-feature-flags": "^2.0.0",
|
|
38
|
+
"@atlaskit/theme": "^26.0.0",
|
|
39
|
+
"@atlaskit/tokens": "^14.0.0",
|
|
48
40
|
"@babel/runtime": "^7.0.0",
|
|
49
41
|
"@compiled/react": "^0.20.0"
|
|
50
42
|
},
|
|
@@ -55,13 +47,13 @@
|
|
|
55
47
|
"@af/accessibility-testing": "workspace:^",
|
|
56
48
|
"@af/integration-testing": "workspace:^",
|
|
57
49
|
"@af/visual-regression": "workspace:^",
|
|
58
|
-
"@atlaskit/button": "^
|
|
59
|
-
"@atlaskit/checkbox": "^
|
|
60
|
-
"@atlaskit/docs": "^
|
|
61
|
-
"@atlaskit/form": "^
|
|
62
|
-
"@atlaskit/link": "^
|
|
63
|
-
"@atlaskit/primitives": "^
|
|
64
|
-
"@atlaskit/section-message": "^
|
|
50
|
+
"@atlaskit/button": "^24.0.0",
|
|
51
|
+
"@atlaskit/checkbox": "^18.0.0",
|
|
52
|
+
"@atlaskit/docs": "^12.0.0",
|
|
53
|
+
"@atlaskit/form": "^16.0.0",
|
|
54
|
+
"@atlaskit/link": "^4.0.0",
|
|
55
|
+
"@atlaskit/primitives": "^20.0.0",
|
|
56
|
+
"@atlaskit/section-message": "^9.0.0",
|
|
65
57
|
"@atlassian/react-compiler-gating": "workspace:^",
|
|
66
58
|
"@atlassian/ssr-tests": "workspace:^",
|
|
67
59
|
"@atlassian/structured-docs-types": "workspace:^",
|
package/radio/package.json
CHANGED
|
@@ -6,12 +6,5 @@
|
|
|
6
6
|
"sideEffects": [
|
|
7
7
|
"**/*.compiled.css"
|
|
8
8
|
],
|
|
9
|
-
"types": "../dist/types/entry-points/radio.d.ts"
|
|
10
|
-
"typesVersions": {
|
|
11
|
-
">=4.5 <5.9": {
|
|
12
|
-
"*": [
|
|
13
|
-
"../dist/types-ts4.5/entry-points/radio.d.ts"
|
|
14
|
-
]
|
|
15
|
-
}
|
|
16
|
-
}
|
|
9
|
+
"types": "../dist/types/entry-points/radio.d.ts"
|
|
17
10
|
}
|
package/radio-group/package.json
CHANGED
|
@@ -6,12 +6,5 @@
|
|
|
6
6
|
"sideEffects": [
|
|
7
7
|
"**/*.compiled.css"
|
|
8
8
|
],
|
|
9
|
-
"types": "../dist/types/entry-points/radio-group.d.ts"
|
|
10
|
-
"typesVersions": {
|
|
11
|
-
">=4.5 <5.9": {
|
|
12
|
-
"*": [
|
|
13
|
-
"../dist/types-ts4.5/entry-points/radio-group.d.ts"
|
|
14
|
-
]
|
|
15
|
-
}
|
|
16
|
-
}
|
|
9
|
+
"types": "../dist/types/entry-points/radio-group.d.ts"
|
|
17
10
|
}
|
package/radio.docs.tsx
CHANGED
|
@@ -1,93 +1,95 @@
|
|
|
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 radio button component for single selection from a set of mutually exclusive choices. Use for custom radio button presentations like options in tables or when you need fine control over individual radio buttons.',
|
|
10
|
-
status: 'general-availability',
|
|
11
|
-
import: {
|
|
5
|
+
const documentation: StructuredContentSource = {
|
|
6
|
+
components: [
|
|
7
|
+
{
|
|
12
8
|
name: 'Radio',
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
},
|
|
18
|
-
usageGuidelines: [
|
|
19
|
-
'Use for custom radio button presentations (e.g., options in tables)',
|
|
20
|
-
'Use when you need fine control over individual radio buttons',
|
|
21
|
-
'List options in logical order (most likely to least likely)',
|
|
22
|
-
'Make one option the default (safest, most secure option)',
|
|
23
|
-
"Add 'None' option if unselected state is needed",
|
|
24
|
-
"Add 'Other' option if not all options can be listed",
|
|
25
|
-
],
|
|
26
|
-
contentGuidelines: [
|
|
27
|
-
'Use clear, descriptive labels that provide context',
|
|
28
|
-
'Keep labels concise but informative',
|
|
29
|
-
'Use sentence case for labels',
|
|
30
|
-
'Avoid overlapping or skipping numeric choices',
|
|
31
|
-
],
|
|
32
|
-
accessibilityGuidelines: [
|
|
33
|
-
'Include error messages for required or invalid radio fields',
|
|
34
|
-
'Never preselect high-risk options for payment, privacy, or security',
|
|
35
|
-
"Don't use disabled radio buttons if they need to remain in tab order",
|
|
36
|
-
'Use validation instead of disabled state for better accessibility',
|
|
37
|
-
],
|
|
38
|
-
examples: [
|
|
39
|
-
{
|
|
9
|
+
description:
|
|
10
|
+
'A radio button component for single selection from a set of mutually exclusive choices. Use for custom radio button presentations like options in tables or when you need fine control over individual radio buttons.',
|
|
11
|
+
status: 'general-availability',
|
|
12
|
+
import: {
|
|
40
13
|
name: 'Radio',
|
|
41
|
-
|
|
42
|
-
|
|
14
|
+
package: '@atlaskit/radio',
|
|
15
|
+
type: 'named',
|
|
16
|
+
packagePath: path.resolve(__dirname),
|
|
17
|
+
packageJson: require('./package.json'),
|
|
43
18
|
},
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
19
|
+
usageGuidelines: [
|
|
20
|
+
'Use for custom radio button presentations (e.g., options in tables)',
|
|
21
|
+
'Use when you need fine control over individual radio buttons',
|
|
22
|
+
'List options in logical order (most likely to least likely)',
|
|
23
|
+
'Make one option the default (safest, most secure option)',
|
|
24
|
+
"Add 'None' option if unselected state is needed",
|
|
25
|
+
"Add 'Other' option if not all options can be listed",
|
|
26
|
+
],
|
|
27
|
+
contentGuidelines: [
|
|
28
|
+
'Use clear, descriptive labels that provide context',
|
|
29
|
+
'Keep labels concise but informative',
|
|
30
|
+
'Use sentence case for labels',
|
|
31
|
+
'Avoid overlapping or skipping numeric choices',
|
|
32
|
+
],
|
|
33
|
+
accessibilityGuidelines: [
|
|
34
|
+
'Include error messages for required or invalid radio fields',
|
|
35
|
+
'Never preselect high-risk options for payment, privacy, or security',
|
|
36
|
+
"Don't use disabled radio buttons if they need to remain in tab order",
|
|
37
|
+
'Use validation instead of disabled state for better accessibility',
|
|
38
|
+
],
|
|
39
|
+
examples: [
|
|
40
|
+
{
|
|
41
|
+
name: 'Radio',
|
|
42
|
+
description: 'Radio example',
|
|
43
|
+
source: path.resolve(__dirname, './examples/ai/radio.tsx'),
|
|
44
|
+
},
|
|
45
|
+
],
|
|
46
|
+
keywords: ['radio', 'button', 'input', 'form', 'selection', 'choice', 'option'],
|
|
47
|
+
categories: ['form', 'interaction'],
|
|
59
48
|
},
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
'Use sentence case for labels',
|
|
72
|
-
'Avoid overlapping or skipping numeric choices',
|
|
73
|
-
],
|
|
74
|
-
accessibilityGuidelines: [
|
|
75
|
-
'Include error messages for required or invalid radio fields',
|
|
76
|
-
'Never preselect high-risk options for payment, privacy, or security',
|
|
77
|
-
"Don't use disabled radio buttons if they need to remain in tab order",
|
|
78
|
-
'Use validation instead of disabled state for better accessibility',
|
|
79
|
-
'Ensure proper keyboard navigation with arrow keys',
|
|
80
|
-
],
|
|
81
|
-
examples: [
|
|
82
|
-
{
|
|
83
|
-
name: 'Radio Group',
|
|
84
|
-
description: 'Radio Group example',
|
|
85
|
-
source: path.resolve(__dirname, './examples/ai/radio-group.tsx'),
|
|
49
|
+
{
|
|
50
|
+
name: 'RadioGroup',
|
|
51
|
+
description:
|
|
52
|
+
'A radio group component that presents a list of options where only one choice can be selected. Use for most radio button scenarios where you want a simple list of mutually exclusive options.',
|
|
53
|
+
status: 'general-availability',
|
|
54
|
+
import: {
|
|
55
|
+
name: 'RadioGroup',
|
|
56
|
+
package: '@atlaskit/radio',
|
|
57
|
+
type: 'named',
|
|
58
|
+
packagePath: path.resolve(__dirname),
|
|
59
|
+
packageJson: require('./package.json'),
|
|
86
60
|
},
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
61
|
+
usageGuidelines: [
|
|
62
|
+
'Use for most radio button scenarios with simple option lists',
|
|
63
|
+
'List options in logical order (most likely to least likely)',
|
|
64
|
+
'Make one option the default (safest, most secure option)',
|
|
65
|
+
"Add 'None' option if unselected state is needed",
|
|
66
|
+
"Add 'Other' option if not all options can be listed",
|
|
67
|
+
'Use select component for longer lists of options',
|
|
68
|
+
],
|
|
69
|
+
contentGuidelines: [
|
|
70
|
+
'Use clear, descriptive labels that provide context',
|
|
71
|
+
'Keep labels concise but informative',
|
|
72
|
+
'Use sentence case for labels',
|
|
73
|
+
'Avoid overlapping or skipping numeric choices',
|
|
74
|
+
],
|
|
75
|
+
accessibilityGuidelines: [
|
|
76
|
+
'Include error messages for required or invalid radio fields',
|
|
77
|
+
'Never preselect high-risk options for payment, privacy, or security',
|
|
78
|
+
"Don't use disabled radio buttons if they need to remain in tab order",
|
|
79
|
+
'Use validation instead of disabled state for better accessibility',
|
|
80
|
+
'Ensure proper keyboard navigation with arrow keys',
|
|
81
|
+
],
|
|
82
|
+
examples: [
|
|
83
|
+
{
|
|
84
|
+
name: 'Radio Group',
|
|
85
|
+
description: 'Radio Group example',
|
|
86
|
+
source: path.resolve(__dirname, './examples/ai/radio-group.tsx'),
|
|
87
|
+
},
|
|
88
|
+
],
|
|
89
|
+
keywords: ['radio', 'group', 'form', 'selection', 'choice', 'options', 'list'],
|
|
90
|
+
categories: ['form', 'interaction'],
|
|
91
|
+
},
|
|
92
|
+
],
|
|
93
|
+
};
|
|
92
94
|
|
|
93
95
|
export default documentation;
|
package/types/package.json
CHANGED
|
@@ -6,12 +6,5 @@
|
|
|
6
6
|
"sideEffects": [
|
|
7
7
|
"**/*.compiled.css"
|
|
8
8
|
],
|
|
9
|
-
"types": "../dist/types/entry-points/types.d.ts"
|
|
10
|
-
"typesVersions": {
|
|
11
|
-
">=4.5 <5.9": {
|
|
12
|
-
"*": [
|
|
13
|
-
"../dist/types-ts4.5/entry-points/types.d.ts"
|
|
14
|
-
]
|
|
15
|
-
}
|
|
16
|
-
}
|
|
9
|
+
"types": "../dist/types/entry-points/types.d.ts"
|
|
17
10
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from '../radio';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export type { OptionPropType, OptionsPropType, RadioProps, RadioValue } from '../types';
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
import React, { type SyntheticEvent } from 'react';
|
|
2
|
-
import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
3
|
-
import { type OptionsPropType, type RadioValue } from './types';
|
|
4
|
-
export interface RadioGroupProps {
|
|
5
|
-
id?: string;
|
|
6
|
-
/**
|
|
7
|
-
* Once set, controls the selected value on the `RadioGroup`.
|
|
8
|
-
*/
|
|
9
|
-
value?: RadioValue | null;
|
|
10
|
-
/**
|
|
11
|
-
* Sets the initial selected value on the `RadioGroup`.
|
|
12
|
-
*/
|
|
13
|
-
defaultValue?: RadioValue | null;
|
|
14
|
-
/**
|
|
15
|
-
* Sets the disabled state of all `Radio` elements in the group. Overrides the `isDisabled` setting of all child `Radio` items.
|
|
16
|
-
*/
|
|
17
|
-
isDisabled?: boolean;
|
|
18
|
-
/**
|
|
19
|
-
* Sets the required state of all `Radio` elements in the group.
|
|
20
|
-
*/
|
|
21
|
-
isRequired?: boolean;
|
|
22
|
-
/**
|
|
23
|
-
* Sets the invalid state of all `Radio` elements in the group.
|
|
24
|
-
*/
|
|
25
|
-
isInvalid?: boolean;
|
|
26
|
-
/**
|
|
27
|
-
* An array of objects, each object is mapped onto a `Radio` element within the group. Name must be unique to the group.
|
|
28
|
-
*/
|
|
29
|
-
options: OptionsPropType;
|
|
30
|
-
/**
|
|
31
|
-
* Function that gets fired after each invalid event.
|
|
32
|
-
*/
|
|
33
|
-
onInvalid?: (event: SyntheticEvent<any>) => void;
|
|
34
|
-
/**
|
|
35
|
-
* Function that gets after each change event.
|
|
36
|
-
*/
|
|
37
|
-
onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
38
|
-
/**
|
|
39
|
-
* Sets the `name` prop on each of the `Radio` elements in the group.
|
|
40
|
-
*/
|
|
41
|
-
name?: string;
|
|
42
|
-
/**
|
|
43
|
-
* Additional information to be included in the `context` of analytics events that come from radio.
|
|
44
|
-
*/
|
|
45
|
-
analyticsContext?: Record<string, any>;
|
|
46
|
-
/**
|
|
47
|
-
* The id of the element that links to this radio group.
|
|
48
|
-
*
|
|
49
|
-
* @deprecated Use the `labelId` prop instead.
|
|
50
|
-
*/
|
|
51
|
-
'aria-labelledby'?: string;
|
|
52
|
-
/**
|
|
53
|
-
* This sets the `aria-labelledby` attribute. It sets an accessible name for
|
|
54
|
-
* the radio, for people who use assistive technology. Use of a visible label
|
|
55
|
-
* is highly recommended for greater accessibility support.
|
|
56
|
-
*/
|
|
57
|
-
labelId?: string;
|
|
58
|
-
/**
|
|
59
|
-
* 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.
|
|
60
|
-
* The specified `testId` is applied to the root element of `RadioGroup`. If no `testId` is supplied in the `options` prop, then the one supplied to `RadioGroup` will also be propagated to
|
|
61
|
-
* the `Radio` children. Otherwise, the `testId` supplied in the `options` prop will be used.
|
|
62
|
-
*
|
|
63
|
-
* See [here](/components/radio/code#testId) for details about how `testId` is used on `Radio`.
|
|
64
|
-
*/
|
|
65
|
-
testId?: string;
|
|
66
|
-
}
|
|
67
|
-
export default function RadioGroup(props: RadioGroupProps): React.JSX.Element;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type MemoExoticComponent } from 'react';
|
|
6
|
-
import { type RadioProps } from './types';
|
|
7
|
-
/**
|
|
8
|
-
* __Radio__
|
|
9
|
-
*
|
|
10
|
-
* A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.
|
|
11
|
-
*
|
|
12
|
-
* - [Examples](https://atlassian.design/components/radio/examples)
|
|
13
|
-
* - [Code](https://atlassian.design/components/radio/code)
|
|
14
|
-
* - [Usage](https://atlassian.design/components/radio/usage)
|
|
15
|
-
*/
|
|
16
|
-
declare const Radio: MemoExoticComponent<React.ForwardRefExoticComponent<React.PropsWithoutRef<RadioProps> & React.RefAttributes<HTMLInputElement>>>;
|
|
17
|
-
export default Radio;
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
2
|
-
import { type UIAnalyticsEvent, type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
3
|
-
export type OptionPropType = {
|
|
4
|
-
isDisabled?: boolean;
|
|
5
|
-
label?: ReactNode;
|
|
6
|
-
name?: string;
|
|
7
|
-
value?: RadioValue;
|
|
8
|
-
testId?: string;
|
|
9
|
-
};
|
|
10
|
-
export type OptionsPropType = Array<OptionPropType>;
|
|
11
|
-
export type RadioValue = string;
|
|
12
|
-
type OwnProps = {
|
|
13
|
-
/**
|
|
14
|
-
* The `aria-label` attribute associated with the radio element.
|
|
15
|
-
*/
|
|
16
|
-
ariaLabel?: string;
|
|
17
|
-
/**
|
|
18
|
-
* Makes a `Radio` field unselectable when true. Overridden by `isDisabled` prop of `RadioGroup`.
|
|
19
|
-
*/
|
|
20
|
-
isDisabled?: boolean;
|
|
21
|
-
/**
|
|
22
|
-
* Marks this as a required field.
|
|
23
|
-
*/
|
|
24
|
-
isRequired?: boolean;
|
|
25
|
-
/**
|
|
26
|
-
* Marks this as an invalid field.
|
|
27
|
-
*/
|
|
28
|
-
isInvalid?: boolean;
|
|
29
|
-
/**
|
|
30
|
-
* Set the field as checked.
|
|
31
|
-
*/
|
|
32
|
-
isChecked?: boolean;
|
|
33
|
-
/**
|
|
34
|
-
* The label value for the input rendered to the DOM.
|
|
35
|
-
*/
|
|
36
|
-
label?: ReactNode;
|
|
37
|
-
/**
|
|
38
|
-
* This sets the `aria-labelledby` attribute. It sets an accessible name for
|
|
39
|
-
* the radio, for people who use assistive technology. Use of a visible label
|
|
40
|
-
* is highly recommended for greater accessibility support.
|
|
41
|
-
*/
|
|
42
|
-
labelId?: string;
|
|
43
|
-
/**
|
|
44
|
-
* `onChange` event handler, passed into the props of each `Radio` Component instantiated within `RadioGroup`.
|
|
45
|
-
*/
|
|
46
|
-
onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
47
|
-
/**
|
|
48
|
-
* Field value.
|
|
49
|
-
*/
|
|
50
|
-
value?: RadioValue;
|
|
51
|
-
/**
|
|
52
|
-
* 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
|
|
53
|
-
* we have 2 different testid generated based on the one you pass to the Radio component:
|
|
54
|
-
* - `{testId}--radio-input` to check if it got changed to checked/unchecked.
|
|
55
|
-
* - `{testId}--radio-label` to click the input.
|
|
56
|
-
*/
|
|
57
|
-
testId?: string;
|
|
58
|
-
/**
|
|
59
|
-
* Additional information to be included in the `context` of analytics events that come from radio.
|
|
60
|
-
*/
|
|
61
|
-
analyticsContext?: Record<string, any>;
|
|
62
|
-
};
|
|
63
|
-
type Combine<First, Second> = Omit<First, keyof Second> & Second;
|
|
64
|
-
export type RadioProps = Combine<Omit<React.InputHTMLAttributes<HTMLInputElement>, 'aria-label' | 'disabled' | 'required' | 'checked' | 'value' | 'crossOrigin'>, OwnProps> & WithAnalyticsEventsProps;
|
|
65
|
-
export {};
|