@atlaskit/status 0.11.2 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # @atlaskit/status
 
+## 1.0.1
+
+### Patch Changes
+
+- [`b5375cd4f66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b5375cd4f66) - AK-316: add aria-label for the status picker input field
+- [`85c4e5a71ee`](https://bitbucket.org/atlassian/atlassian-frontend/commits/85c4e5a71ee) - [AK-837] added role prop for Status component
+
+## 1.0.0
+
+### Major Changes
+
+- [`47f58da5946`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47f58da5946) - ED-13322, ED-13324, ED-13326, ED-13323, ED-13204: Upgrade and support react-intl@^5.18.1 including breaking API changes, types and tests in atlassian-frontend packages
+
+  What changed: Upgraded our react-intl support from ^2.6.0 to ^5.18.1. This means editor packages now rely on consumers installing ^5.18.1, otherwise editor usage of react-intl will mismatch with actual installed react-intl APIs.
+  Why change was made: As part of a coordinated upgrade effort across AF packages, as react-intl v2 is quite dated.
+  How consumer should update their code: Ensure react-intl ^5.18.1 is installed in consuming applications.
+
+  Upgrade guide: To consume atlassian-frontend packages that use react-intl5 setup a second provider for the new version, using an npm alias
+
+  ```js
+  "react-intl": "^2.6.0",
+  "react-intl-next": "npm:react-intl@^5.18.1",
+  ```
+
+  ```js
+  import { IntlProvider } from 'react-intl';
+  import { IntlProvider as IntlNextProvider } from 'react-intl-next';
+
+  return (
+    <IntlProvider
+      key={locale}
+      data-test-language={locale}
+      locale={locale}
+      defaultLocale={DEFAULT_LOCALE}
+      messages={messages}
+    >
+      <IntlNextProvider
+        key={locale}
+        data-test-language={locale}
+        locale={locale}
+        defaultLocale={DEFAULT_LOCALE}
+        messages={messages}
+      >
+        {children}
+      </IntlNextProvider>
+    </IntlProvider>
+  );
+  ```
+
+## 0.12.0
+
+### Minor Changes
+
+- [`42c7ac64c39`](https://bitbucket.org/atlassian/atlassian-frontend/commits/42c7ac64c39) - AK-654 Set a status link label with input
+
+### Patch Changes
+
+- [`140df54164a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/140df54164a) - AK-570 Remove redundant title attribute for Status component
+
+## 0.11.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.11.2
 
 ### Patch Changes

package/dist/cjs/components/Status.js

@@ -97,6 +97,7 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
           text = _this$props.text,
           color = _this$props.color,
           style = _this$props.style,
+          role = _this$props.role,
           onClick = _this$props.onClick;
 
       if (text.trim().length === 0) {
@@ -106,15 +107,14 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
       var appearance = colorToLozengeAppearanceMap[color] || DEFAULT_APPEARANCE; // Note: ommitted data-local-id attribute to avoid copying/pasting the same localId
 
       return /*#__PURE__*/_react.default.createElement("span", {
-        className: "status-lozenge-span" // Using title here as `@atlaskit/tooltip` adds too much overhead
-        ,
-        title: text,
+        className: "status-lozenge-span",
         onClick: onClick,
         onMouseEnter: this.handleMouseEnter,
         onMouseLeave: this.handleMouseLeave,
         "data-node-type": "status",
         "data-color": color,
-        "data-style": style
+        "data-style": style,
+        role: role
       }, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
         appearance: appearance,
         maxWidth: MAX_WIDTH

package/dist/cjs/components/StatusPicker.js

@@ -31,10 +31,14 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactIntlNext = require("react-intl-next");
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _colorPalette = _interopRequireDefault(require("./internal/color-palette"));
 
+var _i18n = require("./i18n");
+
 var _templateObject;
 
 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); }
@@ -47,15 +51,15 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 var FieldTextWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 ", "px;\n"])), (0, _constants.gridSize)());
 
