@atlaskit/color-picker 3.3.3 → 3.4.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/color-picker
 
+## 3.4.1
+
+### Patch Changes
+
+- [#143559](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/143559)
+  [`56dfbfe361f96`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/56dfbfe361f96) -
+  Upgrade react-select from 5.4 to 5.8 and replace it with internal atlaskit/react-select
+- Updated dependencies
+
+## 3.4.0
+
+### Minor Changes
+
+- [#148825](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/148825)
+  [`6ae0fe514c103`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6ae0fe514c103) -
+  Enable new icons behind a feature flag.
+
 ## 3.3.3
 
 ### Patch Changes

package/dist/cjs/components/ColorCard.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _done = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/done"));
+var _checkMarkEditorDone = _interopRequireDefault(require("@atlaskit/icon/core/migration/check-mark--editor-done"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../constants");
@@ -114,12 +114,12 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
       style: {
         background: value || 'transparent'
       }
-    }, selected && (0, _react2.jsx)("div", {
-      css: colorCardContentCheckMarkStyles
-    }, (0, _react2.jsx)(_done.default, {
-      primaryColor: checkMarkColor,
-      label: ""
-    })))));
+    }, selected && (0, _react2.jsx)(_checkMarkEditorDone.default, {
+      color: checkMarkColor,
+      label: "",
+      spacing: "spacious",
+      LEGACY_margin: "1px"
+    }))));
   });
 });
 var _default = exports.default = ColorCard;
@@ -132,10 +132,6 @@ var colorCardOptionTabbingStyles = (0, _react2.css)({
 var colorCardOptionFocusedStyles = (0, _react2.css)({
   borderColor: "var(--ds-border-focused, ".concat(_colors.B75, ")")
 });
-var colorCardContentCheckMarkStyles = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  margin: '1px'
-});
 var sharedColorContainerStyles = (0, _react2.css)({
   display: 'inline-block',
   position: 'relative',

package/dist/cjs/components/ColorPaletteMenu.js

@@ -64,7 +64,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.3.3"
+          packageVersion: "3.4.1"
         }
       })(createAnalyticsEvent);
     }
@@ -157,7 +157,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
 var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.3.3"
+  packageVersion: "3.4.1"
 })((0, _analyticsNext.withAnalyticsEvents)()(ColorPaletteMenuWithoutAnalytics));
 var colorCardWrapperStyles = (0, _react2.css)({
   display: 'flex',

package/dist/cjs/components/ColorPicker.js

@@ -42,7 +42,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.3.3";
+var packageVersion = "3.4.1";
 var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ColorPickerWithoutAnalyticsBase, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalyticsBase);
@@ -153,6 +153,7 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
         ,
         searchThreshold: Number.MAX_VALUE
         // palette props
+        //@ts-ignore react-select unsupported props
         ,
         cols: cols,
         checkMarkColor: checkMarkColor,

package/dist/cjs/components/components.js

@@ -27,7 +27,9 @@ var MenuList = exports.MenuList = function MenuList(props) {
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       maxWidth: cols ? (0, _utils.getWidth)(cols) : undefined
-    },
+    }
+    //@ts-ignore react-select unsupported props
+    ,
     ref: innerRef
   }, children);
 };

package/dist/es2019/components/ColorCard.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 import React, { useCallback, useRef, useImperativeHandle, forwardRef } from 'react';
-import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
+import EditorDoneIcon from '@atlaskit/icon/core/migration/check-mark--editor-done';
 import Tooltip from '@atlaskit/tooltip';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { COLOR_PALETTE_MENU, KEY_ENTER, KEY_SPACE, KEY_TAB } from '../constants';
@@ -99,12 +99,12 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
       style: {
         background: value || 'transparent'
       }
-    }, selected && jsx("div", {
-      css: colorCardContentCheckMarkStyles
-    }, jsx(EditorDoneIcon, {
-      primaryColor: checkMarkColor,
-      label: ""
-    })))));
+    }, selected && jsx(EditorDoneIcon, {
+      color: checkMarkColor,
+      label: "",
+      spacing: "spacious",
+      LEGACY_margin: "1px"
+    }))));
   });
 });
 export default ColorCard;
@@ -117,10 +117,6 @@ const colorCardOptionTabbingStyles = css({
 const colorCardOptionFocusedStyles = css({
   borderColor: `var(--ds-border-focused, ${B75})`
 });
-const colorCardContentCheckMarkStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  margin: '1px'
-});
 const sharedColorContainerStyles = css({
   display: 'inline-block',
   position: 'relative',

package/dist/es2019/components/ColorPaletteMenu.js

@@ -46,7 +46,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.3.3"
+          packageVersion: "3.4.1"
         }
       })(createAnalyticsEvent);
     }
