@atlaskit/media-avatar-picker 24.3.4 → 24.3.6

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/media-avatar-picker
 
+## 24.3.6
+
+### Patch Changes
+
+- [`9435778d504`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9435778d504) - [ux] MEX-2482 Improve accessibility of avatar picker by converting it into a form; enforcing appropriate announcements to screen readers; and preventing the submit button from being disabled.
+- Updated dependencies
+
+## 24.3.5
+
+### Patch Changes
+
+- [`a67386c9448`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a67386c9448) - add missing label for media avatar picker back button
+- Updated dependencies
+
 ## 24.3.4
 
 ### Patch Changes

package/compass.yml

@@ -0,0 +1,47 @@
+name: Media Avatar Picker
+id: 'ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/91b4a140-e4d9-4c93-b685-33ab22c6fa6d'
+description: 'A component to select, drag and resize image avatars. It also provides a default list of predefined avatars.'
+configVersion: 1
+typeId: UI_ELEMENT
+ownerId: 'ari:cloud:teams::team/5e42d9d6-0823-4c6f-b469-7445522c9d10'
+fields:
+  lifecycle: Active
+  tier: 2
+labels:
+  - atlassian-platform
+customFields:
+  - name: Dev Owner
+    type: user
+    value: null
+  - name: Product
+    type: text
+    value: null
+  - name: Test
+    type: text
+    value: null
+links:
+  - name: ''
+    type: REPOSITORY
+    url: 'https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/media/media-avatar-picker/'
+  - name: ''
+    type: DOCUMENT
+    url: 'https://atlaskit.atlassian.com/packages/media/media-avatar-picker'
+  #- name: '' # Tome Capability
+  #  type: OTHER_LINK
+  #  url: ''
+  - name: Media By Product
+    type: DASHBOARD
+    url: 'https://atlassian.signalfx.com/#/dashboard/E-vk3wqAwAA?groupId=E-vkzo1AwAA&configId=E-vk5fsAwAA&startTime=-7d&endTime=Now'
+  - name: ''
+    type: CHAT_CHANNEL
+    url: 'https://atlassian.slack.com/archives/C020CGJDJ3A'
+  - name: ''
+    type: ON_CALL
+    url: 'https://atlassian.app.opsgenie.com/settings/schedule/detail/b62291ff-4029-4f26-b7fc-d75d46d7aebc'
+  - name: ''
+    type: PROJECT
+    url: 'https://product-fabric.atlassian.net/jira/software/c/projects/MEX/boards/713'
+relationships: {}
+
+# Learn more about formatting compass.yml:
+# https://go.atlassian.com/compass-yml-format

package/dist/cjs/avatar-list/index.js

@@ -1,75 +1,49 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AvatarList = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
-var _react2 = require("react");
+var _reactIntlNext = require("react-intl-next");
+var _mediaUi = require("@atlaskit/media-ui");
 var _styles = require("./styles");
