@atlaskit/color-picker 3.2.10 → 3.2.12

package/dist/es2019/utils.js

@@ -1,12 +1,12 @@
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { gridSize } from '@atlaskit/theme';
-import { COLOR_CARD_SIZE, COLOR_CARD_SIZE_NEW } from './constants';
+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 * ((getBooleanFF('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? COLOR_CARD_SIZE_NEW : COLOR_CARD_SIZE) + gridSize() / 2);
+  const width = cols * (COLOR_CARD_SIZE + gridSize() / 2);
   return mode === Mode.Standard ? width + gridSize() : width;
 };
 export const getOptions = memoizeOne((palette, selectedColor, showDefaultSwatchColor) => {

package/dist/esm/components/ColorCard.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useRef } from 'react';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import Tooltip from '@atlaskit/tooltip';
-import { COLOR_CARD_SIZE, KEY_ENTER, KEY_SPACE } from '../constants';
+import { KEY_ENTER, KEY_SPACE } from '../constants';
 import { css, jsx } from '@emotion/react';
 import { N0, DN600A, B75 } from '@atlaskit/theme/colors';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -52,34 +52,7 @@ var ColorCard = function ColorCard(props) {
       };
     }
   }, []);
-  return getBooleanFF('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? jsx(Tooltip, {
-    content: label
-  }, jsx("div", _extends({
-    css: [sharedColorContainerStylesNew, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
-    onClick: handleClick,
-    onMouseDown: handleMouseDown,
-    onKeyDown: handleKeyDown,
-    role: "radio",
-    "aria-checked": selected
-  }, !getBooleanFF('platform.jca11y-1559-dashboard-view-dashboard-remove-duplicate-aria-label_g5i3i') && {
-    'aria-label': label
-  }, {
-    tabIndex: 0
-  }, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && {
-    ref: ref
-  }), jsx("div", {
-    css: colorCardWrapperStylesNew
-  }, jsx("div", {
-    css: colorCardContentStylesNew,
-    style: {
-      background: value || 'transparent'
-    }
-  }, selected && jsx("div", {
-    css: colorCardContentCheckMarkStyles
-  }, jsx(EditorDoneIcon, {
-    primaryColor: checkMarkColor,
-    label: ""
-  })))))) : jsx(Tooltip, {
+  return jsx(Tooltip, {
     content: label
   }, jsx("div", _extends({
     css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
@@ -87,14 +60,13 @@ var ColorCard = function ColorCard(props) {
     onMouseDown: handleMouseDown,
     onKeyDown: handleKeyDown,
     role: "radio",
-    "aria-checked": selected
-  }, !getBooleanFF('platform.jca11y-1559-dashboard-view-dashboard-remove-duplicate-aria-label_g5i3i') && {
-    'aria-label': label
-  }, {
+    "aria-checked": selected,
     tabIndex: 0
   }, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && {
     ref: ref
   }), jsx("div", {
+    css: colorCardWrapperStyles
+  }, jsx("div", {
     css: colorCardContentStyles,
     style: {
       background: value || 'transparent'
@@ -104,24 +76,9 @@ var ColorCard = function ColorCard(props) {
   }, jsx(EditorDoneIcon, {
     primaryColor: checkMarkColor,
     label: ""
-  })))));
+  }))))));
 };
 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',
