@atlaskit/status 1.0.2 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/status
 
+## 1.1.0
+
+### Minor Changes
+
+- [`af2dcdc462f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/af2dcdc462f) - [ux] Instrumented `@atlaskit/status` with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- [`fb47a6a79ef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fb47a6a79ef) - ED-14672 Removed styled-component from status, replaced by emotion.
+- Updated dependencies
+
 ## 1.0.2
 
 ### Patch Changes

package/dist/cjs/components/Status.js

@@ -41,6 +41,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; } }
 
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var colorToLozengeAppearanceMap = {
   neutral: 'default',
   purple: 'new',
@@ -49,6 +50,8 @@ var colorToLozengeAppearanceMap = {
   yellow: 'moved',
   green: 'success'
 };
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
 var DEFAULT_APPEARANCE = 'default';
 var MAX_WIDTH = 200;
 

package/dist/cjs/components/StatusPicker.js

@@ -33,7 +33,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _colorPalette = _interopRequireDefault(require("./internal/color-palette"));
 
@@ -49,7 +49,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; } }
 
-var FieldTextWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 ", "px;\n"])), (0, _constants.gridSize)());
+var fieldTextWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 ", "px;\n"])), (0, _constants.gridSize)());
 
 var Picker = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Picker, _PureComponent);
@@ -99,9 +99,10 @@ var Picker = /*#__PURE__*/function (_PureComponent) {
           intl = _this$props.intl; // Using <React.Fragment> instead of [] to workaround Enzyme
       // (https://github.com/airbnb/enzyme/issues/1149)
 
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FieldTextWrapper, {
+      return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
+        css: fieldTextWrapperStyles,
         key: this.fieldTextWrapperKey
-      }, /*#__PURE__*/_react.default.createElement(_textfield.default, {
+      }, (0, _react2.jsx)(_textfield.default, {
         value: text,
         isCompact: true,
         ref: this.handleInputRef,
@@ -110,7 +111,7 @@ var Picker = /*#__PURE__*/function (_PureComponent) {
         spellCheck: false,
         autoComplete: "off",
         "aria-label": intl.formatMessage(_i18n.messages.statusInputLabel)
-      })), /*#__PURE__*/_react.default.createElement(_colorPalette.default, {
+      })), (0, _react2.jsx)(_colorPalette.default, {
         key: this.colorPaletteKey,
         onClick: onColorClick,
         onHover: onColorHover,

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

@@ -17,9 +17,11 @@ var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _color = _interopRequireDefault(require("./color"));
 
@@ -30,10 +32,8 @@ 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', colors.N40, colors.N400], ['purple', colors.P50, colors.P400], ['blue', colors.B50, colors.B400], ['red', colors.R50, colors.R400], ['yellow', colors.Y75, colors.Y400], ['green', colors.G50, colors.G400]];
-
-var ColorPaletteWrapper = _styledComponents.default.div(_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 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.Y75), (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 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
 
 var VK_RIGHT = 39; //ArrowRight
@@ -85,33 +85,43 @@ var _default = function _default(_ref) {
     newRef === null || newRef === void 0 ? void 0 : newRef.focus();
     onClick(newColorValue);
   }, [selectedColor, onClick, colorRefs]);
-  return /*#__PURE__*/_react.default.createElement(ColorPaletteWrapper, {
-    className: className,
-    role: "radiogroup",
-    style: {
-      maxWidth: cols * 32
-    },
-    onKeyDown: memoizedHandleKeyDown
-  }, palette.map(function (_ref4, i) {
-    var _ref5 = (0, _slicedToArray2.default)(_ref4, 3),
-        colorValue = _ref5[0],
-        backgroundColor = _ref5[1],
-        borderColor = _ref5[2];
-
-    return /*#__PURE__*/_react.default.createElement(_color.default, {
-      key: colorValue,
-      value: colorValue,
-      backgroundColor: backgroundColor,
-      borderColor: borderColor,
-      onClick: onClick,
-      onHover: onHover,
-      isSelected: colorValue === selectedColor,
-      tabIndex: colorValue === selectedColor ? 0 : -1,
-      setRef: function setRef(el) {
-        return colorRefs.current[i] = el;
-      }
-    });
-  }));
+  return (
+    /**
+      We need to disable below eslint rule becuase of role "radiogroup". This role was added
+      in https://a11y-internal.atlassian.net/browse/AK-832 to fix accessibility issue.
+      When we migrated to emotion from styled component, we started getting this error.
+      Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
+     */
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+    (0, _react2.jsx)("div", {
+      css: colorPaletteWrapperStyles,
+      className: className,
+      role: "radiogroup",
+      style: {
+        maxWidth: cols * 32
+      },
+      onKeyDown: memoizedHandleKeyDown
+    }, palette.map(function (_ref4, i) {
+      var _ref5 = (0, _slicedToArray2.default)(_ref4, 3),
+          colorValue = _ref5[0],
+          backgroundColor = _ref5[1],
+          borderColor = _ref5[2];
+
+      return (0, _react2.jsx)(_color.default, {
+        key: colorValue,
+        value: colorValue,
+        backgroundColor: backgroundColor,
+        borderColor: borderColor,
+        onClick: onClick,
+        onHover: onHover,
+        isSelected: colorValue === selectedColor,
+        tabIndex: colorValue === selectedColor ? 0 : -1,
+        setRef: function setRef(el) {
+          return colorRefs.current[i] = el;
+        }
+      });
+    }))
+  );
 };
 
 exports.default = _default;

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

@@ -29,11 +29,13 @@ var _done = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/done"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _constants = require("../constants");
 
@@ -49,9 +51,8 @@ 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; } }
 
