@atlaskit/select 18.5.3 → 18.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/select
 
+## 18.6.0
+
+### Minor Changes
+
+- [#167480](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/167480)
+  [`e78013c5d716b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e78013c5d716b) -
+  Update checkbox and radio select to match new icon styles behind feature flag.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 18.5.3
 
 ### Patch Changes

package/dist/cjs/Select.js

@@ -11,7 +11,7 @@ var _createSelect = _interopRequireDefault(require("./createSelect"));
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
 var packageName = "@atlaskit/select";
-var packageVersion = "18.5.3";
+var packageVersion = "18.6.0";
 var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_async.default);
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var Select = (0, _analyticsNext.withAnalyticsContext)({

package/dist/cjs/components/input-options.js

@@ -19,6 +19,8 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _checkbox = _interopRequireDefault(require("@atlaskit/icon/glyph/checkbox"));
 var _radio = _interopRequireDefault(require("@atlaskit/icon/glyph/radio"));
+var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["getStyles", "Icon", "children", "innerProps", "innerRef"];
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
@@ -238,15 +240,59 @@ var ControlOption = /*#__PURE__*/function (_Component) {
   }]);
   return ControlOption;
 }(_react.Component);
+var NewCheckboxIcon = function NewCheckboxIcon(props) {
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    (0, _react2.jsx)(_svg.default, props, (0, _react2.jsx)("g", {
+      fillRule: "evenodd"
+    }, (0, _react2.jsx)("rect", {
+      x: "5.5",
+      y: "5.5",
+      width: "13",
+      height: "13",
+      rx: "1.5",
+      fill: "currentColor"
+    }), (0, _react2.jsx)("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      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",
+      fill: "inherit"
+    })))
+  );
+};
+var NewRadioIcon = function NewRadioIcon(props) {
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    (0, _react2.jsx)(_svg.default, props, (0, _react2.jsx)("g", {
+      fillRule: "evenodd"
+    }, (0, _react2.jsx)("circle", {
+      cx: "12",
+      cy: "12",
+      r: "6.75",
+      fill: "currentColor",
+      strokeWidth: "1.5"
+    }), (0, _react2.jsx)("circle", {
+      cx: "12",
+      cy: "12",
+      r: "3",
+      fill: "inherit"
+    })))
+  );
+};
+
 /**
  * __Checkbox option__
  */
 var CheckboxOption = exports.CheckboxOption = function CheckboxOption(props
-// TODO https://product-fabric.atlassian.net/browse/DSP-20768
-// eslint-disable-next-line @atlaskit/design-system/no-legacy-icons, @repo/internal/react/no-unsafe-spread-props
+// ): JSX.Element => <ControlOption<OptionT, true> Icon={CheckboxIcon} {...props} />;
 ) {
   return (0, _react2.jsx)(ControlOption, (0, _extends2.default)({
-    Icon: _checkbox.default
+    Icon:
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix, @atlaskit/platform/no-preconditioning
+    (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && (0, _platformFeatureFlags.fg)('platform-icon-control-migration') ? NewCheckboxIcon :
+    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+    _checkbox.default
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props));
 };
 
@@ -258,7 +304,12 @@ var RadioOption = exports.RadioOption = function RadioOption(props) {
     // TODO https://product-fabric.atlassian.net/browse/DSP-20769
     // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons, @repo/internal/react/no-unsafe-spread-props
     (0, _react2.jsx)(ControlOption, (0, _extends2.default)({
-      Icon: _radio.default
+      Icon:
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix, @atlaskit/platform/no-preconditioning
+      (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && (0, _platformFeatureFlags.fg)('platform-icon-control-migration') ? NewRadioIcon :
+      // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+      _radio.default
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     }, props))
   );
 };

package/dist/es2019/Select.js

@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import AsyncSelect from '@atlaskit/react-select/async';
 import createSelect from './createSelect';
 const packageName = "@atlaskit/select";
-const packageVersion = "18.5.3";
+const packageVersion = "18.6.0";
 export const SelectWithoutAnalytics = createSelect(AsyncSelect);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const Select = withAnalyticsContext({

package/dist/es2019/components/input-options.js

@@ -9,6 +9,8 @@ import { Component } from 'react';
 import { css, jsx } from '@emotion/react';
 import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
 import RadioIcon from '@atlaskit/icon/glyph/radio';
+import PrimitiveSVGIcon from '@atlaskit/icon/svg';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B300, B400, B75, N0, N100, N20, N20A, N30, N70 } from '@atlaskit/theme/colors';
 const getPrimitiveStyles = props => {
   const {
@@ -221,15 +223,52 @@ class ControlOption extends Component {
     );
   }
 }
+const NewCheckboxIcon = props =>
+// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+jsx(PrimitiveSVGIcon, props, jsx("g", {
+  fillRule: "evenodd"
+}, jsx("rect", {
+  x: "5.5",
+  y: "5.5",
+  width: "13",
+  height: "13",
+  rx: "1.5",
+  fill: "currentColor"
+}), jsx("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  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",
+  fill: "inherit"
+})));
+const NewRadioIcon = props =>
+// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+jsx(PrimitiveSVGIcon, props, jsx("g", {
+  fillRule: "evenodd"
+}, jsx("circle", {
+  cx: "12",
+  cy: "12",
+  r: "6.75",
+  fill: "currentColor",
+  strokeWidth: "1.5"
+}), jsx("circle", {
+  cx: "12",
+  cy: "12",
+  r: "3",
+  fill: "inherit"
+})));
 
 /**
  * __Checkbox option__
  */
 export const CheckboxOption = (props
-// TODO https://product-fabric.atlassian.net/browse/DSP-20768
-// eslint-disable-next-line @atlaskit/design-system/no-legacy-icons, @repo/internal/react/no-unsafe-spread-props
+// ): JSX.Element => <ControlOption<OptionT, true> Icon={CheckboxIcon} {...props} />;
 ) => jsx(ControlOption, _extends({
-  Icon: CheckboxIcon
+  Icon:
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix, @atlaskit/platform/no-preconditioning
+  fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration') ? NewCheckboxIcon :
+  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+  CheckboxIcon
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 }, props));
 
 /**
@@ -239,5 +278,10 @@ export const RadioOption = props =>
 // TODO https://product-fabric.atlassian.net/browse/DSP-20769
 // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons, @repo/internal/react/no-unsafe-spread-props
 jsx(ControlOption, _extends({
-  Icon: RadioIcon
+  Icon:
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix, @atlaskit/platform/no-preconditioning
+  fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration') ? NewRadioIcon :
+  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+  RadioIcon
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 }, props));

package/dist/esm/Select.js

@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import AsyncSelect from '@atlaskit/react-select/async';
 import createSelect from './createSelect';
 var packageName = "@atlaskit/select";
-var packageVersion = "18.5.3";
+var packageVersion = "18.6.0";
 export var SelectWithoutAnalytics = createSelect(AsyncSelect);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var Select = withAnalyticsContext({

package/dist/esm/components/input-options.js

@@ -22,6 +22,8 @@ import { Component } from 'react';
 import { css, jsx } from '@emotion/react';
 import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
 import RadioIcon from '@atlaskit/icon/glyph/radio';
+import PrimitiveSVGIcon from '@atlaskit/icon/svg';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B300, B400, B75, N0, N100, N20, N20A, N30, N70 } from '@atlaskit/theme/colors';
 var getPrimitiveStyles = function getPrimitiveStyles(props) {
   var cx = props.cx,
@@ -233,15 +235,59 @@ var ControlOption = /*#__PURE__*/function (_Component) {
   }]);
   return ControlOption;
 }(Component);
+var NewCheckboxIcon = function NewCheckboxIcon(props) {
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    jsx(PrimitiveSVGIcon, props, jsx("g", {
+      fillRule: "evenodd"
+    }, jsx("rect", {
+      x: "5.5",
+      y: "5.5",
+      width: "13",
+      height: "13",
+      rx: "1.5",
+      fill: "currentColor"
+    }), jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      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",
+      fill: "inherit"
+    })))
+  );
+};
+var NewRadioIcon = function NewRadioIcon(props) {
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    jsx(PrimitiveSVGIcon, props, jsx("g", {
+      fillRule: "evenodd"
+    }, jsx("circle", {
+      cx: "12",
+      cy: "12",
+      r: "6.75",
+      fill: "currentColor",
+      strokeWidth: "1.5"
+    }), jsx("circle", {
+      cx: "12",
+      cy: "12",
+      r: "3",
+      fill: "inherit"
+    })))
+  );
+};
+
 /**
  * __Checkbox option__
  */
 export var CheckboxOption = function CheckboxOption(props
-// TODO https://product-fabric.atlassian.net/browse/DSP-20768
-// eslint-disable-next-line @atlaskit/design-system/no-legacy-icons, @repo/internal/react/no-unsafe-spread-props
+// ): JSX.Element => <ControlOption<OptionT, true> Icon={CheckboxIcon} {...props} />;
 ) {
   return jsx(ControlOption, _extends({
-    Icon: CheckboxIcon
+    Icon:
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix, @atlaskit/platform/no-preconditioning
+    fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration') ? NewCheckboxIcon :
+    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+    CheckboxIcon
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props));
 };
 
@@ -253,7 +299,12 @@ export var RadioOption = function RadioOption(props) {
     // TODO https://product-fabric.atlassian.net/browse/DSP-20769
     // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons, @repo/internal/react/no-unsafe-spread-props
     jsx(ControlOption, _extends({
-      Icon: RadioIcon
+      Icon:
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix, @atlaskit/platform/no-preconditioning
+      fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration') ? NewRadioIcon :
+      // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+      RadioIcon
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     }, props))
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/select",
-	"version": "18.5.3",
+	"version": "18.6.0",
 	"description": "Select allows users to make a single selection or multiple selections from a list of options.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
 		"team": "Design System Team",
 		"website": {
 			"name": "Select",
-			"category": "Components"
+			"category": "Forms and input"
 		},
 		"runReact18": true
 	},
@@ -42,7 +42,7 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/ds-lib": "^3.2.0",
-		"@atlaskit/icon": "^22.24.0",
+		"@atlaskit/icon": "^22.26.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^13.2.0",
 		"@atlaskit/react-select": "^1.4.0",
@@ -69,7 +69,7 @@
 		"@af/visual-regression": "*",
 		"@atlaskit/checkbox": "^15.1.0",
 		"@atlaskit/modal-dialog": "^12.17.0",
-		"@atlaskit/radio": "^6.5.0",
+		"@atlaskit/radio": "^6.6.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "*",
@@ -108,6 +108,12 @@
 		"design_system_select-a11y-improvement": {
 			"type": "boolean",
 			"referenceOnly": true
+		},
+		"platform-visual-refresh-icons": {
+			"type": "boolean"
+		},
+		"platform-icon-control-migration": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/select/"