-var _smallImageAvatar = require("../predefined-avatar-view/smallImageAvatar");
-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 { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
-var AvatarList = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(AvatarList, _PureComponent);
-  var _super = _createSuper(AvatarList);
-  function AvatarList() {
-    var _this;
-    (0, _classCallCheck2.default)(this, AvatarList);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onItemClick", function (avatar) {
-      return function () {
-        var onItemClick = _this.props.onItemClick;
-        if (onItemClick) {
-          onItemClick(avatar);
-        }
-      };
-    });
-    return _this;
-  }
-  (0, _createClass2.default)(AvatarList, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props = this.props,
-        avatars = _this$props.avatars,
-        selectedAvatar = _this$props.selectedAvatar;
-      var cards = avatars.map(function (avatar, idx) {
-        var elementKey = "predefined-avatar-".concat(idx);
-        return (0, _react.jsx)("li", {
-          key: elementKey
-        }, (0, _react.jsx)("button", {
-          onClick: _this2.onItemClick(avatar),
-          "aria-label": avatar.name || undefined,
-          css: (0, _styles.imageButton)({
-            isSelected: avatar === selectedAvatar
-          })
-        }, (0, _react.jsx)(_smallImageAvatar.SmallAvatarImage, {
-          isSelected: avatar === selectedAvatar,
-          src: avatar.dataURI,
-          id: "small-avatar-image",
-          alt: avatar.name || undefined
-        })));
-      });
-      return (0, _react.jsx)("div", {
-        css: _styles.avatarListWrapperStyles
-      }, (0, _react.jsx)("ul", null, cards));
-    }
-  }]);
-  return AvatarList;
-}(_react2.PureComponent);
-exports.AvatarList = AvatarList;
-(0, _defineProperty2.default)(AvatarList, "defaultProps", {
-  avatars: []
-});
+/** @jsx jsx */
+
+var AvatarList = function AvatarList(_ref) {
+  var _ref$avatars = _ref.avatars,
+    avatars = _ref$avatars === void 0 ? [] : _ref$avatars,
+    selectedAvatar = _ref.selectedAvatar,
+    onItemClick = _ref.onItemClick,
+    selectAvatarLabel = _ref.selectAvatarLabel;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var createOnItemClickHandler = function createOnItemClickHandler(avatar) {
+    return function () {
+      if (onItemClick) {
+        onItemClick(avatar);
+      }
+    };
+  };
+  var cards = avatars.map(function (avatar, idx) {
+    var elementKey = "predefined-avatar-".concat(idx);
+    return (0, _react.jsx)("label", {
+      key: elementKey
+    }, (0, _react.jsx)("input", {
+      type: "radio",
+      name: "avatar",
+      value: avatar.dataURI,
+      checked: avatar === selectedAvatar,
+      onChange: createOnItemClickHandler(avatar)
+    }), (0, _react.jsx)("img", {
+      css: _styles.smallAvatarImageStyles,
+      src: avatar.dataURI,
+      alt: avatar.name || undefined
+    }));
+  });
+  return (0, _react.jsx)("div", {
+    role: "radiogroup",
+    "aria-label": selectAvatarLabel || intl.formatMessage(_mediaUi.messages.select_an_avatar),
+    css: _styles.avatarListWrapperStyles
+  }, cards);
+};
+exports.AvatarList = AvatarList;

package/dist/cjs/avatar-list/styles.js

@@ -4,17 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.imageButton = exports.avatarListWrapperStyles = void 0;
+exports.smallAvatarImageStyles = exports.avatarListWrapperStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
+var _styles = require("../styles");
 var _templateObject, _templateObject2;
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-var avatarListWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ul {\n    display: flex;\n\n    padding: 0;\n    margin: 0;\n\n    list-style-type: none;\n\n    li {\n      padding-right: 5px;\n      margin: 0;\n    }\n  }\n\n  /* hide tickbox and file type icon in overlay\n   * because those are not necessary for avatars */\n\n  .tickbox {\n    visibility: hidden;\n  }\n\n  .file-type-icon {\n    visibility: hidden;\n  }\n"])));
-exports.avatarListWrapperStyles = avatarListWrapperStyles;
-var buttonBoxShadow = "box-shadow: 0px 0px 0px 1px ".concat("var(--ds-border-inverse, white)", ", 0px 0px 0px 3px ", "var(--ds-border-selected, ".concat(_colors.B200, ")"), ";");
-var imageButton = function imageButton(_ref) {
-  var isSelected = _ref.isSelected;
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  background: none;\n  color: inherit;\n  border: none;\n  padding: 0;\n  ", ";\n"])), isSelected ? "".concat(buttonBoxShadow, "\n      :focus {\n        outline:none;\n        ").concat(buttonBoxShadow, "\n      }\n      ") : ':focus { box-shadow: none; }');
-};
-exports.imageButton = imageButton;
+var smallAvatarImageStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  width: ", ";\n  height: ", ";\n"])), _styles.avatarImageStyles, "var(--ds-space-500, 40px)", "var(--ds-space-500, 40px)");
+exports.smallAvatarImageStyles = smallAvatarImageStyles;
+var avatarListWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n\n  label {\n    padding-right: ", ";\n    display: inline-flex;\n  }\n"])), "var(--ds-space-050, 4px)");
+exports.avatarListWrapperStyles = avatarListWrapperStyles;

