@atlaskit/color-picker 3.1.3 → 3.1.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/color-picker
 
+## 3.1.4
+
+### Patch Changes
+
+- [`bada4c7ae21`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bada4c7ae21) - Role and Tooltip added for Accessibility
+
 ## 3.1.3
 
 ### Patch Changes

package/dist/cjs/components/ColorCard.js

@@ -16,6 +16,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _done = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/done"));
 var _theme = require("@atlaskit/theme");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _ColorCard = require("../styled/ColorCard");
 var _constants = require("../constants");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -73,11 +74,15 @@ var ColorCard = /*#__PURE__*/function (_PureComponent) {
         _this$props3$checkMar = _this$props3.checkMarkColor,
         checkMarkColor = _this$props3$checkMar === void 0 ? _theme.colors.N0 : _this$props3$checkMar,
         isTabbing = _this$props3.isTabbing;
-      return /*#__PURE__*/_react.default.createElement(_ColorCard.ColorCardOption, {
+      return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+        content: label
+      }, /*#__PURE__*/_react.default.createElement(_ColorCard.ColorCardOption, {
         onClick: this.onClick,
         onMouseDown: this.onMouseDown,
         focused: focused,
-        "aria-label": "".concat(label).concat(selected ? ' selected' : ''),
+        role: "radio",
+        "aria-checked": selected,
+        "aria-label": label,
         tabIndex: 0,
         onKeyDown: this.onKeyDown,
         isTabbing: isTabbing
@@ -86,7 +91,7 @@ var ColorCard = /*#__PURE__*/function (_PureComponent) {
       }, selected && /*#__PURE__*/_react.default.createElement(_ColorCard.ColorCardContentCheckMark, null, /*#__PURE__*/_react.default.createElement(_done.default, {
         primaryColor: checkMarkColor,
         label: ""
-      }))));
+      })))));
     }
   }]);
   return ColorCard;

package/dist/cjs/components/ColorPaletteMenu.js

@@ -71,7 +71,8 @@ var ColorPaletteMenuWithoutAnalytics = /*#__PURE__*/function (_React$Component)
       return /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorPaletteMenu, {
         cols: cols,
         "aria-label": fullLabel,
-        mode: mode
+        mode: mode,
+        role: "radiogroup"
       }, /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorPaletteContainer, {
         mode: mode
       }, options.map(function (_ref) {

package/dist/cjs/components/ColorPicker.js

@@ -37,7 +37,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.1.3";
+var packageVersion = "3.1.4";
 var ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ColorPickerWithoutAnalytics, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalytics);

package/dist/cjs/components/Trigger.js

@@ -14,6 +14,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _ColorCard = require("../styled/ColorCard");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 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); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var ColorCard = /*#__PURE__*/function (_React$PureComponent) {
@@ -46,8 +47,9 @@ var ColorCard = /*#__PURE__*/function (_React$PureComponent) {
         value = _this$props.value,
         label = _this$props.label,
         expanded = _this$props.expanded;
-      return /*#__PURE__*/_react.default.createElement(_ColorCard.ColorCardButton, {
-        title: label,
+      return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+        content: label
+      }, /*#__PURE__*/_react.default.createElement(_ColorCard.ColorCardButton, {
         onClick: this.onClick,
         onMouseDown: this.onMouseDown,
         focused: expanded,
@@ -57,7 +59,7 @@ var ColorCard = /*#__PURE__*/function (_React$PureComponent) {
         type: "button"
       }, /*#__PURE__*/_react.default.createElement(_ColorCard.ColorCardContent, {
         color: value || 'transparent'
-      }));
+      })));
     }
   }]);
   return ColorCard;

package/dist/cjs/components/components.js