-var StatusPicker = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(StatusPicker, _PureComponent);
+var Picker = /*#__PURE__*/function (_PureComponent) {
+  (0, _inherits2.default)(Picker, _PureComponent);
 
-  var _super = _createSuper(StatusPicker);
+  var _super = _createSuper(Picker);
 
-  function StatusPicker() {
+  function Picker() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, StatusPicker);
+    (0, _classCallCheck2.default)(this, Picker);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -84,14 +88,15 @@ var StatusPicker = /*#__PURE__*/function (_PureComponent) {
     return _this;
   }
 
-  (0, _createClass2.default)(StatusPicker, [{
+  (0, _createClass2.default)(Picker, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
           text = _this$props.text,
           selectedColor = _this$props.selectedColor,
           onColorClick = _this$props.onColorClick,
-          onColorHover = _this$props.onColorHover; // Using <React.Fragment> instead of [] to workaround Enzyme
+          onColorHover = _this$props.onColorHover,
+          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, {
@@ -103,7 +108,8 @@ var StatusPicker = /*#__PURE__*/function (_PureComponent) {
         onChange: this.onChange,
         onKeyPress: this.onKeyPress,
         spellCheck: false,
-        autoComplete: "off"
+        autoComplete: "off",
+        "aria-label": intl.formatMessage(_i18n.messages.statusInputLabel)
       })), /*#__PURE__*/_react.default.createElement(_colorPalette.default, {
         key: this.colorPaletteKey,
         onClick: onColorClick,
@@ -112,10 +118,11 @@ var StatusPicker = /*#__PURE__*/function (_PureComponent) {
       }));
     }
   }]);
-  return StatusPicker;
+  return Picker;
 }(_react.PureComponent);
 
-exports.StatusPicker = StatusPicker;
-(0, _defineProperty2.default)(StatusPicker, "defaultProps", {
+(0, _defineProperty2.default)(Picker, "defaultProps", {
   autoFocus: true
-});
+});
+var StatusPicker = (0, _reactIntlNext.injectIntl)(Picker);
+exports.StatusPicker = StatusPicker;

package/dist/cjs/components/analytics.js

@@ -11,9 +11,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _version = require("../version.json");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var ELEMENTS_CHANNEL = 'fabric-elements';
 exports.ELEMENTS_CHANNEL = ELEMENTS_CHANNEL;