@@ -132,7 +132,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.3.3"
+  packageVersion: "3.4.1"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
 const colorCardWrapperStyles = css({
   display: 'flex',

package/dist/es2019/components/ColorPicker.js

@@ -26,7 +26,7 @@ const defaultPopperProps = {
   placement: 'bottom-start'
 };
 const packageName = "@atlaskit/color-picker";
-const packageVersion = "3.3.3";
+const packageVersion = "3.4.1";
 class ColorPickerWithoutAnalyticsBase extends React.Component {
   constructor(...args) {
     super(...args);
@@ -127,6 +127,7 @@ class ColorPickerWithoutAnalyticsBase extends React.Component {
       ,
       searchThreshold: Number.MAX_VALUE
       // palette props
+      //@ts-ignore react-select unsupported props
       ,
       cols: cols,
       checkMarkColor: checkMarkColor,

package/dist/es2019/components/components.js

@@ -11,6 +11,7 @@ import { css, jsx } from '@emotion/react';
 import { COLOR_PICKER } from '../constants';
 export const MenuList = props => {
   const {
+    //@ts-ignore react-select unsupported props
     selectProps: {
       cols
     },
@@ -23,7 +24,9 @@ export const MenuList = props => {
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       maxWidth: cols ? getWidth(cols) : undefined
-    },
+    }
+    //@ts-ignore react-select unsupported props
+    ,
     ref: innerRef
   }, children);
 };
@@ -33,6 +36,7 @@ export const Option = props => {
       value,
       label
     },
+    //@ts-ignore react-select unsupported props
     selectProps: {
       checkMarkColor,
       onOptionKeyDown,

package/dist/esm/components/ColorCard.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 import React, { useCallback, useRef, useImperativeHandle, forwardRef } from 'react';
-import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
+import EditorDoneIcon from '@atlaskit/icon/core/migration/check-mark--editor-done';
 import Tooltip from '@atlaskit/tooltip';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { COLOR_PALETTE_MENU, KEY_ENTER, KEY_SPACE, KEY_TAB } from '../constants';
@@ -102,12 +102,12 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
       style: {
         background: value || 'transparent'
       }
-    }, selected && jsx("div", {
-      css: colorCardContentCheckMarkStyles
-    }, jsx(EditorDoneIcon, {
-      primaryColor: checkMarkColor,
-      label: ""
-    })))));
+    }, selected && jsx(EditorDoneIcon, {
+      color: checkMarkColor,
+      label: "",
+      spacing: "spacious",
+      LEGACY_margin: "1px"
+    }))));
   });
 });
 export default ColorCard;
@@ -120,10 +120,6 @@ var colorCardOptionTabbingStyles = css({
 var colorCardOptionFocusedStyles = css({
   borderColor: "var(--ds-border-focused, ".concat(B75, ")")
 });
-var colorCardContentCheckMarkStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  margin: '1px'
-});
 var sharedColorContainerStyles = css({
   display: 'inline-block',
   position: 'relative',

package/dist/esm/components/ColorPaletteMenu.js

@@ -55,7 +55,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.3.3"
+          packageVersion: "3.4.1"
         }
       })(createAnalyticsEvent);
     }
@@ -148,7 +148,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.3.3"
+  packageVersion: "3.4.1"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
 var colorCardWrapperStyles = css({
   display: 'flex',

package/dist/esm/components/ColorPicker.js

@@ -34,7 +34,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.3.3";
+var packageVersion = "3.4.1";
 var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
   _inherits(ColorPickerWithoutAnalyticsBase, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalyticsBase);
@@ -145,6 +145,7 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
         ,
         searchThreshold: Number.MAX_VALUE
         // palette props
+        //@ts-ignore react-select unsupported props
         ,
         cols: cols,
         checkMarkColor: checkMarkColor,

package/dist/esm/components/components.js

@@ -19,7 +19,9 @@ export var MenuList = function MenuList(props) {
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       maxWidth: cols ? getWidth(cols) : undefined
-    },
+    }
+    //@ts-ignore react-select unsupported props
+    ,
     ref: innerRef
   }, children);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/color-picker",
-	"version": "3.3.3",
+	"version": "3.4.1",
 	"description": "Jira Color Picker Component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,12 +30,12 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/icon": "^22.18.0",
+		"@atlaskit/icon": "^22.20.0",
 		"@atlaskit/platform-feature-flags": "0.3.0",
-		"@atlaskit/select": "^17.19.0",
+		"@atlaskit/select": "^18.0.0",
 		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/tokens": "^2.0.0",
-		"@atlaskit/tooltip": "^18.7.0",
+		"@atlaskit/tooltip": "^18.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"memoize-one": "^6.0.0",