package/dist/cjs/avatar-picker-dialog/SRLiveTitle.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SRLiveTitle = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _types = require("./types");
+var _mediaUi = require("@atlaskit/media-ui");
+var SRLiveTitle = function SRLiveTitle(_ref) {
+  var mode = _ref.mode;
+  var intl = (0, _reactIntlNext.useIntl)();
+  return /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, /*#__PURE__*/_react.default.createElement("div", {
+    "aria-live": "polite"
+  }, mode === _types.Mode.Cropping && intl.formatMessage(_mediaUi.messages.or_select_default_avatars), mode === _types.Mode.PredefinedAvatars && intl.formatMessage(_mediaUi.messages.select_an_avatar_from_all_defaults)));
+};
+exports.SRLiveTitle = SRLiveTitle;

package/dist/cjs/avatar-picker-dialog/SubmitErrorDialog.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SubmitErrorDialog = void 0;
+var _react = require("@emotion/react");
+var _react2 = require("react");
+var _colors = require("@atlaskit/theme/colors");
+var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
+var _flag = _interopRequireDefault(require("@atlaskit/flag"));
+var _mediaUi = require("@atlaskit/media-ui");
+var _reactIntlNext = require("react-intl-next");
+var _styles = require("./styles");
+/** @jsx jsx */
+
+var SubmitErrorDialog = function SubmitErrorDialog() {
+  var intl = (0, _reactIntlNext.useIntl)();
+  var flagContainerRef = (0, _react2.useRef)(null);
+  (0, _react2.useEffect)(function () {
+    if (flagContainerRef.current) {
+      flagContainerRef.current.children[0].focus();
+    }
+  }, []);
+  return (0, _react.jsx)("div", {
+    css: _styles.avatarPickerErrorStyles,
+    ref: flagContainerRef
+  }, (0, _react.jsx)(_flag.default, {
+    appearance: "error",
+    icon: (0, _react.jsx)(_error.default, {
+      label: "Error",
+      secondaryColor: "var(--ds-background-danger-bold, ".concat(_colors.R400, ")")
+    }),
+    id: "avatar-picker-error",
+    key: "error",
+    title: intl.formatMessage(_mediaUi.messages.or_select_default_avatars)
+  }));
+};
+exports.SubmitErrorDialog = SubmitErrorDialog;

package/dist/cjs/avatar-picker-dialog/index.js

@@ -18,15 +18,19 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
-var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _reactIntlNext = require("react-intl-next");
 var _mediaUi = require("@atlaskit/media-ui");
 var _imageNavigator = _interopRequireDefault(require("../image-navigator"));
 var _predefinedAvatarList = require("../predefined-avatar-list");
 var _styles = require("./styles");
 var _predefinedAvatarView = require("../predefined-avatar-view");
+var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
 var _layoutConst = require("./layout-const");
 var _types = require("./types");
+var _SRLiveTitle = require("./SRLiveTitle");
+var _loadingButton = _interopRequireDefault(require("@atlaskit/button/loading-button"));
+var _SubmitErrorDialog = require("./SubmitErrorDialog");
 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); }; }
@@ -62,7 +66,8 @@ var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
       selectedAvatar: _this.props.defaultSelectedAvatar,
       selectedImageSource: _this.props.errorMessage ? undefined : _this.props.imageSource,
       selectedImage: undefined,
-      errorMessage: _this.props.errorMessage
+      errorMessage: _this.props.errorMessage,
+      isSubmitted: false
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setSelectedImageState", /*#__PURE__*/function () {
       var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(selectedImage) {
@@ -98,7 +103,8 @@ var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
     }());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setSelectedAvatarState", function (avatar) {
       _this.setState({
-        selectedAvatar: avatar
+        selectedAvatar: avatar,
+        isSubmitted: false
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageNavigatorLoad", function (loadParams) {
@@ -111,15 +117,23 @@ var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "exportCroppedImage", function (outputSize) {
       return '';
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSaveClick", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSaveClick", function (event) {
       var _this$props = _this.props,
         onImagePicked = _this$props.onImagePicked,
         onImagePickedDataURI = _this$props.onImagePickedDataURI,
         onAvatarPicked = _this$props.onAvatarPicked,
-        outputSize = _this$props.outputSize;
+        outputSize = _this$props.outputSize,
+        imageSource = _this$props.imageSource;
       var _this$state = _this.state,
         selectedImage = _this$state.selectedImage,
         selectedAvatar = _this$state.selectedAvatar;
+      if (!(imageSource || selectedImage || selectedAvatar)) {
+        event.preventDefault();
+        _this.setState({
+          isSubmitted: true
+        });
+        return;
+      }
       if (selectedImage) {
         var exportedCroppedImageURI = _this.exportCroppedImage(outputSize);
         if (onImagePicked) {
@@ -134,7 +148,8 @@ var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onShowMore", function () {
       _this.setState({
-        mode: _types.Mode.PredefinedAvatars
+        mode: _types.Mode.PredefinedAvatars,
+        isSubmitted: false
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onGoBack", function () {
@@ -150,7 +165,8 @@ var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "clearErrorState", function () {
       _this.setState({
         mode: _types.Mode.Cropping,
-        errorMessage: undefined
+        errorMessage: undefined,
+        isSubmitted: false
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setErrorState", function (errorMessage) {
@@ -175,20 +191,19 @@ var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "footerContent", function () {
       var _this$props2 = _this.props,
         primaryButtonText = _this$props2.primaryButtonText,
-        onCancel = _this$props2.onCancel;
+        onCancel = _this$props2.onCancel,
+        isLoading = _this$props2.isLoading;
       var _assertThisInitialize = (0, _assertThisInitialized2.default)(_this),
-        onSaveClick = _assertThisInitialize.onSaveClick,
-        isDisabled = _assertThisInitialize.isDisabled;
-      return (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)("div", {
-        css: _styles.modalFooterButtonsStyles
-      }, (0, _react2.jsx)(_customThemeButton.default, {
-        appearance: "primary",
-        onClick: onSaveClick,
-        isDisabled: isDisabled
-      }, primaryButtonText || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.save)), (0, _react2.jsx)(_customThemeButton.default, {
+        onSaveClick = _assertThisInitialize.onSaveClick;
+      return (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_buttonGroup.default, null, (0, _react2.jsx)(_standardButton.default, {
         appearance: "default",
         onClick: onCancel
-      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.cancel))));
+      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.cancel)), (0, _react2.jsx)(_loadingButton.default, {
+        appearance: "primary",
+        onClick: onSaveClick,
+        isLoading: isLoading,
+        type: "submit"
+      }, primaryButtonText || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.save))));
     });
     return _this;
   }
@@ -200,24 +215,17 @@ var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
         width: "".concat(_layoutConst.AVATAR_DIALOG_WIDTH, "px"),
         shouldScrollInViewport: true,
         onClose: this.props.onCancel
-      }, this.headerContent(), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)("div", {
+      }, this.props.avatars.length > 0 && (0, _react2.jsx)(_SRLiveTitle.SRLiveTitle, {
+        mode: this.state.mode
+      }), this.headerContent(), this.state.isSubmitted && (0, _react2.jsx)(_SubmitErrorDialog.SubmitErrorDialog, null), (0, _react2.jsx)("form", {
+        css: _styles.formStyles
+      }, (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)("div", {
         css: _styles.avatarPickerViewWrapperStyles
-      }, this.renderBody())), this.footerContent());
+      }, this.renderBody())), this.footerContent()));
       return this.props.intl ? content : (0, _react2.jsx)(_reactIntlNext.IntlProvider, {
         locale: "en"
       }, content);
     }
