@atlaskit/dropdown-menu 12.22.3 → 12.23.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 +12 -0
  2. package/dist/cjs/internal/components/checkbox-icon.js +18 -2
  3. package/dist/cjs/internal/components/radio-icon.js +17 -2
  4. package/dist/es2019/internal/components/checkbox-icon.js +18 -2
  5. package/dist/es2019/internal/components/radio-icon.js +17 -2
  6. package/dist/esm/internal/components/checkbox-icon.js +18 -2
  7. package/dist/esm/internal/components/radio-icon.js +17 -2
  8. package/package.json +10 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/dropdown-menu
2
2
 
3
+ ## 12.23.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#166959](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/166959)
8
+ [`9b3927dbda348`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9b3927dbda348) -
9
+ Update checkbox and radio to match new icon styles behind feature flag.
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 12.22.3
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/internal/components/checkbox-icon.js CHANGED
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
10
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
10
11
  var _colors = require("@atlaskit/theme/colors");
11
12
  /**
12
13
  * __Checkbox icon__
@@ -24,7 +25,22 @@ var CheckboxIcon = function CheckboxIcon(_ref) {
24
25
  secondaryColor: checked ? "var(--ds-icon-inverse, ".concat(_colors.N10, ")") : 'transparent'
25
26
  }, /*#__PURE__*/_react.default.createElement("g", {
26
27
  fillRule: "evenodd"
27
- }, /*#__PURE__*/_react.default.createElement("rect", {
28
+ },
29
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
30
+ (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && (0, _platformFeatureFlags.fg)('platform-icon-control-migration') ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("rect", {
31
+ stroke: checked ? "var(--ds-border-selected, ".concat(_colors.B400, ")") : "var(--ds-border-input, ".concat(_colors.N100, ")"),
32
+ x: "5.5",
33
+ y: "5.5",
34
+ width: "13",
35
+ height: "13",
36
+ rx: "1.5",
37
+ fill: "currentColor"
38
+ }), /*#__PURE__*/_react.default.createElement("path", {
39
+ fillRule: "evenodd",
40
+ clipRule: "evenodd",
41
+ 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",
42
+ fill: "inherit"
43
+ })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("rect", {
28
44
  fill: "currentColor",
29
45
  x: "6",
30
46
  y: "6",
@@ -36,6 +52,6 @@ var CheckboxIcon = function CheckboxIcon(_ref) {
36
52
  }), /*#__PURE__*/_react.default.createElement("path", {
37
53
  d: "M9.707 11.293a1 1 0 10-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 10-1.414-1.414L11 12.586l-1.293-1.293z",
38
54
  fill: "inherit"
39
- })));
55
+ }))));
40
56
  };
41
57
  var _default = exports.default = CheckboxIcon;
package/dist/cjs/internal/components/radio-icon.js CHANGED
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
10
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
10
11
  var _colors = require("@atlaskit/theme/colors");
11
12
  /**
12
13
  * __Radio icon__
@@ -24,7 +25,21 @@ var RadioIcon = function RadioIcon(_ref) {
24
25
  secondaryColor: checked ? "var(--ds-icon-inverse, ".concat(_colors.N10, ")") : 'transparent'
25
26
  }, /*#__PURE__*/_react.default.createElement("g", {
26
27
  fillRule: "evenodd"
27
- }, /*#__PURE__*/_react.default.createElement("circle", {
28
+ },
29
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
30
+ (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && (0, _platformFeatureFlags.fg)('platform-icon-control-migration') ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("circle", {
31
+ cx: "12",
32
+ cy: "12",
33
+ r: "7.5",
34
+ fill: "currentColor",
35
+ stroke: checked ? "var(--ds-border-selected, ".concat(_colors.B400, ")") : "var(--ds-border-input, ".concat(_colors.N100, ")"),
36
+ strokeWidth: "1"
37
+ }), /*#__PURE__*/_react.default.createElement("circle", {
38
+ cx: "12",
39
+ cy: "12",
40
+ r: "3",
41
+ fill: "inherit"
42
+ })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("circle", {
28
43
  fill: "currentColor",
29
44
  cx: "12",
30
45
  cy: "12",
@@ -36,6 +51,6 @@ var RadioIcon = function RadioIcon(_ref) {
36
51
  cx: "12",
37
52
  cy: "12",
38
53
  r: "2"
39
- })));
54
+ }))));
40
55
  };
41
56
  var _default = exports.default = RadioIcon;