-var Button = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 24px;\n  width: 24px;\n  background: ", ";\n  padding: 0;\n  border-radius: 4px;\n  border: 1px solid ", ";\n  cursor: pointer;\n  display: block;\n  box-sizing: border-box;\n  overflow: hidden;\n"])), _colors.N900, _colors.N0);
-
-var ButtonWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid transparent;\n  margin: 0 2px;\n  font-size: 0;\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  border-radius: 6px;\n  &:hover {\n    border: 1px solid ", ";\n  }\n"])), _colors.N50);
+var buttonStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 24px;\n  width: 24px;\n  background: ", ";\n  padding: 0;\n  border-radius: 4px;\n  border: 1px solid ", ";\n  cursor: pointer;\n  display: block;\n  box-sizing: border-box;\n  overflow: hidden;\n"])), (0, _tokens.token)('color.background.neutral', _colors.N900), (0, _tokens.token)('color.border', _colors.N0));
+var buttonWrapperStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid transparent;\n  margin: 0 2px;\n  font-size: 0;\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  border-radius: 6px;\n  &:hover {\n    border: 1px solid ", ";\n  }\n"])), (0, _tokens.token)('color.border', _colors.N50));
 
 var Color = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Color, _PureComponent);
@@ -109,22 +110,29 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           value = _this$props2.value,
           setRef = _this$props2.setRef;
       var borderStyle = "1px solid ".concat(borderColor);
-      return /*#__PURE__*/_react.default.createElement(ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages["".concat(value, "Color")], function (labels) {
-        return /*#__PURE__*/_react.default.createElement(Button, {
+      return (0, _react2.jsx)("span", {
+        css: buttonWrapperStyles
+      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages["".concat(value, "Color")], function (labels) {
+        return (0, _react2.jsx)("button", {
+          css: buttonStyles,
           onClick: _this2.onClick,
           onMouseEnter: _this2.onMouseEnter,
           onMouseLeave: _this2.onMouseLeave,
           onMouseDown: _this2.onMouseDown,
           tabIndex: tabIndex,
           className: "".concat(isSelected ? 'selected' : ''),
-          title: labels[0],
-          "aria-checked": isSelected,
+          title: labels[0] // button element does not support aria-selected.
+          // For button selected (to be precise pressed) or not
+          //  use aria-pressed as per
+          // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#associated_aria_roles_states_and_properties
+          ,
+          "aria-pressed": isSelected,
           style: {
             backgroundColor: backgroundColor || 'transparent',
             border: borderStyle
           },
-          innerRef: setRef
-        }, isSelected && /*#__PURE__*/_react.default.createElement(_done.default, {
+          ref: setRef
+        }, isSelected && (0, _react2.jsx)(_done.default, {
           primaryColor: borderColor,
           label: labels[0]
         }));

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/status",
-	"version": "1.0.2"
+	"version": "1.1.0"
 }

package/dist/es2019/components/Status.js

@@ -5,6 +5,8 @@ import Lozenge from '@atlaskit/lozenge';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createStatusAnalyticsAndFire } from './analytics';
 import { ANALYTICS_HOVER_DELAY } from './constants';
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 const colorToLozengeAppearanceMap = {
   neutral: 'default',
   purple: 'new',
@@ -13,6 +15,8 @@ const colorToLozengeAppearanceMap = {
   yellow: 'moved',
   green: 'success'
 };
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
 const DEFAULT_APPEARANCE = 'default';
 const MAX_WIDTH = 200;
 

package/dist/es2019/components/StatusPicker.js

@@ -1,13 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import TextField from '@atlaskit/textfield';
 import { gridSize } from '@atlaskit/theme/constants';
-import React from 'react';
+import React, { PureComponent } from 'react';
 import { injectIntl } from 'react-intl-next';
-import { PureComponent } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import ColorPalette from './internal/color-palette';
 import { messages } from './i18n';
-const FieldTextWrapper = styled.div`
+const fieldTextWrapperStyles = css`
   margin: 0 ${gridSize()}px;
 `;
 
@@ -50,9 +51,10 @@ class Picker extends PureComponent {
     } = this.props; // Using <React.Fragment> instead of [] to workaround Enzyme
     // (https://github.com/airbnb/enzyme/issues/1149)
 
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FieldTextWrapper, {
+    return jsx(React.Fragment, null, jsx("div", {
+      css: fieldTextWrapperStyles,
       key: this.fieldTextWrapperKey
-    }, /*#__PURE__*/React.createElement(TextField, {
+    }, jsx(TextField, {
       value: text,
       isCompact: true,
       ref: this.handleInputRef,
@@ -61,7 +63,7 @@ class Picker extends PureComponent {
       spellCheck: false,
       autoComplete: "off",
       "aria-label": intl.formatMessage(messages.statusInputLabel)
-    })), /*#__PURE__*/React.createElement(ColorPalette, {
+    })), jsx(ColorPalette, {
       key: this.colorPaletteKey,
       onClick: onColorClick,
       onHover: onColorHover,

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

@@ -1,11 +1,13 @@
+/** @jsx jsx */
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import React, { useEffect, useRef, useCallback } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import Color from './color'; // color value, label, background, borderColor
 
-const palette = [['neutral', colors.N40, colors.N400], ['purple', colors.P50, colors.P400], ['blue', colors.B50, colors.B400], ['red', colors.R50, colors.R400], ['yellow', colors.Y75, colors.Y400], ['green', colors.G50, colors.G400]];
-const ColorPaletteWrapper = styled.div`
+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.Y75), token('color.text.warning', colors.Y400)], ['green', token('color.background.success', colors.G50), token('color.text.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 */
   display: flex;
@@ -57,24 +59,34 @@ export default (({
     newRef === null || newRef === void 0 ? void 0 : newRef.focus();
     onClick(newColorValue);
   }, [selectedColor, onClick, colorRefs]);
-  return /*#__PURE__*/React.createElement(ColorPaletteWrapper, {
-    className: className,
-    role: "radiogroup",
-    style: {
-      maxWidth: cols * 32
-    },
-    onKeyDown: memoizedHandleKeyDown
-  }, palette.map(([colorValue, backgroundColor, borderColor], i) => {
-    return /*#__PURE__*/React.createElement(Color, {
-      key: colorValue,
-      value: colorValue,
-      backgroundColor: backgroundColor,
-      borderColor: borderColor,
-      onClick: onClick,
-      onHover: onHover,
-      isSelected: colorValue === selectedColor,
-      tabIndex: colorValue === selectedColor ? 0 : -1,
-      setRef: el => colorRefs.current[i] = el
-    });
-  }));
+  return (
+    /**
+      We need to disable below eslint rule becuase of role "radiogroup". This role was added
+      in https://a11y-internal.atlassian.net/browse/AK-832 to fix accessibility issue.
+      When we migrated to emotion from styled component, we started getting this error.
+      Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
+     */
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+    jsx("div", {
+      css: colorPaletteWrapperStyles,
+      className: className,
+      role: "radiogroup",
+      style: {
+        maxWidth: cols * 32
+      },
+      onKeyDown: memoizedHandleKeyDown
+    }, palette.map(([colorValue, backgroundColor, borderColor], i) => {
+      return jsx(Color, {
+        key: colorValue,
+        value: colorValue,
+        backgroundColor: backgroundColor,
+        borderColor: borderColor,
+        onClick: onClick,
+        onHover: onHover,
+        isSelected: colorValue === selectedColor,
+        tabIndex: colorValue === selectedColor ? 0 : -1,
+        setRef: el => colorRefs.current[i] = el
+      });
+    }))
+  );
 });

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

@@ -1,25 +1,27 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import { N900, N0, N50 } from '@atlaskit/theme/colors';
-import React from 'react';
-import { PureComponent } from 'react';
+import { token } from '@atlaskit/tokens';
+import React, { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { ANALYTICS_HOVER_DELAY } from '../constants';
 import { messages } from '../i18n';
-const Button = styled.button`
+const buttonStyles = css`
   height: 24px;
   width: 24px;
-  background: ${N900};
+  background: ${token('color.background.neutral', N900)};
   padding: 0;
   border-radius: 4px;
-  border: 1px solid ${N0};
+  border: 1px solid ${token('color.border', N0)};
   cursor: pointer;
   display: block;
   box-sizing: border-box;
   overflow: hidden;
 `;
-const ButtonWrapper = styled.span`
+const buttonWrapperStyles = css`
   border: 1px solid transparent;
   margin: 0 2px;
   font-size: 0;
@@ -28,7 +30,7 @@ const ButtonWrapper = styled.span`
   padding: 1px;
   border-radius: 6px;
   &:hover {
-    border: 1px solid ${N50};
+    border: 1px solid ${token('color.border', N50)};
   }
 `;
 export default class Color extends PureComponent {
@@ -78,21 +80,28 @@ export default class Color extends PureComponent {
       setRef
     } = this.props;
     const borderStyle = `1px solid ${borderColor}`;
-    return /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages[`${value}Color`], labels => /*#__PURE__*/React.createElement(Button, {
+    return jsx("span", {
+      css: buttonWrapperStyles
+    }, jsx(FormattedMessage, messages[`${value}Color`], labels => jsx("button", {
+      css: buttonStyles,
       onClick: this.onClick,
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave,
       onMouseDown: this.onMouseDown,
       tabIndex: tabIndex,
       className: `${isSelected ? 'selected' : ''}`,
-      title: labels[0],
-      "aria-checked": isSelected,
+      title: labels[0] // button element does not support aria-selected.
+      // For button selected (to be precise pressed) or not
+      //  use aria-pressed as per
+      // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#associated_aria_roles_states_and_properties
+      ,
+      "aria-pressed": isSelected,
       style: {
         backgroundColor: backgroundColor || 'transparent',
         border: borderStyle
       },
-      innerRef: setRef
-    }, isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
+      ref: setRef
+    }, isSelected && jsx(EditorDoneIcon, {
       primaryColor: borderColor,
       label: labels[0]
     }))));

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/status",
-	"version": "1.0.2"
+	"version": "1.1.0"
 }

package/dist/esm/components/Status.js

@@ -16,6 +16,8 @@ import Lozenge from '@atlaskit/lozenge';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createStatusAnalyticsAndFire } from './analytics';
 import { ANALYTICS_HOVER_DELAY } from './constants';
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var colorToLozengeAppearanceMap = {
   neutral: 'default',
   purple: 'new',
@@ -24,6 +26,8 @@ var colorToLozengeAppearanceMap = {
   yellow: 'moved',
   green: 'success'
 };
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
 var DEFAULT_APPEARANCE = 'default';
 var MAX_WIDTH = 200;
 

package/dist/esm/components/StatusPicker.js

@@ -13,15 +13,15 @@ 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; } }
 
+/** @jsx jsx */
 import TextField from '@atlaskit/textfield';
 import { gridSize } from '@atlaskit/theme/constants';
-import React from 'react';
+import React, { PureComponent } from 'react';
 import { injectIntl } from 'react-intl-next';
-import { PureComponent } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import ColorPalette from './internal/color-palette';
 import { messages } from './i18n';
-var FieldTextWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0 ", "px;\n"])), gridSize());
+var fieldTextWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0 ", "px;\n"])), gridSize());
 
 var Picker = /*#__PURE__*/function (_PureComponent) {
   _inherits(Picker, _PureComponent);
@@ -77,9 +77,10 @@ var Picker = /*#__PURE__*/function (_PureComponent) {
           intl = _this$props.intl; // Using <React.Fragment> instead of [] to workaround Enzyme
       // (https://github.com/airbnb/enzyme/issues/1149)
 
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FieldTextWrapper, {
+      return jsx(React.Fragment, null, jsx("div", {
+        css: fieldTextWrapperStyles,
         key: this.fieldTextWrapperKey
-      }, /*#__PURE__*/React.createElement(TextField, {
+      }, jsx(TextField, {
         value: text,
         isCompact: true,
         ref: this.handleInputRef,
@@ -88,7 +89,7 @@ var Picker = /*#__PURE__*/function (_PureComponent) {
         spellCheck: false,
         autoComplete: "off",
         "aria-label": intl.formatMessage(messages.statusInputLabel)
-      })), /*#__PURE__*/React.createElement(ColorPalette, {
+      })), jsx(ColorPalette, {
         key: this.colorPaletteKey,
         onClick: onColorClick,
         onHover: onColorHover,

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

@@ -3,14 +3,16 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
+/** @jsx jsx */
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import React, { useEffect, useRef, useCallback } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import Color from './color'; // color value, label, background, borderColor
 
-var palette = [['neutral', colors.N40, colors.N400], ['purple', colors.P50, colors.P400], ['blue', colors.B50, colors.B400], ['red', colors.R50, colors.R400], ['yellow', colors.Y75, colors.Y400], ['green', colors.G50, colors.G400]];
-var ColorPaletteWrapper = styled.div(_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 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.Y75), token('color.text.warning', colors.Y400)], ['green', token('color.background.success', colors.G50), token('color.text.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
 
 var VK_RIGHT = 39; //ArrowRight
@@ -62,31 +64,41 @@ export default (function (_ref) {
     newRef === null || newRef === void 0 ? void 0 : newRef.focus();
     onClick(newColorValue);
   }, [selectedColor, onClick, colorRefs]);
-  return /*#__PURE__*/React.createElement(ColorPaletteWrapper, {
-    className: className,
-    role: "radiogroup",
-    style: {
-      maxWidth: cols * 32
-    },
-    onKeyDown: memoizedHandleKeyDown
-  }, palette.map(function (_ref4, i) {
-    var _ref5 = _slicedToArray(_ref4, 3),
-        colorValue = _ref5[0],
-        backgroundColor = _ref5[1],
-        borderColor = _ref5[2];
+  return (
+    /**
+      We need to disable below eslint rule becuase of role "radiogroup". This role was added
+      in https://a11y-internal.atlassian.net/browse/AK-832 to fix accessibility issue.
+      When we migrated to emotion from styled component, we started getting this error.
+      Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
+     */
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+    jsx("div", {
+      css: colorPaletteWrapperStyles,
+      className: className,
+      role: "radiogroup",
+      style: {
+        maxWidth: cols * 32
+      },
+      onKeyDown: memoizedHandleKeyDown
+    }, palette.map(function (_ref4, i) {
+      var _ref5 = _slicedToArray(_ref4, 3),
+          colorValue = _ref5[0],
+          backgroundColor = _ref5[1],
+          borderColor = _ref5[2];
 
-    return /*#__PURE__*/React.createElement(Color, {
-      key: colorValue,
-      value: colorValue,
-      backgroundColor: backgroundColor,
-      borderColor: borderColor,
-      onClick: onClick,
-      onHover: onHover,
-      isSelected: colorValue === selectedColor,
-      tabIndex: colorValue === selectedColor ? 0 : -1,
-      setRef: function setRef(el) {
-        return colorRefs.current[i] = el;
-      }
-    });
-  }));
+      return jsx(Color, {
+        key: colorValue,
+        value: colorValue,
+        backgroundColor: backgroundColor,
+        borderColor: borderColor,
+        onClick: onClick,
+        onHover: onHover,
+        isSelected: colorValue === selectedColor,
+        tabIndex: colorValue === selectedColor ? 0 : -1,
+        setRef: function setRef(el) {
+          return colorRefs.current[i] = el;
+        }
+      });
+    }))
+  );
 });

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

@@ -13,16 +13,17 @@ 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; } }
 
+/** @jsx jsx */
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import { N900, N0, N50 } from '@atlaskit/theme/colors';
-import React from 'react';
-import { PureComponent } from 'react';
+import { token } from '@atlaskit/tokens';
+import React, { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { ANALYTICS_HOVER_DELAY } from '../constants';
 import { messages } from '../i18n';
-var Button = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 24px;\n  width: 24px;\n  background: ", ";\n  padding: 0;\n  border-radius: 4px;\n  border: 1px solid ", ";\n  cursor: pointer;\n  display: block;\n  box-sizing: border-box;\n  overflow: hidden;\n"])), N900, N0);
-var ButtonWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  margin: 0 2px;\n  font-size: 0;\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  border-radius: 6px;\n  &:hover {\n    border: 1px solid ", ";\n  }\n"])), N50);
+var buttonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 24px;\n  width: 24px;\n  background: ", ";\n  padding: 0;\n  border-radius: 4px;\n  border: 1px solid ", ";\n  cursor: pointer;\n  display: block;\n  box-sizing: border-box;\n  overflow: hidden;\n"])), token('color.background.neutral', N900), token('color.border', N0));
+var buttonWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  margin: 0 2px;\n  font-size: 0;\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  border-radius: 6px;\n  &:hover {\n    border: 1px solid ", ";\n  }\n"])), token('color.border', N50));
 
 var Color = /*#__PURE__*/function (_PureComponent) {
   _inherits(Color, _PureComponent);
@@ -86,22 +87,29 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           value = _this$props2.value,
           setRef = _this$props2.setRef;
       var borderStyle = "1px solid ".concat(borderColor);
-      return /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages["".concat(value, "Color")], function (labels) {
-        return /*#__PURE__*/React.createElement(Button, {
+      return jsx("span", {
+        css: buttonWrapperStyles
+      }, jsx(FormattedMessage, messages["".concat(value, "Color")], function (labels) {
+        return jsx("button", {
+          css: buttonStyles,
           onClick: _this2.onClick,
           onMouseEnter: _this2.onMouseEnter,
           onMouseLeave: _this2.onMouseLeave,
           onMouseDown: _this2.onMouseDown,
           tabIndex: tabIndex,
           className: "".concat(isSelected ? 'selected' : ''),
-          title: labels[0],
-          "aria-checked": isSelected,
+          title: labels[0] // button element does not support aria-selected.
+          // For button selected (to be precise pressed) or not
+          //  use aria-pressed as per
+          // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#associated_aria_roles_states_and_properties
+          ,
+          "aria-pressed": isSelected,
           style: {
             backgroundColor: backgroundColor || 'transparent',
             border: borderStyle
           },
-          innerRef: setRef
-        }, isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
+          ref: setRef
+        }, isSelected && jsx(EditorDoneIcon, {
           primaryColor: borderColor,
           label: labels[0]
         }));

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/status",
-	"version": "1.0.2"
+	"version": "1.1.0"
 }

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { Color as ColorType } from '../Status';
 interface ColorPaletteProps {
     selectedColor?: ColorType;
@@ -7,5 +7,5 @@ interface ColorPaletteProps {
     cols?: number;
     className?: string;
 }
-declare const _default: ({ cols, onClick, selectedColor, className, onHover, }: ColorPaletteProps) => JSX.Element;
+declare const _default: ({ cols, onClick, selectedColor, className, onHover, }: ColorPaletteProps) => jsx.JSX.Element;
 export default _default;

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
 import { Color as ColorType } from '../Status';
 export interface ColorProps {
     value: ColorType;
@@ -9,11 +9,11 @@ export interface ColorProps {
     onHover?: (value: ColorType) => void;
     backgroundColor: string;
     borderColor: string;
-    setRef?: (value: HTMLElement) => HTMLElement;
+    setRef?: (value: HTMLButtonElement) => HTMLButtonElement;
 }
 export default class Color extends PureComponent<ColorProps> {
     private hoverStartTime;
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
     componentWillUnmount(): void;
     onMouseEnter: () => void;
     onMouseLeave: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/status",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Fabric Status React Components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,8 +30,9 @@
     "@atlaskit/lozenge": "^11.1.0",
     "@atlaskit/textfield": "^5.1.0",
     "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.9.0",
     "@babel/runtime": "^7.0.0",
-    "styled-components": "^3.2.6"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0",
@@ -39,7 +40,7 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "^9.0.0",
-    "@atlaskit/editor-test-helpers": "^16.1.0",
+    "@atlaskit/editor-test-helpers": "^17.0.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -47,7 +48,7 @@
     "enzyme-adapter-react-16": "^1.15.1",
     "react": "^16.8.0",
     "react-intl-next": "npm:react-intl@^5.18.1",
-    "typescript": "3.9.6"
+    "typescript": "3.9.10"
   },
   "keywords": [
     "ui",
@@ -55,5 +56,10 @@
     "fabric",
     "editor"
   ],
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
+  "techstack": {
+    "@repo/internal": {
+      "theming": "tokens"
+    }
+  }
 }