-  }, {
-    key: "isDisabled",
-    get: function get() {
-      var _this$state2 = this.state,
-        selectedImage = _this$state2.selectedImage,
-        selectedAvatar = _this$state2.selectedAvatar;
-      var _this$props3 = this.props,
-        imageSource = _this$props3.imageSource,
-        isLoading = _this$props3.isLoading;
-      return isLoading || !(imageSource || selectedImage || selectedAvatar);
-    }
   }, {
     key: "getPredefinedAvatars",
     value: function getPredefinedAvatars() {
@@ -233,10 +241,10 @@ var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
     key: "renderPredefinedAvatarList",
     value: function renderPredefinedAvatarList() {
       var isLoading = this.props.isLoading;
-      var _this$state3 = this.state,
-        selectedAvatar = _this$state3.selectedAvatar,
-        selectedImage = _this$state3.selectedImage,
-        selectedImageSource = _this$state3.selectedImageSource;
+      var _this$state2 = this.state,
+        selectedAvatar = _this$state2.selectedAvatar,
+        selectedImage = _this$state2.selectedImage,
+        selectedImageSource = _this$state2.selectedImageSource;
       var avatars = this.getPredefinedAvatars();
       if (isLoading || selectedImage || selectedImageSource || avatars.length === 0) {
         return null;
@@ -251,15 +259,15 @@ var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "renderBody",
     value: function renderBody() {
-      var _this$props4 = this.props,
-        avatars = _this$props4.avatars,
-        isLoading = _this$props4.isLoading,
-        predefinedAvatarsText = _this$props4.predefinedAvatarsText;
-      var _this$state4 = this.state,
-        mode = _this$state4.mode,
-        selectedImageSource = _this$state4.selectedImageSource,
-        selectedAvatar = _this$state4.selectedAvatar,
-        errorMessage = _this$state4.errorMessage;
+      var _this$props3 = this.props,
+        avatars = _this$props3.avatars,
+        isLoading = _this$props3.isLoading,
+        predefinedAvatarsText = _this$props3.predefinedAvatarsText;
+      var _this$state3 = this.state,
+        mode = _this$state3.mode,
+        selectedImageSource = _this$state3.selectedImageSource,
+        selectedAvatar = _this$state3.selectedAvatar,
+        errorMessage = _this$state3.errorMessage;
       switch (mode) {
         case _types.Mode.Cropping:
           return (0, _react2.jsx)("div", {
@@ -275,13 +283,13 @@ var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
             isLoading: isLoading
           }), this.renderPredefinedAvatarList());
         case _types.Mode.PredefinedAvatars:
-          return (0, _react2.jsx)("div", null, (0, _react2.jsx)(_predefinedAvatarView.PredefinedAvatarView, {
+          return (0, _react2.jsx)(_predefinedAvatarView.PredefinedAvatarView, {
             avatars: avatars,
             onAvatarSelected: this.setSelectedAvatarState,
             onGoBack: this.onGoBack,
             selectedAvatar: selectedAvatar,
             predefinedAvatarsText: predefinedAvatarsText
-          }));
+          });
       }
     }
   }]);

package/dist/cjs/avatar-picker-dialog/styles.js

@@ -4,19 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.modalHeaderStyles = exports.modalFooterButtonsStyles = exports.croppingWrapperStyles = exports.avatarPickerViewWrapperStyles = void 0;
+exports.modalHeaderStyles = exports.formStyles = exports.croppingWrapperStyles = exports.avatarPickerViewWrapperStyles = exports.avatarPickerErrorStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var avatarPickerViewWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  min-height: 339px;\n"])));
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var avatarPickerErrorStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 ", " ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
+exports.avatarPickerErrorStyles = avatarPickerErrorStyles;
+var formStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));
+exports.formStyles = formStyles;
+var avatarPickerViewWrapperStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  text-align: center;\n  min-height: 339px;\n"])));
 exports.avatarPickerViewWrapperStyles = avatarPickerViewWrapperStyles;