package/dist/es2019/internal/components/checkbox-icon.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import SVGIcon from '@atlaskit/icon/svg';
3
+ import { fg } from '@atlaskit/platform-feature-flags';
3
4
  import { B400, N10, N100 } from '@atlaskit/theme/colors';
4
5
  /**
5
6
  * __Checkbox icon__
@@ -18,7 +19,22 @@ const CheckboxIcon = ({
18
19
  secondaryColor: checked ? `var(--ds-icon-inverse, ${N10})` : 'transparent'
19
20
  }, /*#__PURE__*/React.createElement("g", {
20
21
  fillRule: "evenodd"
21
- }, /*#__PURE__*/React.createElement("rect", {
22
+ },
23
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
24
+ fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration') ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
25
+ stroke: checked ? `var(--ds-border-selected, ${B400})` : `var(--ds-border-input, ${N100})`,
26
+ x: "5.5",
27
+ y: "5.5",
28
+ width: "13",
29
+ height: "13",
30
+ rx: "1.5",
31
+ fill: "currentColor"
32
+ }), /*#__PURE__*/React.createElement("path", {
33
+ fillRule: "evenodd",
34
+ clipRule: "evenodd",
35
+ 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",
36
+ fill: "inherit"
37
+ })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
22
38
  fill: "currentColor",
23
39
  x: "6",
24
40
  y: "6",
@@ -30,6 +46,6 @@ const CheckboxIcon = ({
30
46
  }), /*#__PURE__*/React.createElement("path", {
31
47
  d: "M9.707 11.293a1 1 0 10-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 10-1.414-1.414L11 12.586l-1.293-1.293z",
32
48
  fill: "inherit"
33
- })));
49
+ }))));
34
50
  };
35
51
  export default CheckboxIcon;
package/dist/es2019/internal/components/radio-icon.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import SVGIcon from '@atlaskit/icon/svg';
3
+ import { fg } from '@atlaskit/platform-feature-flags';
3
4
  import { B400, N10, N100 } from '@atlaskit/theme/colors';
4
5
  /**
5
6
  * __Radio icon__
@@ -18,7 +19,21 @@ const RadioIcon = ({
18
19
  secondaryColor: checked ? `var(--ds-icon-inverse, ${N10})` : 'transparent'
19
20
  }, /*#__PURE__*/React.createElement("g", {
20
21
  fillRule: "evenodd"
21
- }, /*#__PURE__*/React.createElement("circle", {
22
+ },
23
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
24
+ fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration') ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("circle", {
25
+ cx: "12",
26
+ cy: "12",
27
+ r: "7.5",
28
+ fill: "currentColor",
29
+ stroke: checked ? `var(--ds-border-selected, ${B400})` : `var(--ds-border-input, ${N100})`,
30
+ strokeWidth: "1"
31
+ }), /*#__PURE__*/React.createElement("circle", {
32
+ cx: "12",
33
+ cy: "12",
34
+ r: "3",
35
+ fill: "inherit"
36
+ })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("circle", {
22
37
  fill: "currentColor",
23
38
  cx: "12",
24
39
  cy: "12",
@@ -30,6 +45,6 @@ const RadioIcon = ({
30
45
  cx: "12",
31
46
  cy: "12",
32
47
  r: "2"
33
- })));
48
+ }))));
34
49
  };
35
50
  export default RadioIcon;
package/dist/esm/internal/components/checkbox-icon.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import SVGIcon from '@atlaskit/icon/svg';
3
+ import { fg } from '@atlaskit/platform-feature-flags';
3
4
  import { B400, N10, N100 } from '@atlaskit/theme/colors';
4
5
  /**
5
6
  * __Checkbox icon__
@@ -17,7 +18,22 @@ var CheckboxIcon = function CheckboxIcon(_ref) {
17
18
  secondaryColor: checked ? "var(--ds-icon-inverse, ".concat(N10, ")") : 'transparent'
18
19
  }, /*#__PURE__*/React.createElement("g", {
19
20
  fillRule: "evenodd"
20
- }, /*#__PURE__*/React.createElement("rect", {
21
+ },
22
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
23
+ fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration') ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
24
+ stroke: checked ? "var(--ds-border-selected, ".concat(B400, ")") : "var(--ds-border-input, ".concat(N100, ")"),
25
+ x: "5.5",
26
+ y: "5.5",
27
+ width: "13",
28
+ height: "13",
29
+ rx: "1.5",
30
+ fill: "currentColor"
31
+ }), /*#__PURE__*/React.createElement("path", {
32
+ fillRule: "evenodd",
33
+ clipRule: "evenodd",
34
+ 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",
35
+ fill: "inherit"
36
+ })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
21
37
  fill: "currentColor",
