@atlaskit/radio 6.2.0 → 6.3.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 +13 -0
- package/dist/cjs/radio.js +5 -6
- package/dist/es2019/radio.js +6 -7
- package/dist/esm/radio.js +6 -7
- package/package.json +3 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @atlaskit/radio
|
|
2
2
|
|
|
3
|
+
## 6.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#94675](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94675)
|
|
8
|
+
[`5d9e1dccacca`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5d9e1dccacca) -
|
|
9
|
+
[ux] Update input border color token to meet 3:1 color contrast ratioLight theme:
|
|
10
|
+
color.border.input: #091E4224 → #8590A2Dark mode: color.border.input: #A6C5E229 → #738496
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
3
16
|
## 6.2.0
|
|
4
17
|
|
|
5
18
|
### Minor Changes
|
package/dist/cjs/radio.js
CHANGED
|
@@ -11,12 +11,11 @@ var _react = require("react");
|
|
|
11
11
|
var _react2 = require("@emotion/react");
|
|
12
12
|
var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
|
|
13
13
|
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
14
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
15
14
|
var _colors = require("@atlaskit/theme/colors");
|
|
16
15
|
var _excluded = ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "name", "onChange", "value", "testId", "analyticsContext"];
|
|
17
16
|
/** @jsx jsx */
|
|
18
17
|
var packageName = "@atlaskit/radio";
|
|
19
|
-
var packageVersion = "6.
|
|
18
|
+
var packageVersion = "6.3.0";
|
|
20
19
|
var noop = _noop.default;
|
|
21
20
|
var labelPaddingStyles = (0, _react2.css)({
|
|
22
21
|
padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)")
|
|
@@ -54,7 +53,7 @@ var radioStyles = (0, _react2.css)({
|
|
|
54
53
|
backgroundColor: 'var(--radio-background-color)',
|
|
55
54
|
/* Border should multiply by 24/14 to offset scale, a scale of 12 / 7 is to fix a Chrome bug that makes the circle become an oval and the
|
|
56
55
|
inner circle not be centred at various zoom levels */
|
|
57
|
-
border: "
|
|
56
|
+
border: "var(--ds-border-width, 1px)".concat(" solid var(--radio-border-color)"),
|
|
58
57
|
borderRadius: "var(--ds-border-radius-circle, 50%)",
|
|
59
58
|
MozAppearance: 'none',
|
|
60
59
|
outline: 'none',
|
|
@@ -64,7 +63,7 @@ var radioStyles = (0, _react2.css)({
|
|
|
64
63
|
All other variables are constant
|
|
65
64
|
*/
|
|
66
65
|
'--radio-background-color': "var(--ds-background-input, ".concat(_colors.N10, ")"),
|
|
67
|
-
'--radio-border-color':
|
|
66
|
+
'--radio-border-color': "var(--ds-border-input, ".concat(_colors.N100, ")"),
|
|
68
67
|
'--radio-dot-color': "var(--ds-icon-inverse, ".concat(_colors.N10, ")"),
|
|
69
68
|
'--radio-dot-opacity': 0,
|
|
70
69
|
/* 24px * 7 / 12 === 14px height and width */
|
|
@@ -86,7 +85,7 @@ var radioStyles = (0, _react2.css)({
|
|
|
86
85
|
},
|
|
87
86
|
'&:hover': {
|
|
88
87
|
'--radio-background-color': "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
|
|
89
|
-
'--radio-border-color':
|
|
88
|
+
'--radio-border-color': "var(--ds-border-input, ".concat(_colors.N100, ")")
|
|
90
89
|
},
|
|
91
90
|
'&:active': {
|
|
92
91
|
'--radio-background-color': "var(--ds-background-input-pressed, ".concat(_colors.N30, ")")
|
|
@@ -106,7 +105,7 @@ var radioStyles = (0, _react2.css)({
|
|
|
106
105
|
},
|
|
107
106
|
'&:checked:active': {
|
|
108
107
|
'--radio-background-color': "var(--ds-background-selected-bold-pressed, ".concat(_colors.B50, ")"),
|
|
109
|
-
'--radio-border-color':
|
|
108
|
+
'--radio-border-color': "var(--ds-border-input, ".concat(_colors.N100, ")"),
|
|
110
109
|
'--radio-dot-color': "var(--ds-icon-inverse, ".concat(_colors.B400, ")")
|
|
111
110
|
},
|
|
112
111
|
'&:checked:focus': {
|
package/dist/es2019/radio.js
CHANGED
|
@@ -4,10 +4,9 @@ import { forwardRef, memo } from 'react';
|
|
|
4
4
|
import { css, jsx } from '@emotion/react';
|
|
5
5
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
|
|
6
6
|
import __noop from '@atlaskit/ds-lib/noop';
|
|
7
|
-
import {
|
|
8
|
-
import { B200, B300, B400, B50, N10, N100, N20, N30, N40, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
|
|
7
|
+
import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
|
|
9
8
|
const packageName = "@atlaskit/radio";
|
|
10
|
-
const packageVersion = "6.
|
|
9
|
+
const packageVersion = "6.3.0";
|
|
11
10
|
const noop = __noop;
|
|
12
11
|
const labelPaddingStyles = css({
|
|
13
12
|
padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`
|
|
@@ -45,7 +44,7 @@ const radioStyles = css({
|
|
|
45
44
|
backgroundColor: 'var(--radio-background-color)',
|
|
46
45
|
/* Border should multiply by 24/14 to offset scale, a scale of 12 / 7 is to fix a Chrome bug that makes the circle become an oval and the
|
|
47
46
|
inner circle not be centred at various zoom levels */
|
|
48
|
-
border: `${
|
|
47
|
+
border: `${"var(--ds-border-width, 1px)"} solid var(--radio-border-color)`,
|
|
49
48
|
borderRadius: "var(--ds-border-radius-circle, 50%)",
|
|
50
49
|
MozAppearance: 'none',
|
|
51
50
|
outline: 'none',
|
|
@@ -55,7 +54,7 @@ const radioStyles = css({
|
|
|
55
54
|
All other variables are constant
|
|
56
55
|
*/
|
|
57
56
|
'--radio-background-color': `var(--ds-background-input, ${N10})`,
|
|
58
|
-
'--radio-border-color':
|
|
57
|
+
'--radio-border-color': `var(--ds-border-input, ${N100})`,
|
|
59
58
|
'--radio-dot-color': `var(--ds-icon-inverse, ${N10})`,
|
|
60
59
|
'--radio-dot-opacity': 0,
|
|
61
60
|
/* 24px * 7 / 12 === 14px height and width */
|
|
@@ -77,7 +76,7 @@ const radioStyles = css({
|
|
|
77
76
|
},
|
|
78
77
|
'&:hover': {
|
|
79
78
|
'--radio-background-color': `var(--ds-background-input-hovered, ${N30})`,
|
|
80
|
-
'--radio-border-color':
|
|
79
|
+
'--radio-border-color': `var(--ds-border-input, ${N100})`
|
|
81
80
|
},
|
|
82
81
|
'&:active': {
|
|
83
82
|
'--radio-background-color': `var(--ds-background-input-pressed, ${N30})`
|
|
@@ -97,7 +96,7 @@ const radioStyles = css({
|
|
|
97
96
|
},
|
|
98
97
|
'&:checked:active': {
|
|
99
98
|
'--radio-background-color': `var(--ds-background-selected-bold-pressed, ${B50})`,
|
|
100
|
-
'--radio-border-color':
|
|
99
|
+
'--radio-border-color': `var(--ds-border-input, ${N100})`,
|
|
101
100
|
'--radio-dot-color': `var(--ds-icon-inverse, ${B400})`
|
|
102
101
|
},
|
|
103
102
|
'&:checked:focus': {
|
package/dist/esm/radio.js
CHANGED
|
@@ -6,10 +6,9 @@ import { forwardRef, memo } from 'react';
|
|
|
6
6
|
import { css, jsx } from '@emotion/react';
|
|
7
7
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
|
|
8
8
|
import __noop from '@atlaskit/ds-lib/noop';
|
|
9
|
-
import {
|
|
10
|
-
import { B200, B300, B400, B50, N10, N100, N20, N30, N40, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
|
|
9
|
+
import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
|
|
11
10
|
var packageName = "@atlaskit/radio";
|
|
12
|
-
var packageVersion = "6.
|
|
11
|
+
var packageVersion = "6.3.0";
|
|
13
12
|
var noop = __noop;
|
|
14
13
|
var labelPaddingStyles = css({
|
|
15
14
|
padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)")
|
|
@@ -47,7 +46,7 @@ var radioStyles = css({
|
|
|
47
46
|
backgroundColor: 'var(--radio-background-color)',
|
|
48
47
|
/* Border should multiply by 24/14 to offset scale, a scale of 12 / 7 is to fix a Chrome bug that makes the circle become an oval and the
|
|
49
48
|
inner circle not be centred at various zoom levels */
|
|
50
|
-
border: "
|
|
49
|
+
border: "var(--ds-border-width, 1px)".concat(" solid var(--radio-border-color)"),
|
|
51
50
|
borderRadius: "var(--ds-border-radius-circle, 50%)",
|
|
52
51
|
MozAppearance: 'none',
|
|
53
52
|
outline: 'none',
|
|
@@ -57,7 +56,7 @@ var radioStyles = css({
|
|
|
57
56
|
All other variables are constant
|
|
58
57
|
*/
|
|
59
58
|
'--radio-background-color': "var(--ds-background-input, ".concat(N10, ")"),
|
|
60
|
-
'--radio-border-color':
|
|
59
|
+
'--radio-border-color': "var(--ds-border-input, ".concat(N100, ")"),
|
|
61
60
|
'--radio-dot-color': "var(--ds-icon-inverse, ".concat(N10, ")"),
|
|
62
61
|
'--radio-dot-opacity': 0,
|
|
63
62
|
/* 24px * 7 / 12 === 14px height and width */
|
|
@@ -79,7 +78,7 @@ var radioStyles = css({
|
|
|
79
78
|
},
|
|
80
79
|
'&:hover': {
|
|
81
80
|
'--radio-background-color': "var(--ds-background-input-hovered, ".concat(N30, ")"),
|
|
82
|
-
'--radio-border-color':
|
|
81
|
+
'--radio-border-color': "var(--ds-border-input, ".concat(N100, ")")
|
|
83
82
|
},
|
|
84
83
|
'&:active': {
|
|
85
84
|
'--radio-background-color': "var(--ds-background-input-pressed, ".concat(N30, ")")
|
|
@@ -99,7 +98,7 @@ var radioStyles = css({
|
|
|
99
98
|
},
|
|
100
99
|
'&:checked:active': {
|
|
101
100
|
'--radio-background-color': "var(--ds-background-selected-bold-pressed, ".concat(B50, ")"),
|
|
102
|
-
'--radio-border-color':
|
|
101
|
+
'--radio-border-color': "var(--ds-border-input, ".concat(N100, ")"),
|
|
103
102
|
'--radio-dot-color': "var(--ds-icon-inverse, ".concat(B400, ")")
|
|
104
103
|
},
|
|
105
104
|
'&:checked:focus': {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/radio",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.3.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/"
|
|
@@ -43,9 +43,8 @@
|
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@atlaskit/analytics-next": "^9.3.0",
|
|
45
45
|
"@atlaskit/ds-lib": "^2.3.0",
|
|
46
|
-
"@atlaskit/platform-feature-flags": "^0.2.0",
|
|
47
46
|
"@atlaskit/theme": "^12.7.0",
|
|
48
|
-
"@atlaskit/tokens": "^1.
|
|
47
|
+
"@atlaskit/tokens": "^1.45.0",
|
|
49
48
|
"@babel/runtime": "^7.0.0",
|
|
50
49
|
"@emotion/react": "^11.7.1"
|
|
51
50
|
},
|
|
@@ -55,7 +54,7 @@
|
|
|
55
54
|
"devDependencies": {
|
|
56
55
|
"@af/accessibility-testing": "*",
|
|
57
56
|
"@af/integration-testing": "*",
|
|
58
|
-
"@atlaskit/checkbox": "^13.
|
|
57
|
+
"@atlaskit/checkbox": "^13.3.0",
|
|
59
58
|
"@atlaskit/ssr": "*",
|
|
60
59
|
"@atlaskit/visual-regression": "*",
|
|
61
60
|
"@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
|
|
@@ -90,11 +89,6 @@
|
|
|
90
89
|
"deprecation": "no-deprecated-imports"
|
|
91
90
|
}
|
|
92
91
|
},
|
|
93
|
-
"platform-feature-flags": {
|
|
94
|
-
"platform.design-system-team.update-border-radio-checkbox_7askv": {
|
|
95
|
-
"type": "boolean"
|
|
96
|
-
}
|
|
97
|
-
},
|
|
98
92
|
"homepage": "https://atlassian.design/components/radio/",
|
|
99
93
|
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
|
|
100
94
|
}
|