@atlaskit/radio 8.4.5 → 8.4.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/radio.compiled.css +52 -52
- package/dist/cjs/radio.js +3 -24
- package/dist/es2019/radio.compiled.css +52 -52
- package/dist/es2019/radio.js +3 -4
- package/dist/esm/radio.compiled.css +52 -52
- package/dist/esm/radio.js +3 -24
- package/package.json +7 -6
- package/radio.docs.tsx +93 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/radio
|
|
2
2
|
|
|
3
|
+
## 8.4.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`7aef1e49e90ea`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7aef1e49e90ea) -
|
|
8
|
+
Removes redundant fallback color values via @atlaskit/theme
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
3
11
|
## 8.4.5
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -6,37 +6,37 @@
|
|
|
6
6
|
._19it3vzd{border:var(--ds-border-width,1px) solid var(--radio-border-color)}
|
|
7
7
|
._2rko1qll{border-radius:var(--ds-radius-full,50%)}
|
|
8
8
|
._qc5orqeg:after{transition:background-color .2s ease-in-out,opacity .2s ease-in-out}
|
|
9
|
-
._v56415j1{transition:border-color .2s ease-in-out,background-color .2s ease-in-out}.
|
|
10
|
-
.
|
|
11
|
-
.
|
|
12
|
-
.
|
|
13
|
-
.
|
|
9
|
+
._v56415j1{transition:border-color .2s ease-in-out,background-color .2s ease-in-out}._1151bk0g{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
10
|
+
._1151rsbi{--radio-border-color:var(--ds-border-input,#8c8f97)}
|
|
11
|
+
._1151s4qr{--radio-border-color:var(--ds-icon-danger,#c9372c)}
|
|
12
|
+
._11jyjmqp:checked{--radio-border-color:var(--ds-background-selected-bold,#1868db)}
|
|
13
|
+
._11jys4qr:checked{--radio-border-color:var(--ds-icon-danger,#c9372c)}
|
|
14
14
|
._12ji1r31{outline-color:currentColor}
|
|
15
15
|
._12y31o36{outline-width:medium}
|
|
16
16
|
._13diglyw{-moz-appearance:none}
|
|
17
|
-
.
|
|
17
|
+
._17a1bk0g:disabled[data-invalid]{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
18
18
|
._18postnw:after{position:absolute}
|
|
19
|
-
.
|
|
19
|
+
._19ybs4qr:checked[data-invalid]{--radio-border-color:var(--ds-icon-danger,#c9372c)}
|
|
20
20
|
._1bah1h6o{justify-content:center}
|
|
21
21
|
._1bsb1tcg{width:24px}
|
|
22
|
-
.
|
|
22
|
+
._1d7ps4qr[data-invalid]{--radio-border-color:var(--ds-icon-danger,#c9372c)}
|
|
23
23
|
._1e0c1txw{display:flex}
|
|
24
|
-
.
|
|
25
|
-
.
|
|
24
|
+
._1el2by5v:disabled[data-invalid]{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
25
|
+
._1if1bk0g:disabled:checked{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
26
26
|
._1o9zidpf{flex-shrink:0}
|
|
27
27
|
._1peq1xmd:after{opacity:var(--radio-dot-opacity)}
|
|
28
28
|
._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
|
|
29
|
-
.
|
|
30
|
-
.
|
|
29
|
+
._1q6q1j9a{--radio-background-color:var(--ds-background-input,#fff)}
|
|
30
|
+
._1q6qby5v{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
31
31
|
._1qdg120g:after{height:.6pc}
|
|
32
32
|
._1qu2glyw{outline-style:none}
|
|
33
|
-
.
|
|
34
|
-
.
|
|
35
|
-
.
|
|
33
|
+
._1s6w2sac{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
34
|
+
._1s6w5w2r{--radio-dot-color:var(--ds-icon-inverse,#fff)}
|
|
35
|
+
._2kbkby5v:disabled:checked{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
36
36
|
._4cvr1h6o{align-items:center}
|
|
37
37
|
._4cvr1y6m{align-items:flex-start}
|
|
38
38
|
._4fps13gf:disabled:checked{cursor:not-allowed}
|
|
39
|
-
.
|
|
39
|
+
._4ryaby5v:disabled{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
40
40
|
._4t3i1tcg{height:24px}
|
|
41
41
|
._6hp813gf:disabled[data-invalid]{cursor:not-allowed}
|
|
42
42
|
._80om13gf{cursor:not-allowed}
|
|
@@ -46,57 +46,57 @@
|
|
|
46
46
|
._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
|
|
47
47
|
._f3ett94y:checked{--radio-dot-opacity:1px}
|
|
48
48
|
._g7st13gf[data-disabled]{cursor:not-allowed}
|
|
49
|
-
.
|
|
49
|
+
._iosijmqp:checked{--radio-background-color:var(--ds-background-selected-bold,#1868db)}
|
|
50
50
|
._j5dh13gf:disabled{cursor:not-allowed}
|
|
51
51
|
._kqswh2mm{position:relative}
|
|
52
|
-
.
|
|
53
|
-
.
|
|
54
|
-
.
|
|
52
|
+
._lekrbk0g:disabled{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
53
|
+
._mqf81gmx[data-disabled]{color:var(--ds-text-disabled,#080f214a)}
|
|
54
|
+
._pmm42sac:disabled[data-invalid]{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
55
55
|
._s7n4jp4b{vertical-align:top}
|
|
56
|
-
.
|
|
57
|
-
.
|
|
56
|
+
._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
|
|
57
|
+
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
58
58
|
._t9ec1soj{transform:scale(.625)}
|
|
59
59
|
._tqbwidpf{--radio-dot-opacity:0}
|
|
60
60
|
._tqbwt94y{--radio-dot-opacity:1px}
|
|
61
61
|
._vchhusvi{box-sizing:border-box}
|
|
62
|
-
.
|
|
62
|
+
._wml02sac:disabled:checked{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
63
63
|
._wstuglyw{-webkit-appearance:none}
|
|
64
|
-
.
|
|
64
|
+
._x48a2sac:disabled{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
65
65
|
._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
|
|
66
66
|
._z0ai120g:after{width:.6pc}
|
|
67
|
-
.
|
|
68
|
-
.
|
|
67
|
+
._6tjkjsth:checked:focus{outline:var(--ds-border-width-focused,3px) solid var(--ds-border-focused,#4688ec)}
|
|
68
|
+
._y2mvjsth:focus{outline:var(--ds-border-width-focused,3px) solid var(--ds-border-focused,#4688ec)}
|
|
69
69
|
._1bg41l7b:focus{outline-offset:3px}
|
|
70
|
-
.
|
|
71
|
-
.
|
|
70
|
+
._1c6f2sac:disabled:checked:focus{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
71
|
+
._1f8cbk0g:disabled:focus{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
72
72
|
._1gcs13gf:disabled:focus{cursor:not-allowed}
|
|
73
|
-
.
|
|
74
|
-
.
|
|
73
|
+
._1yk92sac:disabled:focus{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
74
|
+
._92nabk0g:disabled:checked:focus{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
75
75
|
._awqn1l7b:checked:focus{outline-offset:3px}
|
|
76
|
-
.
|
|
77
|
-
.
|
|
76
|
+
._n8t0by5v:disabled:checked:focus{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
77
|
+
._nxi6by5v:disabled:focus{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
78
78
|
._qep213gf:disabled:checked:focus{cursor:not-allowed}
|
|
79
79
|
._180n13gf:disabled:checked:hover{cursor:not-allowed}
|
|
80
|
-
.
|
|
81
|
-
.
|
|
82
|
-
.
|
|
83
|
-
.
|
|
80
|
+
._1iwz1q28:checked:hover{--radio-border-color:var(--ds-background-selected-bold-hovered,#1558bc)}
|
|
81
|
+
._1o5rby5v:disabled:checked:hover{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
82
|
+
._1p9jrsbi:hover{--radio-border-color:var(--ds-border-input,#8c8f97)}
|
|
83
|
+
._1rvql4ek:hover{--radio-background-color:var(--ds-background-input-hovered,#f8f8f8)}
|
|
84
84
|
._1x1a13gf:disabled:hover{cursor:not-allowed}
|
|
85
|
-
.
|
|
86
|
-
.
|
|
87
|
-
.
|
|
88
|
-
.
|
|
89
|
-
.
|
|
90
|
-
.
|
|
91
|
-
.
|
|
92
|
-
.
|
|
93
|
-
.
|
|
85
|
+
._awurbk0g:disabled:checked:hover{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
86
|
+
._gdmb2sac:disabled:hover{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
87
|
+
._neoeby5v:disabled:hover{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
88
|
+
._qftt2sac:disabled:checked:hover{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
89
|
+
._s2ftbk0g:disabled:hover{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
90
|
+
._x2tz1q28:checked:hover{--radio-background-color:var(--ds-background-selected-bold-hovered,#1558bc)}
|
|
91
|
+
._11v7bk0g:disabled:active{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
92
|
+
._1dvdrsbi:checked:active{--radio-border-color:var(--ds-border-input,#8c8f97)}
|
|
93
|
+
._1ib22sac:disabled:active{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
94
94
|
._5ry313gf:disabled:checked:active{cursor:not-allowed}
|
|
95
|
-
.
|
|
96
|
-
.
|
|
97
|
-
.
|
|
98
|
-
.
|
|
99
|
-
.
|
|
95
|
+
._60ak5w2r:checked:active{--radio-dot-color:var(--ds-icon-inverse,#fff)}
|
|
96
|
+
._6cyrby5v:disabled:checked:active{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
97
|
+
._bl0ebk0g:disabled:checked:active{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
98
|
+
._jcko12kk:checked:active{--radio-background-color:var(--ds-background-selected-bold-pressed,#123263)}
|
|
99
|
+
._o1bdby5v:disabled:active{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
100
100
|
._scgf13gf:disabled:active{cursor:not-allowed}
|
|
101
|
-
.
|
|
102
|
-
.
|
|
101
|
+
._sj8yr01l:active{--radio-background-color:var(--ds-background-input-pressed,#fff)}
|
|
102
|
+
._tusm2sac:disabled:checked:active{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
package/dist/cjs/radio.js
CHANGED
|
@@ -16,12 +16,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
|
16
16
|
var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
|
|
17
17
|
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
18
18
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
19
|
-
var _colors = require("@atlaskit/theme/colors");
|
|
20
19
|
var _excluded = ["ariaLabel", "aria-labelledby", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "labelId", "name", "onChange", "value", "testId", "analyticsContext"]; /// <reference types="node" />
|
|
21
20
|
// for typing `process`
|
|
22
21
|
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); }
|
|
23
22
|
var packageName = "@atlaskit/radio";
|
|
24
|
-
var packageVersion = "
|
|
23
|
+
var packageVersion = "8.4.6";
|
|
25
24
|
var noop = _noop.default;
|
|
26
25
|
var labelPaddingStyles = null;
|
|
27
26
|
var labelStyles = null;
|
|
@@ -68,11 +67,7 @@ var InnerRadio = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, ref)
|
|
|
68
67
|
return /*#__PURE__*/React.createElement("label", {
|
|
69
68
|
"data-testid": testId && "".concat(testId, "--radio-label"),
|
|
70
69
|
"data-disabled": isDisabled ? 'true' : undefined,
|
|
71
|
-
className: (0, _runtime.ax)(["_11c8fhey _1e0c1txw _vchhusvi _kqswh2mm _4cvr1y6m
|
|
72
|
-
style: {
|
|
73
|
-
"--_5xk3r4": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N900, ")")),
|
|
74
|
-
"--_1ynhf1h": (0, _runtime.ix)("var(--ds-text-disabled, ".concat(_colors.N80, ")"))
|
|
75
|
-
}
|
|
70
|
+
className: (0, _runtime.ax)(["_11c8fhey _1e0c1txw _vchhusvi _kqswh2mm _4cvr1y6m _syazi7uo", !(0, _platformFeatureFlags.fg)('platform-radio-atomic-styles') && "_mqf81gmx _g7st13gf", isDisabled && (0, _platformFeatureFlags.fg)('platform-radio-atomic-styles') && "_syaz1gmx _80om13gf"])
|
|
76
71
|
}, /*#__PURE__*/React.createElement("input", (0, _extends2.default)({}, rest, {
|
|
77
72
|
// It is necessary only for Safari. It allows to render focus styles.
|
|
78
73
|
tabIndex: 0,
|
|
@@ -93,23 +88,7 @@ var InnerRadio = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, ref)
|
|
|
93
88
|
,
|
|
94
89
|
"data-invalid": isInvalid ? 'true' : undefined,
|
|
95
90
|
ref: ref,
|
|
96
|
-
className: (0, _runtime.ax)(["_18s8ze3t _19it3vzd _2rko1qll _12ji1r31 _1qu2glyw _12y31o36 _v56415j1 _1e0c1txw _1bsb1tcg _4t3i1tcg _kqswh2mm _4cvr1h6o _1bah1h6o _1o9zidpf _bfhk4t47 _13diglyw
|
|
97
|
-
style: {
|
|
98
|
-
"--_4mkb4g": (0, _runtime.ix)("var(--ds-background-input, ".concat(_colors.N10, ")")),
|
|
99
|
-
"--_vnm8xo": (0, _runtime.ix)("var(--ds-border-input, ".concat(_colors.N100, ")")),
|
|
100
|
-
"--_jf353p": (0, _runtime.ix)("var(--ds-icon-inverse, ".concat(_colors.N10, ")")),
|
|
101
|
-
"--_1z08gfx": (0, _runtime.ix)("var(--ds-background-input-hovered, ".concat(_colors.N30, ")")),
|
|
102
|
-
"--_174hl94": (0, _runtime.ix)("var(--ds-background-input-pressed, ".concat(_colors.N30, ")")),
|
|
103
|
-
"--_2yg3i9": (0, _runtime.ix)("var(--ds-border-width-focused, 3px)".concat(" solid ", "var(--ds-border-focused, ".concat(_colors.B200, ")"))),
|
|
104
|
-
"--_1gcp7nr": (0, _runtime.ix)("var(--ds-background-selected-bold, ".concat(_colors.B400, ")")),
|
|
105
|
-
"--_14y1fod": (0, _runtime.ix)("var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")")),
|
|
106
|
-
"--_9b0jbo": (0, _runtime.ix)("var(--ds-background-selected-bold-pressed, ".concat(_colors.B50, ")")),
|
|
107
|
-
"--_uq1ko9": (0, _runtime.ix)("var(--ds-icon-inverse, ".concat(_colors.B400, ")")),
|
|
108
|
-
"--_m4cp67": (0, _runtime.ix)("var(--ds-icon-danger, ".concat(_colors.R300, ")")),
|
|
109
|
-
"--_r5pknd": (0, _runtime.ix)("var(--ds-background-disabled, ".concat(_colors.N20, ")")),
|
|
110
|
-
"--_1ufdgqf": (0, _runtime.ix)("var(--ds-border-disabled, ".concat(_colors.N20, ")")),
|
|
111
|
-
"--_1xmcmw9": (0, _runtime.ix)("var(--ds-icon-disabled, ".concat(_colors.N70, ")"))
|
|
112
|
-
}
|
|
91
|
+
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", !(0, _platformFeatureFlags.fg)('platform-radio-atomic-styles') && "_iosijmqp _11jyjmqp _f3ett94y _y2mvjsth _1bg41l7b _6tjkjsth _awqn1l7b _1rvql4ek _1p9jrsbi _x2tz1q28 _1iwz1q28 _sj8yr01l _jcko12kk _1dvdrsbi _60ak5w2r", !(0, _platformFeatureFlags.fg)('platform-radio-atomic-styles') && "_19ybs4qr _1d7ps4qr _j5dh13gf _scgf13gf _4fps13gf _5ry313gf _qep213gf _180n13gf _1gcs13gf _1x1a13gf _6hp813gf _4ryaby5v _o1bdby5v _2kbkby5v _6cyrby5v _n8t0by5v _1o5rby5v _nxi6by5v _neoeby5v _1el2by5v _lekrbk0g _11v7bk0g _1if1bk0g _bl0ebk0g _92nabk0g _awurbk0g _1f8cbk0g _s2ftbk0g _17a1bk0g _x48a2sac _1ib22sac _wml02sac _tusm2sac _1c6f2sac _qftt2sac _1yk92sac _gdmb2sac _pmm42sac", !isDisabled && (0, _platformFeatureFlags.fg)('platform-radio-atomic-styles') && "_iosijmqp _11jyjmqp _f3ett94y _y2mvjsth _1bg41l7b _6tjkjsth _awqn1l7b _1rvql4ek _1p9jrsbi _x2tz1q28 _1iwz1q28 _sj8yr01l _jcko12kk _1dvdrsbi _60ak5w2r", isDisabled && (0, _platformFeatureFlags.fg)('platform-radio-atomic-styles') && "_80om13gf _1q6qby5v _1151bk0g _1s6w2sac", isDisabled && isChecked && (0, _platformFeatureFlags.fg)('platform-radio-atomic-styles') && "_tqbwt94y", isInvalid && !isDisabled && (0, _platformFeatureFlags.fg)('platform-radio-atomic-styles') && "_1151s4qr _11jys4qr"])
|
|
113
92
|
})), label ? /*#__PURE__*/React.createElement("span", {
|
|
114
93
|
className: (0, _runtime.ax)(["_85i5v77o _1q51v77o _y4ti1b66 _bozg1b66"])
|
|
115
94
|
}, label) : null);
|
|
@@ -6,37 +6,37 @@
|
|
|
6
6
|
._19it3vzd{border:var(--ds-border-width,1px) solid var(--radio-border-color)}
|
|
7
7
|
._2rko1qll{border-radius:var(--ds-radius-full,50%)}
|
|
8
8
|
._qc5orqeg:after{transition:background-color .2s ease-in-out,opacity .2s ease-in-out}
|
|
9
|
-
._v56415j1{transition:border-color .2s ease-in-out,background-color .2s ease-in-out}.
|
|
10
|
-
.
|
|
11
|
-
.
|
|
12
|
-
.
|
|
13
|
-
.
|
|
9
|
+
._v56415j1{transition:border-color .2s ease-in-out,background-color .2s ease-in-out}._1151bk0g{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
10
|
+
._1151rsbi{--radio-border-color:var(--ds-border-input,#8c8f97)}
|
|
11
|
+
._1151s4qr{--radio-border-color:var(--ds-icon-danger,#c9372c)}
|
|
12
|
+
._11jyjmqp:checked{--radio-border-color:var(--ds-background-selected-bold,#1868db)}
|
|
13
|
+
._11jys4qr:checked{--radio-border-color:var(--ds-icon-danger,#c9372c)}
|
|
14
14
|
._12ji1r31{outline-color:currentColor}
|
|
15
15
|
._12y31o36{outline-width:medium}
|
|
16
16
|
._13diglyw{-moz-appearance:none}
|
|
17
|
-
.
|
|
17
|
+
._17a1bk0g:disabled[data-invalid]{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
18
18
|
._18postnw:after{position:absolute}
|
|
19
|
-
.
|
|
19
|
+
._19ybs4qr:checked[data-invalid]{--radio-border-color:var(--ds-icon-danger,#c9372c)}
|
|
20
20
|
._1bah1h6o{justify-content:center}
|
|
21
21
|
._1bsb1tcg{width:24px}
|
|
22
|
-
.
|
|
22
|
+
._1d7ps4qr[data-invalid]{--radio-border-color:var(--ds-icon-danger,#c9372c)}
|
|
23
23
|
._1e0c1txw{display:flex}
|
|
24
|
-
.
|
|
25
|
-
.
|
|
24
|
+
._1el2by5v:disabled[data-invalid]{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
25
|
+
._1if1bk0g:disabled:checked{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
26
26
|
._1o9zidpf{flex-shrink:0}
|
|
27
27
|
._1peq1xmd:after{opacity:var(--radio-dot-opacity)}
|
|
28
28
|
._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
|
|
29
|
-
.
|
|
30
|
-
.
|
|
29
|
+
._1q6q1j9a{--radio-background-color:var(--ds-background-input,#fff)}
|
|
30
|
+
._1q6qby5v{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
31
31
|
._1qdg120g:after{height:.6pc}
|
|
32
32
|
._1qu2glyw{outline-style:none}
|
|
33
|
-
.
|
|
34
|
-
.
|
|
35
|
-
.
|
|
33
|
+
._1s6w2sac{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
34
|
+
._1s6w5w2r{--radio-dot-color:var(--ds-icon-inverse,#fff)}
|
|
35
|
+
._2kbkby5v:disabled:checked{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
36
36
|
._4cvr1h6o{align-items:center}
|
|
37
37
|
._4cvr1y6m{align-items:flex-start}
|
|
38
38
|
._4fps13gf:disabled:checked{cursor:not-allowed}
|
|
39
|
-
.
|
|
39
|
+
._4ryaby5v:disabled{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
40
40
|
._4t3i1tcg{height:24px}
|
|
41
41
|
._6hp813gf:disabled[data-invalid]{cursor:not-allowed}
|
|
42
42
|
._80om13gf{cursor:not-allowed}
|
|
@@ -46,57 +46,57 @@
|
|
|
46
46
|
._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
|
|
47
47
|
._f3ett94y:checked{--radio-dot-opacity:1px}
|
|
48
48
|
._g7st13gf[data-disabled]{cursor:not-allowed}
|
|
49
|
-
.
|
|
49
|
+
._iosijmqp:checked{--radio-background-color:var(--ds-background-selected-bold,#1868db)}
|
|
50
50
|
._j5dh13gf:disabled{cursor:not-allowed}
|
|
51
51
|
._kqswh2mm{position:relative}
|
|
52
|
-
.
|
|
53
|
-
.
|
|
54
|
-
.
|
|
52
|
+
._lekrbk0g:disabled{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
53
|
+
._mqf81gmx[data-disabled]{color:var(--ds-text-disabled,#080f214a)}
|
|
54
|
+
._pmm42sac:disabled[data-invalid]{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
55
55
|
._s7n4jp4b{vertical-align:top}
|
|
56
|
-
.
|
|
57
|
-
.
|
|
56
|
+
._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
|
|
57
|
+
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
58
58
|
._t9ec1soj{transform:scale(.625)}
|
|
59
59
|
._tqbwidpf{--radio-dot-opacity:0}
|
|
60
60
|
._tqbwt94y{--radio-dot-opacity:1px}
|
|
61
61
|
._vchhusvi{box-sizing:border-box}
|
|
62
|
-
.
|
|
62
|
+
._wml02sac:disabled:checked{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
63
63
|
._wstuglyw{-webkit-appearance:none}
|
|
64
|
-
.
|
|
64
|
+
._x48a2sac:disabled{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
65
65
|
._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
|
|
66
66
|
._z0ai120g:after{width:.6pc}
|
|
67
|
-
.
|
|
68
|
-
.
|
|
67
|
+
._6tjkjsth:checked:focus{outline:var(--ds-border-width-focused,3px) solid var(--ds-border-focused,#4688ec)}
|
|
68
|
+
._y2mvjsth:focus{outline:var(--ds-border-width-focused,3px) solid var(--ds-border-focused,#4688ec)}
|
|
69
69
|
._1bg41l7b:focus{outline-offset:3px}
|
|
70
|
-
.
|
|
71
|
-
.
|
|
70
|
+
._1c6f2sac:disabled:checked:focus{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
71
|
+
._1f8cbk0g:disabled:focus{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
72
72
|
._1gcs13gf:disabled:focus{cursor:not-allowed}
|
|
73
|
-
.
|
|
74
|
-
.
|
|
73
|
+
._1yk92sac:disabled:focus{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
74
|
+
._92nabk0g:disabled:checked:focus{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
75
75
|
._awqn1l7b:checked:focus{outline-offset:3px}
|
|
76
|
-
.
|
|
77
|
-
.
|
|
76
|
+
._n8t0by5v:disabled:checked:focus{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
77
|
+
._nxi6by5v:disabled:focus{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
78
78
|
._qep213gf:disabled:checked:focus{cursor:not-allowed}
|
|
79
79
|
._180n13gf:disabled:checked:hover{cursor:not-allowed}
|
|
80
|
-
.
|
|
81
|
-
.
|
|
82
|
-
.
|
|
83
|
-
.
|
|
80
|
+
._1iwz1q28:checked:hover{--radio-border-color:var(--ds-background-selected-bold-hovered,#1558bc)}
|
|
81
|
+
._1o5rby5v:disabled:checked:hover{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
82
|
+
._1p9jrsbi:hover{--radio-border-color:var(--ds-border-input,#8c8f97)}
|
|
83
|
+
._1rvql4ek:hover{--radio-background-color:var(--ds-background-input-hovered,#f8f8f8)}
|
|
84
84
|
._1x1a13gf:disabled:hover{cursor:not-allowed}
|
|
85
|
-
.
|
|
86
|
-
.
|
|
87
|
-
.
|
|
88
|
-
.
|
|
89
|
-
.
|
|
90
|
-
.
|
|
91
|
-
.
|
|
92
|
-
.
|
|
93
|
-
.
|
|
85
|
+
._awurbk0g:disabled:checked:hover{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
86
|
+
._gdmb2sac:disabled:hover{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
87
|
+
._neoeby5v:disabled:hover{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
88
|
+
._qftt2sac:disabled:checked:hover{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
89
|
+
._s2ftbk0g:disabled:hover{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
90
|
+
._x2tz1q28:checked:hover{--radio-background-color:var(--ds-background-selected-bold-hovered,#1558bc)}
|
|
91
|
+
._11v7bk0g:disabled:active{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
92
|
+
._1dvdrsbi:checked:active{--radio-border-color:var(--ds-border-input,#8c8f97)}
|
|
93
|
+
._1ib22sac:disabled:active{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
94
94
|
._5ry313gf:disabled:checked:active{cursor:not-allowed}
|
|
95
|
-
.
|
|
96
|
-
.
|
|
97
|
-
.
|
|
98
|
-
.
|
|
99
|
-
.
|
|
95
|
+
._60ak5w2r:checked:active{--radio-dot-color:var(--ds-icon-inverse,#fff)}
|
|
96
|
+
._6cyrby5v:disabled:checked:active{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
97
|
+
._bl0ebk0g:disabled:checked:active{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
98
|
+
._jcko12kk:checked:active{--radio-background-color:var(--ds-background-selected-bold-pressed,#123263)}
|
|
99
|
+
._o1bdby5v:disabled:active{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
100
100
|
._scgf13gf:disabled:active{cursor:not-allowed}
|
|
101
|
-
.
|
|
102
|
-
.
|
|
101
|
+
._sj8yr01l:active{--radio-background-color:var(--ds-background-input-pressed,#fff)}
|
|
102
|
+
._tusm2sac:disabled:checked:active{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
package/dist/es2019/radio.js
CHANGED
|
@@ -9,9 +9,8 @@ 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
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
|
-
import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
|
|
13
12
|
const packageName = "@atlaskit/radio";
|
|
14
|
-
const packageVersion = "
|
|
13
|
+
const packageVersion = "8.4.6";
|
|
15
14
|
const noop = __noop;
|
|
16
15
|
const labelPaddingStyles = null;
|
|
17
16
|
const labelStyles = null;
|
|
@@ -57,7 +56,7 @@ const InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
|
|
|
57
56
|
return /*#__PURE__*/React.createElement("label", {
|
|
58
57
|
"data-testid": testId && `${testId}--radio-label`,
|
|
59
58
|
"data-disabled": isDisabled ? 'true' : undefined,
|
|
60
|
-
className: ax(["_11c8fhey _1e0c1txw _vchhusvi _kqswh2mm _4cvr1y6m
|
|
59
|
+
className: ax(["_11c8fhey _1e0c1txw _vchhusvi _kqswh2mm _4cvr1y6m _syazi7uo", !fg('platform-radio-atomic-styles') && "_mqf81gmx _g7st13gf", isDisabled && fg('platform-radio-atomic-styles') && "_syaz1gmx _80om13gf"])
|
|
61
60
|
}, /*#__PURE__*/React.createElement("input", _extends({}, rest, {
|
|
62
61
|
// It is necessary only for Safari. It allows to render focus styles.
|
|
63
62
|
tabIndex: 0,
|
|
@@ -78,7 +77,7 @@ const InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
|
|
|
78
77
|
,
|
|
79
78
|
"data-invalid": isInvalid ? 'true' : undefined,
|
|
80
79
|
ref: ref,
|
|
81
|
-
className: ax(["_18s8ze3t _19it3vzd _2rko1qll _12ji1r31 _1qu2glyw _12y31o36 _v56415j1 _1e0c1txw _1bsb1tcg _4t3i1tcg _kqswh2mm _4cvr1h6o _1bah1h6o _1o9zidpf _bfhk4t47 _13diglyw
|
|
80
|
+
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", !fg('platform-radio-atomic-styles') && "_iosijmqp _11jyjmqp _f3ett94y _y2mvjsth _1bg41l7b _6tjkjsth _awqn1l7b _1rvql4ek _1p9jrsbi _x2tz1q28 _1iwz1q28 _sj8yr01l _jcko12kk _1dvdrsbi _60ak5w2r", !fg('platform-radio-atomic-styles') && "_19ybs4qr _1d7ps4qr _j5dh13gf _scgf13gf _4fps13gf _5ry313gf _qep213gf _180n13gf _1gcs13gf _1x1a13gf _6hp813gf _4ryaby5v _o1bdby5v _2kbkby5v _6cyrby5v _n8t0by5v _1o5rby5v _nxi6by5v _neoeby5v _1el2by5v _lekrbk0g _11v7bk0g _1if1bk0g _bl0ebk0g _92nabk0g _awurbk0g _1f8cbk0g _s2ftbk0g _17a1bk0g _x48a2sac _1ib22sac _wml02sac _tusm2sac _1c6f2sac _qftt2sac _1yk92sac _gdmb2sac _pmm42sac", !isDisabled && fg('platform-radio-atomic-styles') && "_iosijmqp _11jyjmqp _f3ett94y _y2mvjsth _1bg41l7b _6tjkjsth _awqn1l7b _1rvql4ek _1p9jrsbi _x2tz1q28 _1iwz1q28 _sj8yr01l _jcko12kk _1dvdrsbi _60ak5w2r", isDisabled && fg('platform-radio-atomic-styles') && "_80om13gf _1q6qby5v _1151bk0g _1s6w2sac", isDisabled && isChecked && fg('platform-radio-atomic-styles') && "_tqbwt94y", isInvalid && !isDisabled && fg('platform-radio-atomic-styles') && "_1151s4qr _11jys4qr"])
|
|
82
81
|
})), label ? /*#__PURE__*/React.createElement("span", {
|
|
83
82
|
className: ax(["_85i5v77o _1q51v77o _y4ti1b66 _bozg1b66"])
|
|
84
83
|
}, label) : null);
|
|
@@ -6,37 +6,37 @@
|
|
|
6
6
|
._19it3vzd{border:var(--ds-border-width,1px) solid var(--radio-border-color)}
|
|
7
7
|
._2rko1qll{border-radius:var(--ds-radius-full,50%)}
|
|
8
8
|
._qc5orqeg:after{transition:background-color .2s ease-in-out,opacity .2s ease-in-out}
|
|
9
|
-
._v56415j1{transition:border-color .2s ease-in-out,background-color .2s ease-in-out}.
|
|
10
|
-
.
|
|
11
|
-
.
|
|
12
|
-
.
|
|
13
|
-
.
|
|
9
|
+
._v56415j1{transition:border-color .2s ease-in-out,background-color .2s ease-in-out}._1151bk0g{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
10
|
+
._1151rsbi{--radio-border-color:var(--ds-border-input,#8c8f97)}
|
|
11
|
+
._1151s4qr{--radio-border-color:var(--ds-icon-danger,#c9372c)}
|
|
12
|
+
._11jyjmqp:checked{--radio-border-color:var(--ds-background-selected-bold,#1868db)}
|
|
13
|
+
._11jys4qr:checked{--radio-border-color:var(--ds-icon-danger,#c9372c)}
|
|
14
14
|
._12ji1r31{outline-color:currentColor}
|
|
15
15
|
._12y31o36{outline-width:medium}
|
|
16
16
|
._13diglyw{-moz-appearance:none}
|
|
17
|
-
.
|
|
17
|
+
._17a1bk0g:disabled[data-invalid]{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
18
18
|
._18postnw:after{position:absolute}
|
|
19
|
-
.
|
|
19
|
+
._19ybs4qr:checked[data-invalid]{--radio-border-color:var(--ds-icon-danger,#c9372c)}
|
|
20
20
|
._1bah1h6o{justify-content:center}
|
|
21
21
|
._1bsb1tcg{width:24px}
|
|
22
|
-
.
|
|
22
|
+
._1d7ps4qr[data-invalid]{--radio-border-color:var(--ds-icon-danger,#c9372c)}
|
|
23
23
|
._1e0c1txw{display:flex}
|
|
24
|
-
.
|
|
25
|
-
.
|
|
24
|
+
._1el2by5v:disabled[data-invalid]{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
25
|
+
._1if1bk0g:disabled:checked{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
26
26
|
._1o9zidpf{flex-shrink:0}
|
|
27
27
|
._1peq1xmd:after{opacity:var(--radio-dot-opacity)}
|
|
28
28
|
._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
|
|
29
|
-
.
|
|
30
|
-
.
|
|
29
|
+
._1q6q1j9a{--radio-background-color:var(--ds-background-input,#fff)}
|
|
30
|
+
._1q6qby5v{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
31
31
|
._1qdg120g:after{height:.6pc}
|
|
32
32
|
._1qu2glyw{outline-style:none}
|
|
33
|
-
.
|
|
34
|
-
.
|
|
35
|
-
.
|
|
33
|
+
._1s6w2sac{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
34
|
+
._1s6w5w2r{--radio-dot-color:var(--ds-icon-inverse,#fff)}
|
|
35
|
+
._2kbkby5v:disabled:checked{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
36
36
|
._4cvr1h6o{align-items:center}
|
|
37
37
|
._4cvr1y6m{align-items:flex-start}
|
|
38
38
|
._4fps13gf:disabled:checked{cursor:not-allowed}
|
|
39
|
-
.
|
|
39
|
+
._4ryaby5v:disabled{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
40
40
|
._4t3i1tcg{height:24px}
|
|
41
41
|
._6hp813gf:disabled[data-invalid]{cursor:not-allowed}
|
|
42
42
|
._80om13gf{cursor:not-allowed}
|
|
@@ -46,57 +46,57 @@
|
|
|
46
46
|
._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
|
|
47
47
|
._f3ett94y:checked{--radio-dot-opacity:1px}
|
|
48
48
|
._g7st13gf[data-disabled]{cursor:not-allowed}
|
|
49
|
-
.
|
|
49
|
+
._iosijmqp:checked{--radio-background-color:var(--ds-background-selected-bold,#1868db)}
|
|
50
50
|
._j5dh13gf:disabled{cursor:not-allowed}
|
|
51
51
|
._kqswh2mm{position:relative}
|
|
52
|
-
.
|
|
53
|
-
.
|
|
54
|
-
.
|
|
52
|
+
._lekrbk0g:disabled{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
53
|
+
._mqf81gmx[data-disabled]{color:var(--ds-text-disabled,#080f214a)}
|
|
54
|
+
._pmm42sac:disabled[data-invalid]{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
55
55
|
._s7n4jp4b{vertical-align:top}
|
|
56
|
-
.
|
|
57
|
-
.
|
|
56
|
+
._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
|
|
57
|
+
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
58
58
|
._t9ec1soj{transform:scale(.625)}
|
|
59
59
|
._tqbwidpf{--radio-dot-opacity:0}
|
|
60
60
|
._tqbwt94y{--radio-dot-opacity:1px}
|
|
61
61
|
._vchhusvi{box-sizing:border-box}
|
|
62
|
-
.
|
|
62
|
+
._wml02sac:disabled:checked{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
63
63
|
._wstuglyw{-webkit-appearance:none}
|
|
64
|
-
.
|
|
64
|
+
._x48a2sac:disabled{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
65
65
|
._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
|
|
66
66
|
._z0ai120g:after{width:.6pc}
|
|
67
|
-
.
|
|
68
|
-
.
|
|
67
|
+
._6tjkjsth:checked:focus{outline:var(--ds-border-width-focused,3px) solid var(--ds-border-focused,#4688ec)}
|
|
68
|
+
._y2mvjsth:focus{outline:var(--ds-border-width-focused,3px) solid var(--ds-border-focused,#4688ec)}
|
|
69
69
|
._1bg41l7b:focus{outline-offset:3px}
|
|
70
|
-
.
|
|
71
|
-
.
|
|
70
|
+
._1c6f2sac:disabled:checked:focus{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
71
|
+
._1f8cbk0g:disabled:focus{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
72
72
|
._1gcs13gf:disabled:focus{cursor:not-allowed}
|
|
73
|
-
.
|
|
74
|
-
.
|
|
73
|
+
._1yk92sac:disabled:focus{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
74
|
+
._92nabk0g:disabled:checked:focus{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
75
75
|
._awqn1l7b:checked:focus{outline-offset:3px}
|
|
76
|
-
.
|
|
77
|
-
.
|
|
76
|
+
._n8t0by5v:disabled:checked:focus{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
77
|
+
._nxi6by5v:disabled:focus{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
78
78
|
._qep213gf:disabled:checked:focus{cursor:not-allowed}
|
|
79
79
|
._180n13gf:disabled:checked:hover{cursor:not-allowed}
|
|
80
|
-
.
|
|
81
|
-
.
|
|
82
|
-
.
|
|
83
|
-
.
|
|
80
|
+
._1iwz1q28:checked:hover{--radio-border-color:var(--ds-background-selected-bold-hovered,#1558bc)}
|
|
81
|
+
._1o5rby5v:disabled:checked:hover{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
82
|
+
._1p9jrsbi:hover{--radio-border-color:var(--ds-border-input,#8c8f97)}
|
|
83
|
+
._1rvql4ek:hover{--radio-background-color:var(--ds-background-input-hovered,#f8f8f8)}
|
|
84
84
|
._1x1a13gf:disabled:hover{cursor:not-allowed}
|
|
85
|
-
.
|
|
86
|
-
.
|
|
87
|
-
.
|
|
88
|
-
.
|
|
89
|
-
.
|
|
90
|
-
.
|
|
91
|
-
.
|
|
92
|
-
.
|
|
93
|
-
.
|
|
85
|
+
._awurbk0g:disabled:checked:hover{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
86
|
+
._gdmb2sac:disabled:hover{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
87
|
+
._neoeby5v:disabled:hover{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
88
|
+
._qftt2sac:disabled:checked:hover{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
89
|
+
._s2ftbk0g:disabled:hover{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
90
|
+
._x2tz1q28:checked:hover{--radio-background-color:var(--ds-background-selected-bold-hovered,#1558bc)}
|
|
91
|
+
._11v7bk0g:disabled:active{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
92
|
+
._1dvdrsbi:checked:active{--radio-border-color:var(--ds-border-input,#8c8f97)}
|
|
93
|
+
._1ib22sac:disabled:active{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
|
94
94
|
._5ry313gf:disabled:checked:active{cursor:not-allowed}
|
|
95
|
-
.
|
|
96
|
-
.
|
|
97
|
-
.
|
|
98
|
-
.
|
|
99
|
-
.
|
|
95
|
+
._60ak5w2r:checked:active{--radio-dot-color:var(--ds-icon-inverse,#fff)}
|
|
96
|
+
._6cyrby5v:disabled:checked:active{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
97
|
+
._bl0ebk0g:disabled:checked:active{--radio-border-color:var(--ds-border-disabled,#0515240f)}
|
|
98
|
+
._jcko12kk:checked:active{--radio-background-color:var(--ds-background-selected-bold-pressed,#123263)}
|
|
99
|
+
._o1bdby5v:disabled:active{--radio-background-color:var(--ds-background-disabled,#17171708)}
|
|
100
100
|
._scgf13gf:disabled:active{cursor:not-allowed}
|
|
101
|
-
.
|
|
102
|
-
.
|
|
101
|
+
._sj8yr01l:active{--radio-background-color:var(--ds-background-input-pressed,#fff)}
|
|
102
|
+
._tusm2sac:disabled:checked:active{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
|
package/dist/esm/radio.js
CHANGED
|
@@ -11,9 +11,8 @@ 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
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
14
|
-
import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
|
|
15
14
|
var packageName = "@atlaskit/radio";
|
|
16
|
-
var packageVersion = "
|
|
15
|
+
var packageVersion = "8.4.6";
|
|
17
16
|
var noop = __noop;
|
|
18
17
|
var labelPaddingStyles = null;
|
|
19
18
|
var labelStyles = null;
|
|
@@ -60,11 +59,7 @@ var InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
|
|
|
60
59
|
return /*#__PURE__*/React.createElement("label", {
|
|
61
60
|
"data-testid": testId && "".concat(testId, "--radio-label"),
|
|
62
61
|
"data-disabled": isDisabled ? 'true' : undefined,
|
|
63
|
-
className: ax(["_11c8fhey _1e0c1txw _vchhusvi _kqswh2mm _4cvr1y6m
|
|
64
|
-
style: {
|
|
65
|
-
"--_5xk3r4": ix("var(--ds-text, ".concat(N900, ")")),
|
|
66
|
-
"--_1ynhf1h": ix("var(--ds-text-disabled, ".concat(N80, ")"))
|
|
67
|
-
}
|
|
62
|
+
className: ax(["_11c8fhey _1e0c1txw _vchhusvi _kqswh2mm _4cvr1y6m _syazi7uo", !fg('platform-radio-atomic-styles') && "_mqf81gmx _g7st13gf", isDisabled && fg('platform-radio-atomic-styles') && "_syaz1gmx _80om13gf"])
|
|
68
63
|
}, /*#__PURE__*/React.createElement("input", _extends({}, rest, {
|
|
69
64
|
// It is necessary only for Safari. It allows to render focus styles.
|
|
70
65
|
tabIndex: 0,
|
|
@@ -85,23 +80,7 @@ var InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
|
|
|
85
80
|
,
|
|
86
81
|
"data-invalid": isInvalid ? 'true' : undefined,
|
|
87
82
|
ref: ref,
|
|
88
|
-
className: ax(["_18s8ze3t _19it3vzd _2rko1qll _12ji1r31 _1qu2glyw _12y31o36 _v56415j1 _1e0c1txw _1bsb1tcg _4t3i1tcg _kqswh2mm _4cvr1h6o _1bah1h6o _1o9zidpf _bfhk4t47 _13diglyw
|
|
89
|
-
style: {
|
|
90
|
-
"--_4mkb4g": ix("var(--ds-background-input, ".concat(N10, ")")),
|
|
91
|
-
"--_vnm8xo": ix("var(--ds-border-input, ".concat(N100, ")")),
|
|
92
|
-
"--_jf353p": ix("var(--ds-icon-inverse, ".concat(N10, ")")),
|
|
93
|
-
"--_1z08gfx": ix("var(--ds-background-input-hovered, ".concat(N30, ")")),
|
|
94
|
-
"--_174hl94": ix("var(--ds-background-input-pressed, ".concat(N30, ")")),
|
|
95
|
-
"--_2yg3i9": ix("var(--ds-border-width-focused, 3px)".concat(" solid ", "var(--ds-border-focused, ".concat(B200, ")"))),
|
|
96
|
-
"--_1gcp7nr": ix("var(--ds-background-selected-bold, ".concat(B400, ")")),
|
|
97
|
-
"--_14y1fod": ix("var(--ds-background-selected-bold-hovered, ".concat(B300, ")")),
|
|
98
|
-
"--_9b0jbo": ix("var(--ds-background-selected-bold-pressed, ".concat(B50, ")")),
|
|
99
|
-
"--_uq1ko9": ix("var(--ds-icon-inverse, ".concat(B400, ")")),
|
|
100
|
-
"--_m4cp67": ix("var(--ds-icon-danger, ".concat(R300, ")")),
|
|
101
|
-
"--_r5pknd": ix("var(--ds-background-disabled, ".concat(N20, ")")),
|
|
102
|
-
"--_1ufdgqf": ix("var(--ds-border-disabled, ".concat(N20, ")")),
|
|
103
|
-
"--_1xmcmw9": ix("var(--ds-icon-disabled, ".concat(N70, ")"))
|
|
104
|
-
}
|
|
83
|
+
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", !fg('platform-radio-atomic-styles') && "_iosijmqp _11jyjmqp _f3ett94y _y2mvjsth _1bg41l7b _6tjkjsth _awqn1l7b _1rvql4ek _1p9jrsbi _x2tz1q28 _1iwz1q28 _sj8yr01l _jcko12kk _1dvdrsbi _60ak5w2r", !fg('platform-radio-atomic-styles') && "_19ybs4qr _1d7ps4qr _j5dh13gf _scgf13gf _4fps13gf _5ry313gf _qep213gf _180n13gf _1gcs13gf _1x1a13gf _6hp813gf _4ryaby5v _o1bdby5v _2kbkby5v _6cyrby5v _n8t0by5v _1o5rby5v _nxi6by5v _neoeby5v _1el2by5v _lekrbk0g _11v7bk0g _1if1bk0g _bl0ebk0g _92nabk0g _awurbk0g _1f8cbk0g _s2ftbk0g _17a1bk0g _x48a2sac _1ib22sac _wml02sac _tusm2sac _1c6f2sac _qftt2sac _1yk92sac _gdmb2sac _pmm42sac", !isDisabled && fg('platform-radio-atomic-styles') && "_iosijmqp _11jyjmqp _f3ett94y _y2mvjsth _1bg41l7b _6tjkjsth _awqn1l7b _1rvql4ek _1p9jrsbi _x2tz1q28 _1iwz1q28 _sj8yr01l _jcko12kk _1dvdrsbi _60ak5w2r", isDisabled && fg('platform-radio-atomic-styles') && "_80om13gf _1q6qby5v _1151bk0g _1s6w2sac", isDisabled && isChecked && fg('platform-radio-atomic-styles') && "_tqbwt94y", isInvalid && !isDisabled && fg('platform-radio-atomic-styles') && "_1151s4qr _11jys4qr"])
|
|
105
84
|
})), label ? /*#__PURE__*/React.createElement("span", {
|
|
106
85
|
className: ax(["_85i5v77o _1q51v77o _y4ti1b66 _bozg1b66"])
|
|
107
86
|
}, label) : null);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/radio",
|
|
3
|
-
"version": "8.4.
|
|
3
|
+
"version": "8.4.6",
|
|
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/"
|
|
@@ -32,12 +32,12 @@
|
|
|
32
32
|
}
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@atlaskit/analytics-next": "^11.
|
|
35
|
+
"@atlaskit/analytics-next": "^11.2.0",
|
|
36
36
|
"@atlaskit/css": "^0.19.0",
|
|
37
37
|
"@atlaskit/ds-lib": "^6.0.0",
|
|
38
38
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
39
39
|
"@atlaskit/theme": "^22.0.0",
|
|
40
|
-
"@atlaskit/tokens": "^11.
|
|
40
|
+
"@atlaskit/tokens": "^11.4.0",
|
|
41
41
|
"@babel/runtime": "^7.0.0",
|
|
42
42
|
"@compiled/react": "^0.20.0"
|
|
43
43
|
},
|
|
@@ -50,12 +50,13 @@
|
|
|
50
50
|
"@af/visual-regression": "workspace:^",
|
|
51
51
|
"@atlaskit/button": "^23.10.0",
|
|
52
52
|
"@atlaskit/checkbox": "^17.3.0",
|
|
53
|
-
"@atlaskit/docs": "^11.
|
|
54
|
-
"@atlaskit/form": "^15.
|
|
53
|
+
"@atlaskit/docs": "^11.7.0",
|
|
54
|
+
"@atlaskit/form": "^15.5.0",
|
|
55
55
|
"@atlaskit/link": "^3.3.0",
|
|
56
|
-
"@atlaskit/primitives": "^18.
|
|
56
|
+
"@atlaskit/primitives": "^18.1.0",
|
|
57
57
|
"@atlaskit/section-message": "^8.12.0",
|
|
58
58
|
"@atlassian/ssr-tests": "workspace:^",
|
|
59
|
+
"@atlassian/structured-docs-types": "workspace:^",
|
|
59
60
|
"@testing-library/react": "^16.3.0",
|
|
60
61
|
"@testing-library/user-event": "^14.4.3",
|
|
61
62
|
"jscodeshift": "^17.0.0",
|
package/radio.docs.tsx
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import path from 'path';
|
|
2
|
+
|
|
3
|
+
import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
|
|
4
|
+
|
|
5
|
+
const documentation: ComponentStructuredContentSource[] = [
|
|
6
|
+
{
|
|
7
|
+
name: 'Radio',
|
|
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: {
|
|
12
|
+
name: 'Radio',
|
|
13
|
+
package: '@atlaskit/radio',
|
|
14
|
+
type: 'named',
|
|
15
|
+
packagePath: path.resolve(__dirname),
|
|
16
|
+
packageJson: require('./package.json'),
|
|
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
|
+
{
|
|
40
|
+
name: 'Radio',
|
|
41
|
+
description: 'Radio example',
|
|
42
|
+
source: path.resolve(__dirname, './examples/ai/radio.tsx'),
|
|
43
|
+
},
|
|
44
|
+
],
|
|
45
|
+
keywords: ['radio', 'button', 'input', 'form', 'selection', 'choice', 'option'],
|
|
46
|
+
categories: ['form', 'interaction'],
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
name: 'RadioGroup',
|
|
50
|
+
description:
|
|
51
|
+
'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.',
|
|
52
|
+
status: 'general-availability',
|
|
53
|
+
import: {
|
|
54
|
+
name: 'RadioGroup',
|
|
55
|
+
package: '@atlaskit/radio',
|
|
56
|
+
type: 'named',
|
|
57
|
+
packagePath: path.resolve(__dirname),
|
|
58
|
+
packageJson: require('./package.json'),
|
|
59
|
+
},
|
|
60
|
+
usageGuidelines: [
|
|
61
|
+
'Use for most radio button scenarios with simple option lists',
|
|
62
|
+
'List options in logical order (most likely to least likely)',
|
|
63
|
+
'Make one option the default (safest, most secure option)',
|
|
64
|
+
"Add 'None' option if unselected state is needed",
|
|
65
|
+
"Add 'Other' option if not all options can be listed",
|
|
66
|
+
'Use select component for longer lists of options',
|
|
67
|
+
],
|
|
68
|
+
contentGuidelines: [
|
|
69
|
+
'Use clear, descriptive labels that provide context',
|
|
70
|
+
'Keep labels concise but informative',
|
|
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'),
|
|
86
|
+
},
|
|
87
|
+
],
|
|
88
|
+
keywords: ['radio', 'group', 'form', 'selection', 'choice', 'options', 'list'],
|
|
89
|
+
categories: ['form', 'interaction'],
|
|
90
|
+
},
|
|
91
|
+
];
|
|
92
|
+
|
|
93
|
+
export default documentation;
|