@atlaskit/checkbox 13.0.2 → 13.1.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
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# @atlaskit/checkbox
|
|
2
2
|
|
|
3
|
+
## 13.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#80805](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80805) [`427c2dd9e0d6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/427c2dd9e0d6) - [ux] update border with from 2px to 1px with darker color to meet 3:1 color contrast for accessibility improvement
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies
|
|
12
|
+
|
|
3
13
|
## 13.0.2
|
|
4
14
|
|
|
5
15
|
### Patch Changes
|
package/dist/cjs/checkbox.js
CHANGED
|
@@ -12,7 +12,6 @@ var _react = require("react");
|
|
|
12
12
|
var _react2 = require("@emotion/react");
|
|
13
13
|
var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
|
|
14
14
|
var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
|
|
15
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
16
15
|
var _colors = require("@atlaskit/theme/colors");
|
|
17
16
|
var _internal = require("./internal");
|
|
18
17
|
var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId"];
|
|
@@ -47,7 +46,7 @@ var checkboxStyles = (0, _react2.css)({
|
|
|
47
46
|
transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
|
|
48
47
|
'rect:first-of-type': {
|
|
49
48
|
stroke: 'var(--checkbox-border-color)',
|
|
50
|
-
strokeWidth:
|
|
49
|
+
strokeWidth: "var(--ds-border-width, 1px)",
|
|
51
50
|
transition: 'stroke 0.2s ease-in-out'
|
|
52
51
|
}
|
|
53
52
|
},
|
|
@@ -167,7 +166,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
|
|
|
167
166
|
analyticsData: analyticsContext,
|
|
168
167
|
componentName: 'checkbox',
|
|
169
168
|
packageName: "@atlaskit/checkbox",
|
|
170
|
-
packageVersion: "13.0
|
|
169
|
+
packageVersion: "13.1.0"
|
|
171
170
|
});
|
|
172
171
|
var internalRef = (0, _react.useRef)(null);
|
|
173
172
|
var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]);
|
|
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = Label;
|
|
7
7
|
var _react = require("@emotion/react");
|
|
8
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
9
8
|
var _colors = require("@atlaskit/theme/colors");
|
|
10
9
|
var _constants = require("./constants");
|
|
11
10
|
/** @jsx jsx */
|
|
@@ -39,14 +38,14 @@ var labelStyles = (0, _react.css)({
|
|
|
39
38
|
/**
|
|
40
39
|
* Border
|
|
41
40
|
*/
|
|
42
|
-
'--local-border':
|
|
41
|
+
'--local-border': "var(--ds-border-input, ".concat(_colors.N100, ")"),
|
|
43
42
|
'--local-border-active': "var(--ds-border, ".concat(_colors.B50, ")"),
|
|
44
43
|
'--local-border-checked': "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
|
|
45
44
|
'--local-border-checked-hover': "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")"),
|
|
46
45
|
'--local-border-checked-invalid': "var(--ds-border-danger, ".concat(_colors.R300, ")"),
|
|
47
46
|
'--local-border-disabled': "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
|
|
48
47
|
'--local-border-focus': "var(--ds-border-focused, ".concat(_colors.B200, ")"),
|
|
49
|
-
'--local-border-hover':
|
|
48
|
+
'--local-border-hover': "var(--ds-border-input, ".concat(_colors.N100, ")"),
|
|
50
49
|
'--local-border-invalid': "var(--ds-border-danger, ".concat(_colors.R300, ")"),
|
|
51
50
|
/**
|
|
52
51
|
* Tick
|
package/dist/es2019/checkbox.js
CHANGED
|
@@ -4,7 +4,6 @@ import { forwardRef, memo, useCallback, useRef, useState } from 'react';
|
|
|
4
4
|
import { css, jsx } from '@emotion/react';
|
|
5
5
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
|
|
6
6
|
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
|
|
7
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
8
7
|
import { B200 } from '@atlaskit/theme/colors';
|
|
9
8
|
import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
|
|
10
9
|
/* eslint-disable @atlaskit/design-system/no-nested-styles */
|
|
@@ -37,7 +36,7 @@ const checkboxStyles = css({
|
|
|
37
36
|
transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
|
|
38
37
|
'rect:first-of-type': {
|
|
39
38
|
stroke: 'var(--checkbox-border-color)',
|
|
40
|
-
strokeWidth:
|
|
39
|
+
strokeWidth: "var(--ds-border-width, 1px)",
|
|
41
40
|
transition: 'stroke 0.2s ease-in-out'
|
|
42
41
|
}
|
|
43
42
|
},
|
|
@@ -151,7 +150,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
|
|
|
151
150
|
analyticsData: analyticsContext,
|
|
152
151
|
componentName: 'checkbox',
|
|
153
152
|
packageName: "@atlaskit/checkbox",
|
|
154
|
-
packageVersion: "13.0
|
|
153
|
+
packageVersion: "13.1.0"
|
|
155
154
|
});
|
|
156
155
|
const internalRef = useRef(null);
|
|
157
156
|
const mergedRefs = mergeRefs([internalRef, ref]);
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
import { css, jsx } from '@emotion/react';
|
|
3
|
-
import {
|
|
4
|
-
import { B200, B300, B400, B50, N10, N100, N20, N30, N40, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
|
|
3
|
+
import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
|
|
5
4
|
import { fontFamily } from './constants';
|
|
6
5
|
const baseStyles = css({
|
|
7
6
|
display: 'grid',
|
|
@@ -32,14 +31,14 @@ const labelStyles = css({
|
|
|
32
31
|
/**
|
|
33
32
|
* Border
|
|
34
33
|
*/
|
|
35
|
-
'--local-border':
|
|
34
|
+
'--local-border': `var(--ds-border-input, ${N100})`,
|
|
36
35
|
'--local-border-active': `var(--ds-border, ${B50})`,
|
|
37
36
|
'--local-border-checked': `var(--ds-background-selected-bold, ${B400})`,
|
|
38
37
|
'--local-border-checked-hover': `var(--ds-background-selected-bold-hovered, ${B300})`,
|
|
39
38
|
'--local-border-checked-invalid': `var(--ds-border-danger, ${R300})`,
|
|
40
39
|
'--local-border-disabled': `var(--ds-background-disabled, ${N20})`,
|
|
41
40
|
'--local-border-focus': `var(--ds-border-focused, ${B200})`,
|
|
42
|
-
'--local-border-hover':
|
|
41
|
+
'--local-border-hover': `var(--ds-border-input, ${N100})`,
|
|
43
42
|
'--local-border-invalid': `var(--ds-border-danger, ${R300})`,
|
|
44
43
|
/**
|
|
45
44
|
* Tick
|
package/dist/esm/checkbox.js
CHANGED
|
@@ -7,7 +7,6 @@ import { forwardRef, memo, useCallback, useRef, useState } from 'react';
|
|
|
7
7
|
import { css, jsx } from '@emotion/react';
|
|
8
8
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
|
|
9
9
|
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
|
|
10
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
11
10
|
import { B200 } from '@atlaskit/theme/colors';
|
|
12
11
|
import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
|
|
13
12
|
/* eslint-disable @atlaskit/design-system/no-nested-styles */
|
|
@@ -40,7 +39,7 @@ var checkboxStyles = css({
|
|
|
40
39
|
transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
|
|
41
40
|
'rect:first-of-type': {
|
|
42
41
|
stroke: 'var(--checkbox-border-color)',
|
|
43
|
-
strokeWidth:
|
|
42
|
+
strokeWidth: "var(--ds-border-width, 1px)",
|
|
44
43
|
transition: 'stroke 0.2s ease-in-out'
|
|
45
44
|
}
|
|
46
45
|
},
|
|
@@ -160,7 +159,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
|
|
|
160
159
|
analyticsData: analyticsContext,
|
|
161
160
|
componentName: 'checkbox',
|
|
162
161
|
packageName: "@atlaskit/checkbox",
|
|
163
|
-
packageVersion: "13.0
|
|
162
|
+
packageVersion: "13.1.0"
|
|
164
163
|
});
|
|
165
164
|
var internalRef = useRef(null);
|
|
166
165
|
var mergedRefs = mergeRefs([internalRef, ref]);
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
import { css, jsx } from '@emotion/react';
|
|
3
|
-
import {
|
|
4
|
-
import { B200, B300, B400, B50, N10, N100, N20, N30, N40, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
|
|
3
|
+
import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
|
|
5
4
|
import { fontFamily } from './constants';
|
|
6
5
|
var baseStyles = css({
|
|
7
6
|
display: 'grid',
|
|
@@ -32,14 +31,14 @@ var labelStyles = css({
|
|
|
32
31
|
/**
|
|
33
32
|
* Border
|
|
34
33
|
*/
|
|
35
|
-
'--local-border':
|
|
34
|
+
'--local-border': "var(--ds-border-input, ".concat(N100, ")"),
|
|
36
35
|
'--local-border-active': "var(--ds-border, ".concat(B50, ")"),
|
|
37
36
|
'--local-border-checked': "var(--ds-background-selected-bold, ".concat(B400, ")"),
|
|
38
37
|
'--local-border-checked-hover': "var(--ds-background-selected-bold-hovered, ".concat(B300, ")"),
|
|
39
38
|
'--local-border-checked-invalid': "var(--ds-border-danger, ".concat(R300, ")"),
|
|
40
39
|
'--local-border-disabled': "var(--ds-background-disabled, ".concat(N20, ")"),
|
|
41
40
|
'--local-border-focus': "var(--ds-border-focused, ".concat(B200, ")"),
|
|
42
|
-
'--local-border-hover':
|
|
41
|
+
'--local-border-hover': "var(--ds-border-input, ".concat(N100, ")"),
|
|
43
42
|
'--local-border-invalid': "var(--ds-border-danger, ".concat(R300, ")"),
|
|
44
43
|
/**
|
|
45
44
|
* Tick
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/checkbox",
|
|
3
|
-
"version": "13.0
|
|
3
|
+
"version": "13.1.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/"
|
|
@@ -40,9 +40,8 @@
|
|
|
40
40
|
"@atlaskit/analytics-next": "^9.2.0",
|
|
41
41
|
"@atlaskit/ds-lib": "^2.2.0",
|
|
42
42
|
"@atlaskit/icon": "^22.1.0",
|
|
43
|
-
"@atlaskit/platform-feature-flags": "^0.2.0",
|
|
44
43
|
"@atlaskit/theme": "^12.6.0",
|
|
45
|
-
"@atlaskit/tokens": "^1.
|
|
44
|
+
"@atlaskit/tokens": "^1.41.0",
|
|
46
45
|
"@babel/runtime": "^7.0.0",
|
|
47
46
|
"@emotion/react": "^11.7.1"
|
|
48
47
|
},
|
|
@@ -89,11 +88,6 @@
|
|
|
89
88
|
]
|
|
90
89
|
}
|
|
91
90
|
},
|
|
92
|
-
"platform-feature-flags": {
|
|
93
|
-
"platform.design-system-team.update-border-radio-checkbox_7askv": {
|
|
94
|
-
"type": "boolean"
|
|
95
|
-
}
|
|
96
|
-
},
|
|
97
91
|
"homepage": "https://atlassian.design/components/checkbox/",
|
|
98
92
|
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
|
|
99
|
-
}
|
|
93
|
+
}
|