@atlaskit/color-picker 3.2.14 → 3.2.16

package/dist/cjs/components/ColorPaletteMenu.js

@@ -34,7 +34,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.14"
+          packageVersion: "3.2.16"
         }
       })(createAnalyticsEvent);
     }
@@ -49,13 +49,18 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
   var fullLabel = "".concat(label, ", ").concat(selectedValue.label, " selected");
   return (0, _react.jsx)("div", {
     "aria-label": fullLabel,
-    role: "radiogroup",
+    role: "radiogroup"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
     css: [colorPaletteMenuStyles, mode === _types.Mode.Standard && colorPaletteMenuStandardStyles],
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       width: "".concat((0, _utils.getWidth)(cols, mode), "px")
     }
   }, (0, _react.jsx)("div", {
-    css: [colorPaletteContainerStyles, mode === _types.Mode.Compact && colorPaletteContainerCompactStyles]
+    css: [colorPaletteContainerStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    mode === _types.Mode.Compact && colorPaletteContainerCompactStyles]
   }, options.map(function (_ref2) {
     var label = _ref2.label,
       value = _ref2.value;
@@ -76,7 +81,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
 var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.14"
+  packageVersion: "3.2.16"
 })((0, _analyticsNext.withAnalyticsEvents)()(ColorPaletteMenuWithoutAnalytics));
 var colorCardWrapperStyles = (0, _react.css)({
   display: 'flex',

package/dist/cjs/components/ColorPicker.js

@@ -22,7 +22,6 @@ var _constants = require("../constants");
 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); }
@@ -40,7 +39,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.2.14";
+var packageVersion = "3.2.16";
 var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ColorPickerWithoutAnalyticsBase, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalyticsBase);
@@ -86,7 +85,7 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
         _this.setState({
           isTabbing: false
         });
-      } else if ((0, _platformFeatureFlags.getBooleanFF)('platform.color-picker-radio-button-functionality_6hkcy') && key === 'Escape') {
+      } else if (key === 'Escape') {
         e.stopPropagation();
       }
     });
@@ -132,8 +131,7 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
             ref: ref
           }, (0, _react2.jsx)(_Trigger.default, (0, _extends2.default)({}, value, {
             label: fullLabel,
-            expanded: isOpen
-          }, (0, _platformFeatureFlags.getBooleanFF)('platform.color-picker-radio-button-functionality_6hkcy') && {
+            expanded: isOpen,
             swatchSize: selectedColourSwatchSize,
             isDisabled: isDisabledSelectedSwatch
           })));

package/dist/cjs/components/Trigger.js

@@ -5,12 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("react");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /** @jsx jsx */
 
 var ColorCard = function ColorCard(_ref) {
@@ -33,29 +31,23 @@ var ColorCard = function ColorCard(_ref) {
   }, [onClick]);
   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') ? {
