@atlaskit/status 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/status
 
+## 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
+
+- [`3dd496d620b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3dd496d620b) - Remove unneeded css prop from status component.
+- Updated dependencies
+
+## 0.11.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.11.0
 
 ### Minor Changes

package/build/tsconfig.json

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

package/dist/cjs/components/Status.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -33,9 +33,13 @@ var _analytics = require("./analytics");
 
 var _constants = require("./constants");
 
+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); }
+
+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; }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 colorToLozengeAppearanceMap = {
   neutral: 'default',
@@ -93,6 +97,7 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
           text = _this$props.text,
           color = _this$props.color,
           style = _this$props.style,
+          localId = _this$props.localId,
           onClick = _this$props.onClick;
 
       if (text.trim().length === 0) {
@@ -102,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,
+        id: localId
       }, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
         appearance: appearance,
         maxWidth: MAX_WIDTH

package/dist/cjs/components/StatusPicker.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -35,21 +35,17 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _colorPalette = _interopRequireDefault(require("./internal/color-palette"));
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+var _templateObject;
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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); }
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 ", "px;\n"]);
+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; }
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
-  return data;
-}
+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(), (0, _constants.gridSize)());
+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);
@@ -94,6 +90,7 @@ var StatusPicker = /*#__PURE__*/function (_PureComponent) {
       var _this$props = this.props,
           text = _this$props.text,
           selectedColor = _this$props.selectedColor,
+          localId = _this$props.localId,
           onColorClick = _this$props.onColorClick,
           onColorHover = _this$props.onColorHover; // Using <React.Fragment> instead of [] to workaround Enzyme
       // (https://github.com/airbnb/enzyme/issues/1149)
@@ -101,14 +98,14 @@ var StatusPicker = /*#__PURE__*/function (_PureComponent) {
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FieldTextWrapper, {
         key: this.fieldTextWrapperKey
       }, /*#__PURE__*/_react.default.createElement(_textfield.default, {
-        css: null,
         value: text,
         isCompact: true,
         ref: this.handleInputRef,
         onChange: this.onChange,
         onKeyPress: this.onKeyPress,
         spellCheck: false,
-        autoComplete: "off"
+        autoComplete: "off",
+        "aria-labelledby": localId
       })), /*#__PURE__*/_react.default.createElement(_colorPalette.default, {
         key: this.colorPaletteKey,
         onClick: onColorClick,

package/dist/cjs/components/analytics.js

@@ -11,7 +11,7 @@ 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); if (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; }
 

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

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,20 +23,16 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _color = _interopRequireDefault(require("./color"));
 
-function _templateObject() {
-  var data = (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"]);
+var _templateObject;
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+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); }
 
-  return data;
-}
+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(), (0, _constants.gridSize)(), (0, _constants.gridSize)(), (0, _constants.gridSize)());
+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 _default = function _default(_ref) {
   var _ref$cols = _ref.cols,

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

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -39,33 +39,19 @@ var _constants = require("../constants");
 
 var _i18n = require("../i18n");
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+var _templateObject, _templateObject2;
 
-function _templateObject2() {
-  var data = (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"]);
+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); }
 
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
+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; }
 
-  return data;
-}
-
-function _templateObject() {
-  var data = (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"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
-  return data;
-}
+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(), _colors.N900, _colors.N0);
+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(), _colors.N50);
+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 Color = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Color, _PureComponent);

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/status",
-	"version": "0.11.0"
+	"version": "0.12.0"
 }

package/dist/es2019/components/Status.js

@@ -49,6 +49,7 @@ class StatusInternal extends PureComponent {
       text,
       color,
       style,
+      localId,
       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,
+      id: localId
     }, /*#__PURE__*/React.createElement(Lozenge, {
       appearance: appearance,
       maxWidth: MAX_WIDTH

package/dist/es2019/components/StatusPicker.js

@@ -41,6 +41,7 @@ export class StatusPicker extends PureComponent {
     const {
       text,
       selectedColor,
+      localId,
       onColorClick,
       onColorHover
     } = this.props; // Using <React.Fragment> instead of [] to workaround Enzyme
@@ -49,14 +50,14 @@ export class StatusPicker extends PureComponent {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FieldTextWrapper, {
       key: this.fieldTextWrapperKey
     }, /*#__PURE__*/React.createElement(TextField, {
-      css: null,
       value: text,
       isCompact: true,
       ref: this.handleInputRef,
       onChange: this.onChange,
       onKeyPress: this.onKeyPress,
       spellCheck: false,
-      autoComplete: "off"
+      autoComplete: "off",
+      "aria-labelledby": localId
     })), /*#__PURE__*/React.createElement(ColorPalette, {
       key: this.colorPaletteKey,
       onClick: onColorClick,

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/status",
-	"version": "0.11.0"
+	"version": "0.12.0"
 }

package/dist/esm/components/Status.js

@@ -8,7 +8,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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; } }
 
 import React from 'react';
 import { PureComponent } from 'react';
@@ -76,6 +76,7 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
           text = _this$props.text,
           color = _this$props.color,
           style = _this$props.style,
+          localId = _this$props.localId,
           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,
+        id: localId
       }, /*#__PURE__*/React.createElement(Lozenge, {
         appearance: appearance,
         maxWidth: MAX_WIDTH

package/dist/esm/components/StatusPicker.js

@@ -7,19 +7,11 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+var _templateObject;
 
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  margin: 0 ", "px;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-  return data;
-}
+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; } }
 
 import TextField from '@atlaskit/textfield';
 import { gridSize } from '@atlaskit/theme/constants';
@@ -27,7 +19,7 @@ import React from 'react';
 import { PureComponent } from 'react';
 import styled from 'styled-components';
 import ColorPalette from './internal/color-palette';
-var FieldTextWrapper = styled.div(_templateObject(), gridSize());
+var FieldTextWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0 ", "px;\n"])), gridSize());
 export var StatusPicker = /*#__PURE__*/function (_PureComponent) {
   _inherits(StatusPicker, _PureComponent);
 
@@ -77,6 +69,7 @@ export var StatusPicker = /*#__PURE__*/function (_PureComponent) {
       var _this$props = this.props,
           text = _this$props.text,
           selectedColor = _this$props.selectedColor,
+          localId = _this$props.localId,
           onColorClick = _this$props.onColorClick,
           onColorHover = _this$props.onColorHover; // Using <React.Fragment> instead of [] to workaround Enzyme
       // (https://github.com/airbnb/enzyme/issues/1149)
@@ -84,14 +77,14 @@ export var StatusPicker = /*#__PURE__*/function (_PureComponent) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FieldTextWrapper, {
         key: this.fieldTextWrapperKey
       }, /*#__PURE__*/React.createElement(TextField, {
-        css: null,
         value: text,
         isCompact: true,
         ref: this.handleInputRef,
         onChange: this.onChange,
         onKeyPress: this.onKeyPress,
         spellCheck: false,
-        autoComplete: "off"
+        autoComplete: "off",
+        "aria-labelledby": localId
       })), /*#__PURE__*/React.createElement(ColorPalette, {
         key: this.colorPaletteKey,
         onClick: onColorClick,

package/dist/esm/components/analytics.js

@@ -1,6 +1,6 @@
 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); if (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; }
 

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

@@ -1,15 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-function _templateObject() {
-  var data = _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"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject;
 
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
@@ -18,7 +10,7 @@ import styled from 'styled-components';
 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(), gridSize(), gridSize(), gridSize());
+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());
 export default (function (_ref) {
   var _ref$cols = _ref.cols,
       cols = _ref$cols === void 0 ? 7 : _ref$cols,

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

@@ -7,29 +7,11 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function _templateObject2() {
-  var data = _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"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
+var _templateObject, _templateObject2;
 
-  return data;
-}
-
-function _templateObject() {
-  var data = _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"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-  return data;
-}
+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; } }
 
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import { N900, N0, N50 } from '@atlaskit/theme/colors';
@@ -39,8 +21,8 @@ import { FormattedMessage } from 'react-intl';
 import styled from 'styled-components';
 import { ANALYTICS_HOVER_DELAY } from '../constants';
 import { messages } from '../i18n';
-var Button = styled.button(_templateObject(), N900, N0);
-var ButtonWrapper = styled.span(_templateObject2(), N50);
+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 Color = /*#__PURE__*/function (_PureComponent) {
   _inherits(Color, _PureComponent);

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/status",
-	"version": "0.11.0"
+	"version": "0.12.0"
 }

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

@@ -9,6 +9,7 @@ export interface Props {
     onColorHover?: (value: ColorType) => void;
     onTextChanged: (value: string) => void;
     autoFocus?: boolean;
+    localId?: string;
 }
 export declare class StatusPicker extends PureComponent<Props, any> {
     private fieldTextWrapperKey;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/status",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Fabric Status React Components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,10 +26,10 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/icon": "^21.2.0",
-    "@atlaskit/lozenge": "^10.1.0",
-    "@atlaskit/textfield": "^5.0.0",
-    "@atlaskit/theme": "^11.0.0",
+    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/lozenge": "^11.1.0",
+    "@atlaskit/textfield": "^5.1.0",
+    "@atlaskit/theme": "^12.0.0",
     "@babel/runtime": "^7.0.0",
     "styled-components": "^3.2.6"
   },
@@ -39,9 +39,10 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "^9.0.0",
-    "@atlaskit/editor-test-helpers": "^13.3.0",
+    "@atlaskit/editor-test-helpers": "^15.6.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",
@@ -53,5 +54,6 @@
     "date",
     "fabric",
     "editor"
-  ]
+  ],
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }