@atlaskit/color-picker 3.2.4 → 3.2.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/color-picker
 
+## 3.2.6
+
+### Patch Changes
+
+- [#83297](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83297) [`6b1707c169e0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6b1707c169e0) - The internal composition of this component has changed. There is no expected change in behaviour.
+
+## 3.2.5
+
+### Patch Changes
+
+- [#81931](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81931) [`fd212c03b3c4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fd212c03b3c4) - Implemented code to modify the size, set a default color, and disable the swatch color button, based on the new props passed to the component.
+
 ## 3.2.4
 
 ### Patch Changes

package/dist/cjs/components/ColorCard.js

@@ -6,12 +6,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _constants = require("../constants");
 var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; }
 /** @jsx jsx */
@@ -26,6 +28,7 @@ var ColorCard = function ColorCard(props) {
     isTabbing = props.isTabbing,
     onClick = props.onClick,
     onKeyDown = props.onKeyDown;
+  var ref = (0, _react.useRef)(null);
   var handleMouseDown = (0, _react.useCallback)(function (event) {
     event.preventDefault();
   }, []);
@@ -45,9 +48,24 @@ var ColorCard = function ColorCard(props) {
       onKeyDown(value);
     }
   }, [isTabbing, onKeyDown, value]);
+  (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.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);
+      };
+    }
+  }, []);
   return (0, _react2.jsx)(_tooltip.default, {
     content: label
-  }, (0, _react2.jsx)("div", {
+  }, (0, _react2.jsx)("div", (0, _extends2.default)({
     css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
     onClick: handleClick,
     onMouseDown: handleMouseDown,
@@ -56,7 +74,9 @@ var ColorCard = function ColorCard(props) {
     "aria-checked": selected,
     "aria-label": label,
     tabIndex: 0
-  }, (0, _react2.jsx)("div", {
+  }, (0, _platformFeatureFlags.getBooleanFF)('platform.color-picker-radio-button-functionality_6hkcy') && {
+    ref: ref
+  }), (0, _react2.jsx)("div", {
     css: colorCardContentStyles,
     style: {
       background: value || 'transparent'
@@ -102,5 +122,6 @@ var colorCardContentStyles = (0, _react2.css)({
   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'
 });

package/dist/cjs/components/ColorPaletteMenu.js

@@ -35,7 +35,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.4"
+          packageVersion: "3.2.6"
         }
       })(createAnalyticsEvent);
     }
@@ -77,7 +77,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
 var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.4"
+  packageVersion: "3.2.6"
 })((0, _analyticsNext.withAnalyticsEvents)()(ColorPaletteMenuWithoutAnalytics));
 var colorCardWrapperStyles = (0, _react.css)({
   display: 'flex',

package/dist/cjs/components/ColorPicker.js

@@ -22,6 +22,7 @@ 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");
 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); }; }
@@ -37,7 +38,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.2.4";
+var packageVersion = "3.2.6";
 var ColorPickerWithoutAnalytics = exports.ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ColorPickerWithoutAnalytics, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalytics);