+  }, (0, _react2.jsx)("button", {
     css: [sharedColorContainerStyles, swatchSize === 'small' ? smallColorContainerSize : defaultColorContainerSize, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
-    disabled: isDisabled
-  } : {
-    css: [sharedColorContainerStyles, defaultColorContainerSize, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles]
-  }, {
+    disabled: isDisabled,
     onClick: handleClick,
     onMouseDown: handleMouseDown,
     "aria-label": label,
     "aria-expanded": expanded,
     "aria-haspopup": true,
     type: "button"
-  }), (0, _react2.jsx)("span", {
+  }, (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]
-  }, {
+  }, (0, _react2.jsx)("span", {
+    css: [colorCardContentStyles, swatchSize === 'small' ? smallColorCardContentSize : defaultColorCardContentSize],
     style: {
       background: value || 'transparent'
     }
-  })))));
+  }))));
 };
 var _default = exports.default = ColorCard;
 var sharedColorContainerStyles = (0, _react2.css)({
@@ -81,9 +73,11 @@ var defaultColorContainerSize = (0, _react2.css)({
   height: "var(--ds-space-400, 32px)"
 });
 var colorCardButtonStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':hover': {
     borderColor: "var(--ds-background-neutral-subtle, ".concat(_colors.N0, ")")
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':not(:focus):hover, :focus': {
     borderColor: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
     outline: 'none'

package/dist/cjs/components/components.js

@@ -19,6 +19,7 @@ var MenuList = exports.MenuList = function MenuList(props) {
     css: colorPaletteContainerStyles,
     role: "radiogroup",
     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
     },
     ref: innerRef

package/dist/cjs/messages.js

@@ -10,5 +10,10 @@ var _default = exports.default = (0, _reactIntlNext.defineMessages)({
     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'
+  },
+  colorCardRadioItemLabel: {
+    id: 'jira.color-picker.src.color-card-radio-item-label',
+    defaultMessage: 'color option',
+    description: 'This text is used as aria-label text in color card component for radio item'
   }
 });

package/dist/cjs/utils.js

@@ -9,7 +9,6 @@ var _theme = require("@atlaskit/theme");
 var _constants = require("./constants");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _types = require("./types");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
@@ -20,7 +19,7 @@ var getWidth = exports.getWidth = function getWidth(cols, mode) {
 var getOptions = exports.getOptions = (0, _memoizeOne.default)(function (palette, selectedColor, showDefaultSwatchColor) {
   var focusedItemIndex = 0;
   var defaultSelectedColor = palette[0];
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.color-picker-radio-button-functionality_6hkcy') && !showDefaultSwatchColor) {
+  if (!showDefaultSwatchColor) {
     defaultSelectedColor = {
       label: '',
       value: ''

package/dist/es2019/components/ColorCard.js

@@ -5,8 +5,10 @@ import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import Tooltip from '@atlaskit/tooltip';
 import { KEY_ENTER, KEY_SPACE } from '../constants';
 import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
 import { N0, DN600A, B75 } from '@atlaskit/theme/colors';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import messages from '../messages';
 const ColorCard = props => {
   const {
     value,
@@ -19,6 +21,9 @@ const ColorCard = props => {
     onKeyDown
   } = props;
   const ref = useRef(null);
+  const {
+    formatMessage
+  } = useIntl();
   const handleMouseDown = useCallback(event => {
     event.preventDefault();
   }, []);
@@ -41,19 +46,17 @@ const ColorCard = props => {
     }
   }, [isTabbing, onKeyDown, value]);
   useEffect(() => {
-    if (getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy')) {
-      const refCurrent = ref.current;
-      const handleKeyDown = e => {
-        if (e.key === 'Tab') {
-          e.stopPropagation();
-          e.preventDefault();
-        }
-      };
-      refCurrent === null || refCurrent === void 0 ? void 0 : refCurrent.addEventListener('keydown', handleKeyDown);
-      return () => {
-        refCurrent === null || refCurrent === void 0 ? void 0 : refCurrent.removeEventListener('keydown', handleKeyDown);
-      };
-    }
+    const refCurrent = ref.current;
+    const handleKeyDown = e => {
+      if (e.key === 'Tab') {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    };
+    refCurrent === null || refCurrent === void 0 ? void 0 : refCurrent.addEventListener('keydown', handleKeyDown);
+    return () => {
+      refCurrent === null || refCurrent === void 0 ? void 0 : refCurrent.removeEventListener('keydown', handleKeyDown);
+    };
   }, []);
   return jsx(Tooltip, {
     content: label
@@ -64,11 +67,10 @@ const ColorCard = props => {
     onKeyDown: handleKeyDown,
     role: "radio",
     "aria-checked": selected
-  }, !getBooleanFF('platform.jca11y-1559-dashboard-view-dashboard-remove-duplicate-aria-label_g5i3i') && {
-    'aria-label': label
+  }, getBooleanFF('platform.jca11y-2997-remove-duplicate-screen-reader-announcements_fz13s') && {
+    'aria-label': formatMessage(messages.colorCardRadioItemLabel)
   }, {
-    tabIndex: 0
-  }, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && {
+    tabIndex: 0,
     ref: ref
   }), jsx("div", {
     css: colorCardWrapperStyles
@@ -86,6 +88,7 @@ const ColorCard = props => {
 };
 export default ColorCard;
 const colorCardOptionTabbingStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':hover, :focus': {
     borderColor: `var(--ds-border-focused, ${B75})`
   }

package/dist/es2019/components/ColorPaletteMenu.js

@@ -24,7 +24,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.14"
+          packageVersion: "3.2.16"
         }
       })(createAnalyticsEvent);
     }
@@ -40,13 +40,18 @@ export const ColorPaletteMenuWithoutAnalytics = ({
   const fullLabel = `${label}, ${selectedValue.label} selected`;
   return jsx("div", {
     "aria-label": fullLabel,
-    role: "radiogroup",
+    role: "radiogroup"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
     css: [colorPaletteMenuStyles, mode === Mode.Standard && colorPaletteMenuStandardStyles],
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       width: `${getWidth(cols, mode)}px`
     }
   }, jsx("div", {
-    css: [colorPaletteContainerStyles, mode === Mode.Compact && colorPaletteContainerCompactStyles]
+    css: [colorPaletteContainerStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    mode === Mode.Compact && colorPaletteContainerCompactStyles]
   }, options.map(({
     label,
     value
@@ -66,7 +71,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.14"
+  packageVersion: "3.2.16"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
 const colorCardWrapperStyles = css({
   display: 'flex',

package/dist/es2019/components/ColorPicker.js

@@ -9,7 +9,6 @@ import { KEY_ARROW_DOWN, KEY_ARROW_UP, KEY_TAB } from '../constants';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 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 = {
@@ -23,7 +22,7 @@ const defaultPopperProps = {
   placement: 'bottom-start'
 };
 const packageName = "@atlaskit/color-picker";
-const packageVersion = "3.2.14";
+const packageVersion = "3.2.16";
 class ColorPickerWithoutAnalyticsBase extends React.Component {
   constructor(...args) {
     super(...args);
@@ -64,7 +63,7 @@ class ColorPickerWithoutAnalyticsBase extends React.Component {
         this.setState({
           isTabbing: false
         });
-      } else if (getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && key === 'Escape') {
+      } else if (key === 'Escape') {
         e.stopPropagation();
       }
     });
@@ -106,8 +105,7 @@ class ColorPickerWithoutAnalyticsBase extends React.Component {
         ref: ref
       }, jsx(Trigger, _extends({}, value, {
         label: fullLabel,
-        expanded: isOpen
-      }, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && {
+        expanded: isOpen,
         swatchSize: selectedColourSwatchSize,
         isDisabled: isDisabledSelectedSwatch
       }))),

package/dist/es2019/components/Trigger.js

@@ -1,10 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { useCallback } from 'react';
 import Tooltip from '@atlaskit/tooltip';
 import { css, jsx } from '@emotion/react';
 import { B100, DN600A, N0 } from '@atlaskit/theme/colors';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const ColorCard = ({
   value,
   label,
@@ -25,29 +23,23 @@ const ColorCard = ({
   }, [onClick]);
   return jsx(Tooltip, {
     content: label
-  }, jsx("button", _extends({}, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') ? {
+  }, jsx("button", {
     css: [sharedColorContainerStyles, swatchSize === 'small' ? smallColorContainerSize : defaultColorContainerSize, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
-    disabled: isDisabled
-  } : {
-    css: [sharedColorContainerStyles, defaultColorContainerSize, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles]
-  }, {
+    disabled: isDisabled,
     onClick: handleClick,
     onMouseDown: handleMouseDown,
     "aria-label": label,
     "aria-expanded": expanded,
     "aria-haspopup": true,
     type: "button"
-  }), jsx("span", {
+  }, jsx("span", {
     css: colorCardWrapperStyles
-  }, jsx("span", _extends({}, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') ? {
-    css: [colorCardContentStyles, swatchSize === 'small' ? smallColorCardContentSize : defaultColorCardContentSize]
-  } : {
-    css: [colorCardContentStyles, defaultColorCardContentSize]
-  }, {
+  }, jsx("span", {
+    css: [colorCardContentStyles, swatchSize === 'small' ? smallColorCardContentSize : defaultColorCardContentSize],
     style: {
       background: value || 'transparent'
     }
-  })))));
+  }))));
 };
 export default ColorCard;
 const sharedColorContainerStyles = css({
@@ -73,9 +65,11 @@ const defaultColorContainerSize = css({
   height: "var(--ds-space-400, 32px)"
 });
 const colorCardButtonStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':hover': {
     borderColor: `var(--ds-background-neutral-subtle, ${N0})`
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':not(:focus):hover, :focus': {
     borderColor: `var(--ds-border-focused, ${B100})`,
     outline: 'none'

package/dist/es2019/components/components.js

@@ -16,6 +16,7 @@ export const MenuList = props => {
     css: colorPaletteContainerStyles,
     role: "radiogroup",
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       maxWidth: cols ? getWidth(cols) : undefined
     },
     ref: innerRef

package/dist/es2019/messages.js

@@ -4,5 +4,10 @@ export default defineMessages({
     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'
+  },
+  colorCardRadioItemLabel: {
+    id: 'jira.color-picker.src.color-card-radio-item-label',
+    defaultMessage: 'color option',
+    description: 'This text is used as aria-label text in color card component for radio item'
   }
 });

package/dist/es2019/utils.js

@@ -4,7 +4,6 @@ import { gridSize } from '@atlaskit/theme';
 import { COLOR_CARD_SIZE } from './constants';
 import memoizeOne from 'memoize-one';
 import { Mode } from './types';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const getWidth = (cols, mode) => {
   const width = cols * (COLOR_CARD_SIZE + gridSize() / 2);
   return mode === Mode.Standard ? width + gridSize() : width;
@@ -12,7 +11,7 @@ export const getWidth = (cols, mode) => {
 export const getOptions = memoizeOne((palette, selectedColor, showDefaultSwatchColor) => {
   let focusedItemIndex = 0;
   let defaultSelectedColor = palette[0];
-  if (getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && !showDefaultSwatchColor) {
+  if (!showDefaultSwatchColor) {
     defaultSelectedColor = {
       label: '',
       value: ''

package/dist/esm/components/ColorCard.js

@@ -5,8 +5,10 @@ import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import Tooltip from '@atlaskit/tooltip';
 import { KEY_ENTER, KEY_SPACE } from '../constants';
 import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
 import { N0, DN600A, B75 } from '@atlaskit/theme/colors';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import messages from '../messages';
 var ColorCard = function ColorCard(props) {
   var value = props.value,
     label = props.label,
@@ -18,6 +20,8 @@ var ColorCard = function ColorCard(props) {
     onClick = props.onClick,
     onKeyDown = props.onKeyDown;
   var ref = useRef(null);
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
   var handleMouseDown = useCallback(function (event) {
     event.preventDefault();
   }, []);
@@ -38,19 +42,17 @@ var ColorCard = function ColorCard(props) {
     }
   }, [isTabbing, onKeyDown, value]);
   useEffect(function () {
-    if (getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy')) {
-      var refCurrent = ref.current;
-      var _handleKeyDown = function _handleKeyDown(e) {
-        if (e.key === 'Tab') {
-          e.stopPropagation();
-          e.preventDefault();
-        }
-      };
-      refCurrent === null || refCurrent === void 0 || refCurrent.addEventListener('keydown', _handleKeyDown);
-      return function () {
-        refCurrent === null || refCurrent === void 0 || refCurrent.removeEventListener('keydown', _handleKeyDown);
-      };
-    }
+    var refCurrent = ref.current;
+    var handleKeyDown = function handleKeyDown(e) {
+      if (e.key === 'Tab') {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    };
+    refCurrent === null || refCurrent === void 0 || refCurrent.addEventListener('keydown', handleKeyDown);
+    return function () {
+      refCurrent === null || refCurrent === void 0 || refCurrent.removeEventListener('keydown', handleKeyDown);
+    };
   }, []);
   return jsx(Tooltip, {
     content: label
@@ -61,11 +63,10 @@ var ColorCard = function ColorCard(props) {
     onKeyDown: handleKeyDown,
     role: "radio",
     "aria-checked": selected
-  }, !getBooleanFF('platform.jca11y-1559-dashboard-view-dashboard-remove-duplicate-aria-label_g5i3i') && {
-    'aria-label': label
+  }, getBooleanFF('platform.jca11y-2997-remove-duplicate-screen-reader-announcements_fz13s') && {
+    'aria-label': formatMessage(messages.colorCardRadioItemLabel)
   }, {
-    tabIndex: 0
-  }, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && {
+    tabIndex: 0,
     ref: ref
   }), jsx("div", {
     css: colorCardWrapperStyles
@@ -83,6 +84,7 @@ var ColorCard = function ColorCard(props) {
 };
 export default ColorCard;
 var colorCardOptionTabbingStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':hover, :focus': {
     borderColor: "var(--ds-border-focused, ".concat(B75, ")")
   }

package/dist/esm/components/ColorPaletteMenu.js

@@ -26,7 +26,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.14"
+          packageVersion: "3.2.16"
         }
       })(createAnalyticsEvent);
     }
@@ -41,13 +41,18 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
   var fullLabel = "".concat(label, ", ").concat(selectedValue.label, " selected");
   return jsx("div", {
     "aria-label": fullLabel,
-    role: "radiogroup",
+    role: "radiogroup"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
     css: [colorPaletteMenuStyles, mode === Mode.Standard && colorPaletteMenuStandardStyles],
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       width: "".concat(getWidth(cols, mode), "px")
     }
   }, jsx("div", {
-    css: [colorPaletteContainerStyles, mode === Mode.Compact && colorPaletteContainerCompactStyles]
+    css: [colorPaletteContainerStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    mode === Mode.Compact && colorPaletteContainerCompactStyles]
   }, options.map(function (_ref2) {
     var label = _ref2.label,
       value = _ref2.value;
@@ -68,7 +73,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.14"
+  packageVersion: "3.2.16"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
 var colorCardWrapperStyles = css({
   display: 'flex',

package/dist/esm/components/ColorPicker.js

@@ -17,7 +17,6 @@ import { KEY_ARROW_DOWN, KEY_ARROW_UP, KEY_TAB } from '../constants';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 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';
 var defaultPopperProps = {
@@ -31,7 +30,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.2.14";
+var packageVersion = "3.2.16";
 var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
   _inherits(ColorPickerWithoutAnalyticsBase, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalyticsBase);
@@ -77,7 +76,7 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
         _this.setState({
           isTabbing: false
         });
-      } else if (getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && key === 'Escape') {
+      } else if (key === 'Escape') {
         e.stopPropagation();
       }
     });
@@ -123,8 +122,7 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
             ref: ref
           }, jsx(Trigger, _extends({}, value, {
             label: fullLabel,
-            expanded: isOpen
-          }, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && {
+            expanded: isOpen,
             swatchSize: selectedColourSwatchSize,
             isDisabled: isDisabledSelectedSwatch
           })));

package/dist/esm/components/Trigger.js

@@ -1,10 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { useCallback } from 'react';
 import Tooltip from '@atlaskit/tooltip';
 import { css, jsx } from '@emotion/react';
 import { B100, DN600A, N0 } from '@atlaskit/theme/colors';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var ColorCard = function ColorCard(_ref) {
   var value = _ref.value,
     label = _ref.label,
@@ -25,29 +23,23 @@ var ColorCard = function ColorCard(_ref) {
   }, [onClick]);
   return jsx(Tooltip, {
     content: label
-  }, jsx("button", _extends({}, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') ? {
+  }, jsx("button", {
     css: [sharedColorContainerStyles, swatchSize === 'small' ? smallColorContainerSize : defaultColorContainerSize, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
-    disabled: isDisabled
-  } : {
-    css: [sharedColorContainerStyles, defaultColorContainerSize, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles]
-  }, {
+    disabled: isDisabled,
     onClick: handleClick,
     onMouseDown: handleMouseDown,
     "aria-label": label,
     "aria-expanded": expanded,
     "aria-haspopup": true,
     type: "button"
-  }), jsx("span", {
+  }, jsx("span", {
     css: colorCardWrapperStyles
-  }, jsx("span", _extends({}, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') ? {
-    css: [colorCardContentStyles, swatchSize === 'small' ? smallColorCardContentSize : defaultColorCardContentSize]
-  } : {
-    css: [colorCardContentStyles, defaultColorCardContentSize]
-  }, {
+  }, jsx("span", {
+    css: [colorCardContentStyles, swatchSize === 'small' ? smallColorCardContentSize : defaultColorCardContentSize],
     style: {
       background: value || 'transparent'
     }
-  })))));
+  }))));
 };
 export default ColorCard;
 var sharedColorContainerStyles = css({
@@ -73,9 +65,11 @@ var defaultColorContainerSize = css({
   height: "var(--ds-space-400, 32px)"
 });
 var colorCardButtonStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':hover': {
     borderColor: "var(--ds-background-neutral-subtle, ".concat(N0, ")")
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':not(:focus):hover, :focus': {
     borderColor: "var(--ds-border-focused, ".concat(B100, ")"),
     outline: 'none'

package/dist/esm/components/components.js

@@ -12,6 +12,7 @@ export var MenuList = function MenuList(props) {
     css: colorPaletteContainerStyles,
     role: "radiogroup",
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       maxWidth: cols ? getWidth(cols) : undefined
     },
     ref: innerRef

package/dist/esm/messages.js

@@ -4,5 +4,10 @@ export default defineMessages({
     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'
+  },
+  colorCardRadioItemLabel: {
+    id: 'jira.color-picker.src.color-card-radio-item-label',
+    defaultMessage: 'color option',
+    description: 'This text is used as aria-label text in color card component for radio item'
   }
 });