22
38
  x: "6",
23
39
  y: "6",
@@ -29,6 +45,6 @@ var CheckboxIcon = function CheckboxIcon(_ref) {
29
45
  }), /*#__PURE__*/React.createElement("path", {
30
46
  d: "M9.707 11.293a1 1 0 10-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 10-1.414-1.414L11 12.586l-1.293-1.293z",
31
47
  fill: "inherit"
32
- })));
48
+ }))));
33
49
  };
34
50
  export default CheckboxIcon;
package/dist/esm/internal/components/radio-icon.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import SVGIcon from '@atlaskit/icon/svg';
3
+ import { fg } from '@atlaskit/platform-feature-flags';
3
4
  import { B400, N10, N100 } from '@atlaskit/theme/colors';
4
5
  /**
5
6
  * __Radio icon__
@@ -17,7 +18,21 @@ var RadioIcon = function RadioIcon(_ref) {
17
18
  secondaryColor: checked ? "var(--ds-icon-inverse, ".concat(N10, ")") : 'transparent'
18
19
  }, /*#__PURE__*/React.createElement("g", {
19
20
  fillRule: "evenodd"
20
- }, /*#__PURE__*/React.createElement("circle", {
21
+ },
22
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
23
+ fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration') ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("circle", {
24
+ cx: "12",
25
+ cy: "12",
26
+ r: "7.5",
27
+ fill: "currentColor",
28
+ stroke: checked ? "var(--ds-border-selected, ".concat(B400, ")") : "var(--ds-border-input, ".concat(N100, ")"),
29
+ strokeWidth: "1"
30
+ }), /*#__PURE__*/React.createElement("circle", {
31
+ cx: "12",
32
+ cy: "12",
33
+ r: "3",
34
+ fill: "inherit"
35
+ })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("circle", {
21
36
  fill: "currentColor",
22
37
  cx: "12",
23
38
  cy: "12",
@@ -29,6 +44,6 @@ var RadioIcon = function RadioIcon(_ref) {
29
44
  cx: "12",
30
45
  cy: "12",
31
46
  r: "2"
32
- })));
47
+ }))));
33
48
  };
34
49
  export default RadioIcon;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/dropdown-menu",
3
- "version": "12.22.3",
3
+ "version": "12.23.0",
4
4
  "description": "A dropdown menu displays a list of actions or options to a user.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -20,7 +20,7 @@
20
20
  "team": "Design System Team",
21
21
  "website": {
22
22
  "name": "Dropdown menu",
23
- "category": "Components"
23
+ "category": "Forms and input"
24
24
  },
25
25
  "runReact18": true
26
26
  },
@@ -28,7 +28,7 @@
28
28
  "@atlaskit/button": "^20.3.0",
29
29
  "@atlaskit/codemod-utils": "^4.2.0",
30
30
  "@atlaskit/ds-lib": "^3.2.0",
31
- "@atlaskit/icon": "^22.24.0",
31
+ "@atlaskit/icon": "^22.26.0",
32
32
  "@atlaskit/layering": "^0.8.0",
33
33
  "@atlaskit/menu": "^2.13.0",
34
34
  "@atlaskit/platform-feature-flags": "^0.3.0",
@@ -36,7 +36,7 @@
36
36
  "@atlaskit/primitives": "^13.2.0",
37
37
  "@atlaskit/spinner": "^16.3.0",
38
38
  "@atlaskit/theme": "^14.0.0",
39
- "@atlaskit/tokens": "^2.2.0",
39
+ "@atlaskit/tokens": "^2.3.0",
40
40
  "@babel/runtime": "^7.0.0",
41
41
  "@emotion/react": "^11.7.1",
42
42
  "bind-event-listener": "^3.0.0"
@@ -77,6 +77,12 @@
77
77
  },
78
78
  "platform_button_item-add-ufo-metrics": {
79
79
  "type": "boolean"
80
+ },
81
+ "platform-visual-refresh-icons": {
82
+ "type": "boolean"
83
+ },
84
+ "platform-icon-control-migration": {
85
+ "type": "boolean"
80
86
  }
81
87
  },
82
88
  "techstack": {