@@ -18,7 +18,7 @@ var MenuList = function MenuList(props) {
     innerRef = props.innerRef,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   return /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorPaletteContainer, (0, _extends2.default)({
-    role: "grid",
+    role: "radiogroup",
     style: {
       maxWidth: cols ? (0, _utils.getWidth)(cols) : undefined
     },

package/dist/cjs/styled/ColorCard.js

@@ -18,7 +18,7 @@ var buttonFocusedBorder = "border-color: ".concat("var(--ds-border-focused, ".co
 var sharedColorContainerStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  border: 2px solid transparent;\n  box-sizing: border-box;\n  border-radius: ", "px;\n  transition: border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n  background-color: transparent;\n  border-color: transparent;\n  padding: 0;\n  cursor: pointer;\n  outline: none;\n"])), _constants.COLOR_CARD_SIZE, _constants.COLOR_CARD_SIZE, (0, _theme.borderRadius)() * 2);
 var ColorCardOption = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n\n  ", "\n\n  ", ";\n"])), sharedColorContainerStyles, function (props) {
   if (props.isTabbing === undefined || props.isTabbing) {
-    return "&:hover,\n      &:focus {\n        border-color: ".concat("var(--ds-border-focused, ".concat(_theme.colors.B75, ")"), ";\n      }");
+    return "&:hover,\n  &:focus {\n        border-color: ".concat("var(--ds-border-focused, ".concat(_theme.colors.B75, ")"), ";\n      }");
   }
 }, function (props) {
   if (props.focused && !props.isTabbing) {
@@ -33,12 +33,12 @@ var ColorCardButton = _styledComponents.default.button(_templateObject3 || (_tem
 });
 exports.ColorCardButton = ColorCardButton;
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 var ColorCardContent = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  width: 24px;\n  height: 24px;\n  border-radius: ", "px;\n  background: ", ";\n  box-shadow: inset 0px 0px 0px 1px\n    ", ";\n"])), (0, _theme.borderRadius)(), function (props) {
   return props.color;
 }, "var(--ds-background-inverse-subtle, ".concat(_theme.colors.DN600A, ")"));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 exports.ColorCardContent = ColorCardContent;
 var ColorCardContentCheckMark = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 1px;\n"])));
 exports.ColorCardContentCheckMark = ColorCardContentCheckMark;

package/dist/cjs/styled/ColorPalette.js

@@ -10,9 +10,10 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _theme = require("@atlaskit/theme");
 var _utils = require("../utils");
 var _types = require("../types");
+var _constants = require("../constants");
 var _templateObject, _templateObject2, _templateObject3; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
-var ColorCardWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin: ", ";\n"])), "var(--ds-space-025, 2px)");
+var ColorCardWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin: ", ";\n  height: ", "px;\n"])), "var(--ds-space-025, 2px)", _constants.COLOR_CARD_SIZE);
 exports.ColorCardWrapper = ColorCardWrapper;
 var ColorPaletteContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-wrap: wrap;\n  padding: ", ";\n"])), function (props) {
   return props.mode === _types.Mode.Compact ? "0" : "var(--ds-space-050, 4px)";
@@ -21,6 +22,6 @@ exports.ColorPaletteContainer = ColorPaletteContainer;
 var ColorPaletteMenu = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  margin: 0;\n  background-color: ", ";\n  width: ", "px;\n  ", "\n"])), "var(--ds-surface-overlay, ".concat(_theme.colors.N0, ")"), function (props) {
   return (0, _utils.getWidth)(props.cols);
 }, function (props) {
-  return props.mode && props.mode === _types.Mode.Standard && "\n    box-radius: ".concat("var(--ds-radius-100, 3px)", ";\n    box-shadow: ", "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_theme.colors.N40, ", 0 0 8px ").concat(_theme.colors.N40), ")"), ";\n    width: ", (0, _utils.getWidth)(props.cols) + (0, _theme.gridSize)(), "px;\n  ");
+  return props.mode && props.mode === _types.Mode.Standard && "\n    box-radius: ".concat("var(--ds-border-radius-100, 3px)", ";\n    box-shadow: ", "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_theme.colors.N40, ", 0 0 8px ").concat(_theme.colors.N40), ")"), ";\n    width: ", (0, _utils.getWidth)(props.cols) + (0, _theme.gridSize)(), "px;\n  ");
 });
 exports.ColorPaletteMenu = ColorPaletteMenu;

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/color-picker",
-	"version": "3.1.3"
+	"version": "3.1.4"
 }

package/dist/es2019/components/ColorCard.js

