@atlaskit/checkbox 15.1.1 → 15.2.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/checkbox.js +1 -1
  3. package/dist/cjs/internal/checkbox-icon.js +43 -13
  4. package/dist/es2019/checkbox.js +1 -1
  5. package/dist/es2019/internal/checkbox-icon.js +43 -13
  6. package/dist/esm/checkbox.js +1 -1
  7. package/dist/esm/internal/checkbox-icon.js +43 -13
  8. package/package.json +14 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/checkbox
2
2
 
3
+ ## 15.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#166921](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/166921)
8
+ [`9875764c197bb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9875764c197bb) -
9
+ Update checkbox to match new icon styles behind feature flag.
10
+
3
11
  ## 15.1.1
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/checkbox.js CHANGED
@@ -196,7 +196,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
196
196
  analyticsData: analyticsContext,
197
197
  componentName: 'checkbox',
198
198
  packageName: "@atlaskit/checkbox",
199
- packageVersion: "15.1.1"
199
+ packageVersion: "15.2.0"
200
200
  });
201
201
  var internalRef = (0, _react.useRef)(null);
202
202
  var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]);
package/dist/cjs/internal/checkbox-icon.js CHANGED
@@ -8,6 +8,7 @@ exports.default = void 0;
8
8
  var _react = require("react");
9
9
  var _react2 = require("@emotion/react");
10
10
  var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
11
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
11
12
  /**
12
13
  * @jsxRuntime classic
13
14
  * @jsx jsx
@@ -17,20 +18,40 @@ var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
17
18
 
18
19
  function getIcon(isIndeterminate, isChecked) {
19
20
  if (isIndeterminate) {
20
- return (0, _react2.jsx)("rect", {
21
- fill: "inherit",
22
- x: "8",
23
- y: "11",
24
- width: "8",
25
- height: "2",
26
- rx: "1"
27
- });
21
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
22
+ if ((0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && (0, _platformFeatureFlags.fg)('platform-icon-control-migration')) {
23
+ return (0, _react2.jsx)("path", {
24
+ fillRule: "evenodd",
25
+ clipRule: "evenodd",
26
+ d: "M7.75 12.75H16.25V11.25H7.75V12.75Z",
27
+ fill: "inherit"
28
+ });
29
+ } else {
30
+ return (0, _react2.jsx)("rect", {
31
+ fill: "inherit",
32
+ x: "8",
33
+ y: "11",
34
+ width: "8",
35
+ height: "2",
36
+ rx: "1"
37
+ });
38
+ }
28
39
  }
29
40
  if (isChecked) {
30
- return (0, _react2.jsx)("path", {
31
- d: "M9.707 11.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z",
32
- fill: "inherit"
33
- });
41
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
42
+ if ((0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && (0, _platformFeatureFlags.fg)('platform-icon-control-migration')) {
43
+ return (0, _react2.jsx)("path", {
44
+ fillRule: "evenodd",
45
+ clipRule: "evenodd",
46
+ d: "M16.3262 9.48011L15.1738 8.51984L10.75 13.8284L8.82616 11.5198L7.67383 12.4801L10.1738 15.4801C10.3163 15.6511 10.5274 15.75 10.75 15.75C10.9726 15.75 11.1837 15.6511 11.3262 15.4801L16.3262 9.48011Z",
47
+ fill: "inherit"
48
+ });
49
+ } else {
50
+ return (0, _react2.jsx)("path", {
51
+ d: "M9.707 11.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z",
52
+ fill: "inherit"
53
+ });
54
+ }
34
55
  }
35
56
 
36
57
  // No icon
@@ -57,7 +78,16 @@ var CheckboxIcon = /*#__PURE__*/(0, _react.memo)(function (_ref) {
57
78
  secondaryColor: "var(--checkbox-tick-color)"
58
79
  }, (0, _react2.jsx)("g", {
59
80
  fillRule: "evenodd"
60
- }, (0, _react2.jsx)("rect", {
81
+ },
82
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
83
+ (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && (0, _platformFeatureFlags.fg)('platform-icon-control-migration') ? (0, _react2.jsx)("rect", {
84
+ fill: "currentColor",
85
+ x: "5.5",
86
+ y: "5.5",
87
+ width: "13",
88
+ height: "13",
89
+ rx: "1.5"
90
+ }) : (0, _react2.jsx)("rect", {
61
91
  fill: "currentColor",
62
92
  x: "6",
63
93
  y: "6",
package/dist/es2019/checkbox.js CHANGED
@@ -182,7 +182,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
182
182
  analyticsData: analyticsContext,
183
183
  componentName: 'checkbox',
184
184
  packageName: "@atlaskit/checkbox",
185
- packageVersion: "15.1.1"
185
+ packageVersion: "15.2.0"
186
186
  });
187
187
  const internalRef = useRef(null);
188
188
  const mergedRefs = mergeRefs([internalRef, ref]);
package/dist/es2019/internal/checkbox-icon.js CHANGED
@@ -7,22 +7,43 @@ import { memo, useMemo } from 'react';
7
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
8
  import { jsx } from '@emotion/react';
9
9
  import PrimitiveSVGIcon from '@atlaskit/icon/svg';
10
+ import { fg } from '@atlaskit/platform-feature-flags';
10
11
  function getIcon(isIndeterminate, isChecked) {
11
12
  if (isIndeterminate) {
12
- return jsx("rect", {
13
- fill: "inherit",
14
- x: "8",
15
- y: "11",
16
- width: "8",
17
- height: "2",
18
- rx: "1"
19
- });
13
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
14
+ if (fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration')) {
15
+ return jsx("path", {
16
+ fillRule: "evenodd",
17
+ clipRule: "evenodd",
18
+ d: "M7.75 12.75H16.25V11.25H7.75V12.75Z",
19
+ fill: "inherit"
20
+ });
21
+ } else {
22
+ return jsx("rect", {
23
+ fill: "inherit",
24
+ x: "8",
25
+ y: "11",
26
+ width: "8",
27
+ height: "2",
28
+ rx: "1"
29
+ });
30
+ }
20
31
  }
21
32
  if (isChecked) {
22
- return jsx("path", {
23
- d: "M9.707 11.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z",
24
- fill: "inherit"
25
- });
33
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
34
+ if (fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration')) {
35
+ return jsx("path", {
36
+ fillRule: "evenodd",
37
+ clipRule: "evenodd",
38
+ d: "M16.3262 9.48011L15.1738 8.51984L10.75 13.8284L8.82616 11.5198L7.67383 12.4801L10.1738 15.4801C10.3163 15.6511 10.5274 15.75 10.75 15.75C10.9726 15.75 11.1837 15.6511 11.3262 15.4801L16.3262 9.48011Z",
39
+ fill: "inherit"
40
+ });
41
+ } else {
42
+ return jsx("path", {
43
+ d: "M9.707 11.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z",
44
+ fill: "inherit"
45
+ });
46
+ }
26
47
  }
27
48
 
28
49
  // No icon
@@ -48,7 +69,16 @@ const CheckboxIcon = /*#__PURE__*/memo(({
48
69
  secondaryColor: "var(--checkbox-tick-color)"
49
70
  }, jsx("g", {
50
71
  fillRule: "evenodd"
51
- }, jsx("rect", {
72
+ },
73
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
74
+ fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration') ? jsx("rect", {
75
+ fill: "currentColor",
76
+ x: "5.5",
77
+ y: "5.5",
78
+ width: "13",
79
+ height: "13",
80
+ rx: "1.5"
81
+ }) : jsx("rect", {
52
82
  fill: "currentColor",
53
83
  x: "6",
54
84
  y: "6",
package/dist/esm/checkbox.js CHANGED
@@ -190,7 +190,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
190
190
  analyticsData: analyticsContext,
191
191
  componentName: 'checkbox',
192
192
  packageName: "@atlaskit/checkbox",
193
- packageVersion: "15.1.1"
193
+ packageVersion: "15.2.0"
194
194
  });
195
195
  var internalRef = useRef(null);
196
196
  var mergedRefs = mergeRefs([internalRef, ref]);
package/dist/esm/internal/checkbox-icon.js CHANGED
@@ -7,22 +7,43 @@ import { memo, useMemo } from 'react';
7
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
8
  import { jsx } from '@emotion/react';
9
9
  import PrimitiveSVGIcon from '@atlaskit/icon/svg';
10
+ import { fg } from '@atlaskit/platform-feature-flags';
10
11
  function getIcon(isIndeterminate, isChecked) {
11
12
  if (isIndeterminate) {
12
- return jsx("rect", {
13
- fill: "inherit",
14
- x: "8",
15
- y: "11",
16
- width: "8",
17
- height: "2",
18
- rx: "1"
19
- });
13
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
14
+ if (fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration')) {
15
+ return jsx("path", {
16
+ fillRule: "evenodd",
17
+ clipRule: "evenodd",
18
+ d: "M7.75 12.75H16.25V11.25H7.75V12.75Z",
19
+ fill: "inherit"
20
+ });
21
+ } else {
22
+ return jsx("rect", {
23
+ fill: "inherit",
24
+ x: "8",
25
+ y: "11",
26
+ width: "8",
27
+ height: "2",
28
+ rx: "1"
29
+ });
30
+ }
20
31
  }
21
32
  if (isChecked) {
22
- return jsx("path", {
23
- d: "M9.707 11.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z",
24
- fill: "inherit"
25
- });
33
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
34
+ if (fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration')) {
35
+ return jsx("path", {
36
+ fillRule: "evenodd",
37
+ clipRule: "evenodd",
38
+ d: "M16.3262 9.48011L15.1738 8.51984L10.75 13.8284L8.82616 11.5198L7.67383 12.4801L10.1738 15.4801C10.3163 15.6511 10.5274 15.75 10.75 15.75C10.9726 15.75 11.1837 15.6511 11.3262 15.4801L16.3262 9.48011Z",
39
+ fill: "inherit"
40
+ });
41
+ } else {
42
+ return jsx("path", {
43
+ d: "M9.707 11.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z",
44
+ fill: "inherit"
45
+ });
46
+ }
26
47
  }
27
48
 
28
49
  // No icon
@@ -49,7 +70,16 @@ var CheckboxIcon = /*#__PURE__*/memo(function (_ref) {
49
70
  secondaryColor: "var(--checkbox-tick-color)"
50
71
  }, jsx("g", {
51
72
  fillRule: "evenodd"
52
- }, jsx("rect", {
73
+ },
74
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
75
+ fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration') ? jsx("rect", {
76
+ fill: "currentColor",
77
+ x: "5.5",
78
+ y: "5.5",
79
+ width: "13",
80
+ height: "13",
81
+ rx: "1.5"
82
+ }) : jsx("rect", {
53
83
  fill: "currentColor",
54
84
  x: "6",
55
85
  y: "6",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/checkbox",
3
- "version": "15.1.1",
3
+ "version": "15.2.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/"
@@ -28,7 +28,7 @@
28
28
  "team": "Design System Team",
29
29
  "website": {
30
30
  "name": "Checkbox",
31
- "category": "Components"
31
+ "category": "Forms and input"
32
32
  },
33
33
  "runReact18": true
34
34
  },
@@ -39,9 +39,10 @@
39
39
  "@atlaskit/analytics-next": "^10.1.0",
40
40
  "@atlaskit/css": "^0.6.0",
41
41
  "@atlaskit/ds-lib": "^3.2.0",
42
- "@atlaskit/icon": "^22.24.0",
42
+ "@atlaskit/icon": "^22.26.0",
43
+ "@atlaskit/platform-feature-flags": "^0.3.0",
43
44
  "@atlaskit/theme": "^14.0.0",
44
- "@atlaskit/tokens": "^2.2.0",
45
+ "@atlaskit/tokens": "^2.3.0",
45
46
  "@babel/runtime": "^7.0.0",
46
47
  "@emotion/react": "^11.7.1"
47
48
  },
@@ -89,5 +90,13 @@
89
90
  ]
90
91
  }
91
92
  },
92
- "homepage": "https://atlassian.design/components/checkbox/"
93
+ "homepage": "https://atlassian.design/components/checkbox/",
94
+ "platform-feature-flags": {
95
+ "platform-visual-refresh-icons": {
96
+ "type": "boolean"
97
+ },
98
+ "platform-icon-control-migration": {
99
+ "type": "boolean"
100
+ }
101
+ }
93
102
  }