@atlaskit/color-picker 3.2.9 → 3.2.11

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/color-picker
 
+## 3.2.11
+
+### Patch Changes
+
+- [#94883](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94883) [`72e243a5cda3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/72e243a5cda3) - [ux] Removed FF for design spacing token adoption
+
+## 3.2.10
+
+### Patch Changes
+
+- [#91736](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91736) [`29f4e565f90d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/29f4e565f90d) - Modified color picker aria-label format
+
 ## 3.2.9
 
 ### Patch Changes

package/dist/cjs/components/ColorCard.js

@@ -63,34 +63,7 @@ var ColorCard = function ColorCard(props) {
       };
     }
   }, []);
-  return (0, _platformFeatureFlags.getBooleanFF)('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? (0, _react2.jsx)(_tooltip.default, {
-    content: label
-  }, (0, _react2.jsx)("div", (0, _extends2.default)({
-    css: [sharedColorContainerStylesNew, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
-    onClick: handleClick,
-    onMouseDown: handleMouseDown,
-    onKeyDown: handleKeyDown,
-    role: "radio",
-    "aria-checked": selected
-  }, !(0, _platformFeatureFlags.getBooleanFF)('platform.jca11y-1559-dashboard-view-dashboard-remove-duplicate-aria-label_g5i3i') && {
-    'aria-label': label
-  }, {
-    tabIndex: 0
-  }, (0, _platformFeatureFlags.getBooleanFF)('platform.color-picker-radio-button-functionality_6hkcy') && {
-    ref: ref
-  }), (0, _react2.jsx)("div", {
-    css: colorCardWrapperStylesNew
-  }, (0, _react2.jsx)("div", {
-    css: colorCardContentStylesNew,
-    style: {
-      background: value || 'transparent'
-    }
-  }, selected && (0, _react2.jsx)("div", {
-    css: colorCardContentCheckMarkStyles
-  }, (0, _react2.jsx)(_done.default, {
-    primaryColor: checkMarkColor,
-    label: ""
-  })))))) : (0, _react2.jsx)(_tooltip.default, {
+  return (0, _react2.jsx)(_tooltip.default, {
     content: label
   }, (0, _react2.jsx)("div", (0, _extends2.default)({
     css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
@@ -106,6 +79,8 @@ var ColorCard = function ColorCard(props) {
   }, (0, _platformFeatureFlags.getBooleanFF)('platform.color-picker-radio-button-functionality_6hkcy') && {
     ref: ref
   }), (0, _react2.jsx)("div", {
+    css: colorCardWrapperStyles
+  }, (0, _react2.jsx)("div", {
     css: colorCardContentStyles,
     style: {
       background: value || 'transparent'
@@ -115,24 +90,9 @@ var ColorCard = function ColorCard(props) {
   }, (0, _react2.jsx)(_done.default, {
     primaryColor: checkMarkColor,
     label: ""
-  })))));
+  }))))));
 };
 var _default = exports.default = ColorCard;