@@ -5,6 +5,7 @@ import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { colors } from '@atlaskit/theme';
+import Tooltip from '@atlaskit/tooltip';
 import { ColorCardOption, ColorCardContent, ColorCardContentCheckMark } from '../styled/ColorCard';
 import { KEY_SPACE, KEY_ENTER } from '../constants';
 export default class ColorCard extends PureComponent {
@@ -52,11 +53,15 @@ export default class ColorCard extends PureComponent {
       checkMarkColor = colors.N0,
       isTabbing
     } = this.props;
-    return /*#__PURE__*/React.createElement(ColorCardOption, {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      content: label
+    }, /*#__PURE__*/React.createElement(ColorCardOption, {
       onClick: this.onClick,
       onMouseDown: this.onMouseDown,
       focused: focused,
-      "aria-label": `${label}${selected ? ' selected' : ''}`,
+      role: "radio",
+      "aria-checked": selected,
+      "aria-label": label,
       tabIndex: 0,
       onKeyDown: this.onKeyDown,
       isTabbing: isTabbing
@@ -65,6 +70,6 @@ export default class ColorCard extends PureComponent {
     }, selected && /*#__PURE__*/React.createElement(ColorCardContentCheckMark, null, /*#__PURE__*/React.createElement(EditorDoneIcon, {
       primaryColor: checkMarkColor,
       label: ""
-    }))));
+    })))));
   }
 }

package/dist/es2019/components/ColorPaletteMenu.js