@@ -83,6 +84,8 @@ var ColorPickerWithoutAnalytics = exports.ColorPickerWithoutAnalytics = /*#__PUR
         _this.setState({
           isTabbing: false
         });
+      } else if ((0, _platformFeatureFlags.getBooleanFF)('platform.color-picker-radio-button-functionality_6hkcy') && key === 'Escape') {
+        e.stopPropagation();
       }
     });
     return _this;
@@ -98,11 +101,15 @@ var ColorPickerWithoutAnalytics = exports.ColorPickerWithoutAnalytics = /*#__PUR
         _this$props$popperPro = _this$props.popperProps,
         popperProps = _this$props$popperPro === void 0 ? defaultPopperProps : _this$props$popperPro,
         _this$props$label = _this$props.label,
-        label = _this$props$label === void 0 ? 'Color picker' : _this$props$label;
-      var _getOptions = (0, _utils.getOptions)(palette, selectedColor),
+        label = _this$props$label === void 0 ? 'Color picker' : _this$props$label,
+        selectedColourSwatchSize = _this$props.selectedColourSwatchSize,
+        _this$props$showDefau = _this$props.showDefaultSwatchColor,
+        showDefaultSwatchColor = _this$props$showDefau === void 0 ? true : _this$props$showDefau,
+        isDisabledSelectedSwatch = _this$props.isDisabledSelectedSwatch;
+      var _getOptions = (0, _utils.getOptions)(palette, selectedColor, showDefaultSwatchColor),
         options = _getOptions.options,
         value = _getOptions.value;
-      var fullLabel = "".concat(label, ", ").concat(value.label, " selected");
+      var fullLabel = value.label && "".concat(label, ", ").concat(value.label, " selected");
       return (0, _react2.jsx)(_select.PopupSelect, {
         target: function target(_ref) {
           var ref = _ref.ref,
@@ -113,6 +120,9 @@ var ColorPickerWithoutAnalytics = exports.ColorPickerWithoutAnalytics = /*#__PUR
           }, (0, _react2.jsx)(_Trigger.default, (0, _extends2.default)({}, value, {
             label: fullLabel,
             expanded: isOpen
+          }, (0, _platformFeatureFlags.getBooleanFF)('platform.color-picker-radio-button-functionality_6hkcy') && {
+            swatchSize: selectedColourSwatchSize,
+            isDisabled: isDisabledSelectedSwatch
           })));
         },
         popperProps: popperProps,

package/dist/cjs/components/Trigger.js

@@ -5,18 +5,23 @@ 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 _constants = require("../constants");
 var _colors = require("@atlaskit/theme/colors");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /** @jsx jsx */
 
 var ColorCard = function ColorCard(_ref) {
   var value = _ref.value,
     label = _ref.label,
     expanded = _ref.expanded,
-    onClick = _ref.onClick;
+    onClick = _ref.onClick,
+    _ref$swatchSize = _ref.swatchSize,
+    swatchSize = _ref$swatchSize === void 0 ? 'default' : _ref$swatchSize,
+    isDisabled = _ref.isDisabled;
   var handleMouseDown = (0, _react.useCallback)(function (event) {
     event.preventDefault();
   }, []);
@@ -29,27 +34,32 @@ var ColorCard = function ColorCard(_ref) {
   }, [onClick]);
   return (0, _react2.jsx)(_tooltip.default, {
     content: label
-  }, (0, _react2.jsx)("button", {
-    css: [sharedColorContainerStyles, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
+  }, (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],
+    disabled: isDisabled
+  } : {
+    css: [sharedColorContainerStyles, defaultColorContainerSize, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles]
+  }, {
     onClick: handleClick,
     onMouseDown: handleMouseDown,
     "aria-label": label,
     "aria-expanded": expanded,
     "aria-haspopup": true,
     type: "button"
-  }, (0, _react2.jsx)("span", {
-    css: colorCardContentStyles,
+  }), (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]
+  }, {
     style: {
       background: value || 'transparent'
     }
-  })));
+  }))));
 };
 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',
@@ -60,23 +70,40 @@ var sharedColorContainerStyles = (0, _react2.css)({
   cursor: 'pointer',
   outline: 'none'
 });
