@atlaskit/status 1.2.2 → 1.2.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/status
 
+## 1.2.3
+
+### Patch Changes
+
+- [`a6900fd8727`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a6900fd8727) - DSP-6671 - Separates icon and border color and adds semantic tokens to status color palette. Updated appearances only visible in applications configured to use the new Tokens API (currently in alpha).
+
 ## 1.2.2
 
 ### Patch Changes

package/dist/cjs/components/analytics.js

@@ -16,7 +16,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var ELEMENTS_CHANNEL = 'fabric-elements';
 exports.ELEMENTS_CHANNEL = ELEMENTS_CHANNEL;
 var packageName = "@atlaskit/status";
-var packageVersion = "1.2.2";
+var packageVersion = "1.2.3";
 
 var createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {

package/dist/cjs/components/internal/color-palette.js

@@ -31,8 +31,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-// color value, label, background, borderColor
-var palette = [['neutral', (0, _tokens.token)('color.background.neutral', colors.N40), (0, _tokens.token)('color.text', colors.N400)], ['purple', (0, _tokens.token)('color.background.discovery', colors.P50), (0, _tokens.token)('color.text.discovery', colors.P400)], ['blue', (0, _tokens.token)('color.background.information', colors.B50), (0, _tokens.token)('color.text.information', colors.B400)], ['red', (0, _tokens.token)('color.background.danger', colors.R50), (0, _tokens.token)('color.text.danger', colors.R400)], ['yellow', (0, _tokens.token)('color.background.warning', colors.Y50), (0, _tokens.token)('color.text.warning', colors.Y400)], ['green', (0, _tokens.token)('color.background.success', colors.G50), (0, _tokens.token)('color.text.success', colors.G400)]];
+var palette = [['neutral', (0, _tokens.token)('color.background.neutral', colors.N40), (0, _tokens.token)('color.border.bold', colors.N400), (0, _tokens.token)('color.icon', colors.N400)], ['purple', (0, _tokens.token)('color.background.discovery', colors.P50), (0, _tokens.token)('color.border.discovery', colors.P400), (0, _tokens.token)('color.icon.discovery', colors.P400)], ['blue', (0, _tokens.token)('color.background.information', colors.B50), (0, _tokens.token)('color.border.information', colors.B400), (0, _tokens.token)('color.icon.information', colors.B400)], ['red', (0, _tokens.token)('color.background.danger', colors.R50), (0, _tokens.token)('color.border.danger', colors.R400), (0, _tokens.token)('color.icon.danger', colors.R400)], ['yellow', (0, _tokens.token)('color.background.warning', colors.Y50), (0, _tokens.token)('color.border.warning', colors.Y400), (0, _tokens.token)('color.icon.warning', colors.Y400)], ['green', (0, _tokens.token)('color.background.success', colors.G50), (0, _tokens.token)('color.border.success', colors.G400), (0, _tokens.token)('color.icon.success', colors.G400)]];
 var colorPaletteWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", "px ", "px 0 ", "px;\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n  flex-wrap: wrap;\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)(), (0, _constants.gridSize)());
 var VK_LEFT = 37; //ArrowLeft
 
@@ -123,16 +122,18 @@ var _default = function _default(_ref) {
       },
       onKeyDown: memoizedHandleKeyDown
     }, palette.map(function (_ref4, i) {
-      var _ref5 = (0, _slicedToArray2.default)(_ref4, 3),
+      var _ref5 = (0, _slicedToArray2.default)(_ref4, 4),
           colorValue = _ref5[0],
           backgroundColor = _ref5[1],
-          borderColor = _ref5[2];
+          borderColor = _ref5[2],
+          iconColor = _ref5[3];
 
       return (0, _react2.jsx)(_color.default, {
         key: colorValue,
         value: colorValue,
         backgroundColor: backgroundColor,
         borderColor: borderColor,
+        iconColor: iconColor,
         onClick: onClick,
         onHover: onHover,
         isSelected: colorValue === selectedColor,

package/dist/cjs/components/internal/color.js

@@ -107,6 +107,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           backgroundColor = _this$props2.backgroundColor,
           isSelected = _this$props2.isSelected,
           borderColor = _this$props2.borderColor,
+          iconColor = _this$props2.iconColor,
           value = _this$props2.value,
           setRef = _this$props2.setRef;
       return (0, _react2.jsx)("span", {
@@ -132,7 +133,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           },
           ref: setRef
         }, isSelected && (0, _react2.jsx)(_done.default, {
-          primaryColor: borderColor,
+          primaryColor: iconColor,
           label: labels[0]
         }));
       }));

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/status",
-	"version": "1.2.2"
+	"version": "1.2.3"
 }