-var sharedColorContainerStyles = (0, _react2.css)({
-  display: 'inline-block',
-  position: 'relative',
-  width: "".concat(_constants.COLOR_CARD_SIZE, "px"),
-  height: "".concat(_constants.COLOR_CARD_SIZE, "px"),
-  border: '2px solid transparent',
-  boxSizing: 'border-box',
-  borderRadius: '6px',
-  transition: 'border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
-  backgroundColor: "var(--ds-background-neutral-subtle, ".concat(_colors.N0, ")"),
-  borderColor: "var(--ds-background-neutral-subtle, ".concat(_colors.N0, ")"),
-  padding: "var(--ds-space-0, 0px)",
-  cursor: 'pointer',
-  outline: 'none'
-});
 var colorCardOptionTabbingStyles = (0, _react2.css)({
   ':hover, :focus': {
     borderColor: "var(--ds-border-focused, ".concat(_colors.B75, ")")
@@ -141,20 +101,11 @@ var colorCardOptionTabbingStyles = (0, _react2.css)({
 var colorCardOptionFocusedStyles = (0, _react2.css)({
   borderColor: "var(--ds-border-focused, ".concat(_colors.B75, ")")
 });
-var colorCardContentStyles = (0, _react2.css)({
-  position: 'absolute',
-  top: '1px',
-  left: '1px',
-  width: "var(--ds-space-300, 24px)",
-  height: "var(--ds-space-300, 24px)",
-  borderRadius: "var(--ds-border-radius-100, 3px)",
-  boxShadow: "inset 0px 0px 0px 1px ".concat("var(--ds-background-inverse-subtle, ".concat(_colors.DN600A, ")"))
-});
 var colorCardContentCheckMarkStyles = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   margin: '1px'
 });
-var sharedColorContainerStylesNew = (0, _react2.css)({
+var sharedColorContainerStyles = (0, _react2.css)({
   display: 'inline-block',
   position: 'relative',
   width: "var(--ds-space-400, 32px)",
@@ -169,14 +120,14 @@ var sharedColorContainerStylesNew = (0, _react2.css)({
   cursor: 'pointer',
   outline: 'none'
 });
-var colorCardWrapperStylesNew = (0, _react2.css)({
+var colorCardWrapperStyles = (0, _react2.css)({
   width: '100%',
   height: '100%',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center'
 });
-var colorCardContentStylesNew = (0, _react2.css)({
+var colorCardContentStyles = (0, _react2.css)({
   width: "var(--ds-space-300, 24px)",
   height: "var(--ds-space-300, 24px)",
   borderRadius: "var(--ds-border-radius-100, 3px)",

package/dist/cjs/components/ColorPaletteMenu.js

@@ -10,9 +10,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _ColorCard = _interopRequireDefault(require("./ColorCard"));
 var _utils = require("../utils");
 var _react = require("@emotion/react");
-var _constants = require("../constants");
 var _colors = require("@atlaskit/theme/colors");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /** @jsx jsx */
 
 var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAnalytics(_ref) {
@@ -36,7 +34,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.9"
+          packageVersion: "3.2.11"
         }
       })(createAnalyticsEvent);
     }
@@ -62,7 +60,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
     var label = _ref2.label,
       value = _ref2.value;
     return (0, _react.jsx)("div", {
-      css: (0, _platformFeatureFlags.getBooleanFF)('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? colorCardWrapperStyles : colorCardWrapperStylesOld,
+      css: colorCardWrapperStyles,
       key: value
     }, (0, _react.jsx)(_ColorCard.default, {
       label: label,
@@ -78,13 +76,8 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
 var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.9"
+  packageVersion: "3.2.11"
 })((0, _analyticsNext.withAnalyticsEvents)()(ColorPaletteMenuWithoutAnalytics));
-var colorCardWrapperStylesOld = (0, _react.css)({
-  display: 'flex',
-  margin: "var(--ds-space-025, 2px)",
-  height: "".concat(_constants.COLOR_CARD_SIZE, "px")
-});
 var colorCardWrapperStyles = (0, _react.css)({
   display: 'flex',
   margin: "var(--ds-space-025, 2px)",

package/dist/cjs/components/ColorPicker.js

@@ -23,6 +23,8 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _utils = require("../utils");
 var _react2 = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _reactIntlNext = require("react-intl-next");
+var _messages = _interopRequireDefault(require("../messages"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -38,13 +40,13 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.2.9";
-var ColorPickerWithoutAnalytics = exports.ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(ColorPickerWithoutAnalytics, _React$Component);
-  var _super = _createSuper(ColorPickerWithoutAnalytics);
-  function ColorPickerWithoutAnalytics() {
+var packageVersion = "3.2.11";
+var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(ColorPickerWithoutAnalyticsBase, _React$Component);
+  var _super = _createSuper(ColorPickerWithoutAnalyticsBase);
+  function ColorPickerWithoutAnalyticsBase() {
     var _this;
-    (0, _classCallCheck2.default)(this, ColorPickerWithoutAnalytics);
+    (0, _classCallCheck2.default)(this, ColorPickerWithoutAnalyticsBase);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -88,9 +90,26 @@ var ColorPickerWithoutAnalytics = exports.ColorPickerWithoutAnalytics = /*#__PUR
         e.stopPropagation();
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getFullLabel", function (intl, value, label) {
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.jca11y-1480-inappropriate-label-for-color-picker_76tfe')) {
+        if (value && value.label) {
+          return intl.formatMessage(_messages.default.colorPickerAriaLabel, {
+            color: value.label,
+            message: label
+          });
+        } else {
+          return label;
+        }
+      } else {
+        return intl.formatMessage(_messages.default.colorPickerAriaLabelOldFormat, {
+          color: value.label,
+          message: label
+        });
+      }
+    });
     return _this;
   }
-  (0, _createClass2.default)(ColorPickerWithoutAnalytics, [{
+  (0, _createClass2.default)(ColorPickerWithoutAnalyticsBase, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
@@ -105,11 +124,12 @@ var ColorPickerWithoutAnalytics = exports.ColorPickerWithoutAnalytics = /*#__PUR
         selectedColourSwatchSize = _this$props.selectedColourSwatchSize,
         _this$props$showDefau = _this$props.showDefaultSwatchColor,
         showDefaultSwatchColor = _this$props$showDefau === void 0 ? true : _this$props$showDefau,
-        isDisabledSelectedSwatch = _this$props.isDisabledSelectedSwatch;
+        isDisabledSelectedSwatch = _this$props.isDisabledSelectedSwatch,
+        intl = _this$props.intl;
       var _getOptions = (0, _utils.getOptions)(palette, selectedColor, showDefaultSwatchColor),
         options = _getOptions.options,
         value = _getOptions.value;
-      var fullLabel = value.label && "".concat(label, ", ").concat(value.label, " selected");
+      var fullLabel = this.getFullLabel(intl, value, label);
       return (0, _react2.jsx)(_select.PopupSelect, {
         target: function target(_ref) {
           var ref = _ref.ref,
@@ -146,8 +166,9 @@ var ColorPickerWithoutAnalytics = exports.ColorPickerWithoutAnalytics = /*#__PUR
       });
     }
   }]);
-  return ColorPickerWithoutAnalytics;
+  return ColorPickerWithoutAnalyticsBase;
 }(_react.default.Component);
+var ColorPickerWithoutAnalytics = exports.ColorPickerWithoutAnalytics = (0, _reactIntlNext.injectIntl)(ColorPickerWithoutAnalyticsBase);
 var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'color-picker',
   packageName: packageName,

package/dist/cjs/components/Trigger.js

@@ -9,7 +9,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = require("react");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _react2 = require("@emotion/react");
-var _constants = require("../constants");
 var _colors = require("@atlaskit/theme/colors");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /** @jsx jsx */
@@ -32,31 +31,7 @@ var ColorCard = function ColorCard(_ref) {
       onClick();
     }
   }, [onClick]);
-  return (0, _platformFeatureFlags.getBooleanFF)('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? (0, _react2.jsx)(_tooltip.default, {
-    content: label
-  }, (0, _react2.jsx)("button", (0, _extends2.default)({}, (0, _platformFeatureFlags.getBooleanFF)('platform.color-picker-radio-button-functionality_6hkcy') ? {
-    css: [sharedColorContainerStyles, swatchSize === 'small' ? smallColorContainerSizeNew : defaultColorContainerSizeNew, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
-    disabled: isDisabled
-  } : {
-    css: [sharedColorContainerStyles, defaultColorContainerSizeNew, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles]
-  }, {
-    onClick: handleClick,
-    onMouseDown: handleMouseDown,
-    "aria-label": label,
-    "aria-expanded": expanded,
-    "aria-haspopup": true,
-    type: "button"
-  }), (0, _react2.jsx)("span", {
-    css: colorCardWrapperStylesNew
-  }, (0, _react2.jsx)("span", (0, _extends2.default)({}, (0, _platformFeatureFlags.getBooleanFF)('platform.color-picker-radio-button-functionality_6hkcy') ? {
-    css: [colorCardContentStylesNew, swatchSize === 'small' ? smallColorCardContentSize : defaultColorCardContentSize]
-  } : {
-    css: [colorCardContentStylesNew, defaultColorCardContentSize]
-  }, {
-    style: {
-      background: value || 'transparent'
-    }
-  }))))) : (0, _react2.jsx)(_tooltip.default, {
+  return (0, _react2.jsx)(_tooltip.default, {
     content: label
   }, (0, _react2.jsx)("button", (0, _extends2.default)({}, (0, _platformFeatureFlags.getBooleanFF)('platform.color-picker-radio-button-functionality_6hkcy') ? {
     css: [sharedColorContainerStyles, swatchSize === 'small' ? smallColorContainerSize : defaultColorContainerSize, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
@@ -70,7 +45,9 @@ var ColorCard = function ColorCard(_ref) {
     "aria-expanded": expanded,
     "aria-haspopup": true,
     type: "button"
-  }), (0, _react2.jsx)("span", (0, _extends2.default)({}, (0, _platformFeatureFlags.getBooleanFF)('platform.color-picker-radio-button-functionality_6hkcy') ? {
+  }), (0, _react2.jsx)("span", {
+    css: colorCardWrapperStyles
+  }, (0, _react2.jsx)("span", (0, _extends2.default)({}, (0, _platformFeatureFlags.getBooleanFF)('platform.color-picker-radio-button-functionality_6hkcy') ? {
     css: [colorCardContentStyles, swatchSize === 'small' ? smallColorCardContentSize : defaultColorCardContentSize]
   } : {
     css: [colorCardContentStyles, defaultColorCardContentSize]
@@ -78,7 +55,7 @@ var ColorCard = function ColorCard(_ref) {
     style: {
       background: value || 'transparent'
     }
-  }))));
+  })))));
 };
 var _default = exports.default = ColorCard;
 var sharedColorContainerStyles = (0, _react2.css)({
@@ -95,20 +72,11 @@ var sharedColorContainerStyles = (0, _react2.css)({
   outline: 'none'
 });
 var smallColorContainerSize = (0, _react2.css)({
-  width: '22px',
-  height: '22px',
-  top: "var(--ds-space-negative-025, -2px)"
-});
-var smallColorContainerSizeNew = (0, _react2.css)({
   width: "var(--ds-space-300, 24px)",
   height: "var(--ds-space-300, 24px)",
   top: "var(--ds-space-negative-025, -2px)"
 });
 var defaultColorContainerSize = (0, _react2.css)({
-  width: "".concat(_constants.COLOR_CARD_SIZE, "px"),
-  height: "".concat(_constants.COLOR_CARD_SIZE, "px")
-});
-var defaultColorContainerSizeNew = (0, _react2.css)({
   width: "var(--ds-space-400, 32px)",
   height: "var(--ds-space-400, 32px)"
 });
@@ -125,21 +93,14 @@ var colorCardButtonFocusedStyles = (0, _react2.css)({
   borderColor: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
   outline: 'none'
 });
-var colorCardContentStyles = (0, _react2.css)({
-  position: 'absolute',
-  top: '1px',
-  left: '1px',
-  borderRadius: "var(--ds-border-radius-100, 3px)",
-  boxShadow: "inset 0px 0px 0px 1px ".concat("var(--ds-background-inverse-subtle, ".concat(_colors.DN600A, ")"))
-});
-var colorCardWrapperStylesNew = (0, _react2.css)({
+var colorCardWrapperStyles = (0, _react2.css)({
   width: '100%',
   height: '100%',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center'
 });
-var colorCardContentStylesNew = (0, _react2.css)({
+var colorCardContentStyles = (0, _react2.css)({
   borderRadius: "var(--ds-border-radius-100, 3px)",
   boxShadow: "inset 0px 0px 0px 1px ".concat("var(--ds-background-inverse-subtle, ".concat(_colors.DN600A, ")"))
 });

package/dist/cjs/components/components.js

@@ -8,9 +8,7 @@ exports.Placeholder = exports.Option = exports.MenuList = exports.DropdownIndica
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _ColorCard = _interopRequireDefault(require("./ColorCard"));
 var _utils = require("../utils");
-var _constants = require("../constants");
 var _react = require("@emotion/react");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /** @jsx jsx */
 
 var MenuList = exports.MenuList = function MenuList(props) {
@@ -38,7 +36,7 @@ var Option = exports.Option = function Option(props) {
     isSelected = props.isSelected,
     innerProps = props.innerProps;
   return (0, _react.jsx)("div", (0, _extends2.default)({
-    css: (0, _platformFeatureFlags.getBooleanFF)('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? colorCardWrapperStyles : colorCardWrapperStylesOld
+    css: colorCardWrapperStyles
   }, innerProps), (0, _react.jsx)(_ColorCard.default, {
     label: label,
     value: value,
@@ -58,11 +56,6 @@ var DropdownIndicator = exports.DropdownIndicator = function DropdownIndicator()
 var Placeholder = exports.Placeholder = function Placeholder() {
   return null;
 };
-var colorCardWrapperStylesOld = (0, _react.css)({
-  display: 'flex',
-  margin: "var(--ds-space-025, 2px)",
-  height: "".concat(_constants.COLOR_CARD_SIZE, "px")
-});
 var colorCardWrapperStyles = (0, _react.css)({
   display: 'flex',
   margin: "var(--ds-space-025, 2px)",

package/dist/cjs/constants.js

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.KEY_TAB = exports.KEY_SPACE = exports.KEY_ENTER = exports.KEY_ARROW_UP = exports.KEY_ARROW_DOWN = exports.COLOR_CARD_SIZE_NEW = exports.COLOR_CARD_SIZE = void 0;
-var COLOR_CARD_SIZE = exports.COLOR_CARD_SIZE = 30;
-var COLOR_CARD_SIZE_NEW = exports.COLOR_CARD_SIZE_NEW = 32;
+exports.KEY_TAB = exports.KEY_SPACE = exports.KEY_ENTER = exports.KEY_ARROW_UP = exports.KEY_ARROW_DOWN = exports.COLOR_CARD_SIZE = void 0;
+var COLOR_CARD_SIZE = exports.COLOR_CARD_SIZE = 32;
 var KEY_SPACE = exports.KEY_SPACE = ' ';
 var KEY_ENTER = exports.KEY_ENTER = 'Enter';
 var KEY_ARROW_UP = exports.KEY_ARROW_UP = 'ArrowDown';

package/dist/cjs/messages.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactIntlNext = require("react-intl-next");
+var _default = exports.default = (0, _reactIntlNext.defineMessages)({
+  colorPickerAriaLabel: {
+    id: 'jira.color-picker.src.color-picker-aria-label',
+    defaultMessage: '{color} selected, {message}',
+    description: 'This text is used as aria-label text in color picker component'
+  },
+  colorPickerAriaLabelOldFormat: {
+    id: 'jira.color-picker.src.color-picker-aria-label-old-format',
+    defaultMessage: "{message}, {color} selected",
+    description: 'This text is used as aria-label text in color picker component'
+  }
+});

package/dist/cjs/utils.js

@@ -14,7 +14,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 var getWidth = exports.getWidth = function getWidth(cols, mode) {
-  var width = cols * (((0, _platformFeatureFlags.getBooleanFF)('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? _constants.COLOR_CARD_SIZE_NEW : _constants.COLOR_CARD_SIZE) + (0, _theme.gridSize)() / 2);
+  var width = cols * (_constants.COLOR_CARD_SIZE + (0, _theme.gridSize)() / 2);
   return mode === _types.Mode.Standard ? width + (0, _theme.gridSize)() : width;
 };
 var getOptions = exports.getOptions = (0, _memoizeOne.default)(function (palette, selectedColor, showDefaultSwatchColor) {

package/dist/es2019/components/ColorCard.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useRef } from 'react';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import Tooltip from '@atlaskit/tooltip';
-import { COLOR_CARD_SIZE, KEY_ENTER, KEY_SPACE } from '../constants';
+import { KEY_ENTER, KEY_SPACE } from '../constants';
 import { css, jsx } from '@emotion/react';
 import { N0, DN600A, B75 } from '@atlaskit/theme/colors';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -13,7 +13,6 @@ const ColorCard = props => {
     label,
     selected,
     focused,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     checkMarkColor = N0,
     isTabbing,
     onClick,
@@ -56,34 +55,7 @@ const ColorCard = props => {
       };
     }
   }, []);
-  return getBooleanFF('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? jsx(Tooltip, {
-    content: label
-  }, jsx("div", _extends({
-    css: [sharedColorContainerStylesNew, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
-    onClick: handleClick,
-    onMouseDown: handleMouseDown,
-    onKeyDown: handleKeyDown,
-    role: "radio",
-    "aria-checked": selected
-  }, !getBooleanFF('platform.jca11y-1559-dashboard-view-dashboard-remove-duplicate-aria-label_g5i3i') && {
-    'aria-label': label
-  }, {
-    tabIndex: 0
-  }, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && {
-    ref: ref
-  }), jsx("div", {
-    css: colorCardWrapperStylesNew
-  }, jsx("div", {
-    css: colorCardContentStylesNew,
-    style: {
-      background: value || 'transparent'
-    }
-  }, selected && jsx("div", {
-    css: colorCardContentCheckMarkStyles
-  }, jsx(EditorDoneIcon, {
-    primaryColor: checkMarkColor,
-    label: ""
-  })))))) : jsx(Tooltip, {
+  return jsx(Tooltip, {
     content: label
   }, jsx("div", _extends({
     css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
@@ -99,6 +71,8 @@ const ColorCard = props => {
   }, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && {
     ref: ref
   }), jsx("div", {
+    css: colorCardWrapperStyles
+  }, jsx("div", {
     css: colorCardContentStyles,
     style: {
       background: value || 'transparent'
@@ -108,24 +82,9 @@ const ColorCard = props => {
   }, jsx(EditorDoneIcon, {
     primaryColor: checkMarkColor,
     label: ""
-  })))));
+  }))))));
 };
 export default ColorCard;
-const sharedColorContainerStyles = css({
-  display: 'inline-block',
-  position: 'relative',
-  width: `${COLOR_CARD_SIZE}px`,
-  height: `${COLOR_CARD_SIZE}px`,
-  border: '2px solid transparent',
-  boxSizing: 'border-box',
-  borderRadius: '6px',
-  transition: 'border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
-  backgroundColor: `var(--ds-background-neutral-subtle, ${N0})`,
-  borderColor: `var(--ds-background-neutral-subtle, ${N0})`,
-  padding: "var(--ds-space-0, 0px)",
-  cursor: 'pointer',
-  outline: 'none'
-});
 const colorCardOptionTabbingStyles = css({
   ':hover, :focus': {
     borderColor: `var(--ds-border-focused, ${B75})`
@@ -134,20 +93,11 @@ const colorCardOptionTabbingStyles = css({
 const colorCardOptionFocusedStyles = css({
   borderColor: `var(--ds-border-focused, ${B75})`
 });
-const colorCardContentStyles = css({
-  position: 'absolute',
-  top: '1px',
-  left: '1px',
-  width: "var(--ds-space-300, 24px)",
-  height: "var(--ds-space-300, 24px)",
-  borderRadius: "var(--ds-border-radius-100, 3px)",
-  boxShadow: `inset 0px 0px 0px 1px ${`var(--ds-background-inverse-subtle, ${DN600A})`}`
-});
 const colorCardContentCheckMarkStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   margin: '1px'
 });
-const sharedColorContainerStylesNew = css({
+const sharedColorContainerStyles = css({
   display: 'inline-block',
   position: 'relative',
   width: "var(--ds-space-400, 32px)",
@@ -162,14 +112,14 @@ const sharedColorContainerStylesNew = css({
   cursor: 'pointer',
   outline: 'none'
 });
-const colorCardWrapperStylesNew = css({
+const colorCardWrapperStyles = css({
   width: '100%',
   height: '100%',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center'
 });
-const colorCardContentStylesNew = css({
+const colorCardContentStyles = css({
   width: "var(--ds-space-300, 24px)",
   height: "var(--ds-space-300, 24px)",
   borderRadius: "var(--ds-border-radius-100, 3px)",

package/dist/es2019/components/ColorPaletteMenu.js

@@ -4,9 +4,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import ColorCard from './ColorCard';
 import { getOptions, getWidth } from '../utils';
 import { css, jsx } from '@emotion/react';
-import { COLOR_CARD_SIZE } from '../constants';
 import { N0, N40 } from '@atlaskit/theme/colors';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const ColorPaletteMenuWithoutAnalytics = ({
   createAnalyticsEvent,
   onChange,
@@ -26,7 +24,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.9"
+          packageVersion: "3.2.11"
         }
       })(createAnalyticsEvent);
     }
@@ -53,7 +51,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
     label,
     value
   }) => jsx("div", {
-    css: getBooleanFF('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? colorCardWrapperStyles : colorCardWrapperStylesOld,
+    css: colorCardWrapperStyles,
     key: value
   }, jsx(ColorCard, {
     label: label,
@@ -68,13 +66,8 @@ export const ColorPaletteMenuWithoutAnalytics = ({
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.9"
+  packageVersion: "3.2.11"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
-const colorCardWrapperStylesOld = css({
-  display: 'flex',
-  margin: "var(--ds-space-025, 2px)",
-  height: `${COLOR_CARD_SIZE}px`
-});
 const colorCardWrapperStyles = css({
   display: 'flex',
   margin: "var(--ds-space-025, 2px)",

package/dist/es2019/components/ColorPicker.js

@@ -10,6 +10,8 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { getOptions } from '../utils';
 import { css, jsx } from '@emotion/react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { injectIntl } from 'react-intl-next';
+import messages from '../messages';
 const defaultPopperProps = {
   strategy: 'fixed',
   modifiers: [{
@@ -21,8 +23,8 @@ const defaultPopperProps = {
   placement: 'bottom-start'
 };
 const packageName = "@atlaskit/color-picker";
-const packageVersion = "3.2.9";
-export class ColorPickerWithoutAnalytics extends React.Component {
+const packageVersion = "3.2.11";
+class ColorPickerWithoutAnalyticsBase extends React.Component {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "createAndFireEventOnAtlaskit", createAndFireEvent('atlaskit'));
@@ -66,6 +68,23 @@ export class ColorPickerWithoutAnalytics extends React.Component {
         e.stopPropagation();
       }
     });
+    _defineProperty(this, "getFullLabel", (intl, value, label) => {
+      if (getBooleanFF('platform.jca11y-1480-inappropriate-label-for-color-picker_76tfe')) {
+        if (value && value.label) {
+          return intl.formatMessage(messages.colorPickerAriaLabel, {
+            color: value.label,
+            message: label
+          });
+        } else {
+          return label;
+        }
+      } else {
+        return intl.formatMessage(messages.colorPickerAriaLabelOldFormat, {
+          color: value.label,
+          message: label
+        });
+      }
+    });
   }
   render() {
     const {
@@ -77,13 +96,14 @@ export class ColorPickerWithoutAnalytics extends React.Component {
       label = 'Color picker',
       selectedColourSwatchSize,
       showDefaultSwatchColor = true,
-      isDisabledSelectedSwatch
+      isDisabledSelectedSwatch,
+      intl
     } = this.props;
     const {
       options,
       value
     } = getOptions(palette, selectedColor, showDefaultSwatchColor);
-    const fullLabel = value.label && `${label}, ${value.label} selected`;
+    const fullLabel = this.getFullLabel(intl, value, label);
     return jsx(PopupSelect, {
       target: ({
         ref,
@@ -119,6 +139,7 @@ export class ColorPickerWithoutAnalytics extends React.Component {
     });
   }
 }
+export const ColorPickerWithoutAnalytics = injectIntl(ColorPickerWithoutAnalyticsBase);
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName,