@atlaskit/status 0.11.1 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # @atlaskit/status
 
+## 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
+
+- [`3dd496d620b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3dd496d620b) - Remove unneeded css prop from status component.
+- Updated dependencies
+
 ## 0.11.1
 
 ### 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,
+          localId = _this$props.localId,
           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,
+        id: localId
       }, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
         appearance: appearance,
         maxWidth: MAX_WIDTH

package/dist/cjs/components/StatusPicker.js

@@ -90,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)
@@ -97,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/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',

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.1"
+	"version": "1.0.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/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',

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.1"
+	"version": "1.0.0"
 }

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,
+          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

@@ -69,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)
@@ -76,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/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',

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.1"
+	"version": "1.0.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/dist/types/components/i18n.d.ts

@@ -1,2 +1,32 @@
-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;
+    };
+};

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.1",
+  "version": "1.0.0",
   "description": "Fabric Status React Components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,27 +26,26 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/icon": "^21.2.0",
-    "@atlaskit/lozenge": "^11.0.0",
-    "@atlaskit/textfield": "^5.0.0",
-    "@atlaskit/theme": "^11.4.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"
   },
   "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.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",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "react": "^16.8.0",
-    "react-intl": "^2.6.0",
     "typescript": "3.9.6"
   },
   "keywords": [