-var modalHeaderStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 15px;\n  font-weight: 500;\n  font-size: 20px;\n"])));
+var modalHeaderStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", ";\n  font-weight: 500;\n  font-size: 20px;\n"])), "var(--ds-space-200, 16px)");
 exports.modalHeaderStyles = modalHeaderStyles;
-var croppingWrapperStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  user-select: none;\n\n  * {\n    user-select: none;\n  }\n"])));
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-exports.croppingWrapperStyles = croppingWrapperStyles;
-var modalFooterButtonsStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: right;\n  width: 100%;\n\n  button:first-child {\n    margin-right: 3px;\n  }\n"])));
-exports.modalFooterButtonsStyles = modalFooterButtonsStyles;
+var croppingWrapperStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  user-select: none;\n\n  * {\n    user-select: none;\n  }\n"])));
+exports.croppingWrapperStyles = croppingWrapperStyles;

package/dist/cjs/image-cropper/styles.js

@@ -19,7 +19,7 @@ var imageContainerStyles = (0, _react.css)(_templateObject2 || (_templateObject2
 exports.imageContainerStyles = imageContainerStyles;
 var CONTAINER_PADDING = 28;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 exports.CONTAINER_PADDING = CONTAINER_PADDING;
 var maskStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: ", "px;\n  bottom: ", "px;\n  left: ", "px;\n  right: ", "px;\n  box-shadow: 0 0 0 100px\n    ", ";\n  opacity: ", ";\n"])), CONTAINER_PADDING, CONTAINER_PADDING, CONTAINER_PADDING, CONTAINER_PADDING, "var(--ds-surface-overlay, rgba(255, 255, 255))", "var(--ds-opacity-disabled, 0.5)");
 var rectMaskStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  border-radius: ", "px;\n"])), maskStyles, (0, _constants.borderRadius)());

package/dist/cjs/image-navigator/styles.js

@@ -7,24 +7,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.sliderWrapperStyles = exports.sliderContainerStyles = exports.selectionBlockerStyles = exports.paddedBreakStyles = exports.imageUploaderStyles = exports.imageBgStyles = exports.fileInputStyles = exports.dragZoneTextStyles = exports.dragZoneStyles = exports.dragZoneImageStyles = exports.containerStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
 var _images = require("./images");
 var _layoutConst = require("../avatar-picker-dialog/layout-const");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
-var spin = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n"])));
-var imageBgStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 256px;\n  height: 256px;\n  background: url('", "');\n  border-radius: ", ";\n"])), _images.checkeredBg, (0, _constants.borderRadius)());
+var imageBgStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 256px;\n  height: 256px;\n  background: url('", "');\n  border-radius: ", ";\n"])), _images.checkeredBg, "var(--ds-border-radius, 3px)");
 exports.imageBgStyles = imageBgStyles;
-var containerStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  box-sizing: border-box;\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n  position: relative;\n"])), (0, _constants.gridSize)() * 32);
+var containerStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n  position: relative;\n"])));
 exports.containerStyles = containerStyles;
-var sliderContainerStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  flex-direction: row;\n  margin-top: ", ";\n\n  input {\n    box-sizing: content-box;\n    padding: 0;\n  }\n  background-color: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-surface-overlay, #fff)");
+var sliderContainerStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  flex-direction: row;\n  margin-top: ", ";\n\n  input {\n    box-sizing: content-box;\n    padding: 0;\n  }\n  background-color: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-surface-overlay, #fff)");
 exports.sliderContainerStyles = sliderContainerStyles;
-var fileInputStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n"])));
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+var fileInputStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n"])));
 exports.fileInputStyles = fileInputStyles;
-var imageUploaderStyles = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin: 0 10px ", " 10px;\n"])), "var(--ds-space-250, 20px)");
+var imageUploaderStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin: 0 ", " ", "\n    ", ";\n"])), "var(--ds-space-150, 10px)", "var(--ds-space-250, 20px)", "var(--ds-space-150, 10px)");
 exports.imageUploaderStyles = imageUploaderStyles;
+var spin = (0, _react.keyframes)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n"])));
 var droppingAnimation = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  border-color: ", ";\n  animation: ", " 8s linear infinite;\n"])), "var(--ds-border-information, #0e56c4)", spin);
 var getBorder = function getBorder(showBorder) {
   return "".concat(showBorder ? "2px dashed ".concat("var(--ds-border, #d0d6d0)") : 'none');
@@ -32,27 +29,23 @@ var getBorder = function getBorder(showBorder) {
 var getDroppingAnimation = function getDroppingAnimation(isDroppingFile) {
   return isDroppingFile ? (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n        background-color: ", ";\n\n        &:after {\n          ", "\n        }\n      "])), "var(--ds-background-information-hovered, #ddecfe)", droppingAnimation) : '';
 };
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 var dragZoneStyles = function dragZoneStyles(props) {
-  return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  width: 200px;\n  height: 200px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 15px;\n  position: relative;\n  border-radius: 100%;\n  transition: background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);\n\n  &::after {\n    content: '';\n    border: ", ";\n    border-radius: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    transition: border-color 0.3s cubic-bezier(0.19, 1, 0.22, 1);\n  }\n\n  ", ";\n"])), getBorder(props.showBorder), getDroppingAnimation(props.isDroppingFile));
+  return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  width: 200px;\n  height: 200px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  position: relative;\n  border-radius: 100%;\n  transition: background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);\n\n  &::after {\n    content: '';\n    border: ", ";\n    border-radius: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    transition: border-color 0.3s cubic-bezier(0.19, 1, 0.22, 1);\n  }\n\n  ", ";\n"])), "var(--ds-space-200, 15px)", getBorder(props.showBorder), getDroppingAnimation(props.isDroppingFile));
 };
 exports.dragZoneStyles = dragZoneStyles;
 dragZoneStyles.displayName = 'DragZone';
 var dragZoneImageStyles = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100px;\n"])));
 exports.dragZoneImageStyles = dragZoneImageStyles;
 var getWidth = function getWidth(isFullSize) {
-  return "".concat(isFullSize ? "width:".concat(_layoutConst.AVATAR_DIALOG_WIDTH - (0, _constants.gridSize)() * 8, "px") : 'width:auto');
+  return "".concat(isFullSize ? "width: calc(".concat(_layoutConst.AVATAR_DIALOG_WIDTH, " - ", "var(--ds-space-100, 8px)", " * 8)px") : 'width:auto');
 };
 var dragZoneTextStyles = function dragZoneTextStyles(props) {
   return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  color: ", ";\n  ", ";\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), getWidth(props.isFullSize));
 };
 exports.dragZoneTextStyles = dragZoneTextStyles;
 var selectionBlockerStyles = (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  position: fixed;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  background-color: transparent;\n  user-select: none;\n"])));
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.selectionBlockerStyles = selectionBlockerStyles;
-var paddedBreakStyles = (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 10px !important;\n  margin-bottom: 10px;\n"])));
+var paddedBreakStyles = (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", " !important;\n  margin-bottom: ", ";\n"])), "var(--ds-space-100, 10px)", "var(--ds-space-100, 10px)");
 exports.paddedBreakStyles = paddedBreakStyles;
 var sliderWrapperStyles = (0, _react.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n\n  .zoom_button svg {\n    position: relative;\n    left: calc(-1 * ", ");\n  }\n"])), "var(--ds-space-025, 2px)");
 exports.sliderWrapperStyles = sliderWrapperStyles;