package/dist/cjs/components/i18n.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.messages = void 0;
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
-var messages = (0, _reactIntl.defineMessages)({
+var messages = (0, _reactIntlNext.defineMessages)({
   neutralColor: {
     id: 'fabric.status.color.grey',
     defaultMessage: 'Grey',
@@ -37,6 +37,11 @@ var messages = (0, _reactIntl.defineMessages)({
     id: 'fabric.status.color.green',
     defaultMessage: 'Green',
     description: 'Tooltip for the green color in color palette'
+  },
+  statusInputLabel: {
+    id: 'fabric.status.input.label',
+    defaultMessage: 'Set a status',
+    description: 'Aria label text for the status input field'
   }
 });
 exports.messages = messages;

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

@@ -31,7 +31,7 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -108,7 +108,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           borderColor = _this$props2.borderColor,
           value = _this$props2.value;
       var borderStyle = "1px solid ".concat(borderColor);
-      return /*#__PURE__*/_react.default.createElement(ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages["".concat(value, "Color")], function (label) {
+      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, {
           onClick: _this2.onClick,
           onMouseEnter: _this2.onMouseEnter,
@@ -116,14 +116,14 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           onMouseDown: _this2.onMouseDown,
           tabIndex: tabIndex,
           className: "".concat(isSelected ? 'selected' : ''),
-          title: label,
+          title: labels[0],
           style: {
             backgroundColor: backgroundColor || 'transparent',
             border: borderStyle
           }
         }, isSelected && /*#__PURE__*/_react.default.createElement(_done.default, {
           primaryColor: borderColor,
-          label: label
+          label: labels[0]
         }));
       }));
     }

package/dist/cjs/i18n/index.js

@@ -5,34 +5,40 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "zh", {
+Object.defineProperty(exports, "cs", {
   enumerable: true,
   get: function get() {
-    return _zh.default;
+    return _cs.default;
   }
 });
-Object.defineProperty(exports, "zh_TW", {
+Object.defineProperty(exports, "da", {
   enumerable: true,
   get: function get() {
-    return _zh_TW.default;
+    return _da.default;
   }
 });
-Object.defineProperty(exports, "cs", {
+Object.defineProperty(exports, "de", {
   enumerable: true,
   get: function get() {
-    return _cs.default;
+    return _de.default;
   }
 });
-Object.defineProperty(exports, "da", {
+Object.defineProperty(exports, "en", {
   enumerable: true,
   get: function get() {
-    return _da.default;
+    return _en.default;
   }
 });
-Object.defineProperty(exports, "nl", {
+Object.defineProperty(exports, "en_GB", {
   enumerable: true,
   get: function get() {
-    return _nl.default;
+    return _en_GB.default;
+  }
+});
+Object.defineProperty(exports, "es", {
+  enumerable: true,
+  get: function get() {
+    return _es.default;
   }
 });
 Object.defineProperty(exports, "et", {
@@ -53,16 +59,16 @@ Object.defineProperty(exports, "fr", {
     return _fr.default;
   }
 });
-Object.defineProperty(exports, "de", {
+Object.defineProperty(exports, "hu", {
   enumerable: true,
   get: function get() {
-    return _de.default;
+    return _hu.default;
   }
 });
-Object.defineProperty(exports, "hu", {
+Object.defineProperty(exports, "is", {
   enumerable: true,
   get: function get() {
-    return _hu.default;
+    return _is.default;
   }
 });
 Object.defineProperty(exports, "it", {
@@ -89,6 +95,12 @@ Object.defineProperty(exports, "nb", {
     return _nb.default;
   }
 });
+Object.defineProperty(exports, "nl", {
+  enumerable: true,
+  get: function get() {
+    return _nl.default;
+  }
+});
 Object.defineProperty(exports, "pl", {
   enumerable: true,
   get: function get() {
@@ -107,22 +119,22 @@ Object.defineProperty(exports, "pt_PT", {
     return _pt_PT.default;
   }
 });
-Object.defineProperty(exports, "ru", {
+Object.defineProperty(exports, "ro", {
   enumerable: true,
   get: function get() {
-    return _ru.default;
+    return _ro.default;
   }
 });
-Object.defineProperty(exports, "sk", {
+Object.defineProperty(exports, "ru", {
   enumerable: true,
   get: function get() {
-    return _sk.default;
+    return _ru.default;
   }
 });
-Object.defineProperty(exports, "es", {
+Object.defineProperty(exports, "sk", {
   enumerable: true,
   get: function get() {
-    return _es.default;
+    return _sk.default;
   }
 });
 Object.defineProperty(exports, "sv", {
@@ -155,28 +167,16 @@ Object.defineProperty(exports, "vi", {
     return _vi.default;
   }
 });
-Object.defineProperty(exports, "en", {
-  enumerable: true,
-  get: function get() {
-    return _en.default;
-  }
-});
-Object.defineProperty(exports, "en_GB", {
-  enumerable: true,
-  get: function get() {
-    return _en_GB.default;
-  }
-});
-Object.defineProperty(exports, "is", {
+Object.defineProperty(exports, "zh", {
   enumerable: true,
   get: function get() {
-    return _is.default;
+    return _zh.default;
   }
 });
-Object.defineProperty(exports, "ro", {
+Object.defineProperty(exports, "zh_TW", {
   enumerable: true,
   get: function get() {
-    return _ro.default;
+    return _zh_TW.default;
   }
 });
 

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/status",
-	"version": "0.11.2"
+	"version": "1.0.1"
 }

package/dist/es2019/components/Status.js

@@ -49,6 +49,7 @@ class StatusInternal extends PureComponent {
       text,
       color,
       style,
+      role,
       onClick
     } = this.props;
 
@@ -59,15 +60,14 @@ class StatusInternal extends PureComponent {
     const appearance = colorToLozengeAppearanceMap[color] || DEFAULT_APPEARANCE; // Note: ommitted data-local-id attribute to avoid copying/pasting the same localId
 
     return /*#__PURE__*/React.createElement("span", {
-      className: "status-lozenge-span" // Using title here as `@atlaskit/tooltip` adds too much overhead
-      ,
-      title: text,
+      className: "status-lozenge-span",
       onClick: onClick,
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
       "data-node-type": "status",
       "data-color": color,
-      "data-style": style
+      "data-style": style,
+      role: role
     }, /*#__PURE__*/React.createElement(Lozenge, {
       appearance: appearance,
       maxWidth: MAX_WIDTH

package/dist/es2019/components/StatusPicker.js

@@ -2,13 +2,16 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import TextField from '@atlaskit/textfield';
 import { gridSize } from '@atlaskit/theme/constants';
 import React from 'react';
+import { injectIntl } from 'react-intl-next';
 import { PureComponent } from 'react';
 import styled from 'styled-components';
 import ColorPalette from './internal/color-palette';
+import { messages } from './i18n';
 const FieldTextWrapper = styled.div`
   margin: 0 ${gridSize()}px;
 `;
-export class StatusPicker extends PureComponent {
+
+class Picker extends PureComponent {
   constructor(...args) {
     super(...args);
 
@@ -42,7 +45,8 @@ export class StatusPicker extends PureComponent {
       text,
       selectedColor,
       onColorClick,
-      onColorHover
+      onColorHover,
+      intl
     } = this.props; // Using <React.Fragment> instead of [] to workaround Enzyme
     // (https://github.com/airbnb/enzyme/issues/1149)
 
@@ -55,7 +59,8 @@ export class StatusPicker extends PureComponent {
       onChange: this.onChange,
       onKeyPress: this.onKeyPress,
       spellCheck: false,
-      autoComplete: "off"
+      autoComplete: "off",
+      "aria-label": intl.formatMessage(messages.statusInputLabel)
     })), /*#__PURE__*/React.createElement(ColorPalette, {
       key: this.colorPaletteKey,
       onClick: onColorClick,
@@ -66,6 +71,8 @@ export class StatusPicker extends PureComponent {
 
 }
 
-_defineProperty(StatusPicker, "defaultProps", {
+_defineProperty(Picker, "defaultProps", {
   autoFocus: true
-});
+});
+
+export const StatusPicker = injectIntl(Picker);

package/dist/es2019/components/i18n.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
   neutralColor: {
     id: 'fabric.status.color.grey',
@@ -29,5 +29,10 @@ export const messages = defineMessages({
     id: 'fabric.status.color.green',
     defaultMessage: 'Green',
     description: 'Tooltip for the green color in color palette'
+  },
+  statusInputLabel: {
+    id: 'fabric.status.input.label',
+    defaultMessage: 'Set a status',
+    description: 'Aria label text for the status input field'
   }
 });

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

@@ -3,7 +3,7 @@ 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 { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import styled from 'styled-components';
 import { ANALYTICS_HOVER_DELAY } from '../constants';
 import { messages } from '../i18n';
@@ -77,21 +77,21 @@ export default class Color extends PureComponent {
       value
     } = this.props;
     const borderStyle = `1px solid ${borderColor}`;
-    return /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages[`${value}Color`], label => /*#__PURE__*/React.createElement(Button, {
+    return /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages[`${value}Color`], labels => /*#__PURE__*/React.createElement(Button, {
       onClick: this.onClick,
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave,
       onMouseDown: this.onMouseDown,
       tabIndex: tabIndex,
       className: `${isSelected ? 'selected' : ''}`,
-      title: label,
+      title: labels[0],
       style: {
         backgroundColor: backgroundColor || 'transparent',
         border: borderStyle
       }
     }, isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
       primaryColor: borderColor,
-      label: label
+      label: labels[0]
     }))));
   }
 

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/status",
-	"version": "0.11.2"
+	"version": "1.0.1"
 }

package/dist/esm/components/Status.js

@@ -76,6 +76,7 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
           text = _this$props.text,
           color = _this$props.color,
           style = _this$props.style,
+          role = _this$props.role,
           onClick = _this$props.onClick;
 
       if (text.trim().length === 0) {
@@ -85,15 +86,14 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
       var appearance = colorToLozengeAppearanceMap[color] || DEFAULT_APPEARANCE; // Note: ommitted data-local-id attribute to avoid copying/pasting the same localId
 
       return /*#__PURE__*/React.createElement("span", {
-        className: "status-lozenge-span" // Using title here as `@atlaskit/tooltip` adds too much overhead
-        ,
-        title: text,
+        className: "status-lozenge-span",
         onClick: onClick,
         onMouseEnter: this.handleMouseEnter,
         onMouseLeave: this.handleMouseLeave,
         "data-node-type": "status",
         "data-color": color,
-        "data-style": style
+        "data-style": style,
+        role: role
       }, /*#__PURE__*/React.createElement(Lozenge, {
         appearance: appearance,
         maxWidth: MAX_WIDTH

package/dist/esm/components/StatusPicker.js

@@ -16,19 +16,22 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import TextField from '@atlaskit/textfield';
 import { gridSize } from '@atlaskit/theme/constants';
 import React from 'react';
+import { injectIntl } from 'react-intl-next';
 import { PureComponent } from 'react';
 import styled from 'styled-components';
 import ColorPalette from './internal/color-palette';
+import { messages } from './i18n';
 var FieldTextWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0 ", "px;\n"])), gridSize());
-export var StatusPicker = /*#__PURE__*/function (_PureComponent) {
-  _inherits(StatusPicker, _PureComponent);
 
-  var _super = _createSuper(StatusPicker);
+var Picker = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Picker, _PureComponent);
 
-  function StatusPicker() {
+  var _super = _createSuper(Picker);
+
+  function Picker() {
     var _this;
 
-    _classCallCheck(this, StatusPicker);
+    _classCallCheck(this, Picker);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -63,14 +66,15 @@ export var StatusPicker = /*#__PURE__*/function (_PureComponent) {
     return _this;
   }
 
-  _createClass(StatusPicker, [{
+  _createClass(Picker, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
           text = _this$props.text,
           selectedColor = _this$props.selectedColor,
           onColorClick = _this$props.onColorClick,
-          onColorHover = _this$props.onColorHover; // Using <React.Fragment> instead of [] to workaround Enzyme
+          onColorHover = _this$props.onColorHover,
+          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, {
@@ -82,7 +86,8 @@ export var StatusPicker = /*#__PURE__*/function (_PureComponent) {
         onChange: this.onChange,
         onKeyPress: this.onKeyPress,
         spellCheck: false,
-        autoComplete: "off"
+        autoComplete: "off",
+        "aria-label": intl.formatMessage(messages.statusInputLabel)
       })), /*#__PURE__*/React.createElement(ColorPalette, {
         key: this.colorPaletteKey,
         onClick: onColorClick,
@@ -92,9 +97,11 @@ export var StatusPicker = /*#__PURE__*/function (_PureComponent) {
     }
   }]);
 
-  return StatusPicker;
+  return Picker;
 }(PureComponent);
 
-_defineProperty(StatusPicker, "defaultProps", {
+_defineProperty(Picker, "defaultProps", {
   autoFocus: true
-});
+});
+
+export var StatusPicker = injectIntl(Picker);

package/dist/esm/components/analytics.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { name as packageName, version as packageVersion } from '../version.json';
 export var ELEMENTS_CHANNEL = 'fabric-elements';

package/dist/esm/components/i18n.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export var messages = defineMessages({
   neutralColor: {
     id: 'fabric.status.color.grey',
@@ -29,5 +29,10 @@ export var messages = defineMessages({
     id: 'fabric.status.color.green',
     defaultMessage: 'Green',
     description: 'Tooltip for the green color in color palette'
+  },
+  statusInputLabel: {
+    id: 'fabric.status.input.label',
+    defaultMessage: 'Set a status',
+    description: 'Aria label text for the status input field'
   }
 });

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

@@ -17,7 +17,7 @@ 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 { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import styled from 'styled-components';
 import { ANALYTICS_HOVER_DELAY } from '../constants';
 import { messages } from '../i18n';
@@ -85,7 +85,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           borderColor = _this$props2.borderColor,
           value = _this$props2.value;
       var borderStyle = "1px solid ".concat(borderColor);
-      return /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages["".concat(value, "Color")], function (label) {
+      return /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages["".concat(value, "Color")], function (labels) {
         return /*#__PURE__*/React.createElement(Button, {
           onClick: _this2.onClick,
           onMouseEnter: _this2.onMouseEnter,
@@ -93,14 +93,14 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           onMouseDown: _this2.onMouseDown,
           tabIndex: tabIndex,
           className: "".concat(isSelected ? 'selected' : ''),
-          title: label,
+          title: labels[0],
           style: {
             backgroundColor: backgroundColor || 'transparent',
             border: borderStyle
           }
         }, isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
           primaryColor: borderColor,
-          label: label
+          label: labels[0]
         }));
       }));
     }

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/status",
-	"version": "0.11.2"
+	"version": "1.0.1"
 }

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

@@ -9,6 +9,7 @@ export interface OwnProps {
     localId?: string;
     onClick?: (event: React.SyntheticEvent<any>) => void;
     onHover?: () => void;
+    role?: string;
 }
 export declare type Props = OwnProps & WithAnalyticsEventsProps;
-export declare const Status: React.ForwardRefExoticComponent<Pick<Props, "text" | "color" | "style" | "localId" | "onClick" | "onHover"> & React.RefAttributes<any>>;
+export declare const Status: React.ForwardRefExoticComponent<Pick<Props, "text" | "color" | "style" | "localId" | "onClick" | "onHover" | "role"> & React.RefAttributes<any>>;

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

@@ -1,4 +1,5 @@
-import { PureComponent } from 'react';
+import React from 'react';
+import { WrappedComponentProps } from 'react-intl-next';
 import { Color } from './Status';
 export declare type ColorType = Color;
 export interface Props {
@@ -10,14 +11,6 @@ export interface Props {
     onTextChanged: (value: string) => void;
     autoFocus?: boolean;
 }
-export declare class StatusPicker extends PureComponent<Props, any> {
-    private fieldTextWrapperKey;
-    private colorPaletteKey;
-    static defaultProps: {
-        autoFocus: boolean;
-    };
-    render(): JSX.Element;
-    private onChange;
-    private onKeyPress;
-    private handleInputRef;
-}
+export declare const StatusPicker: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+};

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

@@ -1,2 +1,37 @@
-import { Messages } from 'react-intl';
-export declare const messages: Messages;
+export declare const messages: {
+    neutralColor: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    purpleColor: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    blueColor: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    redColor: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    yellowColor: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    greenColor: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    statusInputLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Color as ColorType } from '../Status';
 interface ColorPaletteProps {
     selectedColor?: ColorType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/status",
-  "version": "0.11.2",
+  "version": "1.0.1",
   "description": "Fabric Status React Components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,27 +26,27 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/icon": "^21.2.0",
+    "@atlaskit/icon": "^21.10.0",
     "@atlaskit/lozenge": "^11.1.0",
     "@atlaskit/textfield": "^5.1.0",
-    "@atlaskit/theme": "^11.4.0",
+    "@atlaskit/theme": "^12.1.0",
     "@babel/runtime": "^7.0.0",
     "styled-components": "^3.2.6"
   },
   "peerDependencies": {
     "react": "^16.8.0",
-    "react-intl": "^2.6.0"
+    "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
     "@atlaskit/docs": "^9.0.0",
-    "@atlaskit/editor-test-helpers": "^15.0.0",
+    "@atlaskit/editor-test-helpers": "^16.1.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",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "react": "^16.8.0",
-    "react-intl": "^2.6.0",
+    "react-intl-next": "npm:react-intl@^5.18.1",
     "typescript": "3.9.6"
   },
   "keywords": [