@@ -48,7 +48,8 @@ export class ColorPaletteMenuWithoutAnalytics extends React.Component {
     return /*#__PURE__*/React.createElement(ColorPaletteMenu, {
       cols: cols,
       "aria-label": fullLabel,
-      mode: mode
+      mode: mode,
+      role: "radiogroup"
     }, /*#__PURE__*/React.createElement(ColorPaletteContainer, {
       mode: mode
     }, options.map(({

package/dist/es2019/components/ColorPicker.js

@@ -19,7 +19,7 @@ const defaultPopperProps = {
   placement: 'bottom-start'
 };
 const packageName = "@atlaskit/color-picker";
-const packageVersion = "3.1.3";
+const packageVersion = "3.1.4";
 export class ColorPickerWithoutAnalytics extends React.Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/components/Trigger.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { ColorCardButton, ColorCardContent } from '../styled/ColorCard';
+import Tooltip from '@atlaskit/tooltip';
 export default class ColorCard extends React.PureComponent {
   constructor(...args) {
     super(...args);
@@ -24,8 +25,9 @@ export default class ColorCard extends React.PureComponent {
       label,
       expanded
     } = this.props;
-    return /*#__PURE__*/React.createElement(ColorCardButton, {
-      title: label,
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      content: label
+    }, /*#__PURE__*/React.createElement(ColorCardButton, {
       onClick: this.onClick,
       onMouseDown: this.onMouseDown,
       focused: expanded,
@@ -35,6 +37,6 @@ export default class ColorCard extends React.PureComponent {
       type: "button"
     }, /*#__PURE__*/React.createElement(ColorCardContent, {
       color: value || 'transparent'
-    }));
+    })));
   }
 }

package/dist/es2019/components/components.js

@@ -13,7 +13,7 @@ export const MenuList = props => {
     ...rest
   } = props;
   return /*#__PURE__*/React.createElement(ColorPaletteContainer, _extends({
-    role: "grid",
+    role: "radiogroup",
     style: {
       maxWidth: cols ? getWidth(cols) : undefined
     },

package/dist/es2019/styled/ColorCard.js

@@ -25,7 +25,7 @@ export const ColorCardOption = styled.div`
   ${props => {
   if (props.isTabbing === undefined || props.isTabbing) {
     return `&:hover,
-      &:focus {
+  &:focus {
         border-color: ${`var(--ds-border-focused, ${colors.B75})`};
       }`;
   }
@@ -53,7 +53,7 @@ export const ColorCardButton = styled.button`
   }
 }};
 `;
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const ColorCardContent = styled.div`
   position: absolute;
   top: 1px;
@@ -66,7 +66,7 @@ export const ColorCardContent = styled.div`
     ${`var(--ds-background-inverse-subtle, ${colors.DN600A})`};
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const ColorCardContentCheckMark = styled.div`
   margin: 1px;
 `;

package/dist/es2019/styled/ColorPalette.js

@@ -4,9 +4,11 @@ import styled from 'styled-components';
 import { gridSize, colors } from '@atlaskit/theme';
 import { getWidth } from '../utils';
 import { Mode } from '../types';
+import { COLOR_CARD_SIZE } from '../constants';
 export const ColorCardWrapper = styled.div`
   display: flex;
   margin: ${"var(--ds-space-025, 2px)"};
+  height: ${COLOR_CARD_SIZE}px;
 `;
 export const ColorPaletteContainer = styled.div`
   display: flex;
@@ -19,7 +21,7 @@ export const ColorPaletteMenu = styled.div`
   background-color: ${`var(--ds-surface-overlay, ${colors.N0})`};
   width: ${props => getWidth(props.cols)}px;
   ${props => props.mode && props.mode === Mode.Standard && `
-    box-radius: ${"var(--ds-radius-100, 3px)"};
+    box-radius: ${"var(--ds-border-radius-100, 3px)"};
     box-shadow: ${`var(--ds-shadow-overlay, ${`0 0 0 1px ${colors.N40}, 0 0 8px ${colors.N40}`})`};
     width: ${getWidth(props.cols) + gridSize()}px;
   `}

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/color-picker",
-	"version": "3.1.3"
+	"version": "3.1.4"
 }

package/dist/esm/components/ColorCard.js

@@ -13,6 +13,7 @@ import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { colors } from '@atlaskit/theme';
+import Tooltip from '@atlaskit/tooltip';
 import { ColorCardOption, ColorCardContent, ColorCardContentCheckMark } from '../styled/ColorCard';
 import { KEY_SPACE, KEY_ENTER } from '../constants';
 var ColorCard = /*#__PURE__*/function (_PureComponent) {
@@ -65,11 +66,15 @@ var ColorCard = /*#__PURE__*/function (_PureComponent) {
         _this$props3$checkMar = _this$props3.checkMarkColor,
         checkMarkColor = _this$props3$checkMar === void 0 ? colors.N0 : _this$props3$checkMar,
         isTabbing = _this$props3.isTabbing;
-      return /*#__PURE__*/React.createElement(ColorCardOption, {
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        content: label
+      }, /*#__PURE__*/React.createElement(ColorCardOption, {
         onClick: this.onClick,
         onMouseDown: this.onMouseDown,
         focused: focused,
-        "aria-label": "".concat(label).concat(selected ? ' selected' : ''),
+        role: "radio",
+        "aria-checked": selected,
+        "aria-label": label,
         tabIndex: 0,
         onKeyDown: this.onKeyDown,
         isTabbing: isTabbing
@@ -78,7 +83,7 @@ var ColorCard = /*#__PURE__*/function (_PureComponent) {
       }, selected && /*#__PURE__*/React.createElement(ColorCardContentCheckMark, null, /*#__PURE__*/React.createElement(EditorDoneIcon, {
         primaryColor: checkMarkColor,
         label: ""
-      }))));
+      })))));
     }
   }]);
   return ColorCard;

package/dist/esm/components/ColorPaletteMenu.js

@@ -64,7 +64,8 @@ export var ColorPaletteMenuWithoutAnalytics = /*#__PURE__*/function (_React$Comp
       return /*#__PURE__*/React.createElement(ColorPaletteMenu, {
         cols: cols,
         "aria-label": fullLabel,
-        mode: mode
+        mode: mode,
+        role: "radiogroup"
       }, /*#__PURE__*/React.createElement(ColorPaletteContainer, {
         mode: mode
       }, options.map(function (_ref) {

package/dist/esm/components/ColorPicker.js

@@ -27,7 +27,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.1.3";
+var packageVersion = "3.1.4";
 export var ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
   _inherits(ColorPickerWithoutAnalytics, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalytics);

package/dist/esm/components/Trigger.js

@@ -9,6 +9,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import React from 'react';
 import { ColorCardButton, ColorCardContent } from '../styled/ColorCard';
+import Tooltip from '@atlaskit/tooltip';
 var ColorCard = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(ColorCard, _React$PureComponent);
   var _super = _createSuper(ColorCard);
@@ -39,8 +40,9 @@ var ColorCard = /*#__PURE__*/function (_React$PureComponent) {
         value = _this$props.value,
         label = _this$props.label,
         expanded = _this$props.expanded;
-      return /*#__PURE__*/React.createElement(ColorCardButton, {
-        title: label,
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        content: label
+      }, /*#__PURE__*/React.createElement(ColorCardButton, {
         onClick: this.onClick,
         onMouseDown: this.onMouseDown,
         focused: expanded,
@@ -50,7 +52,7 @@ var ColorCard = /*#__PURE__*/function (_React$PureComponent) {
         type: "button"
       }, /*#__PURE__*/React.createElement(ColorCardContent, {
         color: value || 'transparent'
-      }));
+      })));
     }
   }]);
   return ColorCard;

package/dist/esm/components/components.js

@@ -11,7 +11,7 @@ export var MenuList = function MenuList(props) {
     innerRef = props.innerRef,
     rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/React.createElement(ColorPaletteContainer, _extends({
-    role: "grid",
+    role: "radiogroup",
     style: {
       maxWidth: cols ? getWidth(cols) : undefined
     },

package/dist/esm/styled/ColorCard.js

@@ -9,7 +9,7 @@ var buttonFocusedBorder = "border-color: ".concat("var(--ds-border-focused, ".co
 var sharedColorContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  border: 2px solid transparent;\n  box-sizing: border-box;\n  border-radius: ", "px;\n  transition: border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n  background-color: transparent;\n  border-color: transparent;\n  padding: 0;\n  cursor: pointer;\n  outline: none;\n"])), COLOR_CARD_SIZE, COLOR_CARD_SIZE, borderRadius() * 2);
 export var ColorCardOption = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n\n  ", "\n\n  ", ";\n"])), sharedColorContainerStyles, function (props) {
   if (props.isTabbing === undefined || props.isTabbing) {
-    return "&:hover,\n      &:focus {\n        border-color: ".concat("var(--ds-border-focused, ".concat(colors.B75, ")"), ";\n      }");
+    return "&:hover,\n  &:focus {\n        border-color: ".concat("var(--ds-border-focused, ".concat(colors.B75, ")"), ";\n      }");
   }
 }, function (props) {
   if (props.focused && !props.isTabbing) {
@@ -21,10 +21,10 @@ export var ColorCardButton = styled.button(_templateObject3 || (_templateObject3
     return buttonFocusedBorder;
   }
 });
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var ColorCardContent = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  width: 24px;\n  height: 24px;\n  border-radius: ", "px;\n  background: ", ";\n  box-shadow: inset 0px 0px 0px 1px\n    ", ";\n"])), borderRadius(), function (props) {
   return props.color;
 }, "var(--ds-background-inverse-subtle, ".concat(colors.DN600A, ")"));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var ColorCardContentCheckMark = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 1px;\n"])));

package/dist/esm/styled/ColorPalette.js

@@ -6,12 +6,13 @@ import styled from 'styled-components';
 import { gridSize, colors } from '@atlaskit/theme';
 import { getWidth } from '../utils';
 import { Mode } from '../types';
-export var ColorCardWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin: ", ";\n"])), "var(--ds-space-025, 2px)");
+import { COLOR_CARD_SIZE } from '../constants';
+export var ColorCardWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin: ", ";\n  height: ", "px;\n"])), "var(--ds-space-025, 2px)", COLOR_CARD_SIZE);
 export var ColorPaletteContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  padding: ", ";\n"])), function (props) {
   return props.mode === Mode.Compact ? "0" : "var(--ds-space-050, 4px)";
 });
 export var ColorPaletteMenu = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  margin: 0;\n  background-color: ", ";\n  width: ", "px;\n  ", "\n"])), "var(--ds-surface-overlay, ".concat(colors.N0, ")"), function (props) {
   return getWidth(props.cols);
 }, function (props) {
-  return props.mode && props.mode === Mode.Standard && "\n    box-radius: ".concat("var(--ds-radius-100, 3px)", ";\n    box-shadow: ", "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(colors.N40, ", 0 0 8px ").concat(colors.N40), ")"), ";\n    width: ", getWidth(props.cols) + gridSize(), "px;\n  ");
+  return props.mode && props.mode === Mode.Standard && "\n    box-radius: ".concat("var(--ds-border-radius-100, 3px)", ";\n    box-shadow: ", "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(colors.N40, ", 0 0 8px ").concat(colors.N40), ")"), ";\n    width: ", getWidth(props.cols) + gridSize(), "px;\n  ");
 });

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/color-picker",
-	"version": "3.1.3"
+	"version": "3.1.4"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/color-picker",
-  "version": "3.1.3",
+  "version": "3.1.4",
   "description": "Jira Color Picker Component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,9 +31,10 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/select": "^16.2.0",
+    "@atlaskit/select": "^16.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.14.0",
+    "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",
     "memoize-one": "^6.0.0",
     "styled-components": "^3.2.6"
@@ -42,12 +43,11 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/docs": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.4.3",
     "ast-types": "^0.13.3",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.15.1",
     "jscodeshift": "^0.13.0",
     "react": "^16.8.0",
     "typescript": "~4.9.5"