+var smallColorContainerSize = (0, _react2.css)({
+  width: '22px',
+  height: '22px',
+  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 colorCardButtonStyles = (0, _react2.css)({
   ':hover': {
     borderColor: "var(--ds-background-neutral-subtle, ".concat(_colors.N0, ")")
   },
   ':not(:focus):hover, :focus': {
-    borderColor: "var(--ds-border-focused, ".concat(_colors.B100, ")")
+    borderColor: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
+    outline: 'none'
   }
 });
 var colorCardButtonFocusedStyles = (0, _react2.css)({
-  borderColor: "var(--ds-border-focused, ".concat(_colors.B100, ")")
+  borderColor: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
+  outline: 'none'
 });
 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 smallColorCardContentSize = (0, _react2.css)({
+  width: "var(--ds-space-200, 16px)",
+  height: "var(--ds-space-200, 16px)"
+});
+var defaultColorCardContentSize = (0, _react2.css)({
+  width: "var(--ds-space-300, 24px)",
+  height: "var(--ds-space-300, 24px)"
 });

package/dist/cjs/utils.js

@@ -9,6 +9,7 @@ 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
 
@@ -16,15 +17,22 @@ var getWidth = exports.getWidth = function getWidth(cols, mode) {
   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) {
+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) {
+    defaultSelectedColor = {
+      label: '',
+      value: ''
+    };
+  }
   var value = palette.find(function (color, index) {
     if (color.value === selectedColor) {
       focusedItemIndex = index;
       return true;
     }
     return false;
-  }) || palette[0];
+  }) || defaultSelectedColor;
   return {
     options: palette,
     value: value,

package/dist/es2019/components/ColorCard.js

@@ -1,10 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import React, { useCallback } from 'react';
+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 { css, jsx } from '@emotion/react';
 import { N0, DN600A, B75 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const ColorCard = props => {
   const {
     value,
@@ -17,6 +19,7 @@ const ColorCard = props => {
     onClick,
     onKeyDown
   } = props;
+  const ref = useRef(null);
   const handleMouseDown = useCallback(event => {
     event.preventDefault();
   }, []);
@@ -38,9 +41,24 @@ const ColorCard = props => {
       onKeyDown(value);
     }
   }, [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);
+      };
+    }
+  }, []);
   return jsx(Tooltip, {
     content: label
-  }, jsx("div", {
+  }, jsx("div", _extends({
     css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
     onClick: handleClick,
     onMouseDown: handleMouseDown,
@@ -49,7 +67,9 @@ const ColorCard = props => {
     "aria-checked": selected,
     "aria-label": label,
     tabIndex: 0
-  }, jsx("div", {
+  }, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && {
+    ref: ref
+  }), jsx("div", {
     css: colorCardContentStyles,
     style: {
       background: value || 'transparent'
@@ -95,5 +115,6 @@ const colorCardContentStyles = css({
   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'
 });

package/dist/es2019/components/ColorPaletteMenu.js

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

package/dist/es2019/components/ColorPicker.js

@@ -9,6 +9,7 @@ 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';
 const defaultPopperProps = {
   strategy: 'fixed',
   modifiers: [{
@@ -20,7 +21,7 @@ const defaultPopperProps = {
   placement: 'bottom-start'
 };
 const packageName = "@atlaskit/color-picker";
-const packageVersion = "3.2.4";
+const packageVersion = "3.2.6";
 export class ColorPickerWithoutAnalytics extends React.Component {
   constructor(...args) {
     super(...args);
@@ -61,6 +62,8 @@ export class ColorPickerWithoutAnalytics extends React.Component {
         this.setState({
           isTabbing: false
         });
+      } else if (getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && key === 'Escape') {
+        e.stopPropagation();
       }
     });
   }
@@ -71,13 +74,16 @@ export class ColorPickerWithoutAnalytics extends React.Component {
       checkMarkColor,
       cols,
       popperProps = defaultPopperProps,
-      label = 'Color picker'
+      label = 'Color picker',
+      selectedColourSwatchSize,
+      showDefaultSwatchColor = true,
+      isDisabledSelectedSwatch
     } = this.props;
     const {
       options,
       value
-    } = getOptions(palette, selectedColor);
-    const fullLabel = `${label}, ${value.label} selected`;
+    } = getOptions(palette, selectedColor, showDefaultSwatchColor);
+    const fullLabel = value.label && `${label}, ${value.label} selected`;
     return jsx(PopupSelect, {
       target: ({
         ref,
@@ -88,6 +94,9 @@ export class ColorPickerWithoutAnalytics extends React.Component {
       }, jsx(Trigger, _extends({}, value, {
         label: fullLabel,
         expanded: isOpen
+      }, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && {
+        swatchSize: selectedColourSwatchSize,
+        isDisabled: isDisabledSelectedSwatch
       }))),
       popperProps: popperProps,
       maxMenuWidth: "auto",

package/dist/es2019/components/Trigger.js

@@ -1,14 +1,18 @@
+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 { COLOR_CARD_SIZE } from '../constants';
 import { B100, DN600A, N0 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const ColorCard = ({
   value,
   label,
   expanded,
-  onClick
+  onClick,
+  swatchSize = 'default',
+  isDisabled
 }) => {
   const handleMouseDown = useCallback(event => {
     event.preventDefault();
@@ -22,27 +26,32 @@ const ColorCard = ({
   }, [onClick]);
   return jsx(Tooltip, {
     content: label
-  }, jsx("button", {
-    css: [sharedColorContainerStyles, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
+  }, jsx("button", _extends({}, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') ? {
+    css: [sharedColorContainerStyles, swatchSize === 'small' ? smallColorContainerSize : defaultColorContainerSize, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
+    disabled: isDisabled
+  } : {
+    css: [sharedColorContainerStyles, defaultColorContainerSize, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles]
+  }, {
     onClick: handleClick,
     onMouseDown: handleMouseDown,
     "aria-label": label,
     "aria-expanded": expanded,
     "aria-haspopup": true,
     type: "button"
-  }, jsx("span", {
-    css: colorCardContentStyles,
+  }), jsx("span", _extends({}, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') ? {
+    css: [colorCardContentStyles, swatchSize === 'small' ? smallColorCardContentSize : defaultColorCardContentSize]
+  } : {
+    css: [colorCardContentStyles, defaultColorCardContentSize]
+  }, {
     style: {
       background: value || 'transparent'
     }
-  })));
+  }))));
 };
 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',
@@ -53,23 +62,40 @@ const sharedColorContainerStyles = css({
   cursor: 'pointer',
   outline: 'none'
 });
+const smallColorContainerSize = css({
+  width: '22px',
+  height: '22px',
+  top: "var(--ds-space-negative-025, -2px)"
+});
+const defaultColorContainerSize = css({
+  width: `${COLOR_CARD_SIZE}px`,
+  height: `${COLOR_CARD_SIZE}px`
+});
 const colorCardButtonStyles = css({
   ':hover': {
     borderColor: `var(--ds-background-neutral-subtle, ${N0})`
   },
   ':not(:focus):hover, :focus': {
-    borderColor: `var(--ds-border-focused, ${B100})`
+    borderColor: `var(--ds-border-focused, ${B100})`,
+    outline: 'none'
   }
 });
 const colorCardButtonFocusedStyles = css({
-  borderColor: `var(--ds-border-focused, ${B100})`
+  borderColor: `var(--ds-border-focused, ${B100})`,
+  outline: 'none'
 });
 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 smallColorCardContentSize = css({
+  width: "var(--ds-space-200, 16px)",
+  height: "var(--ds-space-200, 16px)"
+});
+const defaultColorCardContentSize = css({
+  width: "var(--ds-space-300, 24px)",
+  height: "var(--ds-space-300, 24px)"
 });

package/dist/es2019/utils.js

@@ -4,19 +4,27 @@ 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;
 };
-export const getOptions = memoizeOne((palette, selectedColor) => {
+export const getOptions = memoizeOne((palette, selectedColor, showDefaultSwatchColor) => {
   let focusedItemIndex = 0;
+  let defaultSelectedColor = palette[0];
+  if (getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && !showDefaultSwatchColor) {
+    defaultSelectedColor = {
+      label: '',
+      value: ''
+    };
+  }
   const value = palette.find((color, index) => {
     if (color.value === selectedColor) {
       focusedItemIndex = index;
       return true;
     }
     return false;
-  }) || palette[0];
+  }) || defaultSelectedColor;
   return {
     options: palette,
     value,

package/dist/esm/components/ColorCard.js

@@ -1,10 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import React, { useCallback } from 'react';
+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 { css, jsx } from '@emotion/react';
 import { N0, DN600A, B75 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var ColorCard = function ColorCard(props) {
   var value = props.value,
     label = props.label,
@@ -15,6 +17,7 @@ var ColorCard = function ColorCard(props) {
     isTabbing = props.isTabbing,
     onClick = props.onClick,
     onKeyDown = props.onKeyDown;
+  var ref = useRef(null);
   var handleMouseDown = useCallback(function (event) {
     event.preventDefault();
   }, []);
@@ -34,9 +37,24 @@ var ColorCard = function ColorCard(props) {
       onKeyDown(value);
     }
   }, [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);
+      };
+    }
+  }, []);
   return jsx(Tooltip, {
     content: label
-  }, jsx("div", {
+  }, jsx("div", _extends({
     css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
     onClick: handleClick,
     onMouseDown: handleMouseDown,
@@ -45,7 +63,9 @@ var ColorCard = function ColorCard(props) {
     "aria-checked": selected,
     "aria-label": label,
     tabIndex: 0
-  }, jsx("div", {
+  }, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && {
+    ref: ref
+  }), jsx("div", {
     css: colorCardContentStyles,
     style: {
       background: value || 'transparent'
@@ -91,5 +111,6 @@ var colorCardContentStyles = css({
   boxShadow: "inset 0px 0px 0px 1px ".concat("var(--ds-background-inverse-subtle, ".concat(DN600A, ")"))
 });
 var colorCardContentCheckMarkStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   margin: '1px'
 });

package/dist/esm/components/ColorPaletteMenu.js

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

package/dist/esm/components/ColorPicker.js

@@ -17,6 +17,7 @@ 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';
 var defaultPopperProps = {
   strategy: 'fixed',
   modifiers: [{
@@ -28,7 +29,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.2.4";
+var packageVersion = "3.2.6";
 export var ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
   _inherits(ColorPickerWithoutAnalytics, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalytics);
@@ -74,6 +75,8 @@ export var ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component
         _this.setState({
           isTabbing: false
         });
+      } else if (getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && key === 'Escape') {
+        e.stopPropagation();
       }
     });
     return _this;
@@ -89,11 +92,15 @@ export var ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component
         _this$props$popperPro = _this$props.popperProps,
         popperProps = _this$props$popperPro === void 0 ? defaultPopperProps : _this$props$popperPro,
         _this$props$label = _this$props.label,
-        label = _this$props$label === void 0 ? 'Color picker' : _this$props$label;
-      var _getOptions = getOptions(palette, selectedColor),
+        label = _this$props$label === void 0 ? 'Color picker' : _this$props$label,
+        selectedColourSwatchSize = _this$props.selectedColourSwatchSize,
+        _this$props$showDefau = _this$props.showDefaultSwatchColor,
+        showDefaultSwatchColor = _this$props$showDefau === void 0 ? true : _this$props$showDefau,
+        isDisabledSelectedSwatch = _this$props.isDisabledSelectedSwatch;
+      var _getOptions = getOptions(palette, selectedColor, showDefaultSwatchColor),
         options = _getOptions.options,
         value = _getOptions.value;
-      var fullLabel = "".concat(label, ", ").concat(value.label, " selected");
+      var fullLabel = value.label && "".concat(label, ", ").concat(value.label, " selected");
       return jsx(PopupSelect, {
         target: function target(_ref) {
           var ref = _ref.ref,
@@ -104,6 +111,9 @@ export var ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component
           }, jsx(Trigger, _extends({}, value, {
             label: fullLabel,
             expanded: isOpen
+          }, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && {
+            swatchSize: selectedColourSwatchSize,
+            isDisabled: isDisabledSelectedSwatch
           })));
         },
         popperProps: popperProps,

package/dist/esm/components/Trigger.js

@@ -1,14 +1,19 @@
+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 { COLOR_CARD_SIZE } from '../constants';
 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,
     expanded = _ref.expanded,
-    onClick = _ref.onClick;
+    onClick = _ref.onClick,
+    _ref$swatchSize = _ref.swatchSize,
+    swatchSize = _ref$swatchSize === void 0 ? 'default' : _ref$swatchSize,
+    isDisabled = _ref.isDisabled;
   var handleMouseDown = useCallback(function (event) {
     event.preventDefault();
   }, []);
@@ -21,27 +26,32 @@ var ColorCard = function ColorCard(_ref) {
   }, [onClick]);
   return jsx(Tooltip, {
     content: label
-  }, jsx("button", {
-    css: [sharedColorContainerStyles, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
+  }, jsx("button", _extends({}, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') ? {
+    css: [sharedColorContainerStyles, swatchSize === 'small' ? smallColorContainerSize : defaultColorContainerSize, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
+    disabled: isDisabled
+  } : {
+    css: [sharedColorContainerStyles, defaultColorContainerSize, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles]
+  }, {
     onClick: handleClick,
     onMouseDown: handleMouseDown,
     "aria-label": label,
     "aria-expanded": expanded,
     "aria-haspopup": true,
     type: "button"
-  }, jsx("span", {
-    css: colorCardContentStyles,
+  }), jsx("span", _extends({}, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') ? {
+    css: [colorCardContentStyles, swatchSize === 'small' ? smallColorCardContentSize : defaultColorCardContentSize]
+  } : {
+    css: [colorCardContentStyles, defaultColorCardContentSize]
+  }, {
     style: {
       background: value || 'transparent'
     }
-  })));
+  }))));
 };
 export default ColorCard;
 var sharedColorContainerStyles = css({
   display: 'inline-block',
   position: 'relative',
-  width: "".concat(COLOR_CARD_SIZE, "px"),
-  height: "".concat(COLOR_CARD_SIZE, "px"),
   border: '2px solid transparent',
   boxSizing: 'border-box',
   borderRadius: '6px',
@@ -52,23 +62,40 @@ var sharedColorContainerStyles = css({
   cursor: 'pointer',
   outline: 'none'
 });
+var smallColorContainerSize = css({
+  width: '22px',
+  height: '22px',
+  top: "var(--ds-space-negative-025, -2px)"
+});
+var defaultColorContainerSize = css({
+  width: "".concat(COLOR_CARD_SIZE, "px"),
+  height: "".concat(COLOR_CARD_SIZE, "px")
+});
 var colorCardButtonStyles = css({
   ':hover': {
     borderColor: "var(--ds-background-neutral-subtle, ".concat(N0, ")")
   },
   ':not(:focus):hover, :focus': {
-    borderColor: "var(--ds-border-focused, ".concat(B100, ")")
+    borderColor: "var(--ds-border-focused, ".concat(B100, ")"),
+    outline: 'none'
   }
 });
 var colorCardButtonFocusedStyles = css({
-  borderColor: "var(--ds-border-focused, ".concat(B100, ")")
+  borderColor: "var(--ds-border-focused, ".concat(B100, ")"),
+  outline: 'none'
 });
 var 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 ".concat("var(--ds-background-inverse-subtle, ".concat(DN600A, ")"))
+});
+var smallColorCardContentSize = css({
+  width: "var(--ds-space-200, 16px)",
+  height: "var(--ds-space-200, 16px)"
+});
+var defaultColorCardContentSize = css({
+  width: "var(--ds-space-300, 24px)",
+  height: "var(--ds-space-300, 24px)"
 });

package/dist/esm/utils.js

@@ -4,19 +4,27 @@ 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 var getWidth = function getWidth(cols, mode) {
   var width = cols * (COLOR_CARD_SIZE + gridSize() / 2);
   return mode === Mode.Standard ? width + gridSize() : width;
 };
-export var getOptions = memoizeOne(function (palette, selectedColor) {
+export var getOptions = memoizeOne(function (palette, selectedColor, showDefaultSwatchColor) {
   var focusedItemIndex = 0;
+  var defaultSelectedColor = palette[0];
+  if (getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && !showDefaultSwatchColor) {
+    defaultSelectedColor = {
+      label: '',
+      value: ''
+    };
+  }
   var value = palette.find(function (color, index) {
     if (color.value === selectedColor) {
       focusedItemIndex = index;
       return true;
     }
     return false;
-  }) || palette[0];
+  }) || defaultSelectedColor;
   return {
     options: palette,
     value: value,

package/dist/types/components/ColorPicker.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { PopupSelectProps, ValueType } from '@atlaskit/select';
-import { Color, Palette } from '../types';
+import { Color, Palette, SwatchSize } from '../types';
 import { jsx } from '@emotion/react';
 export interface Props {
     /** color picker button label */
@@ -20,6 +20,12 @@ export interface Props {
     onChange: (value: string, analyticsEvent?: object) => void;
     /** You should not be accessing this prop under any circumstances. It is provided by @atlaskit/analytics-next. */
     createAnalyticsEvent?: any;
+    /** swatch button size */
+    selectedColourSwatchSize?: SwatchSize;
+    /** swatch button default color */
+    showDefaultSwatchColor?: boolean;
+    /** diasble swatch button */
+    isDisabledSelectedSwatch?: boolean;
 }
 export declare class ColorPickerWithoutAnalytics extends React.Component<Props> {
     createAndFireEventOnAtlaskit: (payload: import("@atlaskit/analytics-next").AnalyticsEventPayload) => (createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;
@@ -32,5 +38,5 @@ export declare class ColorPickerWithoutAnalytics extends React.Component<Props>
     onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
     render(): jsx.JSX.Element;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "selectedColor"> & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "selectedColor" | "selectedColourSwatchSize" | "showDefaultSwatchColor" | "isDisabledSelectedSwatch"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/components/Trigger.d.ts

@@ -1,9 +1,12 @@
 import { jsx } from '@emotion/react';
+import { SwatchSize } from '../types';
 export interface Props {
     value: string;
     label?: string;
     onClick?: () => void;
     expanded?: boolean;
+    swatchSize?: SwatchSize;
+    isDisabled?: boolean;
 }
-declare const ColorCard: ({ value, label, expanded, onClick }: Props) => jsx.JSX.Element;
+declare const ColorCard: ({ value, label, expanded, onClick, swatchSize, isDisabled, }: Props) => jsx.JSX.Element;
 export default ColorCard;

package/dist/types/types.d.ts

@@ -7,3 +7,4 @@ export declare enum Mode {
     Compact = 0,
     Standard = 1
 }
+export type SwatchSize = 'small' | 'default';

package/dist/types/utils.d.ts

@@ -1,6 +1,6 @@
 import { Mode, Palette } from './types';
 export declare const getWidth: (cols: number, mode?: Mode) => number;
-export declare const getOptions: import("memoize-one").MemoizedFn<(palette: Palette, selectedColor?: string) => {
+export declare const getOptions: import("memoize-one").MemoizedFn<(palette: Palette, selectedColor?: string, showDefaultSwatchColor?: boolean) => {
     options: Palette;
     value: import("./types").Color;
     focusedItemIndex: number;

package/dist/types-ts4.5/components/ColorPicker.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { PopupSelectProps, ValueType } from '@atlaskit/select';
-import { Color, Palette } from '../types';
+import { Color, Palette, SwatchSize } from '../types';
 import { jsx } from '@emotion/react';
 export interface Props {
     /** color picker button label */
@@ -20,6 +20,12 @@ export interface Props {
     onChange: (value: string, analyticsEvent?: object) => void;
     /** You should not be accessing this prop under any circumstances. It is provided by @atlaskit/analytics-next. */
     createAnalyticsEvent?: any;
+    /** swatch button size */
+    selectedColourSwatchSize?: SwatchSize;
+    /** swatch button default color */
+    showDefaultSwatchColor?: boolean;
+    /** diasble swatch button */
+    isDisabledSelectedSwatch?: boolean;
 }
 export declare class ColorPickerWithoutAnalytics extends React.Component<Props> {
     createAndFireEventOnAtlaskit: (payload: import("@atlaskit/analytics-next").AnalyticsEventPayload) => (createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;
@@ -32,5 +38,5 @@ export declare class ColorPickerWithoutAnalytics extends React.Component<Props>
     onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
     render(): jsx.JSX.Element;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "selectedColor"> & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "selectedColor" | "selectedColourSwatchSize" | "showDefaultSwatchColor" | "isDisabledSelectedSwatch"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/components/Trigger.d.ts

@@ -1,9 +1,12 @@
 import { jsx } from '@emotion/react';
+import { SwatchSize } from '../types';
 export interface Props {
     value: string;
     label?: string;
     onClick?: () => void;
     expanded?: boolean;
+    swatchSize?: SwatchSize;
+    isDisabled?: boolean;
 }
-declare const ColorCard: ({ value, label, expanded, onClick }: Props) => jsx.JSX.Element;
+declare const ColorCard: ({ value, label, expanded, onClick, swatchSize, isDisabled, }: Props) => jsx.JSX.Element;
 export default ColorCard;

package/dist/types-ts4.5/types.d.ts

@@ -7,3 +7,4 @@ export declare enum Mode {
     Compact = 0,
     Standard = 1
 }
+export type SwatchSize = 'small' | 'default';

package/dist/types-ts4.5/utils.d.ts

@@ -1,6 +1,6 @@
 import { Mode, Palette } from './types';
 export declare const getWidth: (cols: number, mode?: Mode) => number;
-export declare const getOptions: import("memoize-one").MemoizedFn<(palette: Palette, selectedColor?: string) => {
+export declare const getOptions: import("memoize-one").MemoizedFn<(palette: Palette, selectedColor?: string, showDefaultSwatchColor?: boolean) => {
     options: Palette;
     value: import("./types").Color;
     focusedItemIndex: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/color-picker",
-  "version": "3.2.4",
+  "version": "3.2.6",
   "description": "Jira Color Picker Component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,6 +34,7 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/icon": "^22.1.0",
+    "@atlaskit/platform-feature-flags": "^0.2.5",
     "@atlaskit/select": "^17.3.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.42.0",
@@ -73,5 +74,10 @@
       ]
     }
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
+  "platform-feature-flags": {
+    "platform.color-picker-radio-button-functionality_6hkcy": {
+      "type": "boolean"
+    }
+  }
 }