@atlaskit/color-picker 1.2.3 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/color-picker
 
+## 1.3.0
+
+### Minor Changes
+
+- [`10b517acfea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/10b517acfea) - [ux] Updated how the darker border for each colour block is rendered by using css instead of `darken()`
+
+## 1.2.6
+
+### Patch Changes
+
+- [`b85e7ce12cd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b85e7ce12cd) - Internal upgrade of memoize-one to 6.0.0
+
+## 1.2.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.2.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.2.3
 
 ### Patch Changes

package/build/tsconfig.json

@@ -9,5 +9,9 @@
     "../src/**/*.ts",
     "../src/**/*.tsx"
   ],
-  "exclude": ["../src/**/__tests__/*"]
-}
+  "exclude": [
+    "../src/**/__tests__/*",
+    "../src/**/*.test.*",
+    "../src/**/test.*"
+  ]
+}

package/dist/cjs/components/ColorPicker.js

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

package/dist/cjs/components/components.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Placeholder = exports.DropdownIndicator = exports.Option = exports.MenuList = void 0;
+exports.Placeholder = exports.Option = exports.MenuList = exports.DropdownIndicator = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -19,11 +19,13 @@ var _utils = require("../utils");
 
 var _ColorPalette = require("../styled/ColorPalette");
 