-  transition: 'border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
-  backgroundColor: "var(--ds-background-neutral-subtle, ".concat(N0, ")"),
-  borderColor: "var(--ds-background-neutral-subtle, ".concat(N0, ")"),
-  padding: "var(--ds-space-0, 0px)",
-  cursor: 'pointer',
-  outline: 'none'
-});
 var colorCardOptionTabbingStyles = css({
   ':hover, :focus': {
     borderColor: "var(--ds-border-focused, ".concat(B75, ")")
@@ -130,20 +87,11 @@ var colorCardOptionTabbingStyles = css({
 var colorCardOptionFocusedStyles = css({
   borderColor: "var(--ds-border-focused, ".concat(B75, ")")
 });
-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 colorCardContentCheckMarkStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   margin: '1px'
 });
-var sharedColorContainerStylesNew = css({
+var sharedColorContainerStyles = css({
   display: 'inline-block',
   position: 'relative',
   width: "var(--ds-space-400, 32px)",
@@ -158,14 +106,14 @@ var sharedColorContainerStylesNew = css({
   cursor: 'pointer',
   outline: 'none'
 });
-var colorCardWrapperStylesNew = css({
+var colorCardWrapperStyles = css({
   width: '100%',
   height: '100%',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center'
 });
-var colorCardContentStylesNew = css({
+var colorCardContentStyles = css({
   width: "var(--ds-space-300, 24px)",
   height: "var(--ds-space-300, 24px)",
   borderRadius: "var(--ds-border-radius-100, 3px)",

package/dist/esm/components/ColorPaletteMenu.js

@@ -4,9 +4,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import ColorCard from './ColorCard';
 import { getOptions, getWidth } from '../utils';
 import { css, jsx } from '@emotion/react';
-import { COLOR_CARD_SIZE } from '../constants';
 import { N0, N40 } from '@atlaskit/theme/colors';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAnalytics(_ref) {
   var createAnalyticsEvent = _ref.createAnalyticsEvent,
     onChange = _ref.onChange,
@@ -28,7 +26,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.10"
+          packageVersion: "3.2.12"
         }
       })(createAnalyticsEvent);
     }
@@ -54,7 +52,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
     var label = _ref2.label,
       value = _ref2.value;
     return jsx("div", {
-      css: getBooleanFF('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? colorCardWrapperStyles : colorCardWrapperStylesOld,
+      css: colorCardWrapperStyles,
       key: value
     }, jsx(ColorCard, {
       label: label,
@@ -70,13 +68,8 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.10"
+  packageVersion: "3.2.12"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
-var colorCardWrapperStylesOld = css({
-  display: 'flex',
-  margin: "var(--ds-space-025, 2px)",
-  height: "".concat(COLOR_CARD_SIZE, "px")
-});
 var colorCardWrapperStyles = css({
   display: 'flex',
   margin: "var(--ds-space-025, 2px)",

package/dist/esm/components/ColorPicker.js

@@ -31,7 +31,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.2.10";
+var packageVersion = "3.2.12";
 var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
   _inherits(ColorPickerWithoutAnalyticsBase, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalyticsBase);

package/dist/esm/components/Trigger.js

@@ -3,7 +3,6 @@ import _extends from "@babel/runtime/helpers/extends";
 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) {
@@ -24,31 +23,7 @@ var ColorCard = function ColorCard(_ref) {
       onClick();
     }
   }, [onClick]);
-  return getBooleanFF('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? jsx(Tooltip, {
-    content: label
-  }, jsx("button", _extends({}, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') ? {
-    css: [sharedColorContainerStyles, swatchSize === 'small' ? smallColorContainerSizeNew : defaultColorContainerSizeNew, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
-    disabled: isDisabled
-  } : {
-    css: [sharedColorContainerStyles, defaultColorContainerSizeNew, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles]
-  }, {
-    onClick: handleClick,
-    onMouseDown: handleMouseDown,
-    "aria-label": label,
-    "aria-expanded": expanded,
-    "aria-haspopup": true,
-    type: "button"
-  }), jsx("span", {
-    css: colorCardWrapperStylesNew
-  }, jsx("span", _extends({}, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') ? {
-    css: [colorCardContentStylesNew, swatchSize === 'small' ? smallColorCardContentSize : defaultColorCardContentSize]
-  } : {
-    css: [colorCardContentStylesNew, defaultColorCardContentSize]
-  }, {
-    style: {
-      background: value || 'transparent'
-    }
-  }))))) : jsx(Tooltip, {
+  return jsx(Tooltip, {
     content: label
   }, jsx("button", _extends({}, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') ? {
     css: [sharedColorContainerStyles, swatchSize === 'small' ? smallColorContainerSize : defaultColorContainerSize, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
@@ -62,7 +37,9 @@ var ColorCard = function ColorCard(_ref) {
     "aria-expanded": expanded,
     "aria-haspopup": true,
     type: "button"
-  }), jsx("span", _extends({}, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') ? {
+  }), jsx("span", {
+    css: colorCardWrapperStyles
+  }, jsx("span", _extends({}, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') ? {
     css: [colorCardContentStyles, swatchSize === 'small' ? smallColorCardContentSize : defaultColorCardContentSize]
   } : {
     css: [colorCardContentStyles, defaultColorCardContentSize]
@@ -70,7 +47,7 @@ var ColorCard = function ColorCard(_ref) {
     style: {
       background: value || 'transparent'
     }
-  }))));
+  })))));
 };
 export default ColorCard;
 var sharedColorContainerStyles = css({
@@ -87,20 +64,11 @@ var sharedColorContainerStyles = css({
   outline: 'none'
 });
 var smallColorContainerSize = css({
-  width: '22px',
-  height: '22px',
-  top: "var(--ds-space-negative-025, -2px)"
-});
-var smallColorContainerSizeNew = css({
   width: "var(--ds-space-300, 24px)",
   height: "var(--ds-space-300, 24px)",
   top: "var(--ds-space-negative-025, -2px)"
 });
 var defaultColorContainerSize = css({
-  width: "".concat(COLOR_CARD_SIZE, "px"),
-  height: "".concat(COLOR_CARD_SIZE, "px")
-});
-var defaultColorContainerSizeNew = css({
   width: "var(--ds-space-400, 32px)",
   height: "var(--ds-space-400, 32px)"
 });
@@ -117,21 +85,14 @@ var colorCardButtonFocusedStyles = css({
   borderColor: "var(--ds-border-focused, ".concat(B100, ")"),
   outline: 'none'
 });
-var colorCardContentStyles = css({
-  position: 'absolute',
-  top: '1px',
-  left: '1px',
-  borderRadius: "var(--ds-border-radius-100, 3px)",
-  boxShadow: "inset 0px 0px 0px 1px ".concat("var(--ds-background-inverse-subtle, ".concat(DN600A, ")"))
-});
-var colorCardWrapperStylesNew = css({
+var colorCardWrapperStyles = css({
   width: '100%',
   height: '100%',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center'
 });
-var colorCardContentStylesNew = css({
+var colorCardContentStyles = css({
   borderRadius: "var(--ds-border-radius-100, 3px)",
   boxShadow: "inset 0px 0px 0px 1px ".concat("var(--ds-background-inverse-subtle, ".concat(DN600A, ")"))
 });

package/dist/esm/components/components.js

@@ -3,9 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 import ColorCard from './ColorCard';
 import { getWidth } from '../utils';
-import { COLOR_CARD_SIZE } from '../constants';
 import { css, jsx } from '@emotion/react';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var MenuList = function MenuList(props) {
   var cols = props.selectProps.cols,
     innerRef = props.innerRef,
@@ -31,7 +29,7 @@ export var Option = function Option(props) {
     isSelected = props.isSelected,
     innerProps = props.innerProps;
   return jsx("div", _extends({
-    css: getBooleanFF('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? colorCardWrapperStyles : colorCardWrapperStylesOld
+    css: colorCardWrapperStyles
   }, innerProps), jsx(ColorCard, {
     label: label,
     value: value,
@@ -51,11 +49,6 @@ export var DropdownIndicator = function DropdownIndicator() {
 export var Placeholder = function Placeholder() {
   return null;
 };
-var colorCardWrapperStylesOld = css({
-  display: 'flex',
-  margin: "var(--ds-space-025, 2px)",
-  height: "".concat(COLOR_CARD_SIZE, "px")
-});
 var colorCardWrapperStyles = css({
   display: 'flex',
   margin: "var(--ds-space-025, 2px)",

package/dist/esm/constants.js

@@ -1,5 +1,4 @@
-export var COLOR_CARD_SIZE = 30;
-export var COLOR_CARD_SIZE_NEW = 32;
+export var COLOR_CARD_SIZE = 32;
 export var KEY_SPACE = ' ';
 export var KEY_ENTER = 'Enter';
 export var KEY_ARROW_UP = 'ArrowDown';

package/dist/esm/utils.js

@@ -1,12 +1,12 @@
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { gridSize } from '@atlaskit/theme';
-import { COLOR_CARD_SIZE, COLOR_CARD_SIZE_NEW } from './constants';
+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 * ((getBooleanFF('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? COLOR_CARD_SIZE_NEW : COLOR_CARD_SIZE) + gridSize() / 2);
+  var width = cols * (COLOR_CARD_SIZE + gridSize() / 2);
   return mode === Mode.Standard ? width + gridSize() : width;
 };
 export var getOptions = memoizeOne(function (palette, selectedColor, showDefaultSwatchColor) {

package/dist/types/constants.d.ts

@@ -1,5 +1,4 @@
-export declare const COLOR_CARD_SIZE = 30;
-export declare const COLOR_CARD_SIZE_NEW = 32;
+export declare const COLOR_CARD_SIZE = 32;
 export declare const KEY_SPACE = " ";
 export declare const KEY_ENTER = "Enter";
 export declare const KEY_ARROW_UP = "ArrowDown";

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

@@ -1,5 +1,4 @@
-export declare const COLOR_CARD_SIZE = 30;
-export declare const COLOR_CARD_SIZE_NEW = 32;
+export declare const COLOR_CARD_SIZE = 32;
 export declare const KEY_SPACE = " ";
 export declare const KEY_ENTER = "Enter";
 export declare const KEY_ARROW_UP = "ArrowDown";

package/docs/0-intro.tsx

@@ -8,7 +8,6 @@ import {
   DevPreviewWarning,
 } from '@atlaskit/docs';
 import { Box, xcss } from '@atlaskit/primitives';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 const marginBottomStyles = xcss({
   marginBottom: 'space.100',
@@ -19,29 +18,16 @@ const marginTopStyles = xcss({
 });
 
 export default md`
-${
-  getBooleanFF(
-    'platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl',
-  ) ? (
-    <>
-      <Box xcss={marginBottomStyles}>
-        <AtlassianInternalWarning />
-      </Box>
-      <Box xcss={marginTopStyles}>
-        <DevPreviewWarning />
-      </Box>
-    </>
-  ) : (
-    <>
-      <div style={{ marginBottom: '0.5rem' }}>
-        <AtlassianInternalWarning />
-      </div>
-      <div style={{ marginTop: '0.5rem' }}>
-        <DevPreviewWarning />
-      </div>
-    </>
-  )
-}
+${(
+  <>
+    <Box xcss={marginBottomStyles}>
+      <AtlassianInternalWarning />
+    </Box>
+    <Box xcss={marginTopStyles}>
+      <DevPreviewWarning />
+    </Box>
+  </>
+)}
 
 This component allows to pick colors from color palette.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/color-picker",
-  "version": "3.2.10",
+  "version": "3.2.12",
   "description": "Jira Color Picker Component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,10 +35,10 @@
     "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.5",
-    "@atlaskit/select": "^17.6.0",
+    "@atlaskit/select": "^17.9.0",
     "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.44.0",
-    "@atlaskit/tooltip": "^18.2.0",
+    "@atlaskit/tokens": "^1.45.0",
+    "@atlaskit/tooltip": "^18.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "memoize-one": "^6.0.0",
@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "@af/visual-regression": "*",
-    "@atlaskit/primitives": "^5.6.0",
+    "@atlaskit/primitives": "^6.1.0",
     "@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",
@@ -82,14 +82,8 @@
     "platform.color-picker-radio-button-functionality_6hkcy": {
       "type": "boolean"
     },
-    "platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl": {
-      "type": "boolean"
-    },
     "platform.jca11y-1480-inappropriate-label-for-color-picker_76tfe": {
       "type": "boolean"
-    },
-    "platform.jca11y-1559-dashboard-view-dashboard-remove-duplicate-aria-label_g5i3i": {
-      "type": "boolean"
     }
   }
 }