package/dist/es2019/components/analytics.js

@@ -1,6 +1,6 @@
 export const ELEMENTS_CHANNEL = 'fabric-elements';
 const packageName = "@atlaskit/status";
-const packageVersion = "1.2.2";
+const packageVersion = "1.2.3";
 export const createStatusAnalyticsAndFire = createAnalyticsEvent => payload => {
   const statusPayload = { ...payload,
     eventType: 'ui'

package/dist/es2019/components/internal/color-palette.js

@@ -4,9 +4,8 @@ import * as colors from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import React, { useEffect, useRef, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
-import Color from './color'; // color value, label, background, borderColor
-
-const palette = [['neutral', token('color.background.neutral', colors.N40), token('color.text', colors.N400)], ['purple', token('color.background.discovery', colors.P50), token('color.text.discovery', colors.P400)], ['blue', token('color.background.information', colors.B50), token('color.text.information', colors.B400)], ['red', token('color.background.danger', colors.R50), token('color.text.danger', colors.R400)], ['yellow', token('color.background.warning', colors.Y50), token('color.text.warning', colors.Y400)], ['green', token('color.background.success', colors.G50), token('color.text.success', colors.G400)]];
+import Color from './color';
+const palette = [['neutral', token('color.background.neutral', colors.N40), token('color.border.bold', colors.N400), token('color.icon', colors.N400)], ['purple', token('color.background.discovery', colors.P50), token('color.border.discovery', colors.P400), token('color.icon.discovery', colors.P400)], ['blue', token('color.background.information', colors.B50), token('color.border.information', colors.B400), token('color.icon.information', colors.B400)], ['red', token('color.background.danger', colors.R50), token('color.border.danger', colors.R400), token('color.icon.danger', colors.R400)], ['yellow', token('color.background.warning', colors.Y50), token('color.border.warning', colors.Y400), token('color.icon.warning', colors.Y400)], ['green', token('color.background.success', colors.G50), token('color.border.success', colors.G400), token('color.icon.success', colors.G400)]];
 const colorPaletteWrapperStyles = css`
   margin: ${gridSize()}px ${gridSize()}px 0 ${gridSize()}px;
   /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */
@@ -91,12 +90,13 @@ export default (({
         maxWidth: cols * 32
       },
       onKeyDown: memoizedHandleKeyDown
-    }, palette.map(([colorValue, backgroundColor, borderColor], i) => {
+    }, palette.map(([colorValue, backgroundColor, borderColor, iconColor], i) => {
       return jsx(Color, {
         key: colorValue,
         value: colorValue,
         backgroundColor: backgroundColor,
         borderColor: borderColor,
+        iconColor: iconColor,
         onClick: onClick,
         onHover: onHover,
         isSelected: colorValue === selectedColor,

package/dist/es2019/components/internal/color.js

@@ -76,6 +76,7 @@ export default class Color extends PureComponent {
       backgroundColor,
       isSelected,
       borderColor,
+      iconColor,
       value,
       setRef
     } = this.props;
@@ -101,7 +102,7 @@ export default class Color extends PureComponent {
       },
       ref: setRef
     }, isSelected && jsx(EditorDoneIcon, {
-      primaryColor: borderColor,
+      primaryColor: iconColor,
       label: labels[0]
     }))));
   }

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/status",
-	"version": "1.2.2"
+	"version": "1.2.3"
 }

package/dist/esm/components/analytics.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 export var ELEMENTS_CHANNEL = 'fabric-elements';
 var packageName = "@atlaskit/status";
-var packageVersion = "1.2.2";
+var packageVersion = "1.2.3";
 export var createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {
     var statusPayload = _objectSpread(_objectSpread({}, payload), {}, {

package/dist/esm/components/internal/color-palette.js

@@ -9,9 +9,8 @@ import * as colors from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import React, { useEffect, useRef, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
-import Color from './color'; // color value, label, background, borderColor
-
-var palette = [['neutral', token('color.background.neutral', colors.N40), token('color.text', colors.N400)], ['purple', token('color.background.discovery', colors.P50), token('color.text.discovery', colors.P400)], ['blue', token('color.background.information', colors.B50), token('color.text.information', colors.B400)], ['red', token('color.background.danger', colors.R50), token('color.text.danger', colors.R400)], ['yellow', token('color.background.warning', colors.Y50), token('color.text.warning', colors.Y400)], ['green', token('color.background.success', colors.G50), token('color.text.success', colors.G400)]];
+import Color from './color';
+var palette = [['neutral', token('color.background.neutral', colors.N40), token('color.border.bold', colors.N400), token('color.icon', colors.N400)], ['purple', token('color.background.discovery', colors.P50), token('color.border.discovery', colors.P400), token('color.icon.discovery', colors.P400)], ['blue', token('color.background.information', colors.B50), token('color.border.information', colors.B400), token('color.icon.information', colors.B400)], ['red', token('color.background.danger', colors.R50), token('color.border.danger', colors.R400), token('color.icon.danger', colors.R400)], ['yellow', token('color.background.warning', colors.Y50), token('color.border.warning', colors.Y400), token('color.icon.warning', colors.Y400)], ['green', token('color.background.success', colors.G50), token('color.border.success', colors.G400), token('color.icon.success', colors.G400)]];
 var colorPaletteWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: ", "px ", "px 0 ", "px;\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n  flex-wrap: wrap;\n"])), gridSize(), gridSize(), gridSize());
 var VK_LEFT = 37; //ArrowLeft
 
@@ -101,16 +100,18 @@ export default (function (_ref) {
       },
       onKeyDown: memoizedHandleKeyDown
     }, palette.map(function (_ref4, i) {
-      var _ref5 = _slicedToArray(_ref4, 3),
+      var _ref5 = _slicedToArray(_ref4, 4),
           colorValue = _ref5[0],
           backgroundColor = _ref5[1],
-          borderColor = _ref5[2];
+          borderColor = _ref5[2],
+          iconColor = _ref5[3];
 
       return jsx(Color, {
         key: colorValue,
         value: colorValue,
         backgroundColor: backgroundColor,
         borderColor: borderColor,
+        iconColor: iconColor,
         onClick: onClick,
         onHover: onHover,
         isSelected: colorValue === selectedColor,

package/dist/esm/components/internal/color.js

@@ -84,6 +84,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           backgroundColor = _this$props2.backgroundColor,
           isSelected = _this$props2.isSelected,
           borderColor = _this$props2.borderColor,
+          iconColor = _this$props2.iconColor,
           value = _this$props2.value,
           setRef = _this$props2.setRef;
       return jsx("span", {
@@ -109,7 +110,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           },
           ref: setRef
         }, isSelected && jsx(EditorDoneIcon, {
-          primaryColor: borderColor,
+          primaryColor: iconColor,
           label: labels[0]
         }));
       }));

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/status",
-	"version": "1.2.2"
+	"version": "1.2.3"
 }

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

@@ -9,6 +9,7 @@ export interface ColorProps {
     onHover?: (value: ColorType) => void;
     backgroundColor: string;
     borderColor: string;
+    iconColor: string;
     setRef?: (value: HTMLButtonElement) => HTMLButtonElement;
 }
 export default class Color extends PureComponent<ColorProps> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/status",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Fabric Status React Components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/report.api.md

@@ -1,12 +1,17 @@
+<!-- API Report Version: 2.2 -->
+
 ## API Report File for "@atlaskit/status"
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
 
-<!--
-	Generated API Report version: 2.0
--->
+- [Main Entry Types](#main-entry-types)
 
-[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
 
 ```ts
 import { default as React_2 } from 'react';
@@ -15,7 +20,7 @@ import { WithIntlProps } from 'react-intl-next';
 import { WrappedComponentProps } from 'react-intl-next';
 
 // @public (undocumented)
-export type Color = 'neutral' | 'purple' | 'blue' | 'red' | 'yellow' | 'green';
+export type Color = 'blue' | 'green' | 'neutral' | 'purple' | 'red' | 'yellow';
 
 // @public (undocumented)
 type ColorType = Color;
@@ -78,3 +83,5 @@ export type StatusStyle = 'bold' | 'subtle';
 
 // (No @packageDocumentation comment for this package)
 ```
+
+<!--SECTION END: Main Entry Types-->