+var _excluded = ["cx", "selectProps", "innerRef"];
+
 var MenuList = function MenuList(props) {
   var cx = props.cx,
       cols = props.selectProps.cols,
       innerRef = props.innerRef,
-      rest = (0, _objectWithoutProperties2.default)(props, ["cx", "selectProps", "innerRef"]);
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   return /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorPaletteContainer, (0, _extends2.default)({
     role: "grid",
     style: {

package/dist/cjs/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.KEY_ENTER = exports.KEY_SPACE = exports.COLOR_CARD_SIZE = void 0;
+exports.KEY_SPACE = exports.KEY_ENTER = exports.COLOR_CARD_SIZE = void 0;
 var COLOR_CARD_SIZE = 30;
 exports.COLOR_CARD_SIZE = COLOR_CARD_SIZE;
 var KEY_SPACE = ' ';

package/dist/cjs/index.js

@@ -5,10 +5,10 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "ColorPickerWithoutAnalytics", {
+Object.defineProperty(exports, "ColorPaletteMenu", {
   enumerable: true,
   get: function get() {
-    return _ColorPicker.ColorPickerWithoutAnalytics;
+    return _ColorPaletteMenu.default;
   }
 });
 Object.defineProperty(exports, "ColorPaletteMenuWithoutAnalytics", {
@@ -17,13 +17,13 @@ Object.defineProperty(exports, "ColorPaletteMenuWithoutAnalytics", {
     return _ColorPaletteMenu.ColorPaletteMenuWithoutAnalytics;
   }
 });
-Object.defineProperty(exports, "ColorPaletteMenu", {
+Object.defineProperty(exports, "ColorPickerWithoutAnalytics", {
   enumerable: true,
   get: function get() {
-    return _ColorPaletteMenu.default;
+    return _ColorPicker.ColorPickerWithoutAnalytics;
   }
 });
-exports.Compact = exports.Standard = exports.default = void 0;
+exports.default = exports.Standard = exports.Compact = void 0;
 
 var _ColorPicker = _interopRequireWildcard(require("./components/ColorPicker"));
 

package/dist/cjs/styled/ColorCard.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ColorCardContent = exports.ColorCardButton = exports.ColorCardOption = void 0;
+exports.ColorCardOption = exports.ColorCardContent = exports.ColorCardButton = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -17,8 +17,6 @@ var _theme = require("@atlaskit/theme");
 
 var _constants = require("../constants");
 
-var _darken = _interopRequireDefault(require("polished/lib/color/darken"));
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 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); }
@@ -44,10 +42,8 @@ var ColorCardButton = _styledComponents.default.button(_templateObject3 || (_tem
 
 exports.ColorCardButton = ColorCardButton;
 
-var ColorCardContent = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  width: 22px;\n  height: 22px;\n  border-radius: ", "px;\n  background: ", ";\n  border: solid 1px ", ";\n"])), (0, _theme.borderRadius)(), function (props) {
+var ColorCardContent = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  width: 22px;\n  height: 22px;\n  border-radius: ", "px;\n  background: ", ";\n  border: 1px solid hsla(0, 0%, 0%, 0.2);\n"])), (0, _theme.borderRadius)(), function (props) {
   return props.color;
-}, function (props) {
-  return (0, _darken.default)(0.1, props.color);
 });
 
 exports.ColorCardContent = ColorCardContent;

package/dist/cjs/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getOptions = exports.getWidth = void 0;
+exports.getWidth = exports.getOptions = void 0;
 
 var _theme = require("@atlaskit/theme");
 

package/dist/cjs/version.json

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

package/dist/es2019/components/ColorPicker.js

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

package/dist/es2019/styled/ColorCard.js

@@ -2,9 +2,7 @@ import styled, { css } from 'styled-components'; // AFP-2532 TODO: Fix automatic
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { borderRadius, colors } from '@atlaskit/theme';
-import { COLOR_CARD_SIZE } from '../constants'; // polished has problems tree-shaking https://github.com/styled-components/polished/issues/478
-
-import darken from 'polished/lib/color/darken';
+import { COLOR_CARD_SIZE } from '../constants';
 const buttonFocusedBorder = `border-color: ${colors.B100};`;
 const sharedColorContainerStyles = css`
   display: inline-block;
@@ -58,5 +56,5 @@ export const ColorCardContent = styled.div`
   height: 22px;
   border-radius: ${borderRadius()}px;
   background: ${props => props.color};
-  border: solid 1px ${props => darken(0.1, props.color)};
+  border: 1px solid hsla(0, 0%, 0%, 0.2);
 `;

package/dist/es2019/version.json

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

package/dist/esm/components/ColorPicker.js

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

package/dist/esm/components/components.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["cx", "selectProps", "innerRef"];
 import React from 'react';
 import ColorCard from './ColorCard';
 import { getWidth } from '../utils';
@@ -8,7 +9,7 @@ export var MenuList = function MenuList(props) {
   var cx = props.cx,
       cols = props.selectProps.cols,
       innerRef = props.innerRef,
-      rest = _objectWithoutProperties(props, ["cx", "selectProps", "innerRef"]);
+      rest = _objectWithoutProperties(props, _excluded);
 
   return /*#__PURE__*/React.createElement(ColorPaletteContainer, _extends({
     role: "grid",

package/dist/esm/styled/ColorCard.js

@@ -6,9 +6,7 @@ import styled, { css } from 'styled-components'; // AFP-2532 TODO: Fix automatic
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { borderRadius, colors } from '@atlaskit/theme';
-import { COLOR_CARD_SIZE } from '../constants'; // polished has problems tree-shaking https://github.com/styled-components/polished/issues/478
-
-import darken from 'polished/lib/color/darken';
+import { COLOR_CARD_SIZE } from '../constants';
 var buttonFocusedBorder = "border-color: ".concat(colors.B100, ";");
 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  &:hover,\n  &:focus {\n    border-color: ", ";\n  }\n"])), COLOR_CARD_SIZE, COLOR_CARD_SIZE, borderRadius() * 2, colors.B75);
 export var ColorCardOption = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n\n  ", ";\n"])), sharedColorContainerStyles, function (props) {
@@ -21,8 +19,6 @@ export var ColorCardButton = styled.button(_templateObject3 || (_templateObject3
     return buttonFocusedBorder;
   }
 });
-export var ColorCardContent = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  width: 22px;\n  height: 22px;\n  border-radius: ", "px;\n  background: ", ";\n  border: solid 1px ", ";\n"])), borderRadius(), function (props) {
+export var ColorCardContent = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  width: 22px;\n  height: 22px;\n  border-radius: ", "px;\n  background: ", ";\n  border: 1px solid hsla(0, 0%, 0%, 0.2);\n"])), borderRadius(), function (props) {
   return props.color;
-}, function (props) {
-  return darken(0.1, props.color);
 });

package/dist/esm/version.json

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

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MenuListComponentProps, OptionProps } from '@atlaskit/select';
 import { Color } from '../types';
 export declare const MenuList: (props: MenuListComponentProps<Color>) => JSX.Element;

package/dist/types/utils.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/color-picker",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "description": "Jira Color Picker Component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -21,13 +21,12 @@
     }
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/icon": "^21.6.0",
-    "@atlaskit/select": "^14.0.0",
-    "@atlaskit/theme": "^11.0.0",
+    "@atlaskit/analytics-next": "^8.2.0",
+    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/select": "^15.0.0",
+    "@atlaskit/theme": "^12.1.0",
     "@babel/runtime": "^7.0.0",
-    "memoize-one": "^5.1.0",
-    "polished": "1.9.3",
+    "memoize-one": "^6.0.0",
     "styled-components": "^3.2.6"
   },
   "peerDependencies": {
@@ -40,7 +39,7 @@
     "ast-types": "^0.13.3",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
-    "jscodeshift": "^0.11.0",
+    "jscodeshift": "^0.13.0",
     "react": "^16.8.0",
     "typescript": "3.9.6"
   },